zhywpt-sp/subpackage/after-sale/work-order/add-work-order.vue

<template>
	<view class="bg">
		<view class="title_wrap"><text class="title">基本信息</text><text class="supplement">待补充</text></view>
		<car-number-input @numberInputResult="carNumber" :defaultStr="state.form.vehiclePlate"></car-number-input>
		<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
			<u-form-item label="车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
				<u-input placeholder='请输入姓名'
					maxlength="20" inputAlign="right"/>
			</u-form-item>
			<u-form-item label="姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
				<u-input placeholder='请输入姓名' type="idcard" v-model="state.form.name"
					 maxlength="18" inputAlign="right"/>
			</u-form-item>
			<u-form-item label="联系方式" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
				<u-input placeholder='请输入联系方式' type="number" v-model="state.form.mobile"
					 maxlength="11" inputAlign="right"/>
			</u-form-item>
		</u-form>
	</view>
	<view class="bg">
		<view class="title">工单信息</view>
	
	</view>
	<view class="action">
		<button type="default" class="ui-btn" @click="savaHandle()">
			提交
		</button>
	</view>
</template>

<script setup lang="ts">
	import {navTo} from "@/utils/utils";
	import {reactive} from "vue";
	import carNumberInput from "@/components/car-number-input/car-number-input.vue";
const labelStyle = {
		color: "#004576",
		fontSize: "28rpx",
	}
	const leftIcon = {
		height: '100%',
		width: '8rpx',
		display: 'flex',
		'align-items': 'center',
		'margin-right': '4rpx',
	}
	const state = reactive({
		form:{
			name:"",
			mobile:"",
			vehiclePlate:"",
		}
	})
	//车牌号输入
	const carNumber = (val : any) => {
		state.form.vehiclePlate = val.trim();
	};
	const savaHandle = () => {
       navTo(`/subpackage/after-sale/rescind-carId/rescind-carId-select`)
	}
</script>

<style lang="scss" scoped>
	.bg {
		background-color: white;
		width: 88%;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 12px;
		border: 1px solid #FFFFFF;
		padding: 20rpx;
		overflow: hidden;
        .title_wrap{
			display: flex;
			justify-content: space-between;
			font-weight: 400;
			margin-bottom: 40rpx;
			.title {
				font-size: 30rpx;
				color: #01243A;
			}
			.supplement{
				font-size: 24rpx;
				color: #CCB375;
			}
		}
		.des {
			font-weight: 400;
			font-size: 28rpx;
			color: #01243A;
			line-height: 56rpx;
			margin-top: 10rpx;
			text-indent: 1rem;
		}
	}

	.action {
		position: absolute;
		left: 0;
		height: 188rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}
</style>