zhywpt-sp/subpackage/personal-center/real-name-authentication.vue

<template>
	<view class="content-wrap">
		<view class="t-card">
			<view class="content">
				<view class="t-con">
					<view class="item-tips">
						<view class="title"> 上传后请核对识别信息 </view>
						<view class="tip"> 如有错误请及时手动修改 </view>
					</view>
					<view class="picture-wrapper" @click="takePhotoMode(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.userIdImgUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
							</image>
							<image v-else class="icon" :src="state.form.userIdImgUrlName"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
						</view>
					</view>
					<view class="picture-wrapper" @click="takePhotoMode(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.userIdBackImgUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
							</image>
							<image v-else class="icon" :src="state.form.userIdBackImgUrlName"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
						</view>
					</view>
				</view>
				<view class="shibie-wrapper">
					<view class="title"> 识别内容如下 </view>
					<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
						<u-form-item label="姓名" :left-icon='`${$imgUrl}issuance/point-form.png`'
							:left-icon-style='leftIcon'>
							<u-input v-model="state.form.userName" placeholder='请输入姓名' maxlength="20"
								@input="replaceInput" inputAlign="right" :disabled="isSM" />
						</u-form-item>
						<u-form-item label="身份证号" :left-icon='`${$imgUrl}issuance/point-form.png`'
							:left-icon-style='leftIcon'>
							<u-input placeholder='请输入身份证' type="idcard" v-model="state.form.idNum" maxlength="18"
								inputAlign="right" :disabled="isSM" />
						</u-form-item>
						<u-form-item label="地址" :left-icon='`${$imgUrl}issuance/point-form.png`'
							:left-icon-style='leftIcon'>
							<u-input placeholder='请输入地址' :autoHeight='true' v-model="state.form.address" maxlength="50"
								inputAlign="right" :disabled="isSM" />
						</u-form-item>
						<u-form-item label="证件类型" :left-icon='`${$imgUrl}issuance/point-form.png`'
							:left-icon-style='leftIcon' borderBottom>
							<u-input v-model="state.form.idTypeStr" type="select" @click="show1 = isSM ? false : true"
								input-align='right' :disabled="isSM" />
						</u-form-item>
					</u-form>
				</view>
				<view v-if="!isSM" class="action">
					<view class="btn-tip">
						如识别信息有误，请手动修改，确认无误后，点击下一步！
					</view>
					<button type="default" class="ui-btn" @click="savaHandle()">
						下一步
					</button>
				</view>
			</view>

		</view>
	</view>
	<!-- 选择车牌颜色 -->
	<u-select v-model="show1" :list="credentialTypeSelect" @confirm="changeIdType"></u-select>
	<uploadImg :isTakePhotoModeShow="state.isTakePhotoModeShow" :phoneType="state.choiceIndex" @close="close"
		@ocrResult="ocrResult">
	</uploadImg>
</template>

<script setup lang="ts">
	import uploadImg from '@/components/uploadOcr';
	import {
		reactive,
		ref,
	} from "vue";
	import {
		msg,
		checkStr,
		compareDates,
		confirm
	} from "@/utils/utils";
	import {
		onLoad,
		onPageScroll,
	} from "@dcloudio/uni-app";
	import {
		getUserMsg,
		realNameAuthentication
	} from "@/utils/network/api.js";

	import { credentialTypeSelect } from "@/datas/credentialType.js";
	import { requestNew } from "@/utils/network/request.js";

	import {
		setItem,
		getItem,
	} from "@/utils/storage";
	import {
		getCodeName
	} from "@/datas/queryKey.js";
	import navBar from "@/components/nav-bar/nav-bar2.vue";
	const labelStyle = {
		color: "#004576",
		fontSize: "28rpx",
	}
	const leftIcon = {
		height: '100%',
		width: '8rpx',
		display: 'flex',
		'align-items': 'center',
		'margin-right': '4rpx',
	}
	const scrollTop = ref(0)
	const show1 = ref(false)
	const isSM = ref(true)
	const state = reactive({
		choiceIndex: 1,  // 1 身份证正面  2 身份证反面  3行驶证正面 4行驶证反面
		isTakePhotoModeShow: false,  //选择拍照方式是否出来
		form: {
			address: "",
			idNum: "",
			userName: "", //开户人姓名
			userIdImgUrl: "",
			userIdImgUrlName: "",
			userIdBackImgUrl: "",
			userIdBackImgUrlName: "",
			gender: "",
			idType: "", //用户证件类型 101//身份证
			idTypeStr: "",
			userIdBackImgBase64:"1",
			userIdImgBase64:"2"
		},
	});

	const close = (e) => {
		console.log("e", e)
		state.isTakePhotoModeShow = e
	}

	const changeIdType = (item) => {
		state.form.idType = item[0].value
		state.form.idTypeStr = item[0].label
		console.log(item)
	}

	async function savaHandle(){
		if (!state.form.userName) {
			msg('请输入姓名');
			return;
		}
		if (!state.form.userIdImgUrl) {
			msg('请上传身份证的人像面');
			return;
		}
		if (!state.form.userIdBackImgUrl) {
			msg('请上传身份证的国徽面');
			return;
		}
		if (!checkStr(state.form.idNum, 'card')) {
			msg('请输入正确身份证号');
			return;
		}
		if (!state.form.idType) {
			msg('请选择证件类型');
			return;
		}
			const options = {
				type: 2,
				data: {
					...state.form
				},
				method: "POST",
				showLoading: true,
			};
			requestNew(realNameAuthentication, options).then((res) => {
				console.log("提交", res);
			confirm('实名认证成功！', () => {
				uni.navigateBack();
			}, '成功', false);
			});
	};

	onLoad((option : any) => {
		console.log("option", option)
		initInfo();
	});
	
	const initInfo = () => {
		const options = {};
		requestNew(getUserMsg, options).then((res) => {
			const data = res;
			console.log(data, "认证信息"); //|| !data.userNegImgUrl || !data.userPosImgUrl
			if (data.userName && data.userIdNum) {
				state.form.address = data.userAddress;
				state.form.idNum = data.userIdNum;
				state.form.idType = data.userIdType;
				const idTypeStrItem = credentialTypeSelect.find(item => item.value === data.userIdType);
				state.form.idTypeStr = idTypeStrItem.label;
				state.form.userIdImgUrl = data.userPosImgUrl;
				state.form.userIdImgUrlName = data.userPosImgUrl;
				state.form.userIdBackImgUrl = data.userNegImgUrl;
				state.form.userIdBackImgUrlName = data.userNegImgUrl;
				state.form.userName = data.userName;
			} else {
				// 无用户信息则按未认证进行初始化
				isSM.value = false
				state.form.idType = credentialTypeSelect[0].value
				state.form.idTypeStr = credentialTypeSelect[0].label
			}
		});
		
	}

	//监听页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
	const replaceInput = (event) => {
		console.log("event", event)
		const screeningStr = /[^\u4E00-\u9FA5]/g;      //想禁止什么类型，在这里替换正则就可以了
		if (screeningStr.test(event)) {
			setTimeout(() => {
				state.form.userName = event.replace(screeningStr, '');
			}, 100)
		} else {
			setTimeout(() => {
				state.form.userName = event;
			}, 100)
		}
		console.log("event.replace(screeningStr, '')", event.replace(screeningStr, ''), event, state.form.userName)
	}
	const takePhotoMode = (index) => {
		if (isSM.value) {
			return;
		}
		console.log("index", index)
		state.isTakePhotoModeShow = true
		state.choiceIndex = index
	}

	const ocrResult =(data) => {
		console.log("图片地址val", data)
		if (state.choiceIndex == 1) {
			state.form.userName = data.name;
			if (data.gender == '男') {
				state.form.gender = 'MALE'
			} else if (data.gender == '女') {
				state.form.gender = 'FEMALE'
			} else {
				state.form.gender = 'UNKOWN'
			}
			state.form.idNum = data.idno;
			state.form.userIdImgUrl = data.imageUrl;
			state.form.userIdImgUrlName = data.imageName;
			state.form.address = data.address;
		} else {
			state.form.userIdBackImgUrl = data.imageUrl;
			state.form.userIdBackImgUrlName = data.imageName;
			compareDates(data.enddate)
		}
	}
</script>

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

	.content-wrap {
		position: absolute;
		top: 30rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx 210rpx;

		.t-con {
			width: 100%;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 40rpx 30rpx 30rpx;
			box-sizing: border-box;
		}

		.t-select {
			display: flex;
			padding-bottom: 30rpx;
			justify-content: center;
			align-items: center;

			.item-select {
				width: 200rpx;
				height: 68rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 400;
				font-size: 28rpx;
				color: #CCB375;
				text-align: center;
				line-height: 68rpx;
				border: 1rpx solid #CCB375;

				&.l-item {
					border-radius: 34rpx 0 0 34rpx;
				}

				&.r-item {
					border-radius: 0 34rpx 34rpx 0;
				}

				&.active {
					color: #fff;
					background: #CCB375;
				}
			}
		}

		.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;
		}


	}

	.content {

		.action {
			position: absolute;
			bottom: 0rpx;
			left: 0;
			height: 188rpx;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			width: 100vw;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.btn-tip {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #CCB375;
				margin-bottom: 14rpx;
			}

			.button {
				height: 88rpx;
				background: radial-gradient(at 0% 0%, #01243A 0%, #004576 100%);
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #ffffff;
				line-height: 88rpx;
				width: 660rpx;
				margin: 0 auto;
			}
		}

		.item-tips {
			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 500;
				color: #01243A;
				line-height: 30rpx;
			}

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

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

			.bg {
				background: #F5F9FB;
				border-radius: 10rpx;
				padding: 40rpx 30rpx;
				display: flex;
				justify-content: space-between;

				.name {
					padding-top: 30rpx;
					font-size: 32rpx;
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					color: #111;
					line-height: 34rpx;
				}

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

				.tip {
					margin-top: 20rpx;
					text-align: center;
					width: 100rpx;
					height: 30rpx;
					border-radius: 6rpx;
					border: 1rpx solid #CCB375;

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

			.icon {
				width: 304rpx;
				height: 190rpx;
				background-image: var(--bgimg);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}

		.shibie-wrapper,
		.card-box {
			margin-top: 30rpx;
			border-radius: 12rpx;
			background-color: #fff;
			width: 100%;
			padding: 30rpx 30rpx 0;
			box-sizing: border-box;

			.title {
				font-size: 30rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				color: #01243A;
				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: #999;
			line-height: 24rpx;
			margin-bottom: 60rpx;
		}
	}

	.down {
		background: #CCB375;
		color: #fff;
		border-radius: 5rpx;
		font-size: 20rpx;
		margin-top: 10rpx;
		width: 100rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
	}
</style>