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 '@/utils/network/request'

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

	const start = ref(true)

	function disagree() {
		start.value = false
	}

	function consent() {
		start.value = false
	}

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

		{
			'title': '委托书',
			'type': 14,
			'vertical': 2,
			'underline': false,
			'required': false,
			'placeholderImg': fileURL + 'image/applyCard/weituoshu.png',
			'inputType': 1,
			'value': 'userIdPoImageUrl',
			'hint': '上传文字清晰的委托书',
			'show': true,
		},

		{
			'uploadCarBottom': true,
			'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': 'userName',
			'required': false,
			'hint': '请输入部门名称',
			'underline': true,
			'maxlength': 3,
			'show': true,
		},
		{
			'title': '社会信用代码',
			'type': 2,
			'inputType': 'number',
			'vertical': 1,
			'userName': '',
			'value': 'userName',
			'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': 'demo',
			'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': 'userIdPoImageUrl',
			'hint': '上传身份证的人像面',
			'show': true
		},
		{
			'title': '经办人证件国徽面',
			'type': 14,
			'vertical': 2,
			'underline': false,
			'required': false,
			'placeholderImg': fileURL + 'image/applyCard/guohui.png',
			'inputType': 1,
			'value': 'userIdNeImageUrl',
			'hint': '上传身份证的国徽面',
			'show': true
		}, {
			'title': '经办人姓名',
			'type': 2,
			'underline': true,
			'value': 'agentName',
			'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

		} else {
			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') {
				console.log('是');
				businesses(true)
				formData.value[Index('经办人证件人像面', formData.value)].show = true
				formData.value[Index('经办人证件国徽面', formData.value)].show = true
			} else {
				businesses(false)
				formData.value[Index('经办人证件人像面', formData.value)].show = false
				formData.value[Index('经办人证件国徽面', formData.value)].show = 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
	}
	// setTimeout(() => {
	// 	danChange(true)
	// }, 600)
	//单项选择器
	function danChange(key) {
		if (key) {
			// 单位办理
			businesses(false)
			handleDan(false)
		} else {
			// 个人办理
			businesses(true)
			handleDan(true)
		}
	}
	//图像文件上传
	function uploadImg(data: any, item: TypeData, index: Number) {
		console.log('图片文件', data, item, index, '结果长度', Index('姓名', formData.value))
		//调整文件格式
		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.value), 'name'],
				[Index('住址', formData.value), 'address'],
				[Index('证件号码', formData.value), 'idno'],
				[Index('证件开始有效日期', formData.value), 'begindate'],
				[Index('证件截止有效日期', formData.value), 'enddate']
			]
			for (var i = 0; i < arr.length; i++) {
				if (data[arr[i][1]]) {
					formData.value[arr[i][0]][formData.value[arr[i][0]].value] = data[arr[i][1]]
				}
			}
		} else if (item.title === '经办人证件照') {
			let arr = [
				[Index('经办人姓名', formData.value), 'name'],
				[Index('经办人证件号码', formData.value), 'idno'],
			]
			for (var i = 0; i < arr.length; i++) {
				if (data[arr[i][1]]) {
					formData.value[arr[i][0]][formData.value[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>