zhywpt-h5/pages/userInfoUploading/userInfoUploading.vue

<template>
	<div>
		<custom-header title="用户信息" :back="config.hasReturn === 'true'"></custom-header>
		<div style="padding-top: 20rpx">
			<form-builder-vue :formData="formData" :config="config" @radioChange="radioChange" @submit="submit"
				@uploadImgOcr='uploadImg'>
			</form-builder-vue>
		</div>
		<!-- 		<agreement v-if="false" :start="start" @disagree="disagree" @consent="consent">
			<view class="text">为了更好的向您提供服务，我们需要收集您的用户、车辆等信息用于ETC发行、售后。请您务必审慎阅读、充分理解<a
					href="https://cli.im/url">《用户协议》</a>和<a>《隐私政策》</a>各条款。如果您同意，请点击下面按钮开始接受我们的服务，如果不同意将会限制您使用部分功能。
			</view>
		</agreement> -->
	</div>
	<!--  -->
</template>
<script setup lang='ts'>
	import CustomHeader from '@/components/CustomHeader.vue';
	import formBuilderVue from '@/components/form-builder/form-builder-vue3'
	// 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 {
		request
	} from '@/utils/network/request'
	import {
		useQdOrderStore
	} from '@/stores/qdOrder.js'
	import {
		etcOcrCard,
		ocrAllQuery,
		fileUpload,
		fileURL
	} from "@/utils/network/api.js";
	const qdOrderStore = useQdOrderStore()
	//获取页面配置
	onLoad((opin) => {
		console.log(opin)
		let qdOrderNo: any
		if (opin && opin.qdOrderNo) {
			qdOrderNo = qdOrderNo = opin.qdOrderNo
		} else {
			qdOrderNo = uni.getStorageSync('qdOrderNo')
		}
		request('ac8756cc31eb4816b8eaeb71907ff9c1', {
			data: {
				qdOrderNo,
				pageStep: 1
			}
		}).then((res) => {
			let data = JSON.parse(res.bizContent)
			formData.value = JSON.parse(data.config.tableConfig)
			qdOrderStore.setQdOrder(data.qdOrder)
			nextTick(() => {
				if (data.qdOrder.userType == 1) {
					// 个人办理
					danChange(false)
				} else {
					// 单位办理
					danChange(true)

				}
			})
			delete data.config.tableConfig
			config.value = Object.assign(data.config, config.value)
		})
	})

	// const start = ref(true)



	let config = ref < any > ({
		hasReturn: 'true',
		submitName: '下一步',
		titleWidth: 160,
		isHeader: true,
	})
	let formData = ref < any > ([{
			'title': '营业执照',
			'type': 14,
			'vertical': 2,
			'underline': false,
			'required': false,
			'placeholderImg': fileURL + 'image/applyCard/zhizhao.png',
			'inputType': 1,
			'value': 'userName',
			'hint': '上传企业的营业执照',
			'show': true,
		}, {
			'title': '人像面',
			'type': 14,
			'vertical': 2,
			'underline': false,
			'required': false,
			'placeholderImg': fileURL + '/image/applyCard/renxiang.png',
			'inputType': 1,
			'value': 'userIdPoImageUrl',
			'hint': '上传身份证的人像面',
			'show': false,
		},
		{
			'title': '国徽面',
			'type': 14,
			'vertical': 2,
			'underline': false,
			'required': false,
			'placeholderImg': fileURL + 'image/applyCard/guohui.png',
			'inputType': 1,
			'value': 'userIdNeImageUrl',
			'hint': '上传身份证的国徽面',
			'show': false,
		},

		{
			'title': '委托书',
			'type': 14,
			'vertical': 2,
			'underline': false,
			'required': false,
			'placeholderImg': fileURL + 'image/applyCard/weituoshu.png',
			'inputType': 1,
			'value': 'userIdPoImageUrl',
			'hint': '上传文字清晰的委托书',
			'show': true,
		},
		{
			'title': '识别信息如下',
			'type': 100,
			'show': false,
		},
		{
			'title': '公司名称',
			'type': 2,
			'inputType': 'number',
			'vertical': 1,
			'userName': '',
			'value': 'userName',
			'required': false,
			'hint': '请输入公司名称',
			'underline': true,
			'maxlength': 3,
			'show': true,
		}, {
			'title': '部门名称',
			'type': 2,
			'inputType': 'number',
			'vertical': 1,
			'userName': '',
			'value': 'department',
			'required': false,
			'hint': '请输入部门名称',
			'underline': true,
			'maxlength': 3,
			'show': true,
		},
		{
			'title': '社会信用代码',
			'type': 2,
			'inputType': 'number',
			'vertical': 1,
			'userName': '',
			'value': 'userIdNum',
			'required': false,
			'hint': '请输入社会信用代码',
			'underline': true,
			'maxlength': 3,
			'show': true,
		},
		{
			'uploadCarBottom': true,
			'title': '姓名',
			'type': 2,
			'inputType': 'number',
			'vertical': 1,
			'userName': '',
			'value': 'userName',
			'required': false,
			'hint': '请输入姓名',
			'underline': true,
			'maxlength': 3,
			'show': false,
		}, {
			'title': '联系方式',
			'type': 2,
			'inputType': 'number',
			'vertical': 1,
			'userName': '',
			'value': 'tel',
			'required': false,
			'hint': '请输入联系方式',
			'underline': true,
			'maxlength': 11,
			'show': false,
		}, {
			'title': '证件号码',
			'type': 2,
			'value': 'userIdNum',
			'required': false,
			'underline': true,
			'hint': '请输入证件号码',
			'show': false,
		}, {
			'title': '住址',
			'type': 2,
			'value': 'address',
			'required': false,
			'underline': true,
			'hint': '请输入住址',
			'show': false,
		}, {
			'title': '本人办理',
			'type': 7,
			'underline': true,
			'value': 'isSelf',
			'itemData': [{
				'checked': true, //默认选中
				'value': '1',
				'name': '是'
			}, {
				'checked': false,
				'value': '2',
				'name': '否'
			}],
		}, {
			'title': '经办人证件人像面',
			'type': 14,
			'vertical': 2,
			'underline': false,
			'required': false,
			'placeholderImg': fileURL + '/image/applyCard/renxiang.png',
			'inputType': 1,
			'value': 'agentPosImgUrl',
			'hint': '上传身份证的人像面',
			'show': true
		},
		{
			'title': '经办人证件国徽面',
			'type': 14,
			'vertical': 2,
			'underline': false,
			'required': false,
			'placeholderImg': fileURL + 'image/applyCard/guohui.png',
			'inputType': 1,
			'value': 'agentNegImgUrl',
			'hint': '上传身份证的国徽面',
			'show': true
		}, {
			'title': '经办人姓名',
			'type': 2,
			'underline': true,
			'value': 'agentName',
			'hint': '请输入经办人姓名',
			'show': true
		}, {
			'title': '经办人电话',
			'type': 2,
			'underline': true,
			'value': 'agentTel',
			'hint': '请输入经办人电话',
			'titleShow': true,
			'inputType': 'tel',
			'show': true
		}, {
			'title': '经办人证件号码',
			'type': 2,
			'underline': true,
			'value': 'agentIdNum',
			'hint': '请输入证件号码',
			'show': true
		},
	])

	function businesses(key) {
		if (key) {
			formData.value[Index('经办人姓名', formData.value)].show = true
			formData.value[Index('经办人姓名', formData.value)].show = true
			formData.value[Index('经办人证件号码', formData.value)].show = true
			formData.value[Index('经办人电话', formData.value)].show = true
			formData.value[Index('经办人证件识别信息如下', formData.value)].show = true
			formData.value[Index('经办人证件人像面', formData.value)].show = true
			formData.value[Index('经办人证件国徽面', formData.value)].show = true
		} else {
			formData.value[Index('经办人姓名', formData.value)].show = false
			formData.value[Index('经办人证件号码', formData.value)].show = false
			formData.value[Index('经办人电话', formData.value)].show = false
			formData.value[Index('经办人证件识别信息如下', formData.value)].show = false
			formData.value[Index('经办人证件人像面', formData.value)].show = false
			formData.value[Index('经办人证件国徽面', formData.value)].show = false
		}
	}
	//单项选择器
	function radioChange(e: any, item: TypeData) {
		if (item.title === '本人办理') {
			if (e.detail.value === '1') {
				businesses(true)
			} else {
				businesses(false)
			}
		}
	}


	function handleDan(key) {
		formData.value[Index('营业执照', formData.value)].show = key
		formData.value[Index('委托书', formData.value)].show = key
		formData.value[Index('公司名称', formData.value)].show = key
		formData.value[Index('部门名称', formData.value)].show = key
		formData.value[Index('社会信用代码', formData.value)].show = key
		formData.value[Index('本人办理', formData.value)].show = !key
		formData.value[Index('人像面', formData.value)].show = !key
		formData.value[Index('国徽面', formData.value)].show = !key
		formData.value[Index('证件号码', formData.value)].show = !key
		formData.value[Index('住址', formData.value)].show = !key
		formData.value[Index('姓名', formData.value)].show = !key
		formData.value[Index('联系方式', formData.value)].show = !key
	}
	// setTimeout(() => {
	// 	danChange(true)
	// }, 600)
	// 提交个人信息接口
	let submitCode = '22'
	//判断单位办理还是个人办理
	function danChange(key) {
		if (key) {
			// 单位办理
			businesses(false)
			handleDan(false)
			formData.value[Index('部门名称', formData.value)].department = '本部'
			submitCode = '20'

		} else {
			// 个人办理
			businesses(true)
			handleDan(true)
			submitCode = '22'
		}
	}
	// 社会信用代码
	function cardImageOcrYY(fileList, item) {
		const data = {
			type: 'business_license',
			base64: fileList.path,
		};
		request(ocrAllQuery, {
			data: data,
		}).then((res) => {
			let data: any = JSON.parse(res.bizContent)
			if (data.result) {
				submitQuery.address = '初始'
				submitQuery.userIdType = '203'
				formData.value[Index('公司名称', formData.value)].userName = JSON.parse(data.result
					.businessLicense)[
					'名称'];
				formData.value[Index('社会信用代码', formData.value)].userIdNum = JSON.parse(data.result.businessLicense)[
					'统一社会信用代码'];

				cardFileImageUpdate(fileList, item)
			}
		});
	}

	// 委托书
	function cardFileImageUpdate(fileList, item) {
		var data = {
			fileBase64: fileList.path,
		};
		request(fileUpload, {
			showLoading: true,
			data: data,
		}).then((res) => {
			let data: any = JSON.parse(res.bizContent)
			if (item.title == '委托书') {
				formData.value[Index('委托书', formData.value)].proxyUrl = data.data.url;
			} else {
				formData.value[Index('营业执照', formData.value)].posImgUrl = data.data.url;
			}
		});
	}

	let submitQuery = reactive < any > ({})
	// 身份证类别识别
	function idCardOcr(fileList, item) {
		let imageType;
		if (item.title == '人像面' || item.title == '经办人证件人像面') {
			imageType = '1'
		} else if (item.title == '国徽面' || item.title == '经办人证件国徽面') {
			imageType = '2'
		}
		const data = {
			source: "1",
			agencyId: "52010106004",
			imageType: imageType,
			fileName: fileList.fileName,
			imageBase64: fileList.path,
		};

		request(etcOcrCard, {
			data: data,
		}).then((res) => {
			let data: any = JSON.parse(res.bizContent)

			if (imageType == '1') {
				// 人像面
				if (!data.name || !data.idno) {
					uni.showModal({
						title: '提示',
						content: '识别错误，请上传正确的图片',
						success: function(res) {
							// if (res.confirm) {
							// 	console.log('用户点击确定');
							// } else if (res.cancel) {
							// 	console.log('用户点击取消');
							// }
						}
					});
					return
				}
				if (item.title == '经办人证件人像面') {
					formData.value[Index('经办人证件人像面', formData.value)].agentPosImgUrl = data.imageUrl
					formData.value[Index('经办人姓名', formData.value)].agentName = data.name
					formData.value[Index('经办人证件号码', formData.value)].agentIdNum = data.idno
					submitQuery.agentIdType = '101' //身份证
					submitQuery.agentAddress = data.address //经办人住址
					// submitQuery.agentGender = data.gender == '男' ? 'MAN' : 'WOMAN' //经办人性别
				} else {
					formData.value[Index('人像面', formData.value)].userPosImgUrl = data.imageUrl
					formData.value[Index('姓名', formData.value)].userName = data.name
					formData.value[Index('证件号码', formData.value)].userIdNum = data.idno
					formData.value[Index('住址', formData.value)].address = data.address
					submitQuery.userIdType = '101' //身份证
					// submitQuery.customerGender = data.gender == '男' ? 'MAN' : 'WOMAN'  //用户性别
				}
			} else {
				if (!data.enddate) {
					uni.showModal({
						title: '提示',
						content: '识别错误，请上传正确的图片',
						success: function(res) {
							// if (res.confirm) {
							// 	console.log('用户点击确定');
							// } else if (res.cancel) {
							// 	console.log('用户点击取消');
							// }
						}
					});
					return
				}
				formData.value[Index(item.title, formData.value)].userPosImgUrl = data.imageUrl
				if (item.title == '经办人证件国徽面') {
					formData.value[Index('经办人证件国徽面', formData.value)].agentNegImgUrl = data.imageUrl
					submitQuery.agentIdVld = data.enddate //经办人证件有效期
				} else {
					formData.value[Index('国徽面', formData.value)].userNegImgUrl = data.imageUrl
					submitQuery.customerIdVld = data.enddate //证件有效期
				}
			}

			// console.log('成功',data);
			// if (val === "1") {
			// state.form.userName = data.name;
			// state.form.gender = data.gender;
			// state.form.userIdNum = data.idno;/
			// state.form.userPosImgUrl = data.imageUrl;
			// state.form.address = data.address;
			// } else {
			// state.form.customerIdVld = data.enddate;
			// state.form.userNegImgUrl = data.imageUrl;
			// }
		});
	}
	//图像文件上传
	function uploadImg(fileList, item) {
		if (['人像面', '国徽面', '经办人证件人像面', '经办人证件国徽面'].includes(item.title)) {
			idCardOcr(fileList, item)
		} else if (item.title == '营业执照') {
			cardImageOcrYY(fileList, item)
		} else {
			cardFileImageUpdate(fileList, item)
		}
	}

	function submit(item: any) {
		let data = {
			...submitQuery,
			orderId: qdOrderStore.orderInfo.value.orderId
		}
		for (const key in item) {
			if (item[key]) {
				data[key] = item[key]
			}
		}

		let {
			commitInterface,
			jumpPage
		} = config.value
		request(submitCode, {
			data,
		}).then((res) => {
			if (res.statusCode === 0) {
				// qdOrderStore.orderInfo.value.orderId = JSON.parse(res.bizContent).orderId
				uni.navigateTo({
					url: '/' + jumpPage,
					animationType: 'pop-in',
					animationDuration: 500
				})
			}
		})
		//   });
	}
</script>
<style lang='scss' scoped>

</style>