zhapp/components/uni-OCRUploadPopup/uni-OCRUploadPopup.vue

<template>
	<view class='uni-page'>
		<u-popup :show="OCRUploadPopup" @close="close" closeable round="20rpx">
			<view class="dis dis header a-end j-c">
				<u-tabs :list="list" @click="click" :activeStyle="{color:'#333',fontWeight:'bold'}"
					:inactiveStyle="{color:'#999'}" :current="current" :scrollable="false" lineColor="#FDE935"
					lineWidth="150rpx"></u-tabs>
			</view>
			<view class="content">
				<template v-if="checkType=='carInfo'">
					<view class="img" v-if="current==0">
						<image :src="carfrontImg?carfrontImg:'/static/image/carbackimg.png'" mode=""
							@click="carfrontChange"></image>
					</view>
					<view class="img" v-else>
						<image :src="carbackImg?carbackImg:'/static/image/carbackimg.png'" mode=""
							@click="carbackChange">
						</image>
					</view>
				</template>
				<template v-else>
					<view class="img" v-if="current==0">
						<image :src="userfrontImg?userfrontImg:'/static/image/carbackimg.png'" mode=""
							@click="userfrontChange"></image>
					</view>
					<view class="img" v-else>
						<image :src="userbackImg?userbackImg:'/static/image/carbackimg.png'" mode=""
							@click="userbackChange">
						</image>
					</view>
				</template>
				<view class="footer dis a-c j-s mt-2">
					<u-button class="btn" type="primary" text="关闭" shape="circle" plain color="#FDE935"
						:hairline="false" style="margin-right: 20px;" @click="close"></u-button>
					<u-button class="btn" type="primary" text="确定" shape="circle" color="#FDE935"
						v-if="checkType=='carInfo'" :disabled="!carfrontImg && !carbackImg" :hairline="false"
						@click="ocrInt"></u-button>
					<u-button class="btn" type="primary" text="确定" shape="circle" color="#FDE935"
						v-if="checkType=='ownerInfo'" :disabled="!userfrontImg && !userbackImg" :hairline="false"
						@click="ownerInfoInt"></u-button>
					<u-button class="btn" type="primary" text="确定" shape="circle" color="#FDE935"
						v-if="checkType=='policyHolderInfo'" :disabled="!userfrontImg && !userbackImg" :hairline="false"
						@click="policyHolderInfoInt"></u-button>
					<u-button class="btn" type="primary" text="确定" shape="circle" color="#FDE935"
						v-if="checkType=='insuredPersonInfo'" :disabled="!userfrontImg && !userbackImg"
						:hairline="false" @click="insuredPersonInfoInt"></u-button>
				</view>
			</view>

		</u-popup>
	</view>
</template>
<script>
	import store from '@/store';
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => []
			},
			checkType: {
				type: String,
				default: 'carInfo'
			}
		},
		data() {
			return {
				OCRUploadPopup: this.show,
				current: 0,
				carfrontImg: null,
				carbackImg: null,
				carInfoPositiveList: [],
				carfront: {},
				carback: {},
				userfront: {},
				userback: {},
				userfrontImg: null,
				userbackImg: null,
				ownerInfoPositiveList: [],
				applicantInfoPositiveList: [],
				InsuredInfoPositiveList: [],
			}
		},
		watch: {
			show(newVal) {
				this.OCRUploadPopup = newVal
			}
		},
		onShow() {},
		onLoad() {

		},
		methods: {
			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 frontImg = this.carfrontImg;
					let backImg = this.carbackImg;
					this.$emit('carCallback', {
						Info,
						ImgList,
						frontImg,
						backImg,
					});
					this.userfrontImg = '';
					this.userbackImg = '';
					this.carfrontImg = '';
					this.carbackImg = '';
					this.current = 0;
				}
			},
			ownerInfoInt() {
				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 frontImg = this.userfrontImg;
					let backImg = this.userbackImg;
					this.$emit('ownerInfoCallback', {
						Info,
						ImgList,
						frontImg,
						backImg,
					});
					this.userfrontImg = '';
					this.userbackImg = '';
					this.carfrontImg = '';
					this.carbackImg = '';
					this.current = 0;
				}
			},
			policyHolderInfoInt() {
				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 frontImg = this.userfrontImg;
					let backImg = this.userbackImg;
					this.$emit('applicantInfoCallback', {
						Info,
						ImgList,
						frontImg,
						backImg,
					});
					this.userfrontImg = '';
					this.userbackImg = '';
					this.carfrontImg = '';
					this.carbackImg = '';
					this.current = 0;
				}
			},
			insuredPersonInfoInt() {
				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 frontImg = this.userfrontImg;
					let backImg = this.userbackImg;
					this.$emit('InsuredInfoCallback', {
						Info,
						ImgList,
						frontImg,
						backImg,
					});
					this.userfrontImg = '';
					this.userbackImg = '';
					this.carfrontImg = '';
					this.carbackImg = '';
					this.current = 0;
				}
			},
			click(item) {
				this.current = item.index;
			},
			close() {
				this.current = 0;
				this.$emit('close')
			},
			isEmptyObject(obj) {
				return JSON.stringify(obj) === '{}';
			},
			//car正面
			async carfrontChange() {
				console.log(store.state);
				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.carfrontImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/file/upload',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "file",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: store.state.token,
							system_code: store.state.system_code ? store.state.system_code : ''
						},
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							console.log(data);
							if (data.code == '200') {
								if (this.carInfoPositiveList.some(v => v.imageCode == 'C01')) {
									this.carInfoPositiveList.map(val => {
										if (val.imageCode == 'C01') {
											val.imageBase64List[0].imageId = data.data.id;
										}
									})
								} else {
									this.carInfoPositiveList.push({
										imageBase64List: [{
											imageId: data.data.id
										}],
										imageCode: "C01",
									})
								}
								uni.uploadFile({
									url: this.$base.baseUrl + '/order/identify/drivingPermit',
									filePath: chooseImageRes.tempFilePaths[0],
									name: "image1",
									header: {
										Authorization: store.state.token,
										system_code: store.state.system_code ? store.state
											.system_code : ''
									},
									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, //车牌号
											brandName: data.carInfo.backOcrID, //品牌型号
											frameNo: data.carInfo.vin, //车架号
											engineNo: data.carInfo.engine, //发动机号
											vinNo: data.carInfo.vin, //车架号
											issueDate: isdate, //发证日期
											registerDate: rdate, //注册日期
											carKindCode: data.carInfo
												.plateType, //车辆种类
											carTypeCode: data.carInfo.category, //车辆类型
											carnature: data.carInfo.useNature,
											vehicleUseCode: data.carInfo
												.vehicleUse, //车辆用途

										}
									}
								});
							}

						}
					});
				} else {}
			},
			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.carbackImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/file/upload',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "file",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: store.state.token,
							system_code: store.state.system_code ? store.state.system_code : ''
						},
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == '200') {
								if (this.carInfoPositiveList.some(v => v.imageCode == 'D01')) {
									this.carInfoPositiveList.map(val => {
										if (val.imageCode == 'C01') {
											val.imageBase64List[0].imageId = data.data.id;
										}
									})
								} else {
									this.carInfoPositiveList.push({
										imageBase64List: [{
											imageId: data.data.id
										}],
										imageCode: "D01",
									})
								}
								uni.uploadFile({
									url: this.$base.baseUrl + '/order/identify/drivingPermit',
									filePath: chooseImageRes.tempFilePaths[0],
									name: "image2",
									header: {
										Authorization: store.state.token,
										system_code: store.state.system_code ? store.state
											.system_code : ''
									},
									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, //核定载质量
										}
									}
								});

							}

						}
					});
				} else {}
			},
			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.userfrontImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/file/upload',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "file",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: store.state.token,
							system_code: store.state.system_code ? store.state.system_code : ''
						},
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == '200') {
								switch (this.checkType) {
									case 'ownerInfo':
										if (this.ownerInfoPositiveList.some(v => v.imageCode == 'C02')) {
											this.ownerInfoPositiveList.map(val => {
												if (val.imageCode == 'C02') {
													val.imageBase64List[0].imageId = data.data.id;
												}
											})
										} else {
											this.ownerInfoPositiveList.push({
												imageBase64List: [{
													imageId: data.data.id
												}],
												imageCode: "C02",
											})
										}
										break;
									case 'policyHolderInfo':
										if (this.applicantInfoPositiveList.some(v => v.imageCode ==
												'C03')) {
											this.applicantInfoPositiveList.map(val => {
												if (val.imageCode == 'C03') {
													val.imageBase64List[0].imageId = data.data.id;
												}
											})
										} else {
											this.applicantInfoPositiveList.push({
												imageBase64List: [{
													imageId: data.data.id
												}],
												imageCode: "C03",
											})
										}
										break;
									case 'insuredPersonInfo':
										if (this.InsuredInfoPositiveList.some(v => v.imageCode == 'C04')) {
											this.InsuredInfoPositiveList.map(val => {
												if (val.imageCode == 'C04') {
													val.imageBase64List[0].imageId = data.data.id;
												}
											})
										} else {
											this.InsuredInfoPositiveList.push({
												imageBase64List: [{
													imageId: data.data.id
												}],
												imageCode: "C04",
											})
										}
										break;
									default:
										break;
								};

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

						}
					});
				} else {}
			},
			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.userbackImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/file/upload',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "file",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: store.state.token,
							system_code: store.state.system_code ? store.state.system_code : ''
						},
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == '200') {
								switch (this.checkType) {
									case 'ownerInfo':
										if (this.ownerInfoPositiveList.some(v => v.imageCode == 'D02')) {
											this.ownerInfoPositiveList.map(val => {
												if (val.imageCode == 'D02') {
													val.imageBase64List[0].imageId = data.data.id;
												}
											})
										} else {
											this.ownerInfoPositiveList.push({
												imageBase64List: [{
													imageId: data.data.id
												}],
												imageCode: "D02",
											})
										}
										break;
									case 'policyHolderInfo':
										if (this.applicantInfoPositiveList.some(v => v.imageCode ==
												'D03')) {
											this.applicantInfoPositiveList.map(val => {
												if (val.imageCode == 'D03') {
													val.imageBase64List[0].imageId = data.data.id;
												}
											})
										} else {
											this.applicantInfoPositiveList.push({
												imageBase64List: [{
													imageId: data.data.id
												}],
												imageCode: "D03",
											})
										}
										break;
									case 'insuredPersonInfo':
										if (this.InsuredInfoPositiveList.some(v => v.imageCode == 'D04')) {
											this.InsuredInfoPositiveList.map(val => {
												if (val.imageCode == 'D04') {
													val.imageBase64List[0].imageId = data.data.id;
												}
											})
										} else {
											this.InsuredInfoPositiveList.push({
												imageBase64List: [{
													imageId: data.data.id
												}],
												imageCode: "D04",
											})
										}
										break;
									default:
										break;
								};
								uni.uploadFile({
									url: this.$base.baseUrl + '/order/identify/idCard',
									filePath: chooseImageRes.tempFilePaths[0],
									name: "image2",
									header: {
										Authorization: store.state.token,
										system_code: store.state.system_code ? store.state
											.system_code : ''
									},
									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 ==
												'长期--' ? '9999-12-31' :
												identifyValidEndDate, //止期
										}
									}
								});

							}

						}
					});
				} else {}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.header {
		padding: 4rpx 27rpx;

	}

	.content {
		padding: 40rpx 60rpx;

		.img {
			image {
				width: 100%;
				height: 360rpx;
			}
		}

		.footer {
			.btn {
				color: #1F1F1F !important;
			}
		}
	}
</style>