From c105c22a68528ae41bcb082a73bed0fe4696fb1b Mon Sep 17 00:00:00 2001
From: zouyanyan <254651820@qq.com>
Date: Sat, 14 Mar 2026 11:18:07 +0800
Subject: [PATCH] upscan

---
 components/easy-scancode/easy-scancode.vue | 200 +++++++++++++++++++++
 package-lock.json                          |   5 +
 package.json                               |  10 ++
 pages/pallet/ck.vue                        |  53 +++++-
 pages/pallet/js.vue                        |  35 +++-
 pages/pallet/ps.vue                        |  69 +++++--
 pages/pallet/xp.vue                        |  37 +++-
 pages/pallet/yz.vue                        |  35 +++-
 8 files changed, 412 insertions(+), 32 deletions(-)
 create mode 100644 components/easy-scancode/easy-scancode.vue

diff --git a/components/easy-scancode/easy-scancode.vue b/components/easy-scancode/easy-scancode.vue
new file mode 100644
index 0000000..0b32160
--- /dev/null
+++ b/components/easy-scancode/easy-scancode.vue
@@ -0,0 +1,200 @@
+<template>
+  <view class="easy-scancode" v-if="show">
+    <view id="reader"></view>
+    <!-- 扫码提示区域 -->
+    <view class="scan-tip-overlay">
+      <view class="scan-tip"> 请将二维码放入框内 </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { Html5Qrcode } from "html5-qrcode";
+export default {
+  name: "easy-scancode",
+  data() {
+    return {
+      options: {
+        success: () => {},
+        fail: () => {},
+      },
+      show: false,
+      html5QrCode: null,
+    };
+  },
+  methods: {
+    start(options) {
+      this.options = options;
+      // #ifdef H5
+      // 检查摄像头权限
+      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+        navigator.mediaDevices
+          .getUserMedia({
+            video: true,
+          })
+          .then((stream) => {
+            // 获得权限后关闭流
+            stream.getTracks().forEach((track) => track.stop());
+            this.show = true;
+            // 有权限后调用扫码
+            this.getCameras();
+          })
+          .catch((err) => {
+            // 用户拒绝了权限
+            uni.showToast({
+              title: "请允许使用摄像头权限！",
+              icon: "none",
+            });
+            this.options.fail("未获得摄像头权限");
+          });
+      } else {
+        uni.showToast({
+          title: "您的浏览器不支持访问摄像头",
+          icon: "none",
+        });
+        this.options.fail("浏览器不支持访问摄像头");
+      }
+      return;
+      // #endif
+      // 其他环境
+      uni.scanCode({
+        onlyFromCamera: true,
+        success: (res) => {
+          this.options.success(res.result, res);
+        },
+        fail: (rej) => {
+          this.options.fail("扫码失败");
+        },
+      });
+    },
+    stop() {
+      this.show = false;
+      let that = this;
+      this.html5QrCode
+        .stop()
+        .then((ignore) => {
+          // 二维码扫描已停止
+          console.log("二维码扫描已停止");
+        })
+        .catch((err) => {
+          // 停止失败，处理错误
+          console.log("无法停止扫描");
+        });
+    },
+    getCameras() {
+      let that = this;
+      Html5Qrcode.getCameras()
+        .then((devices) => {
+          // console.log(devices)
+          that.html5QrCode = new Html5Qrcode("reader");
+
+          let windowInfo = uni.getWindowInfo();
+          console.log(windowInfo);
+          const width = windowInfo.windowWidth;
+          const height = windowInfo.windowHeight;
+          // 横屏
+          const aspectRatio = width / height;
+          // 竖屏
+          const reverseAspectRatio = height / width;
+
+          const mobileAspectRatio =
+            reverseAspectRatio > 1.5
+              ? reverseAspectRatio + (reverseAspectRatio * 12) / 100
+              : reverseAspectRatio;
+
+          if (devices && devices.length) {
+            let cameraId = "";
+            if (devices.length > 1) {
+              cameraId = devices[1].id;
+            } else {
+              cameraId = devices[0].id;
+            }
+            // 计算二维码扫描框大小 - 使用宽度/高度中较小的值来确保方框适合屏幕
+            // 并在扫描区域周围留出一些边距
+            const qrboxSize = Math.min(width, height) * 0.7;
+            console.log(qrboxSize);
+            // 使用这个来开始扫描
+            that.html5QrCode
+              .start(
+                {
+                  facingMode: "environment",
+                },
+                {
+                  fps: 10, // 可选，二维码扫描的每秒帧数
+                  aspectRatio: aspectRatio,
+                  qrbox: { width: qrboxSize, height: qrboxSize }, // 可选，如果你想要边界框UI
+                  videoConstraints: {
+                    facingMode: "environment",
+                    aspectRatio: width < 600 ? mobileAspectRatio : aspectRatio,
+                  },
+                },
+                (decodedText, decodedResult) => {
+                  // 当码被读取时执行操作
+                  console.log("decodedText", decodedText);
+                  that.options.success(decodedText, decodedResult);
+                  that.stop();
+                },
+                (errorMessage) => {
+                  // 解析错误，忽略它
+                  // console.log('解析错误，忽略它', errorMessage)
+                }
+              )
+              .catch((err) => {
+                // 启动失败，处理它
+                console.log("启动失败，需要处理");
+                that.options.fail(err);
+                this.show = false;
+              });
+          }
+        })
+        .catch((err) => {
+          // 处理错误
+          console.log(err);
+          that.options.fail(err);
+          this.show = false;
+        });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.easy-scancode {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  background-color: #000;
+}
+
+#reader {
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+
+.scan-tip-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 10000;
+	pointer-events: none; /* 不阻挡摄像头画面 */
+}
+
+.scan-tip {
+	position: absolute;
+	top: 74%;
+	left: 50%;
+	transform: translateX(-50%);
+	color: #fff;
+	font-size: 16px;
+	text-align: center;
+	z-index: 10001;
+	background-color: rgba(0, 0, 0, 0.5);
+	padding: 10px 20px;
+	border-radius: 5px;
+}
+</style>
diff --git a/package-lock.json b/package-lock.json
index f01d5e9..fd220a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -168,6 +168,11 @@
 				"to-regex-range": "^5.0.1"
 			}
 		},
+		"html5-qrcode": {
+			"version": "2.3.8",
+			"resolved": "https://registry.npmmirror.com/html5-qrcode/-/html5-qrcode-2.3.8.tgz",
+			"integrity": "sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ=="
+		},
 		"image-tools": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmmirror.com/image-tools/-/image-tools-1.4.0.tgz",
diff --git a/package.json b/package.json
index 4e1c1e8..b2ba382 100644
--- a/package.json
+++ b/package.json
@@ -25,11 +25,21 @@
 		"@hyoga/uni-socket.io": "^3.0.4",
 		"compressorjs": "^1.2.1",
 		"exif-js": "^2.3.0",
+		"html5-qrcode": "^2.3.8",
 		"image-tools": "^1.4.0",
 		"jsqr": "^1.4.0",
 		"sass": "^1.86.0"
 	},
 	"dcloudext": {
+		"type": "component-vue",
+		"sale": {
+		    "regular": {
+		        "price": "0.00"
+		    },
+		    "sourcecode": {
+		        "price": "0.00"
+		    }
+		},
 		"category": [
 			"前端页面模板",
 			"uni-app前端项目模板"
diff --git a/pages/pallet/ck.vue b/pages/pallet/ck.vue
index 7a38524..ffdf623 100644
--- a/pages/pallet/ck.vue
+++ b/pages/pallet/ck.vue
@@ -96,7 +96,10 @@
 			</view>
 		</u-popup>
 		
-		<scanQR ref="scan" @scanSuccess="scanSuccess"></scanQR>
+		<!-- <scanQR ref="scan" @scanSuccess="scanSuccess"></scanQR> -->
+		<!-- 扫码组件 html5-qrcode -->
+		<scan-code ref="scan"></scan-code>
+		
 		<u-toast ref="uToast" />
 		
 	</view>
@@ -107,13 +110,18 @@
 	import psDetail from "@/components/psDetail.vue";
 	import palletDetail from "@/components/palletDetail.vue";
 	
-	// 扫二维码
-	import scanQR from "@/components/scanQR.vue";
+	// 扫二维码 jsQR
+	// import scanQR from "@/components/scanQR.vue"; 
+	
+	// 扫二维码 html5-qrcode
+	import scanCode from '@/components/easy-scancode/easy-scancode.vue'
+	
 	export default {
 		components: {
 		  psDetail,
 		  palletDetail,
-		  scanQR
+		  // scanQR,
+		  scanCode
 		},
 		data() {
 			return {
@@ -146,10 +154,27 @@
 			this.getTypes();
 		},
 		onReady(){
+			const _that = this;
 			// #ifdef H5
 			// 扫码识别托盘明细查询
 			this.ifsm=true;
-			this.$refs.scan.showScan();
+			// this.$refs.scan.showScan();
+			this.$refs.scan.start({
+			    success: (val, res)=> {
+			        console.log('扫描成功',val,res);
+					_that.rmbm=val;
+					_that.$forceUpdate();
+					_that.getTpInfo();
+			    },
+			    fail: (rej)=>{
+			        console.log('扫描失败',rej);
+					uni.showToast({
+						title: '请在HTTPS环境下点击开启',
+						icon: 'none',
+						duration: 3000
+					});
+			    }
+			})
 			// #endif
 		},
 		//点击导航栏 扫描 buttons 时触发
@@ -162,7 +187,23 @@
 				// #ifdef H5
 				// 扫码识别托盘明细查询
 				this.ifsm=true;
-				this.$refs.scan.showScan();
+				// this.$refs.scan.showScan();
+				this.$refs.scan.start({
+				    success: (val, res)=> {
+				        console.log('扫描成功',val,res);
+						_that.rmbm=val;
+						_that.$forceUpdate();
+						_that.getTpInfo();
+				    },
+				    fail: (rej)=>{
+				        console.log('扫描失败',rej);
+						uni.showToast({
+							title: '请在HTTPS环境下点击开启',
+							icon: 'none',
+							duration: 3000
+						});
+				    }
+				})
 				// #endif
 				
 				// #ifdef APP-PLUS
diff --git a/pages/pallet/js.vue b/pages/pallet/js.vue
index f0b1910..628e334 100644
--- a/pages/pallet/js.vue
+++ b/pages/pallet/js.vue
@@ -94,7 +94,12 @@
 		</view>
 	</u-popup>
 	
-	<scanQR ref="scan" @scanSuccess="scanSuccess"></scanQR>
+	<!-- 扫码组件 jsQR -->
+	<!-- <scanQR ref="scan" @scanSuccess="scanSuccess"></scanQR> -->
+	
+	<!-- 扫码组件 html5-qrcode -->
+	<scan-code ref="scan"></scan-code>
+	
 	<u-toast ref="uToast" />
 	
   </view>
@@ -103,8 +108,11 @@
 
 <script>
 import psDetail from "@/components/psDetail.vue";
-// 扫二维码
-import scanQR from "@/components/scanQR.vue"; 
+// 扫二维码 jsQR
+// import scanQR from "@/components/scanQR.vue"; 
+
+// 扫二维码 html5-qrcode
+import scanCode from '@/components/easy-scancode/easy-scancode.vue'
 
 // 图片处理
 import EXIF from 'exif-js';
@@ -113,7 +121,8 @@ import Compressor from 'compressorjs';
 export default {
 	components: {
 	  psDetail,
-	  scanQR
+	  // scanQR,
+	  scanCode
 	},
 	data() {
 		return {
@@ -388,7 +397,23 @@ export default {
 			// 扫码识别托盘
 			// _that.palletNo="XZG0005"; // XZG0004 XZG0005
 			// _that.getPalletDetail();
-			this.$refs.scan.showScan();
+			// this.$refs.scan.showScan();
+			this.$refs.scan.start({
+			    success: (val, res)=> {
+			        console.log('扫描成功',val,res);
+					_that.palletNo=val;
+					_that.$forceUpdate();
+					_that.getPalletDetail();
+			    },
+			    fail: (rej)=>{
+			        console.log('扫描失败',rej);
+					uni.showToast({
+						title: '请在HTTPS环境下点击开启',
+						icon: 'none',
+						duration: 3000
+					});
+			    }
+			})
 			// #endif
 			
 			// #ifdef APP-PLUS
diff --git a/pages/pallet/ps.vue b/pages/pallet/ps.vue
index f6f4586..144c970 100644
--- a/pages/pallet/ps.vue
+++ b/pages/pallet/ps.vue
@@ -233,7 +233,9 @@
 		</view>
 	</u-popup>
 	
-	<scanQR ref="scan" @scanSuccess="scanSuccess"></scanQR>
+	<!-- <scanQR ref="scan" @scanSuccess="scanSuccess"></scanQR> -->
+	<!-- 扫码组件 html5-qrcode -->
+	<scan-code ref="scan"></scan-code>
 	
   </view>
 </template>
@@ -248,8 +250,11 @@ import tpDetail from "@/components/tpDetail.vue";
 // 托盘详情
 import psDetail from "@/components/psDetail.vue";
 
-// 扫二维码
-import scanQR from "@/components/scanQR.vue";
+// 扫二维码 jsQR
+	// import scanQR from "@/components/scanQR.vue"; 
+	
+	// 扫二维码 html5-qrcode
+	import scanCode from '@/components/easy-scancode/easy-scancode.vue'
 
 // 图片处理
 import EXIF from 'exif-js';
@@ -261,7 +266,8 @@ export default {
 	  deliveryDetail,
 	  tpDetail,
 	  psDetail,
-	  scanQR
+	  // scanQR,
+	  scanCode
 	},
 	data() {
 		return {
@@ -762,7 +768,30 @@ export default {
 			// _that.itemList.deliveryNo="GJ2602000001"; // GJ2602000002 20260100024 20260100025
 			// _that.getPsDetail();
 			this.scantype = 1; // 配送单扫码
-			this.$refs.scan.showScan();
+			// this.$refs.scan.showScan();
+			this.$refs.scan.start({
+			    success: (val, res)=> {
+			        console.log('扫描成功',val,res);
+					if(_that.scantype==2){
+						_that.palletNo=val;
+						_that.$forceUpdate();
+						_that.getPalletDetail();
+					}
+					else{
+						_that.itemList.deliveryNo=val; // GJ2602000002 20260100024 20260100025
+						_that.$forceUpdate();
+						_that.getPsDetail();
+					}
+			    },
+			    fail: (rej)=>{
+			        console.log('扫描失败',rej);
+					uni.showToast({
+						title: '请在HTTPS环境下点击开启',
+						icon: 'none',
+						duration: 3000
+					});
+			    }
+			})
 			// #endif
 			
 			// #ifdef APP-PLUS
@@ -996,12 +1025,30 @@ export default {
 			// _that.palletNo="XZG0005"; // XZG0004 XZG0005
 			// _that.getPalletDetail();
 			this.scantype=2; // 扫码托盘
-			this.$refs.scan.showScan();
-			// 假设你的滚动容器的 ref 是 'scrollContainer'
-			// uni.pageScrollTo({
-			// 	scrollTop: 0,
-			// 	duration: 300 // 动画时长，默认300ms
-			// });
+			// this.$refs.scan.showScan();
+			this.$refs.scan.start({
+			    success: (val, res)=> {
+			        console.log('扫描成功',val,res);
+					if(_that.scantype==2){
+						_that.palletNo=val;
+						_that.$forceUpdate();
+						_that.getPalletDetail();
+					}
+					else{
+						_that.itemList.deliveryNo=val; // GJ2602000002 20260100024 20260100025
+						_that.$forceUpdate();
+						_that.getPsDetail();
+					}
+			    },
+			    fail: (rej)=>{
+			        console.log('扫描失败',rej);
+					uni.showToast({
+						title: '请在HTTPS环境下点击开启',
+						icon: 'none',
+						duration: 3000
+					});
+			    }
+			})
 			// #endif
 			
 			// #ifdef APP-PLUS
diff --git a/pages/pallet/xp.vue b/pages/pallet/xp.vue
index dc314ea..f888768 100644
--- a/pages/pallet/xp.vue
+++ b/pages/pallet/xp.vue
@@ -118,7 +118,13 @@
 		</view>
 	</u-popup>
 	
-	<scanQR ref="scan" @scanSuccess="scanSuccess"></scanQR>
+	<!-- 扫码组件 jsQR -->
+	<!-- <scanQR ref="scan" @scanSuccess="scanSuccess"></scanQR> -->
+	
+	<!-- 扫码组件 html5-qrcode -->
+	<scan-code ref="scan"></scan-code>
+	
+	
 	<u-toast ref="uToast" />
 	
   </view>
@@ -131,8 +137,12 @@ import UploadzcFile from "@/components/UploadzcFile.vue";
 import selXP from "@/components/selXP.vue";
 
 import psDetail from "@/components/psDetail.vue";
-// 扫二维码
-import scanQR from "@/components/scanQR.vue";
+
+// 扫二维码 jsQR
+// import scanQR from "@/components/scanQR.vue"; 
+
+// 扫二维码 html5-qrcode
+import scanCode from '@/components/easy-scancode/easy-scancode.vue'
 
 // 图片处理
 import EXIF from 'exif-js';
@@ -142,7 +152,8 @@ export default {
 		psDetail,
 		UploadzcFile,
 		selXP,
-	  scanQR
+		// scanQR,
+	    scanCode
 	},
 	data() {
 		return {
@@ -456,7 +467,23 @@ export default {
 			// 扫码识别托盘
 			// _that.palletNo="XZG0008"; // XZG0004 XZG0005
 			// _that.getPalletDetail();
-			this.$refs.scan.showScan();
+			// this.$refs.scan.showScan();
+			this.$refs.scan.start({
+			    success: (val, res)=> {
+			        console.log('扫描成功',val,res);
+					_that.palletNo=val;
+					_that.$forceUpdate();
+					_that.getPalletDetail();
+			    },
+			    fail: (rej)=>{
+			        console.log('扫描失败',rej);
+					uni.showToast({
+						title: '请在HTTPS环境下点击开启',
+						icon: 'none',
+						duration: 3000
+					});
+			    }
+			})
 			// #endif
 			
 			// #ifdef APP-PLUS
diff --git a/pages/pallet/yz.vue b/pages/pallet/yz.vue
index cb6dd13..71b2f62 100644
--- a/pages/pallet/yz.vue
+++ b/pages/pallet/yz.vue
@@ -186,7 +186,12 @@
 		</view>
 	</u-popup>
 	
-	<scanQR ref="scan" @scanSuccess="scanSuccess"></scanQR>
+	<!-- 扫码组件 jsQR -->
+	<!-- <scanQR ref="scan" @scanSuccess="scanSuccess"></scanQR> -->
+	
+	<!-- 扫码组件 html5-qrcode -->
+	<scan-code ref="scan"></scan-code>
+	
 	<u-toast ref="uToast" />
 	
   </view>
@@ -200,8 +205,11 @@ import selRY from "@/components/selRY.vue";
 import tkiTree from "@/components/areaTree/Linktree.vue";
 
 import psDetail from "@/components/psDetail.vue";
-// 扫二维码
-import scanQR from "@/components/scanQR.vue";
+// 扫二维码 jsQR
+// import scanQR from "@/components/scanQR.vue"; 
+
+// 扫二维码 html5-qrcode
+import scanCode from '@/components/easy-scancode/easy-scancode.vue'
 
 // 图片处理
 import EXIF from 'exif-js';
@@ -213,7 +221,8 @@ export default {
 		selCl,
 		selRY,
 		tkiTree,
-	  scanQR
+		// scanQR,
+		scanCode
 	},
 	data() {
 		return {
@@ -592,7 +601,23 @@ export default {
 			// 扫码识别托盘
 			// _that.palletNo="XZG0005"; // XZG0004 XZG0005
 			// _that.getPalletDetail();
-			this.$refs.scan.showScan();
+			// this.$refs.scan.showScan();
+			this.$refs.scan.start({
+			    success: (val, res)=> {
+			        console.log('扫描成功',val,res);
+					_that.palletNo=val;
+					_that.$forceUpdate();
+					_that.getPalletDetail();
+			    },
+			    fail: (rej)=>{
+			        console.log('扫描失败',rej);
+					uni.showToast({
+						title: '请在HTTPS环境下点击开启',
+						icon: 'none',
+						duration: 3000
+					});
+			    }
+			})
 			// #endif
 			
 			// #ifdef APP-PLUS