zhywpt-sp/components/viewfinderCar.vue

<template>
	<view style="width: 100%;height: 100vh;position: fixed;left: 0;top:0;z-index: 111111;">
		<view class="viewfinder">
			<!-- <view v-if="phoneType == 1"
				style="display: flex;align-items: center;justify-content: flex-end;width: 100%;height: 100%;">
				<image :src="fileURL + 'image/index/etc_bd_ocr_id_card_locator_back.png'"
					style="height: 220rpx;margin-right: 30rpx;" mode="heightFix"></image>
			</view>
			<view v-if="phoneType == 2" style="margin: 30rpx 0 0 30rpx;">
				<image :src="fileURL + 'image/index/etc_bd_ocr_id_card_locator_front.png'" style="height: 160rpx;"
					mode="heightFix">
				</image>
			</view> -->
			<view v-if="phoneType == 1"
				style="margin: -30rpx 0 0 30rpx;display: flex;height: 100%;align-self: flex-end;flex-direction: column;justify-content: flex-end;">
				<view style="border: 1px solid #fff;height: 160rpx;width: 160rpx;">

				</view>
			</view>
			<view v-if="phoneType == 2"
				style="margin: -30rpx 30rpx 0 0;display: flex;height: 100%;justify-content: flex-end;align-items: flex-end;">
				<view style="border: 1px solid #fff;height: 60rpx;width: 300rpx;">

				</view>
			</view>
		</view>
		<!-- camera -->
		<camera v-if="showStartPhoto" id="camera" style="height: 70vh;width: 100vh;background-color: black;width: 100%;"
			mode="normal" :device-position="cameraPosition" :flash="flash" @stop="cameraStop" @error="cameraError" />

		<image v-if="!showStartPhoto" :src="srcImg" style="height: 98vh;width: 100vh;" mode="scaleToFill"></image>

		<view style="background-color: #A5A5A5;top: 60%;width: 100%;height: 40%;position: absolute;">
			<view style="display: flex;flex-direction: row;justify-content: center;align-items: center;height: 100%;">
				<view style="flex: 1;"></view>
				<image v-if="!showStartPhoto" @click="camera" :src="fileURL + 'image/index/etc_bd_ocr_cancel.png'"
					style="width: 50rpx;height: 50rpx;"></image>
				<view style="flex: 1;"></view>
				<image @click="takePhoto" :src="fileURL + 'image/index/etc_bd_ocr_take_photo_normal.png'"
					style="width: 140rpx;height: 140rpx;"></image>
				<view style="flex: 1;"></view>
				<image v-if="!showStartPhoto" @click="success" :src="fileURL + 'image/index/etc_bd_ocr_confirm.png'"
					style="width: 50rpx;height: 50rpx;"></image>
				<view style="flex: 1;"></view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		fileURL
	} from "@/datas/fileURL.js";
	import {
		ref
	} from 'vue'

	let prop = defineProps({
		phoneType: {
			type: Number,
			default: function () {
				return 3 //1 身份证正面 2 身份证反面 3 行驶证正面 4 行驶证反面
			}
		},
	});

	console.log('输出内容', prop.phoneType)

	const emit = defineEmits<{
		(e : "confirmReturn", content : any) : void;
		(e : "failReturn", content : any) : void;
	}>();


	let cameraPosition = 'back' // 'back'为后置摄像头，'front'为前置摄像头
	let flash = 'off' // 'off'为关闭闪光灯，'on'为打开闪光灯
	let showStartPhoto = ref(true)
	let srcImg = ref('')
	let resItem = ref(null);

	function takePhoto() {
		console.log('输出内容', '===123')
		let cameraContext = null
		// #ifdef MP-WEIXIN
		cameraContext = uni.createCameraContext();
		// #endif
		// #ifdef MP-ALIPAY
		cameraContext = my.createCameraContext('camera');
		// #endif
		// 调用拍照方法
		cameraContext.takePhoto({
			quality: 'normal',
			success: (res) => {
				// 在这里处理拍照成功后的逻辑，res.tempImagePath 为拍照的图片路径
				console.log('拍照成功:', res.tempImagePath);
				srcImg.value = res.tempImagePath
				// showStartPhoto.value = false
				// resItem.value = res
				// // #ifdef MP-ALIPAY
				// cameraContext.stopRecord();
				// emit('confirmReturn', res)
				// // #endif
				cameraContext.stopRecord();
				emit('confirmReturn', res)
			},
			fail: (error) => {
				console.error('拍照失败:', error);
				emit('failReturn', error);
			},
		});
	}

	//成功
	function success() {
		console.log('成功:', resItem.value);
		emit('confirmReturn', resItem.value)
	}

	//重新拍摄
	function camera() {
		showStartPhoto.value = true
	}

	function cameraStop() {
		// 相机停止时的回调
		console.log('相机已停止');
	}

	function cameraError(e) {
		// 相机出错时的回调
		console.error('相机错误:', e.detail.errMsg);
	}
</script>

<style>
	.viewfinder {
		position: absolute;
		top: 20%;
		left: 10%;
		width: 80%;
		height: 400rpx;
		border: 2px solid #fff;
		box-sizing: border-box;
		border-radius: 16rpx;
		z-index: 2;
	}
</style>