zhywpt-sp/components/viewfinder.vue

<template>
	<view style="width: 100%;height: 100vh;position: fixed;left: 0;top:0;z-index: 111111;">
		<!-- @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" -->
		<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 == 3"
				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 == 4"
				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" />

		<view v-if="!showStartPhoto" style="height: 70vh;background-color: black;">
			<view class="container">
				<image style="position: absolute;top: 20%;left: 10%;touch-action: none;" :src="srcImg"
					@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
					:style="{ transform: `translate(${offsetX}px, ${offsetY}px) rotate(${rotateDegree}deg)` }"></image>
			</view>
		</view>

		<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="showStartPhoto ? fileURL + 'image/index/etc_bd_ocr_take_photo_normal.png' : fileURL + '/static/etc_bd_ocr_rotate.png'"
					:style="showStartPhoto ? 'width: 140rpx;height: 140rpx;' : 'width: 80rpx;height: 80rpx;'"></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 行驶证反面
			}
		},
		showStartPhoto: {
			type: Boolean,
			default: function () {
				return true
			}
		},
		images: {
			type: String
		}
	});

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

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


	let cameraPosition = 'back' // 'back'为后置摄像头，'front'为前置摄像头
	let flash = 'off' // 'off'为关闭闪光灯，'on'为打开闪光灯
	let srcImg = ref(prop.images)
	let resItem = ref(null);
	let rotateDegree = ref(0)
	const startX = ref(0);
	const startY = ref(0);
	const offsetX = ref(0);
	const offsetY = ref(0);
	const dragging = ref(false);

	function takePhoto() {
		console.log('输出内容', rotateDegree.value)
		if (prop.showStartPhoto) {
			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
					emit('confirmReturn', res)
					// showStartPhoto.value = false
					// resItem.value = res
					// // #ifdef MP-ALIPAY
					cameraContext.stopRecord();
					// // #endif
				},
				fail: (error) => {
					console.error('拍照失败:', error);
					emit('failReturn', error);
				},
			});
		} else {
			rotateDegree.value += 90
		}
	}

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

	//重新拍摄
	function camera() {
		emit('camera')
	}

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

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

	const handleTouchStart = (event : TouchEvent) => {
		console.log('手柄触摸启动', '==1')
		startX.value = event.changedTouches[0].pageX - offsetX.value;
		startY.value = event.changedTouches[0].pageY - offsetY.value;
		dragging.value = true;
	};

	const handleTouchMove = (event : TouchEvent) => {
		console.log('手柄触摸启动', '==2')
		if (dragging.value) {
			offsetX.value = event.changedTouches[0].pageX - startX.value;
			offsetY.value = event.changedTouches[0].pageY - startY.value;
		}
	};

	const handleTouchEnd = () => {
		console.log('手柄触摸启动', '==3')
		dragging.value = false;
	};
</script>

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

	.container {
		position: relative;
		height: 100vh;
	}
</style>