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

<template>
	<view class="main" :style="{height: height+'px'}">
		<view class="content">
			<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.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="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.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.customerName" placeholder='请输入姓名' />
					</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="手机号" class="phoneBox">
						<u-input placeholder='手机号' type="number" v-model="state.form.tel" maxlength="11" />
						<u-button type="success" size="mini" @click="getCode" v-if="waitTime==0">获取验证码</u-button>
						<text class="btn" v-else>{{waitTime}}后重试</text>
					</u-form-item>
					<u-form-item label="验证码">
						<u-input placeholder='请输入验证码' type="number" v-model="state.form.newMobileCode" />
					</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>
	<view class="choice-takePhoto-wrap" v-if="state.isTakePhotoModeShow" @click="cancle">
		<view class="choice-takePhoto">
			<view @click.stop="takePhoto(state.choiceIndex)" style="border-radius: 20rpx 20rpx 0 0;">拍照</view>
			<view @click.stop="xiangce(state.choiceIndex)">从手机相册选择</view>
			<view @click.stop="cancle">取消</view>
		</view>
	</view>
	<viewfinder v-if="state.phoneType" :phoneType="state.phoneType" :images="state.images"
		:showStartPhoto="state.showImg" @confirmReturn="confirmReturn" @camera="camera"></viewfinder>
</template>

<script lang="ts" setup>
	import {
		getItem
	} from "@/utils/storage.ts"
	import {
		reactive,
		ref
	} from "vue";
	import {
		msg,
		checkStr,
		strReplace,
		uploadFile
	} from "@/utils/utils";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		etcOcrCard,
		userInfoChange,
		sendCode,
		envs,
	} from "@/utils/network/api.js";

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

	import {
		stringToJson
	} from "@/utils/network/encryption.js";
	import {
		fileURL
	} from "@/datas/fileURL.js";
	import viewfinder from "../../../../components/viewfinder.vue"
	const height = uni.getSystemInfoSync().windowHeight
	const defHeadstockImg = `${fileURL}image/applyCard/renxiang.png`;
	const defInstallImg = `${fileURL}image/applyCard/guohui.png`;


	const state = reactive({
		phoneType: 0,  // 1 身份证正面  2 身份证反面  3行驶证正面 4行驶证反面
		choiceIndex: 1,  // 1 身份证正面  2 身份证反面
		isTakePhotoModeShow: false,  //选择拍照方式是否出来
		showImg: true,
		images: "",
		genderList: [{
			value: '男',
			label: '男'
		},
		{
			value: '女',
			label: '女'
		}
		],
		codeTips: "获取验证码",
		form: {
			customerId: '', //用户编号
			customerName: "", //开户人姓名
			openId: getItem('openId'),
			userPosImgUrl: "", //身份证正面
			userNegImgUrl: "", //身份证反面
			tel: "", //开户人手机号
			address: "", //开户人地址
			newMobileCode: "" //手机号验证码

		}
	})

	const getCode = () => {
		console.log(123);
		if (checkStr(state.form.tel, "mobile")) {
			sendCodeApi()
			codeInterval()
		} else {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			});
		}

	}
	let waitTime = ref(0)
	//倒计时函数
	const codeInterval = () => {
		waitTime.value = 60
		let timer = setInterval(() => {
			if (waitTime.value == 1) {
				clearInterval(timer)
			}
			waitTime.value -= 1
		}, 1000)
	}

	// 发送验证码
	const sendCodeApi = (type) => {
		//参数说明
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				mobile: state.form.tel
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		request(sendCode, options)
			.then((res) => {
				let data = stringToJson(res.bizContent)
				console.log(data, "#################");
				if (data.info == "成功.") {
					console.log('######################CCCCCCCCCCCCCCCCC');
				}
			})
			.catch((err) => {
				console.log(err);
			});
	}

	//下一步
	const savaHandle = () => {
		console.log(state.form);
		if (!state.form.userPosImgUrl) {
			msg("请上传身份证正面")
			return;
		}
		if (!state.form.userNegImgUrl) {
			msg("请上传身份证反面")
			return;
		}
		if (!state.form.customerName) {
			msg("请输入姓名")
			return;
		}
		if (!state.form.address) {
			msg("请输入地址")
			return;
		}
		if (!checkStr(state.form.tel, "mobile")) {
			msg("请输入正确的手机号")
			return;
		}
		if (!state.form.newMobileCode) {
			msg("请输入验证码")
			return;
		}
		const options = {
			type: 2,
			data: state.form,
			method: "POST",
			showLoading: true,
		};
		request(userInfoChange, options).then((res) => {
			const data = JSON.parse(res.bizContent)
			msg('个人信息变更成功')
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				});
			}, 1500)
			console.log(data);
		});
	}

	onLoad((options) => {
		console.log(options.customerId);
		state.form.customerId = options.customerId
	})
	const takePhotoMode = (index) => {
		console.log("index", index)
		state.isTakePhotoModeShow = true
		state.choiceIndex = index
	}
	const camera = () => {
		state.phoneType = 0
	}
	const xiangce = (val) => {
		console.log("val", val)
		var imageType = val;
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["album"], //从相册选择
			success: function (res) {
				state.showImg = false
				state.images = res.tempFilePaths[0]
				state.phoneType = state.choiceIndex
				state.isTakePhotoModeShow = false
			},
		})
	}
	const takePhoto = (val) => {
		console.log("拍照", val)
		state.phoneType = val;
		state.showImg = true;
	}
	const confirmReturn = (val) => {
		state.phoneType = 0
		state.isTakePhotoModeShow = false
		var imageType = state.choiceIndex;
		console.log("图片地址val", val.tempImagePath)
		uploadFile(val.tempImagePath, imageType, etcOcrCard).then((data) => {
			if (state.choiceIndex === "1") {
				state.form.customerName = data.name;
				state.form.userPosImgUrl = data.imageUrl;
				state.form.address = data.address;
			} else {
				state.form.customerIdVld = data.enddate;
				state.form.userNegImgUrl = data.imageUrl;
			}
			state.isTakePhotoModeShow = false
		})
	}
	const cancle = () => {
		state.isTakePhotoModeShow = false
	}
</script>

<style>
	page {
		background: #eef7f7;
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-size-mini {
		white-space: nowrap;
	}

	.main {
		.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;
					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: 40rpx;
				background: #fff;
				padding: 40rpx 30rpx;
				border-radius: 20rpx;
				box-shadow: 0 4rpx 13rpx 3rpx rgba(223, 223, 223, .8);

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

				.phoneBox {
					::v-deep .u-form-item--right__content__slot {
						display: flex;

						.btn {
							flex: 1;
							background: transparent;
							font-size: 30rpx;
							color: #15E5C1;
							z-index: 999;

						}
					}
				}
			}

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

	.choice-takePhoto {
		position: absolute;
		bottom: 0;
		background-color: white;
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
	}

	.choice-takePhoto>view:first-child {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx solid rgba(127, 127, 127, 0.3);
		background-color: white;
	}

	.choice-takePhoto>view:last-child {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-top: 6rpx solid rgba(127, 127, 127, 0.1);
		background-color: white;
	}

	.choice-takePhoto>view {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		background-color: white;
	}

	.choice-takePhoto-wrap {
		width: 100%;
		height: 100vh;
		background-color: rgba(127, 127, 127, 0.2);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 11111;
	}
</style>