2023年12月28日16:54:31

components/viewfinder.vue

@@ -1,15 +1,13 @@
 <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 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'"
+				<image src="/static/image/etc_bd_ocr_id_card_locator_front.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 src="/static/image/etc_bd_ocr_id_card_locator_back.png" style="height: 160rpx;" mode="heightFix">
 				</image>
 			</view>
 			<view v-if="phoneType == 3"
@@ -24,30 +22,30 @@
 
 				</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>
+			<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) scale(${scale})`, transition: 'transform ' + transitionDuration + 's' }"></image>
 		</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'"
+				<image v-if="!showStartPhoto" @click="camera" src="/static/image/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'"
+					:src="showStartPhoto ? '/static/image/etc_bd_ocr_take_photo_normal.png': '/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'"
+				<image v-if="!showStartPhoto" @click="success" src="/static/image/etc_bd_ocr_confirm.png"
 					style="width: 50rpx;height: 50rpx;"></image>
 				<view style="flex: 1;"></view>
 			</view>
@@ -56,9 +54,6 @@
 </template>
 
 <script setup lang="ts">
-	import {
-		fileURL
-	} from "@/datas/fileURL.js";
 	import {
 		ref
 	} from 'vue'
@@ -92,15 +87,64 @@
 
 	let cameraPosition = 'back' // 'back'为后置摄像头，'front'为前置摄像头
 	let flash = 'off' // 'off'为关闭闪光灯，'on'为打开闪光灯
+	let scaleStep = 0.5 //每次缩放的最大增量
 	let srcImg = ref(prop.images)
-	let resItem = ref(null);
 	let rotateDegree = ref(0)
+	let touchStartDistance = ref(0)
+	let touchMoveDistance = ref(0)
+	let scale = ref(1)
+	let transitionDuration = ref(0)
 	const startX = ref(0);
 	const startY = ref(0);
 	const offsetX = ref(0);
 	const offsetY = ref(0);
 	const dragging = ref(false);
 
+	const handleTouchStart = (event : TouchEvent) => {
+		console.log('手柄触摸启动', '==1')
+		if (event.touches.length === 1) {
+			startX.value = event.changedTouches[0].pageX - offsetX.value;
+			startY.value = event.changedTouches[0].pageY - offsetY.value;
+			dragging.value = true;
+			transitionDuration.value = 0.15
+		} else if (event.touches.length === 2) {
+			touchStartDistance.value = getTouchDistance(event.touches);
+			transitionDuration.value = 0.5
+		}
+	};
+
+	const handleTouchMove = (event : TouchEvent) => {
+		console.log('手柄触摸启动', '==2')
+		if (event.touches.length === 2) {
+			touchMoveDistance.value = getTouchDistance(event.touches);
+			updateScale();
+		} else {
+			if (dragging.value) {
+				offsetX.value = event.changedTouches[0].pageX - startX.value;
+				offsetY.value = event.changedTouches[0].pageY - startY.value;
+			}
+		}
+	};
+
+	function getTouchDistance(touches) {
+		const x = touches[0].clientX - touches[1].clientX;
+		const y = touches[0].clientY - touches[1].clientY;
+		return Math.sqrt(x * x + y * y);
+	}
+
+	const handleTouchEnd = () => {
+		console.log('手柄触摸启动', '==3')
+		touchStartDistance.value = 0;
+		touchMoveDistance.value = 0;
+		dragging.value = false;
+	};
+
+	function updateScale() {
+		 // 计算缩放的增量
+		const scales =  (touchMoveDistance.value - touchStartDistance.value) * scaleStep;
+		scale.value = Math.max(0.5, Math.min(scale.value + scales, 1)); // 设置缩放的范围，这里设置最小为1，最大为3
+	}
+
 	function takePhoto() {
 		console.log('输出内容', rotateDegree.value)
 		if (prop.showStartPhoto) {
@@ -118,11 +162,10 @@
 					// 在这里处理拍照成功后的逻辑，res.tempImagePath 为拍照的图片路径
 					console.log('拍照成功:', res.tempImagePath);
 					srcImg.value = res.tempImagePath
-					emit('confirmReturn', res)
 					// showStartPhoto.value = false
-					// resItem.value = res
 					// // #ifdef MP-ALIPAY
 					cameraContext.stopRecord();
+					emit('confirmReturn', res)
 					// // #endif
 				},
 				fail: (error) => {
@@ -133,11 +176,13 @@
 		} else {
 			rotateDegree.value += 90
 		}
+		// console.log('输出内容', '===123')
+
 	}
 
 	//成功
 	function success() {
-		console.log('成功:', srcImg.value);
+		console.log('图片地址', srcImg.value);
 		emit('confirmReturn', {
 			tempImagePath: srcImg.value
 		})
@@ -157,26 +202,6 @@
 		// 相机出错时的回调
 		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>
@@ -197,4 +222,12 @@
 		position: relative;
 		height: 100vh;
 	}
+
+	.content {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		/* 这是你要垂直居中的内容 */
+	}
 </style>

components/viewfinderCar.vue

@@ -28,7 +28,7 @@
 		<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;"></image>
+		<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%;">

subpackage/orders/car-release.vue

@@ -569,6 +569,7 @@
 		state.phoneType = 0
 		state.isTakePhotoModeShow = false
 		uploadFile(val.tempImagePath, imageType, etcCarOcrCard).then((data) => {
+			console.log('输出内容=====================',state.choiceIndex)
 			if (state.choiceIndex === "3") {
 				if (data.plate_a.length > 8) {
 					state.form.vehicleIdNum = data.plate_a.substring(0, 8);
@@ -590,7 +591,13 @@
 				state.form.approvedCountShow = data.apc;
 				state.form.maintenaceMass = data.unladen;
 				state.form.maintenaceMassShow = data.unladen;
+				// #ifdef MP-WEIXIN
 				state.form.vehicleDimensions = data.overall.replaceAll("x", "X");
+				// #endif
+				// #ifdef MP-ALIPAY
+				state.form.vehicleDimensions = data.overall.replace(/x/g, "X");
+				// #endif
+				
 				let arr = data.overall.split("x");
 				state.outlineL = arr[0]; //外廓 长
 				state.outlineW = arr[1]; //外廓 宽
@@ -600,6 +607,7 @@
 				state.form.vehNegImgUrl = data.imageUrl;
 				state.form.permittedWeight = data.alc ? data.alc : 0;
 				state.form.permittedTowWeight = data.towing ? data.towing : 0;
+				console.log('=====================',state.form.vehNegImgUrl,state)
 			}
 			state.isTakePhotoModeShow = false
 		})