zhywpt-sp/applyCard/opening-account-people.vue

<template>
	<navBar title="ETC开户新办申请-个人" :scrollTop="scrollTop"></navBar>
	<navBgCar></navBgCar>
	<view class="content-wrap">
		<view @click="tabChange(true)">
			<view :class="state.isMyPeopple ? 'big' : 'nomal'"> 本人车辆 </view>
			<view :class="state.isMyPeopple ? 'tip' : ''"> </view>
		</view>
		<view @click="tabChange(false)" style="margin-left: 60rpx" class="">
			<view :class="state.isMyPeopple ? 'nomal' : 'big'"> 他人车辆 </view>
			<view :class="state.isMyPeopple ? '' : 'tip'"> </view>
		</view>
	</view>
	<view v-if="state.isMyPeopple" class="content">
		<view class="item-tips">
			<view class="title"> 上传后请核对识别信息 </view>
			<view class="tip"> 如有错误请及时手动修改 </view>
		</view>
		<view class="picture-wrapper" @click="cardImageOcr('1')">
			<view class="bg">
				<view class="">
					<view class="name"> 人像面 </view>
					<view class="value"> 上传身份证的人像面 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.userPosImgUrl" class="icon" :src="`${$imgUrl}applyCard/renxiang.png`">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.userPosImgUrl)"></image>
			</view>
		</view>
		<view class="picture-wrapper" @click="cardImageOcr('2')">
			<view class="bg">
				<view class="">
					<view class="name"> 国徽面 </view>
					<view class="value"> 上传身份证的国徽面 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.userNegImgUrl" class="icon" :src="`${$imgUrl}applyCard/guohui.png`">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.userNegImgUrl)"></image>
			</view>
		</view>
		<view class="shibie-wrapper">
			<view class="title"> 识别内容如下 </view>
			<u-form label-width="200" :model="state.form" ref="uForm">
				<u-form-item label="姓名">
					<u-input v-model="state.form.userName" placeholder='请输入姓名' />
				</u-form-item>

				<u-form-item label="性别">
					<u-input placeholder='请选择性别' v-model="state.form.gender" @click="userGenderAction()"
						type="select" />
				</u-form-item>
				<u-form-item label="身份证号">
					<u-input placeholder='请输入身份证' type="idcard" v-model="state.form.userIdNum" />
				</u-form-item>
				<u-form-item label="地址">
					<u-input placeholder='请输入地址' height='38' type='textarea' :autoHeight='true'
						v-model="state.form.address" />
				</u-form-item>
				<!-- 	<u-form-item label="证件有效期">
					<u-input v-model="state.form.begindate" type="select" />
				</u-form-item> -->
				<u-form-item label="联系方式">
					<u-input placeholder='请输入联系方式' type="number" v-model="state.form.tel" />
				</u-form-item>
			</u-form>
		</view>

		<view class="green-tip">
			如识别信息有误，请手动修改，确认无误后，点击下一步！
		</view>

		<view class="action">
			<button type="default" class="button" @click="savaHandle()">
				下一步
			</button>
		</view>
	</view>

	<view v-else class="content">
		<view class="title"> 车主信息 </view>
		<view class="item-tips">
			<view class="title"> 上传后请核对识别信息 </view>
			<view class="tip"> 如有错误请及时手动修改 </view>
		</view>
		<view class="picture-wrapper" @click="cardImageOcr('1')">
			<view class="bg">
				<view class="">
					<view class="name"> 人像面 </view>
					<view class="value"> 上传身份证的人像面 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.userPosImgUrl" class="icon" :src="`${$imgUrl}applyCard/renxiang.png`">
				</image>
				<image v-else class="icon" :src="state.form.userPosImgUrl"></image>
			</view>
		</view>
		<view class="picture-wrapper" @click="cardImageOcr('2')">
			<view class="bg">
				<view class="">
					<view class="name"> 国徽面 </view>
					<view class="value"> 上传身份证的国徽面 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.userNegImgUrl" class="icon" :src="`${$imgUrl}applyCard/guohui.png`">
				</image>
				<image v-else class="icon" :src="state.form.userNegImgUrl"></image>
			</view>
		</view>

		<view class="shibie-wrapper">
			<view class="title"> 识别内容如下 </view>
			<u-form label-width="200" :model="state.form" ref="uForm">
				<u-form-item label="姓名">
					<u-input inputAlign="right" placeholder='请输入姓名' v-model="state.form.userName" />
				</u-form-item>
				<u-form-item label="性别">
					<u-input inputAlign="right" placeholder='请选择性别' v-model="state.form.gender" type="select" />
				</u-form-item>
				<u-form-item label="身份证号">
					<u-input inputAlign="right" placeholder='请输入身份证号' v-model="state.form.userIdNum" />
				</u-form-item>
				<!-- <u-form-item label="">
					<u-input v-model="state.form.userIdNum" />
				</u-form-item> -->
				<!-- 	<u-form-item label="证件有效期">
					<u-input v-model="state.form.begindate" type="select" />
				</u-form-item> -->
				<u-form-item label="联系方式">
					<u-input inputAlign="right" placeholder='请输入联系方式' v-model="state.form.tel" />
				</u-form-item>
			</u-form>
		</view>
		<view style="margin-top: 30rpx" class="title"> 代办人信息 </view>
		<view class="item-tips">
			<view class="title"> 上传后请核对识别信息 </view>
			<view class="tip"> 如有错误请及时手动修改 </view>
		</view>
		<view class="picture-wrapper" @click="cardDbImageOcr('1')">
			<view class="bg">
				<view class="">
					<view class="name"> 人像面 </view>
					<view class="value"> 上传身份证的人像面 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.agentPosImgUrl" class="icon" :src="`${$imgUrl}applyCard/renxiang.png`">
				</image>
				<image v-else class="icon" :src="state.form.agentPosImgUrl"></image>
			</view>
		</view>
		<view class="picture-wrapper" @click="cardDbImageOcr('2')">
			<view class="bg">
				<view class="">
					<view class="name"> 国徽面 </view>
					<view class="value"> 上传身份证的国徽面 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.agentNegImgUrl" class="icon" :src="`${$imgUrl}applyCard/guohui.png`">
				</image>
				<image v-else class="icon" :src="state.form.agentNegImgUrl"></image>
			</view>
		</view>
		<view class="picture-wrapper" @click="cardFileImageUpdate()">
			<view class="bg">
				<view class="">
					<view class="name"> 委托书 </view>
					<view class="value"> 上传文字清晰的委托书 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.proxyUrl" class="icon" :src="`${$imgUrl}applyCard/weituoshu.png`">
				</image>
				<image v-else class="icon" :src="state.form.proxyUrl"></image>
			</view>
		</view>
		<view class="shibie-wrapper">
			<view class="title"> 识别内容如下 </view>
			<u-form label-width="200" :model="state.form" ref="uForm">
				<u-form-item label="经办人姓名">
					<u-input inputAlign="right" placeholder='请输入经办人姓名' v-model="state.form.agentName" />
				</u-form-item>
				<!-- <u-form-item label="性别">
					<u-input v-model="state.form.agentGender" type="select" />
				</u-form-item> -->
				<u-form-item label="身份证号">
					<u-input inputAlign="right" placeholder='请输入身份证号' v-model="state.form.agentIdNum" />
				</u-form-item>
				<!-- 	<u-form-item label="证件有效期">
					<u-input v-model="state.form.begindate" type="select" />
				</u-form-item> -->
				<u-form-item label="联系方式">
					<u-input inputAlign="right" placeholder='请输入联系方式' v-model="state.form.agentTel" />
				</u-form-item>
			</u-form>
		</view>

		<view class="green-tip">
			如识别信息有误，请手动修改，确认无误后，点击下一步！
		</view>

		<view class="action">
			<button type="default" class="button" @click="savaHandle()">
				下一步
			</button>
		</view>
	</view>
	<u-select mode="single-column" :list="state.genderList" v-model="state.genderShow" @confirm="genderSelectConfirm">
	</u-select>
</template>

<script setup lang="ts">
	import navBgCar from "./components/nav-bg-car3";
	import {
		pathToBase64
	} from "@/utils/image-tools/index.js";
	import {
		reactive,
		ref,
	} from "vue";
	import {
		msg,
		checkStr
	} from "@/utils/utils";
	import {
		onLoad,
		onPageScroll,
	} from "@dcloudio/uni-app";
	import {
		etcOcrCard,
		etcUserCardInfoSubmit,
		fileUpload,
		register,
	} from "@/utils/network/api.js";

	import {
		request
	} from "@/utils/network/request.js";

	import {
		stringToJson
	} from "@/utils/network/encryption";
	import {
		setItem,
		getItem,
	} from "@/utils/storage";
	import navBar from "../components/nav-bar/nav-bar2.vue";
	const scrollTop = ref(0)
	const state = reactive({
		genderList: [{
			value: '男',
			label: '男'
		},
		{
			value: '女',
			label: '女'
		}
		],
		form: {
			orderId: "", //订单ID
			userName: "", //开户人姓名
			userIdType: "101", //用户证件类型 101//身份证
			userIdNum: "", //用户证件号码
			userPosImgUrl: "", //身份证正面
			userNegImgUrl: "", //身份证反面
			tel: "", //开户人手机号
			address: "", //开户人地址
			sceneType: "", //用户协议支撑服务场景（发行服务机构和用户签订的协议）
			channelId: "", //渠道id
			gender: "",
			customerIdVld: "",
			agentName: "",
			agentGender: "",
			agentTel: '',
			agentPhone: "",
			agentIdType: "101",
			agentIdNum: "",
			agentPosImgUrl: "",
			agentNegImgUrl: "",
			proxyUrl: "",
			agentAddress: "",
			agentIdVld: '',
			opId: '',
			orderSource: 'WECHAT',
		},

		genderShow: false,
		orderId: "",
		vehiclePlateColor: undefined,
		isMyPeopple: true,
	});
	
	const userGenderAction = () => {
		state.genderShow = true;
	};

	const genderSelectConfirm = (e) => {
		state.form.gender = ''
		e.map((val, index) => {
			state.form.gender = val.label;
		})
	};

	const savaHandle = () => {
		if (!checkStr(state.form.userIdNum, 'card')) {
			msg('请输入正确身份证');
			return;
		}
		if (!checkStr(state.form.tel, 'mobile')) {
			msg('请输入正确手机号');
			return;
		}

		//如果未登录||新用户
		if (!getItem('openId')) {

			let data = {
				userType: "PERSONAL",
				idNum: state.form.userIdNum,
				idType: state.form.userIdType,
				mobile: state.form.tel,
				name: state.form.userName,
				gender: state.form.gender == '男' ? 'MALE' : 'FEMALE',
				certifyChannel: "BAIDUOCR",
				address: state.form.address,
				agentIdNum: state.form.agentIdNum,
				agentIdType: state.form.agentIdType,
				agentName: state.form.agentName,
				department: "",
				userIdImgUrl: state.form.userPosImgUrl,
				userIdImgBase64: "",
			}
			const options = {
				type: 2,
				data: data,
				method: "POST",
				showLoading: true,
			};
			request(register, options).then((res) => {
				let result = stringToJson(res.bizContent);
				if (result.accessToken && result.openId) {
					setItem('token', result.accessToken)
					setItem('openId', result.openId)
					state.form.opId = result.openId;
					let data = state.form;
					const options = {
						type: 2,
						data: data,
						method: "POST",
						showLoading: true,
					};
					request(etcUserCardInfoSubmit, options).then((res) => {
						// let result = stringToJson(res.bizContent);
						console.log(res);
						uni.redirectTo({
							url: `/applyCard/car-release?orderId=${state.orderId}&vehiclePlateColor=${state.vehiclePlateColor}&type=1`,
						});
					});
				}
			})

		} else {
			//已经登录		
			let data = state.form;
			const options = {
				type: 2,
				data: data,
				method: "POST",
				showLoading: true,
			};
			request(etcUserCardInfoSubmit, options).then((res) => {
				// let result = stringToJson(res.bizContent);
				console.log(res);
				uni.redirectTo({
					url: `/applyCard/car-release?orderId=${state.orderId}&vehiclePlateColor=${state.vehiclePlateColor}`,
				});
			});

		}


	};
	const cardFileImageUpdate = () => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				pathToBase64(res.tempFilePaths[0])
					.then((path) => {
						var data = {
							fileBase64: path,
						};

						const options = {
							type: 2,
							data: data,
							method: "POST",
							showLoading: true,
						};
						request(fileUpload, options).then((res) => {
							const data = stringToJson(res.bizContent);
							console.log(data);
							state.form.proxyUrl = data.data.url;
						});
					})
					.catch((error) => { });
			},
		});
	};

	//tab切换
	const tabChange = (val : any) => {
		if (val) {
			state.isMyPeopple = true;
		} else {
			state.isMyPeopple = false;
		}
		state.form = {
			orderId: state.orderId, //订单ID
			userName: "", //开户人姓名
			userIdType: "101", //用户证件类型 101//身份证
			userIdNum: "", //用户证件号码
			userPosImgUrl: "", //身份证正面
			userNegImgUrl: "", //身份证反面
			tel: "", //开户人手机号
			address: "", //开户人地址
			sceneType: "", //用户协议支撑服务场景（发行服务机构和用户签订的协议）
			channelId: "", //渠道id
			gender: "",
			customerIdVld: "",
			agentName: "",
			agentGender: "",
			agentTel: '',
			agentPhone: "",
			agentIdType: "101",
			agentIdNum: "",
			agentPosImgUrl: "",
			agentNegImgUrl: "",
			proxyUrl: "",
			agentAddress: "",
			agentIdVld: '',
		};
	};
	onLoad((option : any) => {
		state.form.orderId = option.orderId;
		state.orderId = option.orderId;
		state.vehiclePlateColor = option.vehiclePlateColor;
		//state.fromOrder = option.fromOrder //是否来自订单-修改资料
	});
	
	//监听页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});

	const cardDbImageOcr = (val : any) => {
		var imageType = val;
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				pathToBase64(res.tempFilePaths[0])
					.then((path) => {
						var data = {
							source: "1",
							agencyId: "52010106004",
							imageType: imageType,
							fileName: res.tempFilePaths[0],
							imageBase64: path,
						};

						const options = {
							type: 2,
							data: data,
							method: "POST",
							showLoading: true,
						};
						request(etcOcrCard, options).then((res) => {
							const data = stringToJson(res.bizContent);
							if (val === "1") {
								state.form.agentName = data.name;
								state.form.agentGender = data.gender;
								state.form.agentIdNum = data.idno;
								state.form.agentPosImgUrl = data.imageUrl;
								state.form.agentAddress = data.address;
							} else {
								state.form.agentIdVld = data.enddate;
								state.form.agentNegImgUrl = data.imageUrl;
							}
						});
					})
					.catch((error) => { });
			},
		});
	};
	//orc接口调用
	const cardImageOcr = (val : any) => {
		console.log("点击了");
		var imageType = val;
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				pathToBase64(res.tempFilePaths[0])
					.then((path) => {
						var data = {
							source: "1",
							agencyId: "52010106004",
							imageType: imageType,
							fileName: res.tempFilePaths[0],
							imageBase64: path,
						};

						const options = {
							type: 2,
							data: data,
							method: "POST",
							showLoading: true,
						};
						request(etcOcrCard, options).then((res) => {
							const data = stringToJson(res.bizContent);
							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;
							}
						});
					})
					.catch((error) => { });
			},
		});
	};
	//替换图片地址
	const strReplace = (str : string) => {
		return str.replace('192.168.101.145:9000', '222.85.144.89:19002')
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 35rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #000000;
		line-height: 80rpx;
		margin-bottom: 10rpx;
	}

	.content-wrap {
		position: relative;
		margin-top: -50rpx;
		padding: 0rpx 30rpx;
		display: flex;

		.big {
			font-size: 30rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;
			line-height: 24rpx;
		}

		.nomal {
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #666666;
			line-height: 24rpx;
		}

		.tip {
			margin-top: -5px;
			width: 117rpx;
			height: 16rpx;
			background: #00b38b;
			opacity: 0.3;
		}
	}

	.content {
		padding: 50rpx 30rpx 50rpx 30rpx;

		.action {
			padding-left: 20rpx;
			padding-right: 20rpx;
			padding-bottom: 30rpx;

			.button {
				height: 80rpx;
				background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #ffffff;
				line-height: 80rpx;
			}
		}

		.item-tips {
			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				line-height: 24rpx;
			}

			.tip {
				margin-top: 16rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #999999;
				line-height: 24rpx;
			}
		}

		.picture-wrapper {
			margin-top: 40rpx;

			.bg {
				background: #ffffff;
				box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
				border-radius: 20rpx;
				padding: 40rpx;
				display: flex;
				// align-items: center;
				justify-content: space-between;

				.name {
					font-size: 34rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000000;
					line-height: 34rpx;
				}

				.value {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #999999;
					line-height: 24rpx;
				}

				.tip {
					margin-top: 20rpx;
					text-align: center;
					width: 110rpx;
					height: 40rpx;
					background: rgba(33, 190, 177, 0.2);
					border-radius: 6rpx;

					.tip-value {
						font-size: 20rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #0a8f8a;
						line-height: 40rpx;
						opacity: 1;
					}
				}
			}

			.icon {
				width: 294rpx;
				height: 188rpx;
			}
		}

		.shibie-wrapper {
			margin-top: 60rpx;

			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				line-height: 30rpx;
			}
		}

		.buchong-wrapper {
			margin-top: 60rpx;

			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				line-height: 30rpx;
			}
		}

		.green-tip {
			margin-top: 50rpx;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #00b38b;
			line-height: 24rpx;
			margin-bottom: 60rpx;
		}
	}
</style>