zhywpt-sp/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 {
		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)
		// 更改typeindex
		state.choiceIndex = val;
		
		chooseImageCompress((res) => {
			console.log("res",res,state.choiceIndex)
			state.images = res.tempFilePath ? res.tempFilePath : res.tempFilePaths[0]
			state.showImg = false
			emit('close', false)
			uploadFile(state.images, state.choiceIndex).then((data) => {
				console.log("身份证上传", data)
				// var allData={
				// 	...data,
				// 	tempFilePath:state.images
				// }
				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
		uploadFile(val.tempImagePath, state.choiceIndex).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>