zhywpt-h5/pages/userInfoUploading/userInfoUploading.vue

<template>
	<div>
		<custom-header title="用户信息"></custom-header>
		<div style="padding-top: 20rpx">
			<form-builder-vue v-if="start" :formData="formData" :config="config" @uploadImg="uploadImg" @radioChange="radioChange"
				@submit="submit">
			</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 {
		fileURL
	} from '@/static/js/network/api.js';
	import {
		reactive,
		ref,
		nextTick
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		request
	} from '../../static/js/network/request'

	//获取页面配置
	onLoad((opin) => {
		// request('ac8756cc31eb4816b8eaeb71907ff9c1', {
		// 	data: {
		// 		qdOrderNo: 'qddd123456'
		// 	}
		// }).then((res) => {
		// 	let data = JSON.parse(res.bizContent)
		// 	formData.value = JSON.parse(data.config.tableConfig)
		// 	console.log('输出内容',formData.value)
		// 	start.value = false
		// 	nextTick(()=>{
		// 		start.value = true
		// 	})
		// })
	})

	const start = ref(false)

	function disagree() {
		start.value = false
	}

	function consent() {
		start.value = false
	}

	let config = ({
		btnBack: true,
		submitName: '下一步',
		titleWidth: 160
	})
	let formData = ref([{
		'title': '用户证件照',
		'type': 8,
		'vertical': 2,
		'underline': false,
		'required': false,
		'placeholderImg': fileURL + '/image/applyCard/renxiang.png,' + fileURL + '/image/applyCard/guohui.png',
		'inputType': 1,
		'value': 'userIdPoImageUrl,userIdNeImageUrl',
		'hint': '注意事项:且上传有效证件照且图片大小不超过2M,证件正面照,证件反面照',
	}, {
		'title': '姓名',
		'type': 2,
		'inputType': 'number',
		'vertical': 1,
		'userName': '',
		'value': 'userName',
		'required': false,
		'hint': '请输入姓名',
		'maxlength': 3
	}, {
		'title': '证件类型',
		'type': 4,
		'value': 'userIdType',
		'required': false,
		'hint': '请选择证件类型',
		'name': 'key',
		'itemKey': 'value',
		'itemData': IdCard
	}, {
		'title': '用户类型',
		'type': 4,
		'value': 'userType',
		'required': false,
		'name': 'key',
		'itemKey': 'value',
		'itemData': [{
			'value': '个人',
			'key': 1
		}, {
			'value': '单位',
			'key': 2
		}]
	}, {
		'title': '证件号码',
		'type': 2,
		'value': 'userIdNum',
		'required': false,
		'hint': '请输入证件号码'
	}, {
		'title': '住址',
		'type': 5,
		'value': 'address',
		'required': false,
		'hint': '请输入住址'
	}, {
		'title': '发证机关',
		'type': 2,
		'value': 'office',
		'required': false,
		'hint': '请输入发证机关',
		'maxlength': 3
	}, {
		'title': '证件开始有效日期',
		'type': 4,
		'mode': 'date',
		'value': 'validStartDate',
		'hint': '请选择起始日期',
		'maxlength': 3
	}, {
		'title': '证件截止有效日期',
		'type': 4,
		'mode': 'date',
		'value': 'validEndDate',
		'hint': '请选择截止日期',
		'maxlength': 3
	}, {
		'title': '本人办理',
		'type': 7,
		'underline': false,
		'value': 'demo',
		'itemData': [{
			'checked': true, //默认选中
			'value': '1',
			'name': '是'
		}, {
			'checked': false,
			'value': '2',
			'name': '否'
		}],
	}, {
		'title': '经办人证件照',
		'type': 8,
		'underline': false,
		'vertical': 2,
		'inputType': 1,
		'placeholderImg': fileURL + '/image/applyCard/renxiang.png,' + fileURL + '/image/applyCard/guohui.png',
		'value': 'agentIdPoImageUrl,agentIdNeImageUrl',
		'hint1': '经办人证件正面照',
		'hint2': '经办人证件反面照',
		'hint': '注意事项:且上传有效证件照且图片大小不超过2M',
		'show': true
	}, {
		'title': '经办人姓名',
		'type': 2,
		'value': 'agentName',
		'hint': '请输入经办人姓名',
		'show': true
	}, {
		'title': '经办人证件号码',
		'type': 2,
		'value': 'agentIdNum',
		'hint': '请输入证件号码',
		'show': true
	}, {
		'title': '经办人邮箱',
		'underline': true,
		'type': 2,
		'value': 'name',
		'hint': '请输入经办人邮箱',
		'show': true
	}])

	//单项选择器
	function radioChange(e: any, item: TypeData) {
		if (item.title === '本人办理') {
			if (e.detail.value === '1') {
				formData[Index('经办人证件照', formData)].show = true
				formData[Index('经办人姓名', formData)].show = true
				formData[Index('经办人证件号码', formData)].show = true
				formData[Index('经办人邮箱', formData)].show = true
			} else {
				formData[Index('经办人证件照', formData)].show = false
				formData[Index('经办人姓名', formData)].show = false
				formData[Index('经办人证件号码', formData)].show = false
				formData[Index('经办人邮箱', formData)].show = false
			}
		}
	}

	//图像文件上传
	function uploadImg(data: any, item: TypeData, index: Number) {
		console.log('图片文件', data, item, index, '结果长度', Index('姓名', formData))
		//调整文件格式
		if (item.title === '用户证件照') {
			if (data && data.begindate || data.enddate) {
				let startData = data.begindate
				let endData = data.enddate
				data.begindate = startData.substring(0, 4) + "-" + startData.substring(4, 6) + "-" + startData.substring(6,
					8)
				data.enddate = endData.substring(0, 4) + "-" + endData.substring(4, 6) + "-" + endData.substring(6, 8)
			}
			let arr = [
				[Index('姓名', formData), 'name'],
				[Index('住址', formData), 'address'],
				[Index('证件号码', formData), 'idno'],
				[Index('证件开始有效日期', formData), 'begindate'],
				[Index('证件截止有效日期', formData), 'enddate']
			]
			for (var i = 0; i < arr.length; i++) {
				if (data[arr[i][1]]) {
					formData[arr[i][0]][formData[arr[i][0]].value] = data[arr[i][1]]
				}
			}
		} else if (item.title === '经办人证件照') {
			let arr = [
				[Index('经办人姓名', formData), 'name'],
				[Index('经办人证件号码', formData), 'idno'],
			]
			for (var i = 0; i < arr.length; i++) {
				if (data[arr[i][1]]) {
					formData[arr[i][0]][formData[arr[i][0]].value] = data[arr[i][1]]
				}
			}
		}
	}

	function submit(item: any) {
		// console.log('输出内容', item)
		uni.navigateTo({
			url: '/pages/drivingLicense/drivingLicense',
			animationType: 'pop-in',
			animationDuration: 500
		})
		//Sing
		// wx.navigateToMiniProgram({
		//     appId: 'wx008c60533388527a',
		//     path: '/pages/login/appAuth?orderId=da01db164dc94aa482a0515863074e96',
		//     query: {
		//       'orderId': 'da01db164dc94aa482a0515863074e96'
		//     },
		//     success(res) {
		//       // 跳转成功后的回调函数
		// 	  console.log('成功', res)
		//     },
		//     fail(err) {
		//       // 跳转失败后的回调函数
		// 	  console.log('失败', err)
		//     }
		//   });
	}
</script>
<style lang='scss' scoped>

</style>