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

<template>
	<view class="content">
		<view class="item-tips">

			<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 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="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 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>
	<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 setup lang="ts">
	import {
		ref,
		reactive
	} from "vue";
	import {
		navTo, uploadFile
	} from "@/utils/utils";
	import {
		etcOcrCard
	} from "@/utils/network/api.js";
	import {
		stringToJson
	} from "@/utils/network/encryption";
	import viewfinder from "@/components/viewfinder.vue"
	const savaHandle = () => {
		console.log("执行点击事件");
		if (state.imageUrl && state.imageUrl2) {
			navTo("/subpackage/after-sale/additional-equipment/car-change");
		} else {
			uni.showToast({
				title: "请上传图片",
				icon: "none",
			});
		}
	};


	const state = reactive({
		phoneType: 0,  // 1 身份证正面  2 身份证反面  3行驶证正面 4行驶证反面
		choiceIndex: 1,  // 1 身份证正面  2 身份证反面
		isTakePhotoModeShow: false,  //选择拍照方式是否出来
		images: '',
		showImg: true,
		ocrData: {
			name: "",
			gender: "",
			idno: "",
			address: "",
			phone: "18225525252",
			termValidity: "",
		},
		isMyPeopple: true,
		imageUrl: "",
		imageUrl2: "",
	});


	const form_ref = ref()
	// 验证规则
	const rules = {
		name: {
			rules: [{
				required: true,
				errorMessage: '请输入',
			}]
		},
		bankID: {
			rules: [{
				required: true,
				errorMessage: '请输入',
			}]
		},
		phone: {
			rules: [{
				required: true,
				errorMessage: '请输入',
			}]
		},
	}
	const takePhotoMode = (index, isMy) => {
		console.log("index", index, isMy)
		state.isTakePhotoModeShow = true
		state.choiceIndex = index
		state.isMy = isMy
	}
	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
				console.log("tempFilePaths[0].startsWith('file://')", res.tempFilePaths[0], res.tempFilePaths[0].startsWith('file://'))

			},
		})
	}
	const takePhoto = (val) => {
		state.showImg = true
		console.log("拍照", val)
		state.phoneType = val;
	}
	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) => {
			console.log("身份证上传", data)
			if (state.choiceIndex == 1) {
				state.imageUrl = data.imageUrl;
				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;
				state.imageUrl2 = data.imageUrl;
			}
			state.isTakePhotoModeShow = false
		})
	}
	const cancle = () => {
		state.isTakePhotoModeShow = false
	}
</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;
				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;
			}

			.from1 {

				background-color: #fff;
				margin-top: 30rpx;

				::v-deep .uni-forms-item {
					border-bottom: 1rpx solid #ccc;
					padding: 15rpx 0;
					margin-bottom: 0;

					.uni-forms-item__label {
						font-size: 28rpx;
						height: 50rpx;
					}

					.uni-forms-item__content {
						display: flex;
					}

					.uni-easyinput__content-input {
						font-size: 28rpx;
						height: 50rpx;

					}
				}

				.btn {
					line-height: 38rpx;
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
					background: #00B38B;
					border-radius: 10rpx;
					padding: 10rpx 15rpx
				}
			}
		}

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