zhywpt-h5/pages/drivingLicense/drivingLicense.vue

<template>
	<view class='bg-content'>
		<image class='bg-image' mode="widthFix"
			src="https://qtzl.etcjz.cn/default-bucket/20240324/3eba2095f5204798a1f8101b_beijing.jpg"></image>
		<view class="content-re">
			<custom-header title="车辆信息" :back="config.hasReturn === 'true'"></custom-header>
			<view style="padding: 20rpx 0" v-if='isShow'>
				<form-builder-vue @radioChange="radioChange" :formData.value="formData" :config="config"
					@uploadImgOcr="uploadImg" @submit="submit" @handleBlurs='handleBlurs' @handleChange="handleChange">
				</form-builder-vue>
			</view>
		</view>
	</view>
</template>
<script setup lang='ts'>
	import {
		unifyTemplate
	} from '@/hooks/unifyTemplate'
	// import Agreement from '@/components/Agreement.vue';
	import {
		TypeData,
		Index
	} from '@/components/form-builder/tools'
	// import {
	// 	IdCard
	// } from '../../static/data/testData.js'
	import {
		reactive,
		ref,
		nextTick
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';

	import ocrHandle from './ocrHandle'
	import fromData from './fromData.js'
	import {
		requestNew,
		request
	} from '@/utils/network/request'
	const {
		formBuilderVue, //组件
		CustomHeader, //头部组件
		initData, //初始化数据
		isShow, //是否展示formBuilderVue组件
		qdOrderVal //qdOrder中数据 ref
	} = unifyTemplate() //初始化数据
	const isUpOwner = ref(false);
	onLoad((opin) => {
		// 初始化数据
		initData(opin, 2).then(data => {
			formData.value = JSON.parse(data.config.tableConfig)
			console.log(formData.value, 'formData.value')
			nextTick(() => {
				console.log(submitQuery, 'submitQuery1');
				console.log(qdOrderVal, 'qdOrderValqdOrderVal');
				submitQuery.channelId = data.order.channelId
				formData.value[Index("收费车型", formData.value)].disabled = true
				if (qdOrderVal.value.vanType == 1) {
					// 客车
					checkCarTpe(true)
					const dataItem = formData.value[Index('车轴数', formData.value)]
					dataItem[dataItem.value] = 2;
					submitQuery.type = 1
				} else if (qdOrderVal.value.vanType == 2) {
					// 货车
					checkCarTpe(false)
					isTractorHandle()
					submitQuery.type = 2
				} else {
					// 专项作业车
					submitQuery.type = 3
					checkCarTpe(false)
					isTractorHandle()
				}
				isShow.value = true
			})
			delete data.config.tableConfig
			config.value = Object.assign(data.config, config.value)
			nextTick(() => {
				handleHide()
			})
		})
	})

	async function handleBlurs(e, item) {
		console.log(e, item)
		if (item.value === "axleCount") {
			await handleVehicCharge(formData);
			handleVehicUsePropert(formData);
		}
	}
	async function handleChange(e, item) {
		console.log(e.detail.value, item)
		if (item.value === "userName") {
			submitQuery.idName = e.detail.value
		}
		if (item.value === "ownerName") {
			submitQuery.man = e.detail.value
		}
		if (item.value === "mobile") {
			submitQuery.mobile = e.detail.value
		}
	}

	function isTractorHandle() {
		const index = Index('车辆用户类型', formData.value);
		// if (isTractor === 0) {
		formData.value[index].disabled = false
		console.log(formData.value[index], '货车111')
		// }
	}
	//单项选择器
	function radioChange(e: any, item: TypeData) {
		if (item.title === '是否牵引车') {
			if (parseInt(e.detail.value) == 1) {
				formData.value[Index('道路运输证', formData.value)].show = false;
			} else {
				formData.value[Index('道路运输证', formData.value)].show = true;
			}
		}
	}
	//有哪些字段隐藏哪些字段
	function handleHide() {
		if (formData.value[Index('道路运输证', formData.value)]) {
			formData.value[Index('道路运输证', formData.value)].show = true;
		}
	}
	// 货车或者客车切换
	function checkCarTpe(key) {
		// true为客车，false为货车
		// formData.value[Index('总质量(kg)', formData.value)].show = key
		// formData.value[Index('整备质量(kg)', formData.value)].show = key
		formData.value[Index('核定载质量(kg)', formData.value)].show = key
		formData.value[Index('准牵引总质量(kg)', formData.value)].show = key
		if (formData.value[Index('道路运输证', formData.value)]) {
			formData.value[Index('道路运输证', formData.value)].show = key
			formData.value[Index('是否牵引车', formData.value)].show = key
		}

		// formData.value[Index('车轴数', formData.value)].show = key
		if (formData.value[Index('车头照', formData.value)]) {
			formData.value[Index('车头照', formData.value)].show = key
		}
		const dataItem = formData.value[Index('车辆用户类型', formData.value)]
		dataItem.disabled = true
		dataItem[dataItem.value] = 0;
	}
	let config = ref < any > ({
		submitName: '下一步',
		titleWidth: 250,
		isHeader: true
	})
	let formData = ref < any > (fromData)



	// ocr图片处理和额外请求参数处理
	const {
		uploadImgHandle,
		submitQuery,
		ocrDataFu,
		handleVehicCharge,
		handleVehicUsePropert,
		uploadImgHandleId,
	} = ocrHandle()

	function uploadImg(fileList, item) {
		uploadImgHandle(fileList, item, formData)
		uploadImgHandleId(fileList, item, formData)
		console.log(item, 'item');
	}

	let isLock = false

	async function submit(item: any) {
		// 拼接参数
		console.log(item,'itemitemitem');
		console.log(isUpOwner.value,'isUpOwner.value');
		console.log(submitQuery.idName, 'qdOrderValqdOrderVal');
		console.log(qdOrderVal, 'qdOrderValqdOrderVal');
		console.log(ocrDataFu,'ocrDataFuocrDataFuocrDataFu');
		//获取
		// const openIdKey = await register(data)
		// if (!openIdKey) {
		// 	return
		// }
		if(submitQuery.idName !== undefined){
			isUpOwner.value = true
			console.log(222222222222);
		} else {
			console.log(1111111111111111);
		}
		return requestNew('/iaw/h5/order/web/sfzPassValid', {
			data: {
				isUpOwner: isUpOwner.value,
				orderNo: qdOrderVal.value.orderNo,
				ownerName: submitQuery.man,
				idName: submitQuery.idName,
				ownerIdNum: submitQuery.idno,
			}
		}).then((res) => {
			console.log(res, '/iaw/h5/order/web/sfzPassValid');
			//判断是否需要输入身份信息
			console.log(submitQuery.idName,'submitQuery.idName');
			if (res.code === 0 && res.data.isPass === true) {
				if (isLock) return
				isLock = true
				let vehicleColor = qdOrderVal.value.vehiclePlateColor || 0
				const dataItem = formData.value[Index('车牌号', formData.value)];
				let vehiclePlate = dataItem[dataItem.value]
				// console.log(qdOrderVal.value.vehiclePlate, vehiclePlate);
				submitQuery.vehicleId =
					vehiclePlate + "_" + vehicleColor;
				const orderNo = qdOrderVal.value.orderNo
				let data = {
					...item,
					orderNo,
					isUpOwner:isUpOwner.value,
					agentId: qdOrderVal.value.agencyId, //渠道编号
					channelId: qdOrderVal.value.channelId, //网点编号
					channelType: qdOrderVal.value.promotionModes, //网点类型
					source: qdOrderVal.value.orderSource, //订单来源
					vanType: qdOrderVal.value.vanType,
					vehiclePlateColor: vehicleColor,
					
				}
				for (let dataItem in submitQuery) {
					if (submitQuery[dataItem] || submitQuery[dataItem] === 0 && !data[dataItem]) {
						data[dataItem] = submitQuery[dataItem]
					}
				}
				ocrDataFu.forEach(ele => {
					const itemValue = data[ele.sendKey]
					if (itemValue) {
						if (ele.isNumbers) {
							data[ele.sendKey] = parseInt(itemValue)
						} else if (ele.sendKey === 'vehicleDimensions') {
							data[ele.sendKey] = itemValue.replace('mm', '').trim()
						}
					}

				})
				data.ownerTel = submitQuery.mobile
				data.ownerIdType = submitQuery.userIdType
				data.ownerIdNum = submitQuery.idno
				data.axleCount = parseInt(data.axleCount)
				data.character = 2
				data.tractorSign = data.tractorSign ? parseInt(data.tractorSign) : 0
				console.log('请求参数drivingLicense', data);
				let {
					commitInterface,
					jumpPage
				} = config.value
				if (qdOrderVal.value.promotionModes === 2) {
					data.openId = qdOrderVal.value.staffId //操作人id
				} else if (qdOrderVal.value.promotionModes === 1) {
					data.openId = qdOrderVal.value.userId //操作人id
				}
				let options = {
					type: 2,
					data: data,
					method: 'POST',
					showLoading: true
				}
				console.log(options, 'options')
				request('ISSUES_ORDER_VEHICLEUPLOAD', options).then((res) => {
					console.log(res, 'res')
					if (res.statusCode === 0) {
						uni.navigateTo({
							url: '/' + jumpPage + `?qdOrderNo=${qdOrderVal.value.orderNo}`,
							animationType: 'pop-in',
							animationDuration: 500
						})
					}

				}).finally(() => {
					isLock = false
				})
				// request(commitInterface || '18', {
				// 	data,
				// }).then((res) => {
				// 	if (res.statusCode === 0) {
				// 		uni.navigateTo({
				// 			url: '/' + jumpPage,
				// 			animationType: 'pop-in',
				// 			animationDuration: 500
				// 		})

				// 	}
				// }).finally(() => {
				// 	isLock = false
				// })

			} else {
				submitQuery.idName = undefined
				// isUpOwner.value = true
				uni.showModal({
					title: '提示',
					content: res.data.errorMsg,
					success: function(res) {
						if (res.confirm) {
							formData.value.push({
									"underline": false,
									"titleShow": false,
									"disabled": false,
									"vertical": "1",
									"id": "id_1687057765030",
									"title": "车主信息",
									"type": "100",
									"required": false
									},{
								"placeholderImg": "image/applyCard/renxiang.png",
								"underline": false,
								"titleShow": false,
								"hint": "上传身份证的人像面",
								"disabled": false,
								"vertical": "1",
								"id": "id_1686971502045",
								"title": "人像面",
								"type": "14",
								"value": "userPosImgUrl",
								"required": true,
								"show": false
							}, {
								"placeholderImg": "image/applyCard/guohui.png",
								"underline": false,
								"titleShow": false,
								"hint": "上传身份证的国徽面",
								"disabled": false,
								"vertical": "1",
								"id": "id_1686971729660",
								"title": "国徽面",
								"type": "14",
								"value": "userNegImgUrl",
								"required": true,
								"show": false
							}, {
    "placeholderImg": "image/applyCard/weituoshu.png",
    "underline": false,
    "titleShow": false,
    "hint": "上传文字清晰的委托书",
    "disabled": false,
    "vertical": "1",
    "id": "id_1686971922491",
    "title": "委托书",
    "type": "14",
    "value": "proxyUrl",
    "required": true,
    "show": false
},{
								"underline": true,
								"maxlength": "20",
								"titleShow": true,
								"hint": "请输入姓名",
								"disabled": false,
								"vertical": "1",
								"id": "id_1686974639025",
								"title": "姓名",
								"type": "2",
								"value": "userName",
								"required": true,
								"show": false
							}, {
								"underline": true,
								"maxlength": "11",
								"titleShow": true,
								"vertical": "1",
								"title": "联系方式",
								"type": "2",
								"required": true,
								"checkReg": "^1[3456789]\\d{9}$",
								"hint": "请输入联系方式",
								"checkPrompt": "请输入正确的联系方式",
								"disabled": false,
								"inputType": "tel",
								"id": "id_1686974684640",
								"value": "mobile",
								"mobile": "",
								"show": false
							}, {
								"underline": true,
								"maxlength": "18",
								"titleShow": true,
								"vertical": "1",
								"title": "证件号码",
								"type": "2",
								"required": true,
								"checkReg": "(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X)$)",
								"hint": "请输入证件号码",
								"checkPrompt": "请输入正确的身份证号",
								"disabled": false,
								"id": "id_1686974751416",
								"value": "userIdNum",
								"show": false
							}, {
								"underline": true,
								"titleShow": true,
								"hint": "请输入住址",
								"disabled": false,
								"vertical": "1",
								"id": "id_1686974837416",
								"title": "住址",
								"type": "5",
								"value": "userAddress",
								"required": true
							}, )
						} else if (res.cancel) {}
					}
				});
				
			}
		});
	}
</script>
<style lang='scss' scoped>

</style>