zhywpt-sp/subpackage/personal-center/setting/personal-information/change-user-info.vue

<template>
	
	<view class="item-tips">
		<view class="title"> 上传后请核对识别信息 </view>
		<view class="tip"> 如有错误请及时手动修改 </view>
	</view>
		
	<view class="content" v-if="state.userType == '1'">
		
		<view class="h2-title">用户证件信息</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="!submitForm.idCardFront" class="icon" :src="`${$imgUrl}issuance/sfz.png`">
				</image>
				<image v-else class="icon" :src="getFullImageUrl(submitForm.idCardFront)"></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="!submitForm.idCardBack" class="icon" :src="`${$imgUrl}issuance/sff.png`">
				</image>
				<image v-else class="icon" :src="getFullImageUrl(submitForm.idCardBack)"></image>
			</view>
		</view>
	</view>
	
	<template v-else-if="state.userType == '2'">
		<view class="content">
			
			<view class="h2-title">单位证件信息</view>
			
			<view class="picture-wrapper" @click="takePhotoMode(5)">
				<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="!submitForm.idCardFront" class="icon" :src="`${$imgUrl}applyCard/zhizhao.png`">
					</image>
					<image v-else class="icon" :src="getFullImageUrl(submitForm.idCardFront)"></image>
				</view>
			</view>
		</view>
		
		<view class="content" >
			<view class="h2-title">经办人身份信息</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="!submitForm.agentIdCardFront" class="icon" :src="`${$imgUrl}issuance/sfz.png`">
					</image>
					<image v-else class="icon" :src="getFullImageUrl(submitForm.agentIdCardFront)"></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="!submitForm.agentIdCardBack" class="icon" :src="`${$imgUrl}issuance/sff.png`">
					</image>
					<image v-else class="icon" :src="getFullImageUrl(submitForm.agentIdCardBack)"></image>
				</view>
			</view>
		</view>
	</template>
		
	<view class="shibie-wrapper">
		<u-form label-width="230" :model="submitForm" ref="myForm" :label-style='labelStyle'>
			<view class="from">
				<u-form-item prop="name" :label="state.userType == '2' ? '单位名称' : '姓名'">
					<u-input v-model="submitForm.name" class="input" :placeholder="state.userType == '2' ? '请输入单位名称' : '请输入姓名'" inputAlign="right" />
				</u-form-item>
				<u-form-item prop="idNo" label="证件号">
					<u-input v-model="submitForm.idNo" class="input" placeholder="请输入证件号" inputAlign="right" />
				</u-form-item>
				<template v-if="state.userType == '1'">
					<u-form-item prop="address" label="身份证地址" >
						<u-input v-model="submitForm.address" class="input" placeholder="请输入身份证地址" inputAlign="right" />
					</u-form-item>
					<u-form-item prop="tel" label="手机号">
						<u-input v-model="submitForm.tel" class="input" placeholder="请输入手机号" inputAlign="right" />
					</u-form-item>
					<u-form-item prop="verifyCode" label="验证码" v-if="state.phoneStore !== submitForm.tel">
						<view class="from_item no-border">
							<u-input v-model="submitForm.verifyCode" placeholder="请输入验证码" class="input" inputAlign="right"  type="number" />
							<view class="hint2">
								<view class="green">{{ codeDuration === 0 ? "" : codeDuration }}</view>
								<view class="grey" @click="getCode">{{ codeDuration === 0 ? "发送验证码" : "秒后可重发" }}</view>
							</view>
						</view>
					</u-form-item>
				</template>
			</view>
		</u-form>
	</view>
	
	<view class="shibie-wrapper" v-if="state.userType == '2'">
		<u-form label-width="230" :model="submitForm" ref="myForm" :label-style='labelStyle'>
			<view class="from">
				<u-form-item prop="agentName" label="经办人姓名">
					<u-input v-model="submitForm.agentName" class="input" placeholder="请输入经办人姓名" inputAlign="right" />
				</u-form-item>
				<u-form-item prop="agentIdNo" label="经办人证件号">
					<u-input v-model="submitForm.agentIdNo" class="input" placeholder="请输入经办人证件号" inputAlign="right" />
				</u-form-item>
				<u-form-item prop="tel" label="手机号">
					<u-input v-model="submitForm.tel" class="input" placeholder="请输入手机号" inputAlign="right" />
				</u-form-item>
				<u-form-item prop="verifyCode" label="验证码" v-if="state.phoneStore !== submitForm.tel">
					<view class="from_item no-border">
						<u-input v-model="submitForm.verifyCode" placeholder="请输入验证码" class="input" inputAlign="right"  type="number" />
						<view class="hint2">
							<view class="green">{{ codeDuration === 0 ? "" : codeDuration }}</view>
							<view class="grey" @click="getCode">{{ codeDuration === 0 ? "发送验证码" : "秒后可重发" }}</view>
						</view>
					</view>
				</u-form-item>
			</view>
		</u-form>
	</view>
	
	<FixedFooter>
		<button type="default" class="ui-btn" @click="submit">提交</button>
	</FixedFooter>
	
	<!--证件照上传 start-->
	<uploadImg
		:isTakePhotoModeShow="state.isTakePhotoModeShow"
		:phoneType="state.choiceIndex"
		@close="close"
		@ocrResult="ocrResult">
	</uploadImg>
	<!--证件照上传 end-->
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { onReady, onLoad } from "@dcloudio/uni-app";
	import uploadImg from '@/components/uploadOcr';
	import { msg, getFullImageUrl, compareDates, checkStr } from "@/utils/utils";
	import { changeUserInfo, sendMessage, getUserMsg, getCustomerDetail, userInfoIndex } from '@/utils/network/api'
	import { requestNew } from "@/utils/network/request.js";
	import FixedFooter from '@/components/common/FixedFooter'
	import { getItem } from '@/utils/storage'
	
	interface OCRData {
		imageUrl: string,
		bizContent: string,
		screditCode: string,
		enddate: string
	}
	//倒计时时常
	const codeDuration = ref(0);
	let interval = null;
	const myForm = ref(null);
	
	const userInfo = getItem('userInfo')
	
	const state = reactive({
		isTakePhotoModeShow: false,
		choiceIndex: 1,  // 1 身份证正面  2 身份证反面 3：营业执照正面
		userType: '1', // 用户类型 1：个人用户  2: 公司用户
		phoneStore: ''
	})
	
	const labelStyle = {
		color: "#004576",
		fontSize: "28rpx",
	}
	
	const submitForm = reactive({
		name: '',
		idNo: '',
		address: '',
		agentName: '', // 经办人
		agentIdNo: '',
		idCardFront: '',
		idCardBack: '',
		agentIdCardFront: '',
		agentIdCardBack	: '',
		tel: '',
		verifyCode: '',
		mobileChange: 1, // 默认为否 1： 否 2：是
		type: '1', // 1：个人 2：单位
		vld: '',
		customerId: userInfo.customerId
	})
	
	onLoad(() => {
		getUserInfo()
	})
	
	const submit = () => {
		
		if (!paramsVerify()) return
		
		let params = JSON.parse(JSON.stringify(submitForm))
		if (params.tel !== state.phoneStore) {
			params.mobileChange = 2
		}
		let option = {
			type: 2,
			data: params,
			method: "POST",
			showLoading: true,
		}
		requestNew(changeUserInfo, option).then(res => {
			uni.navigateTo({
				url: '/pages/common/submit-result'
			})
		})
	}
	
	// 字段校验
	const paramsVerify = () => {
		// 个人类型修改信息
		if (state.userType === '1') {
			if (!submitForm.idCardFront) {
				msg('请上传证件正面照')
				return false
			} else if (!submitForm.idCardBack) {
				msg('请上传证件反面照')
				return false
			} else if (!submitForm.name) {
				msg('请填写证件姓名')
				return false
			} else if (!submitForm.idNo) {
				msg('请填写证件号')
				return false
			} else if (!submitForm.tel) {
				msg('请填写手机号')
				return false
			} else if (submitForm.tel !== state.phoneStore && !submitForm.verifyCode) {
				msg('请填写验证码')
				return false
			}
			return true
		} else if (state.userType === '2') {
			if (!submitForm.idCardFront) {
				msg('请上传证件正面照')
				return false
			} else if (!submitForm.name) {
				msg('请填写证件姓名')
				return false
			} else if (!submitForm.idNo) {
				msg('请填写证件号')
				return false
			} else if (!submitForm.tel) {
				msg('请填写手机号')
				return false
			} else if (submitForm.tel !== state.phoneStore && !submitForm.verifyCode) {
				msg('请填写验证码')
				return false
			} else if (!submitForm.agentIdCardFront) {
				msg('请上传经办人身份证正面照')
				return false
			} else if (!submitForm.agentIdCardBack) {
				msg('请上传经办人身份证反面照')
				return false
			}
			return true
		}
	}
	
	// 获取用户详情
	const getUserInfo = () => {
		let option = {
			type: 2,
			data: {
				customerId: userInfo.customerId // 测试Id：52010125072300301
			},
			method: "POST",
			showLoading: true,
		}
		requestNew(getCustomerDetail, option).then(res => {
			state.userType = submitForm.type = res.userType === 'PERSONAL_USER' ? '1' : '2'
			state.phoneStore = submitForm.tel = res.customerTel
			if (state.userType === '1') {
				submitForm.name = res.customerName
				submitForm.idNo = res.channelId
				submitForm.address = res.customerAddress
				submitForm.idCardFront = res.customerPosImgUrl
				submitForm.idCardBack = res.customerNegImgUrl
				submitForm.vld = res.customerVid
			} else if (state.userType === '2') {
				submitForm.name = res.customerName
				submitForm.idNo = res.channelId
				submitForm.address = res.customerAddress
				submitForm.idCardFront = res.customerPosImgUrl
				submitForm.agentName = res.agentName
				submitForm.agentIdNo = res.agentIdNum
				submitForm.agentIdCardFront = res.agentPosImgUrl
				submitForm.agentIdCardBack = res.agentNegImgUrl
			}
		})
	}
	
	const close = (e) => {
		state.isTakePhotoModeShow = e
	}
	
	const takePhotoMode = (index: number) => {
		state.isTakePhotoModeShow = true
		state.choiceIndex = index
	}
	
	const ocrResult = (data: OCRData) => {
		let bizContent = data.bizContent = data.bizContent ? JSON.parse(data.bizContent) : {}
		if (state.choiceIndex === 1) {
			if (!bizContent.idno) {
				msg('识别失败，请重新上传')
			} else {
				if (state.userType === '1') {
					submitForm.name = bizContent.name;
					submitForm.address = bizContent.address;
					submitForm.idNo = bizContent.idno;
					submitForm.idCardFront = data.imageUrl;
				} else {
					submitForm.agentName = bizContent.name;
					submitForm.agentIdNo = bizContent.idno;
					submitForm.agentIdCardFront = data.imageUrl;
				}
			}
		} else if (state.choiceIndex === 2) {
			if (!bizContent.begindate) {
				msg('识别失败，请重新上传')
			} else {
				if (state.userType === '1') {
					submitForm.idCardBack = data.imageUrl;
					submitForm.vld = data.enddate
					compareDates(data.enddate)
				} else {
					submitForm.agentIdCardBack = data.imageUrl;
				}
			}
		} else if (state.choiceIndex === 5) {
			submitForm.name = bizContent.unitName;
			submitForm.idNo = bizContent.screditCode;
			submitForm.idCardFront = data.imageUrl
		}
	}
	
	// 发送验证码
	const getCode = () => {
		if (codeDuration.value !== 0) {
			return;
		}
		if (!submitForm.tel) {
			msg("请输入手机号！");
			return;
		}
		if (!checkStr(submitForm.tel, "mobile")) {
		  msg("请输入正确的手机号！");
		  return;
		}
		const options = {
			type: 2,
			data: {
				mobile: submitForm.tel,
				businessType: 3
			},
			method: "POST",
			showLoading: true,
		};
		requestNew(sendMessage, options)
			.then(() => {
				codeInterval();

				msg("验证码发送成功！");
			})
			.catch((err) => {
				console.log(err);
			});
	}
	
	/* 验证码倒计时 */
	const codeInterval = () => {
		codeDuration.value = 60;
		interval = setInterval(() => {
			codeDuration.value--;
			if (codeDuration.value === 0) {
				if (interval) {
					clearInterval(interval);
					interval = null;
				}
			}
		}, 1000);
	};
	
</script>

<style lang="scss" scoped>
	.content{
		padding: 30rpx 30rpx;
		background-color: #FFFFFF;
		margin: 30rpx 30rpx 0;
		border-radius: 12rpx;
		.h2-title{
			font-size: 30rpx;
			font-weight: bold;
		}
	}
	.item-tips {
		margin: 24rpx 30rpx;
		.title {
			font-size: 30rpx;
			font-family: Microsoft YaHei;
			font-weight: 500;
			line-height: 30rpx;
			color: #CCB375;
		}
	
		.tip {
			margin-top: 16rpx;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #999999;
			line-height: 24rpx;
		}
	}
	
	.picture-wrapper {
		margin: 30rpx 0 0;
		.bg {
			background: #F5F9FB;
			border-radius: 10rpx;
			padding: 40rpx 30rpx;
			display: flex;
			// align-items: center;
			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;
				// background: rgba(204, 179, 117);
				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 {
		margin: 30rpx 30rpx;
		border-radius: 12rpx;
		background-color: #fff;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.from {
		background-color: #fff;
		padding: 24rpx 30rpx;
	
		::v-deep .u-form-item {
			padding: 0;
			line-height: normal;
	
			.u-form-item__message {
				margin-bottom: 12rpx;
			}
		}
	
		.from_item {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			border-bottom: 1rpx solid #dcdcdc;
	
			.btn {
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ffffff;
				background: #00b38b;
				border-radius: 10rpx;
				padding: 10rpx 15rpx;
			}
	
			::v-deep .input {
				text-align: left;
				flex: 1;
				background: transparent;
	
				input {
					text-align: left;
				}
			}
		}
		.no-border{
			border-color: transparent;
		}
	}
</style>