封装OCR识别组件

components/uploadOcr.vue

+<template>
+	<view class="choice-takePhoto-wrap" v-if="prop.isTakePhotoModeShow" @click="cancle">
+		<view class="choice-takePhoto">
+			<view @click.stop="takePhoto(prop.phoneType)" style="border-radius: 20rpx 20rpx 0 0;">拍照</view>
+			<view @click.stop="xiangce(prop.phoneType)">从手机相册选择</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 {
+		reactive,
+		ref,
+		onMounted
+	} from "vue";
+	import viewfinder from "./viewfinder.vue"
+	import { idCardOcr,vehicleLicenseOcr} from "@/utils/network/api.js";
+	import {
+		uploadFile,
+		compressImage,
+		chooseImageCompress,
+		compareDates
+	} from "@/utils/utils";
+	
+	let prop = defineProps({
+		phoneType: {
+			type: Number,
+			default: function () {
+				return 0 //1 身份证正面 2 身份证反面 3 行驶证正面 4 行驶证反面
+			}
+		},
+		isTakePhotoModeShow: {
+			type: Boolean,
+			default: function () {
+				return false
+			}
+		},
+	});
+	const emit = defineEmits<{
+		(e : "close", content : any) : void;
+		(e : "ocrResult", content : any) : void;
+	}>();
+	const state = reactive({
+		showImg: true,
+		phoneType: 0,  // 1 身份证正面  2 身份证反面  3行驶证正面 4行驶证反面
+		choiceIndex: 1,  // 1 身份证正面  2 身份证反面
+		isTakePhotoModeShow:false,  //选择拍照方式是否出来
+		images: '',
+	})
+	const xiangce = (val) => {
+		console.log("val", val)
+		var imageType=""
+		state.choiceIndex=val
+		if(state.choiceIndex == 1 || state.choiceIndex == 2){
+			imageType = val;
+		}else{
+			if (state.choiceIndex == 3) {
+				imageType = '1';
+			} else {
+				imageType = '2';
+			}
+		}
+		
+		chooseImageCompress((res) => {
+			console.log("res",res,state.choiceIndex)
+			state.images = res.tempFilePath ? res.tempFilePath : res.tempFilePaths[0]
+			state.showImg = false
+			emit('close', false)
+			if(state.choiceIndex==1 || state.choiceIndex==2){
+				var issfz=idCardOcr
+			}else{
+				var issfz=vehicleLicenseOcr
+			}
+			uploadFile(state.images, imageType, issfz).then((data) => {
+				console.log("身份证上传", data)
+				emit('ocrResult', data)
+			})
+		})
+	}
+	const takePhoto = (val) => {
+		state.showImg = true
+		console.log("拍照", val)
+		state.phoneType = val;
+		state.choiceIndex=val
+	}
+	const confirmReturn = (val) => {
+		console.log("图片地址val", val)
+		state.phoneType = 0
+		if(state.choiceIndex==1 || state.choiceIndex==2){
+			var imageType = state.choiceIndex;
+			var issfz=idCardOcr
+		}else{
+			if (state.choiceIndex == 3) {
+				var imageType = 1;
+			} else {
+				var imageType = 2;
+			}
+			var issfz=vehicleLicenseOcr
+		}
+		uploadFile(val.tempImagePath, imageType, issfz).then((data) => {
+			console.log("身份证上传", data)
+			emit('close', false)
+			emit('ocrResult', data)
+		})
+	}
+	const cancle = () => {
+		emit('close', false)
+	}
+	const camera = () => {
+		state.phoneType = 0
+	}
+</script>
+
+<style scoped>
+	.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>

subpackage/orders/car-release.vue

 			</view>
 		</view>
 	</u-popup>
-	<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>
+		<uploadImg :isTakePhotoModeShow="state.isTakePhotoModeShow" :phoneType="state.choiceIndex" @close="close" @ocrResult="ocrResult">
+		</uploadImg>
 </template>
 
 <script setup lang="ts">
 	import { reactive, ref } from "vue";
-	import viewfinder from "../../components/viewfinder.vue"
+	import uploadImg from '@/components/uploadOcr';
 	import navBgCar from "./components/nav-bg-car1";
 	import navBar from "@/components/nav-bar/nav-bar2.vue";
 	import carNumberInput from "@/components/car-number-input/car-number-input.vue";
 	onPageScroll((e) => {
 		scrollTop.value = e.scrollTop;
 	});
-
+const close=(e)=>{
+	console.log("e",e)
+	state.isTakePhotoModeShow=e
+}
 	//车牌号输入
 	const carNumber = (val : any) => {
 		state.form.vehiclePlate = val.trim();
 		state.form.issueDate = e.detail.value
 		state.changeColor = true;
 	}
-	const xiangce = (val) => {
-		console.log("val", val)
-		if (state.choiceIndex == 3) {
-			var imageType = 1;
-		} else {
-			var imageType = 2;
-		}
-		state.changeColor = true;
-		chooseImageCompress((res) => {
-			state.images = res.tempFilePath ? res.tempFilePath : res.tempFilePaths[0]
-			state.showImg = false
-			state.phoneType = state.choiceIndex
-			state.isTakePhotoModeShow = false
-		})
-	}
 	const takePhoto = (val) => {
 		console.log("拍照", val)
 		state.phoneType = val;
 		state.showImg = true;
 	}
-	const confirmReturn = (val) => {
-		if (state.choiceIndex == 3) {
-			var imageType = 1;
-		} else {
-			var imageType = 2;
-		}
+	const ocrResult = (data) => {
 		state.changeColor = true;
-		state.phoneType = 0
-		state.isTakePhotoModeShow = false
-		uploadFile(val.tempImagePath, imageType, vehicleLicenseOcr).then((data) => {
 			console.log('输出内容=====================', state.choiceIndex)
 			if (state.choiceIndex === "3") {
 				if (data.plate_a.length > 8) {
 
 				console.log('=====================', state.form.vehNegImgUrl, state)
 			}
-			state.isTakePhotoModeShow = false
-		})
-		console.log("图片地址val", val.tempImagePath)
+		
 	}
 	const takePhotoMode = (index) => {
 		console.log("index", index)
 		state.isTakePhotoModeShow = true
 		state.choiceIndex = index
 	}
-	const cancle = () => {
-		state.isTakePhotoModeShow = false
-	}
 	const radioChange = (evt) => {
 		console.log("evt.detail.value", evt.detail.value)
 		for (let i = 0; i < state.items.length; i++) {

subpackage/orders/opening-account-people.vue

 
 	<u-select mode="single-column" :list="state.genderList" v-model="state.genderShow" @confirm="genderSelectConfirm">
 	</u-select>
-	<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>
+		<uploadImg :isTakePhotoModeShow="state.isTakePhotoModeShow" :phoneType="state.choiceIndex" @close="close" @ocrResult="ocrResult">
+		</uploadImg>
 </template>
 
 <script setup lang="ts">
-	import viewfinder from "../../components/viewfinder.vue"
+	import uploadImg from '@/components/uploadOcr';
 	import navBgCar from "./components/nav-bg-car1";
 	import {
 		reactive,
 	} from "@dcloudio/uni-app";
 	import {
 		getUserMsg,
-		userUpload, idCardOcr, registerFull
+		userUpload, registerFull
 	} from "@/utils/network/api.js";
 
-	import {
-		request, requestNew
-	} from "@/utils/network/request.js";
+	import {requestNew} from "@/utils/network/request.js";
 
 	import {navTo } from "@/utils/utils";
 	import {
 	const userGenderAction = () => {
 		state.genderShow = true;
 	};
-
+const close=(e)=>{
+	console.log("e",e)
+	state.isTakePhotoModeShow=e
+}
 	const genderSelectConfirm = (e) => {
 		state.form.gender = ''
 		e.map((val, index) => {
 		state.choiceIndex = index
 		state.isMy = isMy
 	}
-	const xiangce = (val) => {
-		console.log("val", val)
-		var imageType = val;
-		chooseImageCompress((res) => {
-			state.images = res.tempFilePath ? res.tempFilePath : res.tempFilePaths[0]
-			state.showImg = false
-			state.phoneType = state.choiceIndex
-			state.isTakePhotoModeShow = false
-		})
-	}
-	const takePhoto = (val) => {
-		state.showImg = true
-		console.log("拍照", val)
-		state.phoneType = val;
-	}
-	const confirmReturn = (val) => {
-		console.log("图片地址val", val)
-		state.phoneType = 0
-		state.isTakePhotoModeShow = false
-		var imageType = state.choiceIndex;
-		uploadFile(val.tempImagePath, imageType, idCardOcr).then((data) => {
-			console.log("身份证上传", data)
+	
+	const ocrResult = (data) => {
+		console.log("图片地址val", data)
 			if (state.isMy == "my") {
-				if (state.choiceIndex == "1") {
+				if (state.choiceIndex == 1) {
 					state.form.userName = data.name;
 					state.form.gender = data.gender;
 					state.form.userIdNum = data.idno;
 					state.form.userNegImgUrl = data.imageUrl;
 					compareDates(data.enddate)
 				}
-				state.isTakePhotoModeShow = false
 			} else {
-				if (state.choiceIndex == "1") {
+				if (state.choiceIndex == 1) {
 					state.form.agentName = data.name;
 					state.form.agentGender = data.gender;
 					state.form.agentIdNum = data.idno;
 					state.form.agentPosImgUrl = data.imageUrl;
 					state.form.agentAddress = data.address;
 				} else {
-					console.log("state.isMy", state.isMy, state.choiceIndex, state.choiceIndex == "1", data)
+					console.log("state.isMy", state.isMy, state.choiceIndex, state.choiceIndex == 1, data)
 					state.form.agentIdVld = data.enddate;
 					state.form.agentNegImgUrl = data.imageUrl;
 					compareDates(data.enddate)
 				}
-				state.isTakePhotoModeShow = false
 			}
-		})
-	}
-	const cancle = () => {
-		state.isTakePhotoModeShow = false
 	}
 	const downAuthD = () => {
 		uni.downloadFile({
 		}
 	}
 
-	.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;
-	}
-
 	.down {
 		background: #CCB375;
 		color: #fff;