zhywpt-sp/subpackage/personal-center/add-car.vue

<!-- 新增车辆 -->
<template>
	<view class="box">
		<form-builder :config="config" :formData="state.formData"  @submit="submit"  @radioChange="radioChange"
		@addressInfo="addressInfo" @pickerCustom="state.showPopup = true"/>
	</view>
	
	<u-popup v-model="state.showPopup" mode="bottom" >
		<view v-if="state.showPopup">
			<popup-numberplate-color :numberplateCor="state.curNumberplateColor"
			 @numberplateResult="numberplateResult"></popup-numberplate-color>
		</view>
	</u-popup>
</template>

<script setup lang="ts">
	import {reactive} from "vue";
	import {onLoad} from "@dcloudio/uni-app";
	import { msg,confirm } from '@/utils/utils';
	import popupNumberplateColor from "./components/popup-choose-numberplate-color";
	
	const config = ({
		submitName: '提交车辆',
		titleWidth: 160,
	})
	
	const state = reactive({
		//显示车牌颜色选择popup
		showPopup:false,
		//当前选择的车牌颜色
		curNumberplateColor:{id:-1},
		//设备领取方式: mail-邮寄 offline-自提 
		receiveType: "mail",
		//邮寄
		formData: [
			{
				'title': '填写车辆信息',
				'type': 1,
				'value':'carInfo',
				'disabled': true,
				'labelColor': '000000',
				'hide':false,
			},
			{
				'title': '输入车牌号',
				'required': true,
				'star': true,
				'type': 9,
				'vertical': 2,
				'value': 'numberplate',
				'labelColor': '777777',
				'emptyHint':'请输入车牌号',
				'hide':false,
			},
			{
				'title': '车牌颜色',
				'type': 4,
				'required': true,
				'star': true,
				'value': 'carColor',
				'labelColor': '777777',
				'emptyHint':'请选择车牌颜色',
				'divider': true,
				'mode': 'custom', //自定义选择器事件
				'hide':false,
			},
			{
				'title': '收费车型',
				'type': 4,
				'required': true,
				'star': true,
				'value': 'moneyCarType',
				'labelColor': '777777',
				'emptyHint':'请选择收费车型',
				'divider': true,
				'itemData': ['车型1', '车型12', '车型13', '车型14'],
				'hide':false,
			},
			{
				'title': '车类别',
				'type': 7,
				'value': 'carType',
				'star': true,
				'required':true,
				'labelColor': '777777',
				'divider': true,
				'itemData': [{
					'checked': false, 
					'value': '1',
					'name': '客车'
				}, {
					'checked': false,
					'value': '2',
					'name': '货车'
				}],
				'hide':false,
				'emptyHint':'请选择车类别',
			},
			{
				'title': '座位数',
				'type': 2,
				'value': 'seats',
				'required':true,
				'star': true,
				'inputType': 'number',
				'maxlength': 20,
				'divider': true,
				'labelColor': '777777',
				'hide':false,
				'emptyHint':'请输入座位数',
			},
			{
				'title': '总质量（kg）',
				'type': 2,
				'value': 'quality',
				'required':true,
				'star': true,
				'inputType': 'number',
				'maxlength': 20,
				'divider': true,
				'labelColor': '777777',
				'hide':false,
				'emptyHint':'请输入总质量',
			},
			{
				'title': '制卡类型',
				'type': 4,
				'required': true,
				'star': true,
				'value': 'cardType',
				'labelColor': '777777',
				'divider': true,
				'itemData': ['类型1', '类型12', '类型13', '类型14'],
				'hide':false,
				'emptyHint':'请选择制卡类型',
			},
			{
				'title': '提交姓名',
				'type': 2,
				'value': 'name',
				'required':true,
				'star': true,
				'maxlength': 20,
				'divider': true,
				'labelColor': '777777',
				'emptyHint':'请输入提交姓名',
				'hide':false,
			},
			{
				'title': '设备领取方式',
				'type': 7,
				'value': 'receiveType',
				'star': true,
				'required':true,
				'labelColor': '777777',
				'divider': true,
				'itemData': [{
					'checked': false, 
					'value': 'mail',
					'name': '邮寄'
				}, {
					'checked': false,
					'value': 'offline',
					'name': '自取'
				}],
				'hide':false,
				'emptyHint':'请选择设备领取方式',
			},
			
			{
				'title': '邮寄地址',
				'type': 2,
				'value':'addrInfo',
				'disabled': true,
				'labelColor': '000000',
				'hide':false,
				'btn':true,
				'btnTitle':'获取微信地址',
				'btnType':'address',
				'hint': ' ',
			},
			{
				'title': '姓名',
				'type': 2,
				'value': 'name',
				'maxlength': 20,
				'required':true,
				'star': true,
				'divider': true,
				'labelColor': '777777',
				'hide':false,
				'emptyHint':'请输入收件人姓名',
			},
			{
				'title': '电话',
				'type': 2,
				'value': 'phone',
				'required':true,
				'inputType': 'number',
				'maxlength': 11,
				'star': true,
				'divider': true,
				'labelColor': '777777',
				'hide':false,
				'emptyHint':'请输入收件人电话',
			},
			{
				'title': '地区',
				'type': 10,
				'value': 'area',
				'required':true,
				'hint': '选择省/市/区',
				'star': true,
				'divider': true,
				'labelColor': '777777',
				'hide':false,
				'emptyHint':'请选择收件人所在地区',
			},
			{
				'title': '详细地址',
				'type': 2,
				'value': 'detailedAddress',
				'maxlength': 100,
				'required':true,
				'hint': '街道门牌、楼层房间号等信息',
				'star': true,
				'divider': true,
				'labelColor': '777777',
				'hide':false,
				'emptyHint':'请输入收件人详细地址',
			},
			{
				'title': '邮政编码',
				'type': 2,
				'value': 'postalCode',
				'inputType': 'number',
				'maxlength': 20,
				'hint': '请输入邮政编码',
				'divider': true,
				'labelColor': '777777',
				'hide':false,
				'emptyHint':'请输入邮政编码',
			},
			{
				'title': '请上传车辆相关照片',
				'type': 11,
				'value': 'carImgs',
				'required':true,
				'star':true,
				'labelColor': '777777',
				'hide':false,
				'vertical':2,
				'emptyHint':'请上传车辆相关照片',
				'imgList':[
					{'value':'img1','hint':'行驶证正副页复印件'},
					{'value':'img2','hint':'车辆照片复印件'},
					{'value':'img3','hint':'函文件'},
				]
			},
		],
	})
	
	//车牌颜色选择回调结果
	const numberplateResult = (colorItem:any) => {
		state.curNumberplateColor = colorItem;
		state.formData[2][state.formData[2].value] = colorItem.title;
		state.showPopup = false;
	}
	
	//地址改变
	const addressInfo = (content:any) => {
		state.formData[11][state.formData[11].value] = content.userName;
		state.formData[12][state.formData[12].value] = content.telNumber;
		state.formData[13][state.formData[13].value] = `${content.provinceName}/${content.cityName}/${content.countyName}`;
		state.formData[14][state.formData[14].value] = content.detailInfo;
		state.formData[15][state.formData[15].value] = content.postalCode;
	}
	
	//radio改变
	const radioChange = (e:any,item:any) => {
		if (item.value === "receiveType") {//切换领取方式
			state.receiveType = item.receiveType;
			state.formData[10].hide = state.receiveType === 'mail' ? false : true;
			state.formData[11].hide = state.receiveType === 'mail' ? false : true;
			state.formData[12].hide = state.receiveType === 'mail' ? false : true;
			state.formData[13].hide = state.receiveType === 'mail' ? false : true;
			state.formData[14].hide = state.receiveType === 'mail' ? false : true;
			state.formData[15].hide = state.receiveType === 'mail' ? false : true;
		} 
	}
	
	//提交换货申请
	const submit = (e: any) => {
		confirm('是否确认提交？',()=>{
			msg('确认提交' );
			console.log('提交内容', e);
			// const code = "IF01001202209060883" //请求编码
			// const options = {
			//     type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			//     data: e, //请求参数
			//     method: 'POST|GET', //提交方式(默认POST)
			//     showLoading: true, //是否显示加载中(默认显示)
			// }		
			// request(code, options).then((res) => {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: hint
			// 	})
			// })
		},'提交确认');
	}
</script>

<style lang="scss" scoped>
	.box {
		margin: 20rpx 0rpx;
		background-color: white;
		padding:0 20rpx 20rpx;
	}
</style>