zhywpt-sp/subpackage/after-sale/replace-equipment/base-change-people.vue

<template>
	<view class="content">
		<view class="item-tips">
			<view class="picture-wrapper" @click="IdentityByOrc(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 class="icon" :src="`${$imgUrl}applyCard/renxiang.png`" v-if="!state.imageUrl"></image>
					<image class="icon" :src="state.imageUrl" v-else></image>
				</view>
			</view>
			<view class="picture-wrapper" @click="IdentityByOrc(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 class="icon" :src="`${$imgUrl}applyCard/guohui.png`" v-if="!state.imageUrl2"></image>
					<image class="icon" :src="state.imageUrl2" v-else></image>
				</view>
			</view>
		</view>
		<view class="shibie-wrapper">
			<view class="title"> 个人信息 </view>
			<view class="">
				<u-field required labelWidth="200" v-model="state.ocrData.name" input-align="right" label="姓名" disabled>
				</u-field>
				<u-field required labelWidth="200" v-model="state.ocrData.gender" input-align="right" label="性别" disabled>
				</u-field>
				<u-field required labelWidth="200" v-model="state.ocrData.idno" input-align="right" label="证件号" disabled>
				</u-field>
				<u-field required labelWidth="200" v-model="state.ocrData.address" input-align="right" label="地址" disabled>
				</u-field>
				<u-field required labelWidth="200" v-model="state.ocrData.termValidity" input-align="right"
					label="证件有效期" disabled>
				</u-field>
				<u-field required labelWidth="200" v-model="state.ocrData.phone" input-align="right" label="联系方式" disabled>
				</u-field>
			</view>
		</view>

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

<script setup lang="ts">
	import {
		reactive
	} from "vue";
	import {
		navTo
	} from "@/utils/utils";
	import {
		etcOcrCard
	} from "@/utils/network/api.js";
	import {
		pathToBase64
	} from "@/utils/util/imageTool.js";
	import {
		stringToJson
	} from "@/utils/network/encryption";
	import {
		request
	} from "@/utils/network/request.js";
	const savaHandle = () => {
		console.log("执行点击事件");
		navTo("/subpackage/after-sale/replace-equipment/car-change");
		// uni.navigateTo({
		// 	url: '/pages/applyCard/car-release'
		// })
	};
	const tabChange = (val) => {
		if (val) {
			state.isMyPeopple = true;
		} else {
			state.isMyPeopple = false;
		}
	};

	const state = reactive({
		ocrData: {
			name: "",
			gender: "",
			idno: "",
			address: "",
			phone: "18225525252",
			termValidity: "",
		},
		isMyPeopple: true,
		buchongData: {
			conmpany: "李某一",
			type: "居民身份证",
			card: "23728347626342332",
			phone: "",
		},
		imageUrl: "",
		imageUrl2: "",
	});

	//orc身份证
	const IdentityByOrc = (imageType) => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function(res) {
				if (imageType == 1) {
					state.imageUrl = res.tempFilePaths[0];
				} else {
					state.imageUrl2 = res.tempFilePaths[0];
				}
				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);
							console.log(data);
							if (imageType == 1) {
								state.ocrData.name = data.name;
								state.ocrData.gender = data.gender;
								state.ocrData.idno = data.idno;
								state.ocrData.address = data.address;
							} else {
								state.ocrData.termValidity = data.begindate + "-" + data
									.enddate;
							}
						});
					})
					.catch((error) => {});
			},
		});
	};
</script>

<style lang="scss" scoped>
	.content {
		padding: 50rpx 30rpx 50rpx 30rpx;

		.action {
			margin-top: 60rpx;
			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;
			}

			::v-deep .u-flex {
				width: 100%;
			}

			::v-deep .u-field {
				border-bottom: 1rpx solid #DCDCDC;
			}
		}

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