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="true" lineColor="#FDE935"
					lineWidth="100rpx"></u-tabs>
			</view>
			<view class="content">
				<!-- 车辆类型显示内容 -->
				<template v-if="checkType=='carInfo'">
					<view class="img" v-if="current==0">
						<!-- H5：拖拽上传区域。拖拽/松手事件不绑在模板上（uni-app 事件包装层取不到 dataTransfer），
							 而是走 mounted 里 document 级原生监听（见 onDocumentDragOver/onDocumentDrop）；
							 click 为点击选图兜底，data-kind 标记本区域对应的影像场景 -->
						<!-- #ifdef H5 -->
						<view class="drop-wrap" :class="{'drop-active': dragOver}" @click="chooseFile('carfront')"
							data-kind="carfront">
							<image :src="carfrontImg?carfrontImg:'/static/image/carbackimg.png'" mode=""></image>
						</view>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS || MP -->
						<image :src="carfrontImg?carfrontImg:'/static/image/carbackimg.png'" mode=""
							@click="carfrontChange"></image>
						<!-- #endif -->
					</view>
					<view class="img" v-else>
						<!-- #ifdef H5 -->
						<view class="drop-wrap" :class="{'drop-active': dragOver}" @click="chooseFile('carback')"
							data-kind="carback">
							<image :src="carbackImg?carbackImg:'/static/image/carbackimg.png'" mode=""></image>
						</view>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS || MP -->
						<image :src="carbackImg?carbackImg:'/static/image/carbackimg.png'" mode=""
							@click="carbackChange"></image>
						<!-- #endif -->
					</view>
				</template>
				<template v-else>
					<!-- 人员信息显示内容 -->
					<template v-if="current==0">
						<!-- 正反面区分按钮 -->
						<view class="user-Subsection dis a-c">
							<view class="item dis a-c j-c  " :class="[toggleModeIndex==index?'active':'']"
								v-for="(item,index) in toggleMode" :key="index" @click="Subsectionclick(index)">
								{{item.name}}
							</view>
						</view>
						<view class="img" v-if="toggleModeIndex==0">
							<!-- #ifdef H5 -->
							<view class="drop-wrap" :class="{'drop-active': dragOver}" @click="chooseFile('userfront')"
								data-kind="userfront">
								<image :src="userfrontImg?userfrontImg:'/static/image/userfrontImg.png'" mode="">
								</image>
							</view>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS || MP -->
							<image :src="userfrontImg?userfrontImg:'/static/image/userfrontImg.png'" mode=""
								@click="userfrontChange"></image>
							<!-- #endif -->
						</view>
						<view class="img" v-else>
							<!-- #ifdef H5 -->
							<view class="drop-wrap" :class="{'drop-active': dragOver}" @click="chooseFile('userback')"
								data-kind="userback">
								<image :src="userbackImg?userbackImg:'/static/image/userbackImg.png'" mode=""></image>
							</view>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS || MP -->
							<image :src="userbackImg?userbackImg:'/static/image/userbackImg.png'" mode=""
								@click="userbackChange"></image>
							<!-- #endif -->
						</view>
					</template>
					<template v-else>
						<view class="img">
							<!-- #ifdef H5 -->
							<view class="drop-wrap" :class="{'drop-active': dragOver}"
								@click="chooseFile('businessLicense')" data-kind="businessLicense">
								<image
									:src="businessLicenseImg?businessLicenseImg:'/static/image/businessLicenseimg.png'"
									mode=""></image>
							</view>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS || MP -->
							<image :src="businessLicenseImg?businessLicenseImg:'/static/image/businessLicenseimg.png'"
								mode="" @click="businessLicenseChange"></image>
							<!-- #endif -->
						</view>
					</template>

				</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 && !businessLicenseImg"
						:hairline="false" @click="ownerInfoInt"></u-button>
					<u-button class="btn" type="primary" text="确定" shape="circle" color="#FDE935"
						v-if="checkType=='policyHolderInfo'"
						:disabled="!userfrontImg && !userbackImg && !businessLicenseImg" :hairline="false"
						@click="policyHolderInfoInt"></u-button>
					<u-button class="btn" type="primary" text="确定" shape="circle" color="#FDE935"
						v-if="checkType=='insuredPersonInfo'"
						:disabled="!userfrontImg && !userbackImg && !businessLicenseImg" :hairline="false"
						@click="insuredPersonInfoInt"></u-button>
				</view>

			</view>
			<view class="loading" style="" v-if="loadingShow">
				<view class="dis f-c a-c j-c " style="height: 100%;">
					<u-loading-icon></u-loading-icon>
					<text style="color: #909399;" class="mt-1">{{ loadingText }}</text>
				</view>
			</view>
		</u-popup>

	</view>
</template>
<script>
	import store from '@/store';

	// 各影像类型的 OCR 识别结果解析（字段结构各不相同，不可互用，按 kind 隔离）
	const OCR_PARSE = {
		// 行驶证正面：车主/车牌/车架号/日期等
		carfront(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)
			}
			return {
				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, //车辆用途
			}
		},
		// 行驶证反面：总质量/整备质量/核定载客数/核定载质量
		carback(data) {
			return {
				vehicleweight: data.carInfo.grossMass, //总质量
				completeKerbMass: data.carInfo.unladenMass, //整备质量
				seatCount: data.carInfo.approvedPassengersCapacity, //核定载客数
				limitLoad: data.carInfo.limitLoad, //核定载质量
			}
		},
		// 身份证人像面
		userfront(data) {
			return {
				name: data.customerInfo.name,
				identifyNumber: data.customerInfo.identifyNumber,
				addr: data.customerInfo.addr,
			}
		},
		// 身份证国徽面
		userback(data) {
			let identifyValidDate = '';
			if (!!data.customerInfo.identifyValidDate) {
				identifyValidDate = data.customerInfo.identifyValidDate.substr(0, 4) +
					'-' + data.customerInfo.identifyValidDate.substr(4, 2) + '-' +
					data.customerInfo.identifyValidDate.substr(6, 2)
			}
			let identifyValidEndDate = '';
			if (!!data.customerInfo.identifyValidEndDate) {
				identifyValidEndDate = data.customerInfo.identifyValidEndDate.substr(0, 4) +
					'-' + data.customerInfo.identifyValidEndDate.substr(4, 2) + '-' +
					data.customerInfo.identifyValidEndDate.substr(6, 2)
			}
			return {
				identifyValidDate: identifyValidDate, //起期
				identifyValidEndDate: identifyValidEndDate == '长期--' ? '9999-12-31' : identifyValidEndDate, //止期
			}
		},
		// 营业执照
		businessLicense(data) {
			return {
				name: data.company,
				organizationCode: data.socialCreditCode, //社会信用代码
				addr: data.address,
				identifyType: "10",
				scope: data.businessScope,
				legalPerson: data.legalRepresentative,
				registeredCapital: data.registeredCapital
			}
		}
	};

	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => []
			},
			checkType: {
				type: String,
				default: 'carInfo'
			}
		},
		data() {
			return {
				loadingShow: false,
				loadingText: '加载中',
				OCRUploadPopup: this.show,
				current: 0,
				carfrontImg: null, //行驶证正面
				carbackImg: null, //行驶证反面
				carImageListId: [],
				carfront: {},
				carback: {},
				userfront: {},
				userback: {},
				userfrontImg: null, //人像面
				userbackImg: null, //国徽面
				businessLicenseImg: null, //营业执照
				businessLicenseInfo: {}, //营业执照识别内容
				ownerImageListId: [],
				policyHolderImageListId: [],
				insuredPersonImageListId: [],
				toggleMode: [{
					name: "人像面"
				}, {
					name: "国徽面",
				}],
				toggleModeIndex: 0,
				dragOver: false, //H5 拖拽悬停高亮
			}
		},
		watch: {
			show(newVal) {
				this.OCRUploadPopup = newVal
			}
		},
		onShow() {},
		onLoad() {

		},
		// #ifdef H5
		/**
		 * H5 拖拽上传：拖拽监听必须绑在 document 原生事件上，不能绑在模板（@dragover/@drop）上。
		 * 实测踩坑：uni-app H5 的模板事件经过其事件包装层，handler 收到的是包装后的标准事件对象
		 * {type, detail, target, currentTarget}，其中不含原生 DragEvent 的 dataTransfer，
		 * 导致无法取出拖入的文件（现象：悬停高亮正常、松手无反应、无报错）。
		 * document.addEventListener 绑定的是原生 DOM 监听，e.dataTransfer 一定可用；
		 * drop 时用 closest('.drop-wrap') 判定拖放目标是否落在某个上传区域内，data-kind 标记场景。
		 */
		mounted() {
			document.addEventListener('dragover', this.onDocumentDragOver);
			document.addEventListener('drop', this.onDocumentDrop);
		},
		// 组件销毁时移除监听并释放所有 blob 预览 URL（仅 H5 存在 blob: 链接）
		beforeDestroy() {
			document.removeEventListener('dragover', this.onDocumentDragOver);
			document.removeEventListener('drop', this.onDocumentDrop);
			['carfrontImg', 'carbackImg', 'userfrontImg', 'userbackImg', 'businessLicenseImg'].forEach(
				key => {
					if (this[key] && String(this[key]).indexOf('blob:') === 0) {
						URL.revokeObjectURL(this[key]);
					}
				});
		},
		// #endif
		methods: {
			/**
			 * 各 kind 的上传识别配置（配置表驱动，按 kind 隔离，互不复用）：
			 * - carfront/carback：行驶证正面/反面，imageCode 固定 C01/D01，影像列表固定 carImageListId，
			 *   OCR 接口 drivingPermit，表单名 image1/image2
			 * - userfront/userback/businessLicense：身份证人像面/国徽面/营业执照，imageCode 前缀
			 *   C/D/Y + 序号随 checkType 推导（ownerInfo=02、policyHolderInfo=03、insuredPersonInfo=04），
			 *   影像列表也随 checkType 切换（owner/policyHolder/insuredPersonImageListId）
			 * 注意：不同影像类型的 OCR 识别内容与字段结构不同，target（回填字段）与 parse（解析器）
			 * 必须按 kind 一一对应，绝不能混用——这是抽公共方法时最容易踩的坑。
			 */
			getOcrConfig(kind) {
				let suffix = '02';
				let imageList = 'ownerImageListId';
				switch (this.checkType) {
					case 'policyHolderInfo':
						suffix = '03';
						imageList = 'policyHolderImageListId';
						break;
					case 'insuredPersonInfo':
						suffix = '04';
						imageList = 'insuredPersonImageListId';
						break;
					default:
						break;
				}
				const config = {
					carfront: {
						imageCode: 'C01',
						imageList: 'carImageListId',
						ocrUrl: '/order/identify/drivingPermit',
						ocrName: 'image1',
						target: 'carfront',
						parse: OCR_PARSE.carfront,
					},
					carback: {
						imageCode: 'D01',
						imageList: 'carImageListId',
						ocrUrl: '/order/identify/drivingPermit',
						ocrName: 'image2',
						target: 'carback',
						parse: OCR_PARSE.carback,
					},
					userfront: {
						imageCode: 'C' + suffix,
						imageList: imageList,
						ocrUrl: '/order/identify/idCard',
						ocrName: 'image1',
						target: 'userfront',
						parse: OCR_PARSE.userfront,
					},
					userback: {
						imageCode: 'D' + suffix,
						imageList: imageList,
						ocrUrl: '/order/identify/idCard',
						ocrName: 'image2',
						target: 'userback',
						parse: OCR_PARSE.userback,
					},
					businessLicense: {
						imageCode: 'Y' + suffix,
						imageList: imageList,
						ocrUrl: '/order/identify/businessLicense',
						ocrName: 'image1',
						target: 'businessLicenseInfo',
						parse: OCR_PARSE.businessLicense,
					},
				};
				return config[kind];
			},
			/**
			 * 通用文件上传（两个接口共用：/file/upload 传原图、/order/identify/* 传 OCR 识别）：
			 * - H5：用 XMLHttpRequest + FormData，source 直接是 File 对象（拖拽/原生 input 拿到），
			 *   不走 uni.uploadFile（其在 H5 对 File/blob URL 的兼容性不可靠）
			 * - APP-PLUS / 小程序：用 uni.uploadFile，source 是 chooseImage 返回的临时路径
			 * 成功 resolve 服务端返回的字符串（JSON），非 2xx 状态 reject。
			 */
			uploadFileGeneric(url, source, name, formData) {
				// #ifdef H5
				return new Promise((resolve, reject) => {
					const xhr = new XMLHttpRequest();
					xhr.open('POST', url);
					xhr.setRequestHeader('Authorization', store.state.token);
					xhr.setRequestHeader('system_code', store.state.system_code ? store.state
						.system_code : '');
					const fd = new FormData();
					if (formData) {
						Object.keys(formData).forEach(key => {
							fd.append(key, formData[key]);
						});
					}
					fd.append(name, source);
					xhr.onload = () => {
						if (xhr.status >= 200 && xhr.status < 300) {
							resolve(xhr.responseText);
						} else {
							reject({
								errMsg: '上传失败: ' + xhr.status,
								statusCode: xhr.status
							});
						}
					};
					xhr.onerror = () => {
						reject({
							errMsg: '网络错误',
							statusCode: 0
						});
					};
					xhr.send(fd);
				});
				// #endif
				// #ifdef APP-PLUS || MP
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: url,
						filePath: source,
						name: name,
						formData: formData,
						header: {
							Authorization: store.state.token,
							system_code: store.state.system_code ? store.state.system_code : ''
						},
						success: (res) => {
							if (res.statusCode >= 200 && res.statusCode < 300) {
								resolve(res.data);
							} else {
								reject({
									errMsg: '上传失败: ' + res.statusCode,
									statusCode: res.statusCode
								});
							}
						},
						fail: (err) => {
							reject(err);
						}
					});
				});
				// #endif
			},
			// 维护影像列表：按 imageCode 查重更新或追加（与原逻辑等价）
			updateImageList(cfg, imageId) {
				const list = this[cfg.imageList];
				if (list.some(v => v.imageCode == cfg.imageCode)) {
					list.map(val => {
						if (val.imageCode == cfg.imageCode) {
							val.imageBase64List[0].imageId = imageId;
						}
					})
				} else {
					list.push({
						imageBase64List: [{
							imageId: imageId
						}],
						imageCode: cfg.imageCode,
					})
				}
			},
			/**
			 * 公共上传识别（H5 拖拽/原生选图与非 H5 chooseImage 的最终汇聚点）：
			 * 1. /file/upload 上传原图 -> 拿服务端图片 id，按 imageCode 维护对应影像列表（updateImageList）
			 * 2. /order/identify/{ocrUrl} 再传同一文件做 OCR 识别 -> 按 kind 的 parse 解析字段
			 *    回填到 this[cfg.target]（如 carfront / userfront / businessLicenseInfo）
			 * 串行 await 与原嵌套回调逻辑等价；任一步失败统一被 catch 捕获打日志，不阻断页面。
			 */
			async uploadAndIdentify(source, kind) {
				this.loadingShow = true;
				const cfg = this.getOcrConfig(kind);
				try {
					const imgRes = await this.uploadFileGeneric(this.$base.baseUrl + '/file/upload',
						source, 'file', {
							'type': 'image'
						});
					const data = JSON.parse(imgRes);
					if (data.code == '200') {
						this.updateImageList(cfg, data.data.id);
						const ocrRes = await this.uploadFileGeneric(this.$base.baseUrl + cfg.ocrUrl,
							source, cfg.ocrName);
						const ocrData = JSON.parse(ocrRes).data;
						this[cfg.target] = cfg.parse(ocrData);
					}
					this.loadingShow = false;
				} catch (e) {
					console.log('uploadAndIdentify error', kind, e);
				}
			},
			// 图片大小超限提示（原 uToast 引用在模板中不存在，改为 uni.showToast）
			showSizeToast() {
				uni.showToast({
					title: '上传图片大小不能超过 5MB!',
					icon: 'none',
					duration: 1500
				});
			},
			// #ifdef H5
			/**
			 * 全局 dragover（document 原生监听）：必须 preventDefault，否则浏览器默认行为会在松手时
			 * 直接打开拖入的图片；同时判断拖放目标是否在 .drop-wrap 内，决定是否显示悬停高亮。
			 */
			onDocumentDragOver(e) {
				e.preventDefault();
				const wrap = e.target && e.target.closest ? e.target.closest('.drop-wrap') : null;
				this.dragOver = !!wrap;
			},
			/**
			 * 全局 drop（document 原生监听）：只有落在 .drop-wrap 区域内才处理。
			 * 取原生事件 e.dataTransfer.files[0]（模板事件拿不到 dataTransfer，见 mounted 注释）
			 * 与元素 data-kind 标记的场景，交给 handleFile 走统一的预览+上传识别流程。
			 */
			onDocumentDrop(e) {
				e.preventDefault();
				this.dragOver = false;
				const wrap = e.target && e.target.closest ? e.target.closest('.drop-wrap') : null;
				if (!wrap) {
					return;
				}
				const kind = wrap.dataset && wrap.dataset.kind;
				const file = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];
				console.log('[OCRUpload] onDocumentDrop', kind, file && file.name);
				if (file && kind) {
					this.handleFile(file, kind);
				}
			},
			/**
			 * H5 点击选图兜底（保留点击上传能力）：动态创建原生 input[type=file] 触发文件选择，
			 * 选中后与拖拽走同一条 handleFile 流程。uni-app 的 <input type="file"> 在 H5 端不生效，
			 * 必须用 document.createElement 原生创建。
			 */
			chooseFile(kind) {
				const input = document.createElement('input');
				input.type = 'file';
				input.accept = 'image/*';
				input.onchange = (ev) => {
					const file = ev.target.files && ev.target.files[0];
					if (file) {
						this.handleFile(file, kind);
					}
				};
				input.click();
			},
			/**
			 * H5 文件统一入口（拖拽 drop 与点击选图共用）：
			 * 1. 5MB 大小校验（与 chooseImage 路径一致）
			 * 2. URL.createObjectURL 生成 blob 链接做即时预览（拖入的 File 没有路径，模板 :src 直接复用）
			 *    换图前 revoke 旧链接防内存泄漏（组件销毁时的统一释放见 beforeDestroy）
			 * 3. 调 uploadAndIdentify 走公共上传识别链路
			 */
			handleFile(file, kind) {
				let size = file.size / 1024 / 1024 < 5;
				if (!size) {
					this.showSizeToast();
					return false
				}
				const imgKey = kind + 'Img';
				// 释放上一次的 blob URL，避免换图时内存泄漏
				if (this[imgKey] && String(this[imgKey]).indexOf('blob:') === 0) {
					URL.revokeObjectURL(this[imgKey]);
				}
				this[imgKey] = URL.createObjectURL(file);
				this.uploadAndIdentify(file, kind);
			},
			// #endif
			Subsectionclick(item) {
				this.toggleModeIndex = item;
			},
			ocrInt() {
				let Info = Object.assign({}, this.carfront, this.carback)
				if (this.isEmptyObject(Info)) {
					uni.showToast({
						icon: 'none',
						title: '未检测到图片',
						duration: 1500
					});
				} else {
					let ImgList = this.carImageListId;
					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() {
				if (this.current == 0) {
					let Info = Object.assign({}, this.userfront, this.userback)
					if (this.isEmptyObject(Info)) {
						uni.showToast({
							icon: 'none',
							title: '未检测到图片',
							duration: 1500
						});
					} else {
						let ImgList = this.ownerImageListId;
						let frontImg = this.userfrontImg;
						let backImg = this.userbackImg;
						this.$emit('ownerInfoCallback', {
							Info,
							ImgList,
							frontImg,
							backImg,
						});
						this.userfrontImg = '';
						this.userbackImg = '';
						this.carfrontImg = '';
						this.carbackImg = '';
						this.businessLicenseImg = '';
						this.current = 0;
					}
				} else {
					let Info = Object.assign({}, this.businessLicenseInfo)
					if (this.isEmptyObject(Info)) {
						uni.showToast({
							icon: 'none',
							title: '未检测到图片',
							duration: 1500
						});
					} else {
						let ImgList = this.ownerImageListId;
						let businessLicenseImg = this.businessLicenseImg;
						this.$emit('ownerInfoCallback', {
							Info,
							ImgList,
							businessLicenseImg,
						});
						this.userfrontImg = '';
						this.userbackImg = '';
						this.carfrontImg = '';
						this.carbackImg = '';
						this.businessLicenseImg = '';
						this.current = 0;
					}
				}

			},
			policyHolderInfoInt() {
				if (this.current == 0) {
					let Info = Object.assign({}, this.userfront, this.userback)
					if (this.isEmptyObject(Info)) {
						uni.showToast({
							icon: 'none',
							title: '未检测到图片',
							duration: 1500
						});
					} else {
						let ImgList = this.policyHolderImageListId;
						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;
					}
				} else {
					let Info = Object.assign({}, this.businessLicenseInfo)
					if (this.isEmptyObject(Info)) {
						uni.showToast({
							icon: 'none',
							title: '未检测到图片',
							duration: 1500
						});
					} else {
						let ImgList = this.policyHolderImageListId;
						let businessLicenseImg = this.businessLicenseImg;
						this.$emit('applicantInfoCallback', {
							Info,
							ImgList,
							businessLicenseImg,
						});
						this.userfrontImg = '';
						this.userbackImg = '';
						this.carfrontImg = '';
						this.carbackImg = '';
						this.businessLicenseImg = '';
						this.current = 0;
					}
				}

			},
			insuredPersonInfoInt() {
				if (this.current == 0) {
					let Info = Object.assign({}, this.userfront, this.userback)
					if (this.isEmptyObject(Info)) {
						uni.showToast({
							icon: 'none',
							title: '未检测到图片',
							duration: 1500
						});
					} else {
						let ImgList = this.insuredPersonImageListId;
						let frontImg = this.userfrontImg;
						let backImg = this.userbackImg;
						this.$emit('InsuredInfoCallback', {
							Info,
							ImgList,
							frontImg,
							backImg,
						});
						this.userfrontImg = '';
						this.userbackImg = '';
						this.carfrontImg = '';
						this.carbackImg = '';
						this.businessLicenseImg = '';
						this.current = 0;
					}
				} else {
					let Info = Object.assign({}, this.businessLicenseInfo)
					if (this.isEmptyObject(Info)) {
						uni.showToast({
							icon: 'none',
							title: '未检测到图片',
							duration: 1500
						});
					} else {
						let ImgList = this.insuredPersonImageListId;
						let businessLicenseImg = this.businessLicenseImg;
						this.$emit('InsuredInfoCallback', {
							Info,
							ImgList,
							businessLicenseImg,
						});
						this.userfrontImg = '';
						this.userbackImg = '';
						this.carfrontImg = '';
						this.carbackImg = '';
						this.businessLicenseImg = '';
						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() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
				if (!size) {
					this.showSizeToast();
					return false
				}
				if (chooseImageRes) {
					this.carfrontImg = chooseImageRes.tempFilePaths[0];
					this.uploadAndIdentify(chooseImageRes.tempFilePaths[0], 'carfront');
				} 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.showSizeToast();
					return false
				}
				if (chooseImageRes) {
					this.carbackImg = chooseImageRes.tempFilePaths[0];
					this.uploadAndIdentify(chooseImageRes.tempFilePaths[0], 'carback');
				} 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.showSizeToast();
					return false
				}
				if (chooseImageRes) {
					this.userfrontImg = chooseImageRes.tempFilePaths[0];
					this.uploadAndIdentify(chooseImageRes.tempFilePaths[0], 'userfront');
				} 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.showSizeToast();
					return false
				}
				if (chooseImageRes) {
					this.userbackImg = chooseImageRes.tempFilePaths[0];
					this.uploadAndIdentify(chooseImageRes.tempFilePaths[0], 'userback');
				} else {}
			},
			//营业执照识别
			async businessLicenseChange() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});

				let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
				if (!size) {
					this.showSizeToast();
					return false
				}
				if (chooseImageRes) {
					this.businessLicenseImg = chooseImageRes.tempFilePaths[0];
					this.uploadAndIdentify(chooseImageRes.tempFilePaths[0], 'businessLicense');
				} else {}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.header {
		padding: 4rpx 27rpx;

	}

	.content {
		padding: 40rpx 60rpx;

		.img {
			background: #fff;

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

			// H5 拖拽悬停高亮（只在 H5 端被触发）
			.drop-wrap.drop-active {
				border: 2rpx dashed #FDE935;
				background: rgba(253, 233, 53, 0.15);
				box-sizing: border-box;
			}
		}

		.footer {
			.btn {
				color: #1F1F1F !important;
			}
		}

		.user-Subsection {
			width: fit-content;
			margin: 0 auto 40rpx;
			border-radius: 4rpx;

			.item {
				padding: 9rpx 24rpx;
				box-sizing: border-box;
				font-size: 30rpx;
				color: #666;
				border: 1rpx solid #eee;
			}

			.item:first-child {
				border-right-color: #FDE935;
			}

			.item:last-child {
				border-left: none;
			}

			.active {
				background: rgba(253, 233, 53, 0.2);
				font-size: 30rpx;
				color: #333;
				border-color: #FDE935;
			}
		}
	}

	.loading {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.6);
		z-index: 99999;
		border-radius: 20rpx;
	}
</style>