partnerApp/components/modules/carInsure/OCRComponent/OCRComponent.vue

<template>
	<view class="page">

		<u-popup v-model="ShowModal" :mode="mode" @close="close" :border-radius="borderRadius" :zoom="zoom">
			<view class="stips">
				<view class="tabs">
					<u-tabs style="justify-content: flex-start;" :list="tabslist" :show-bar="false"
						active-color="#232832" :is-scroll="false" :current="tabsCurrent" @change="tabschange"
						bar-width="60"></u-tabs>
				</view>
				<view class="upload dis j-s">
					<template v-if="checkType=='carInfo'">
						<view class="imgOcr-border">
							<image :src=" carfrontImg?carfrontImg:'/static/image/car-insure/carfront.png'" mode=""
								@click="carfrontChange"></image>
						</view>
						<view class="imgOcr-border">
							<image :src="carbackImg?carbackImg:'/static/image/car-insure/carback.png'" mode=""
								@click="carbackChange"></image>
						</view>
					</template>
					<template v-else>
						<view class="imgOcr-border">
							<image :src=" userfrontImg?userfrontImg:'/static/image/car-insure/userfront.png'" mode=""
								@click="userfrontChange"></image>
						</view>
						<view class="imgOcr-border">
							<image :src="userbackImg?userbackImg:'/static/image/car-insure/userback.png'" mode=""
								@click="userbackChange"></image>
						</view>
					</template>
				</view>
				<view class="operateBtn dis ">
					<view class="cancel dis a-c j-c" @click="ShowModal=false">
						关闭
					</view>
					<view v-if="checkType=='carInfo'" class="confirm dis a-c j-c" @click="ocrInt">
						识别
					</view>
					<view v-if="checkType=='ownerInfo'" class="confirm dis a-c j-c" @click="userocrInt1">
						识别
					</view>
					<view v-if="checkType=='policyHolderInfo'" class="confirm dis a-c j-c" @click="userocrInt2">
						识别
					</view>
					<view v-if="checkType=='insuredPersonInfo'" class="confirm dis a-c j-c" @click="userocrInt3">
						识别
					</view>
				</view>
			</view>
		</u-popup>
		<view class="mask mask-show" v-if="lodingshow">
			<!-- 加载动画开始 -->
			<view class="preloader">
				<view class="loader"></view>
			</view>
			<!-- 加载动画结束 -->
			<view class="title">加载中...</view>
		</view>
	</view>
</template>

<script>
	import {
		getAgeByIdCard,
		addressCode,
	} from '@/plugins/utils';
	import store from '@/store';
	import {
		props
	} from 'bluebird';
	export default {
		name: 'name', //插件名称
		props: {
			showModal: {
				type: Boolean,
				required: true
			},
			mode: {
				type: String,
				default: 'bottom'
			},
			borderRadius: {
				type: String,
				default: '16'
			},
			zoom: {
				type: Boolean,
				default: false,
			},
			tabsCurrent: {
				type: Number,
				default: 0,
			},
			tabslist: Array,
			checkType: {
				type: String,
				required: true
			}
		},
		computed: {

		},
		data() {
			return {
				ShowModal: this.showModal,
				Current: this.tabsCurrent,
				carfrontImg: "",
				carbackImg: "",
				carInfoPositiveList: [],
				carfront: {},
				carback: {},
				userfront: {},
				userback: {},
				userfrontImg: "",
				userbackImg: "",
				ownerInfoPositiveList: [],
				applicantInfoPositiveList: [],
				InsuredInfoPositiveList: [],
				lodingshow: false,
			};
		},
		watch: {
			showModal(newVal) {
				this.ShowModal = newVal;
			},

		},
		methods: {
			isEmptyObject(obj) {
				return JSON.stringify(obj) === '{}';
			},
			userocrInt1() {
				let Info = Object.assign({}, this.userfront, this.userback)
				if (this.isEmptyObject(Info)) {
					uni.showToast({
						icon: 'none',
						title: '未检测到图片',
						duration: 1500
					});
				} else {
					let ImgList = this.ownerInfoPositiveList;
					let img = this.userfrontImg;
					this.$emit('ownerInfoCallback', {
						Info,
						ImgList,
						img,
					});
					this.userfrontImg = '';
					this.userbackImg = '';
					this.carfrontImg = '';
					this.carbackImg = '';
				}
			},
			userocrInt2() {
				let Info = Object.assign({}, this.userfront, this.userback)
				if (this.isEmptyObject(Info)) {
					uni.showToast({
						icon: 'none',
						title: '未检测到图片',
						duration: 1500
					});
				} else {
					let ImgList = this.applicantInfoPositiveList;
					let img = this.userfrontImg;
					this.$emit('applicantInfoCallback', {
						Info,
						ImgList,
						img,
					});
					this.userfrontImg = '';
					this.userbackImg = '';
					this.carfrontImg = '';
					this.carbackImg = '';
				}
			},
			userocrInt3() {
				let Info = Object.assign({}, this.userfront, this.userback)
				if (this.isEmptyObject(Info)) {
					uni.showToast({
						icon: 'none',
						title: '未检测到图片',
						duration: 1500
					});
				} else {
					let ImgList = this.InsuredInfoPositiveList;
					let img = this.userfrontImg;
					this.$emit('InsuredInfoCallback', {
						Info,
						ImgList,
						img,
					});
					this.userfrontImg = '';
					this.userbackImg = '';
					this.carfrontImg = '';
					this.carbackImg = '';
				}
			},
			ocrInt() {
				let Info = Object.assign({}, this.carfront, this.carback)
				if (this.isEmptyObject(Info)) {
					uni.showToast({
						icon: 'none',
						title: '未检测到图片',
						duration: 1500
					});
				} else {
					let ImgList = this.carInfoPositiveList;
					let img = this.carfrontImg;
					this.$emit('carCallback', {
						Info,
						ImgList,
						img,
					});
					this.userfrontImg = '';
					this.userbackImg = '';
					this.carfrontImg = '';
					this.carbackImg = '';
				}
			},
			async carfrontChange() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
				if (!size) {
					this.$refs.uToast.show({
						title: '上传图片大小不能超过 5MB!',
						type: 'error',
					})
					return false
				}
				if (chooseImageRes) {
					this.lodingshow = true;
					this.carfrontImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "multipartFile",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: store.state.token,
						},
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == '200') {
								if (this.carInfoPositiveList.some(v => v.imageType == 'C01')) {
									this.carInfoPositiveList.map(val => {
										if (val.imageType == 'C01') {
											val.imageId = data.data.id;
										}
									})
								} else {
									this.carInfoPositiveList.push({
										imageId: data.data.id,
										imageType: "C01",
									})
								}
								uni.uploadFile({
									url: this.$base.baseUrl + '/order/identify/drivingPermit',
									filePath: chooseImageRes.tempFilePaths[0],
									name: "image1",
									header: {
										Authorization: store.state.token,
									},
									success: (uploadFileRes) => {
										let data = JSON.parse(uploadFileRes.data).data;
										let rdate = '';
										if (!!data.carInfo.registerDate) {
											rdate = data.carInfo.registerDate.substr(0,
													4) +
												'-' + data.carInfo
												.registerDate.substr(4, 2) + '-' + data
												.carInfo
												.registerDate
												.substr(6,
													2)
										}
										let isdate = '';
										if (!!data.carInfo.issueDate) {
											isdate = data.carInfo.issueDate.substr(0, 4) +
												'-' + data.carInfo
												.issueDate.substr(4, 2) + '-' + data
												.carInfo
												.issueDate.substr(6, 2)
										}
										this.carfront = {
											carOwner: data.carInfo.carOwner, //车主
											licenseNo: data.carInfo.plateNo, //车牌号
											modelcname: data.carInfo.backOcrID, //品牌型号
											frameNo: data.carInfo.vin, //车架号
											engineNo: data.carInfo.engine, //发动机号
											vinNo: data.carInfo.vin, //车架号
											issueDate: isdate, //发证日期
											registerDate: rdate, //注册日期
											cimodelclass: data.carInfo
												.plateType, //车辆种类
											cartype: data.carInfo.category, //车辆类型

										}
										this.lodingshow = false;
									}
								});
							}

						}
					});
				} else {
					this.lodingshow = false;
				}
			},
			async carbackChange() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
				if (!size) {
					this.$refs.uToast.show({
						title: '上传图片大小不能超过 5MB!',
						type: 'error',
					})
					return false
				}
				if (chooseImageRes) {
					this.lodingshow = true;
					this.carbackImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "multipartFile",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: store.state.token,
						},
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == '200') {
								if (this.carInfoPositiveList.some(v => v.imageType == 'D01')) {
									this.carInfoPositiveList.map(val => {
										if (val.imageType == 'D01') {
											val.imageId = data.data.id;
										}
									})
								} else {
									this.carInfoPositiveList.push({
										imageId: data.data.id,
										imageType: "D01",
									})
								}
								uni.uploadFile({
									url: this.$base.baseUrl + '/order/identify/drivingPermit',
									filePath: chooseImageRes.tempFilePaths[0],
									name: "image2",
									header: {
										Authorization: store.state.token,
									},
									success: (uploadFileRes) => {

										let data1 = JSON.parse(uploadFileRes.data).data;
										this.carback = {
											vehicleweight: data1.carInfo
												.grossMass, //总质量
											completeKerbMass: data1.carInfo
												.unladenMass, //整备质量
											seatCount: data1.carInfo
												.approvedPassengersCapacity, //核定载客数
											limitLoad: data1.carInfo
												.limitLoad, //核定载质量
										}
										this.lodingshow = false;
									}
								});

							}

						}
					});
				} else {
					this.lodingshow = false;
				}
			},
			async userfrontChange() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});

				let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
				if (!size) {
					this.$refs.uToast.show({
						title: '上传图片大小不能超过 5MB!',
						type: 'error',
					})
					return false
				}
				if (chooseImageRes) {
					this.lodingshow = true;
					this.userfrontImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "multipartFile",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: store.state.token,
						},
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == '200') {
								switch (this.checkType) {
									case 'ownerInfo':
										if (this.ownerInfoPositiveList.some(v => v.imageType == 'C02')) {
											this.ownerInfoPositiveList.map(val => {
												if (val.imageType == 'C02') {
													val.imageId = data.data.id;
												}
											})
										} else {
											this.ownerInfoPositiveList.push({
												imageId: data.data.id,
												imageType: "C02",
											})
										}
										break;
									case 'applicantInfo':
										if (this.applicantInfoPositiveList.some(v => v.imageType ==
												'C03')) {
											this.applicantInfoPositiveList.map(val => {
												if (val.imageType == 'C03') {
													val.imageId = data.data.id;
												}
											})
										} else {
											this.applicantInfoPositiveList.push({
												imageId: data.data.id,
												imageType: "C03",
											})
										}
										break;
									case 'InsuredInfo':
										if (this.InsuredInfoPositiveList.some(v => v.imageType == 'C04')) {
											this.InsuredInfoPositiveList.map(val => {
												if (val.imageType == 'C04') {
													val.imageId = data.data.id;
												}
											})
										} else {
											this.InsuredInfoPositiveList.push({
												imageId: data.data.id,
												imageType: "C04",
											})
										}
										break;
									default:
										break;
								};

								uni.uploadFile({
									url: this.$base.baseUrl + '/order/identify/idCard',
									filePath: chooseImageRes.tempFilePaths[0],
									name: "image1",
									header: {
										Authorization: store.state.token,
									},
									success: (uploadFileRes) => {
										let data = JSON.parse(uploadFileRes.data).data;
										this.userfront = {
											age: getAgeByIdCard(data.customerInfo
												.identifyNumber),
											name: data.customerInfo.name,
											gender: data.customerInfo
												.identifyIssuedCom,
											identifyNumber: data.customerInfo
												.identifyNumber,
											addr: data.customerInfo.addr,
										}
										this.lodingshow = false;
									}
								});
							}

						}
					});
				} else {
					this.lodingshow = false;
				}
			},
			async userbackChange() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
				if (!size) {
					this.$refs.uToast.show({
						title: '上传图片大小不能超过 5MB!',
						type: 'error',
					})
					return false
				}
				if (chooseImageRes) {
					this.lodingshow = true;
					this.userbackImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "multipartFile",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: store.state.token,
						},
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == '200') {
								switch (this.checkType) {
									case 'ownerInfo':
										if (this.ownerInfoPositiveList.some(v => v.imageType == 'D02')) {
											this.ownerInfoPositiveList.map(val => {
												if (val.imageType == 'D02') {
													val.imageId = data.data.id;
												}
											})
										} else {
											this.ownerInfoPositiveList.push({
												imageId: data.data.id,
												imageType: "D02",
											})
										}
										break;
									case 'applicantInfo':
										if (this.applicantInfoPositiveList.some(v => v.imageType ==
												'D03')) {
											this.applicantInfoPositiveList.map(val => {
												if (val.imageType == 'D03') {
													val.imageId = data.data.id;
												}
											})
										} else {
											this.applicantInfoPositiveList.push({
												imageId: data.data.id,
												imageType: "D03",
											})
										}
										break;
									case 'InsuredInfo':
										if (this.InsuredInfoPositiveList.some(v => v.imageType == 'D04')) {
											this.InsuredInfoPositiveList.map(val => {
												if (val.imageType == 'D04') {
													val.imageId = data.data.id;
												}
											})
										} else {
											this.InsuredInfoPositiveList.push({
												imageId: data.data.id,
												imageType: "D04",
											})
										}
										break;
									default:
										break;
								};
								uni.uploadFile({
									url: this.$base.baseUrl + '/order/identify/idCard',
									filePath: chooseImageRes.tempFilePaths[0],
									name: "image2",
									header: {
										Authorization: store.state.token,
									},
									success: (uploadFileRes) => {
										let data1 = JSON.parse(uploadFileRes.data).data;
										let identifyValidDate = '';
										if (!!data1.customerInfo
											.identifyValidDate) {
											identifyValidDate = data1
												.customerInfo
												.identifyValidDate
												.substr(0, 4) +
												'-' + data1
												.customerInfo
												.identifyValidDate
												.substr(4, 2) + '-' +
												data1
												.customerInfo
												.identifyValidDate
												.substr(6,
													2)
										}
										let identifyValidEndDate = '';
										if (!!data1.customerInfo
											.identifyValidEndDate) {
											identifyValidEndDate =
												data1.customerInfo
												.identifyValidEndDate
												.substr(0,
													4) + '-' + data1
												.customerInfo
												.identifyValidEndDate
												.substr(4, 2) + '-' +
												data1
												.customerInfo
												.identifyValidEndDate
												.substr(6, 2)
										}
										this.userback = {
											identifyValidDate: identifyValidDate, //起期
											identifyValidEndDate: identifyValidEndDate, //止期
										}
										this.lodingshow = false;
									}
								});

							}

						}
					});
				} else {
					this.lodingshow = false;
				}
			},
			//弹框关闭
			close() {
				this.$emit('closePopup');
			},
			//tab切换
			tabschange(e) {
				this.$emit('tabschange', e);
			}

		}
	};
</script>

<!--使用scss,只在本组件生效-->
<style lang="scss" scoped>
	.tabs {
		padding: 0 15px;
		border: 1px solid #f2f2f2;
	}

	.upload {
		width: 100%;
		height: 146px;
		padding: 15px 20px;
		background-color: white;

		.imgOcr-border {
			position: relative;
			width: 48%;
			height: 100%;
			padding: 2px;
			background-color: #fff;
			box-shadow: 0px 4px 10px 0px #DAE3F4;

			image {
				width: 100%;
				border-radius: 4px;
				height: 100%;
			}

			.del_btn {
				position: absolute;
				cursor: pointer;
				position: absolute;
				top: 5rpx;
				right: 0;
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				z-index: 20;
			}
		}
	}

	.operateBtn {
		font-weight: bold;
		font-size: 16px;

		.cancel {
			width: 50%;
			height: 46px;
			color: #0052FF;
			background-color: #EAEAEA;
		}

		.confirm {
			width: 50%;
			height: 46px;
			color: #fff;
			background-color: #0052FF;
		}
	}

	.mask {
		/* pointer-events: none; */
		position: fixed;
		z-index: 99999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.mask.mask-show {
		background: rgba(255, 255, 255, 0.3);
	}

	.title {
		color: #333;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.loader {
		display: block;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 3rpx solid transparent;
		border-top-color: #9370db;
		-webkit-animation: spin 2s linear infinite;
		animation: spin 2s linear infinite;
	}

	.loader::before {
		content: "";
		position: absolute;
		top: 5rpx;
		left: 5rpx;
		right: 5rpx;
		bottom: 5rpx;
		border-radius: 50%;
		border: 3rpx solid transparent;
		border-top-color: #ba55d3;
		-webkit-animation: spin 3s linear infinite;
		animation: spin 3s linear infinite;
	}

	.loader::after {
		content: "";
		position: absolute;
		top: 15rpx;
		left: 15rpx;
		right: 15rpx;
		bottom: 15rpx;
		border-radius: 50%;
		border: 3rpx solid transparent;
		border-top-color: #ff00ff;
		-webkit-animation: spin 1.5s linear infinite;
		animation: spin 1.5s linear infinite;
	}

	@-webkit-keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
</style>