完成APP盘点

manifest.json

@@ -72,6 +72,19 @@
     "h5" : {
         "router" : {
             "base" : "/h5/"
+        },
+        "title" : "盘点系统",
+        "domain" : "",
+        "template" : "index.html",
+        "optimization" : {
+            "treeShaking" : {
+                "enable" : true
+            }
+        },
+        "permission": {
+            "scope.camera": {
+                "desc": "用于扫描二维码"
+            }
         }
     }
 }

pages/index/index.vue

@@ -28,7 +28,7 @@
 
 <script>
 	// #ifdef H5
-	import { Html5Qrcode } from 'html5-qrcode';
+	import { Html5Qrcode, Html5QrcodeSupportedFormats } from 'html5-qrcode';
 	// #endif
 
 	export default {
@@ -74,36 +74,82 @@
 			handleScan(type) {
 				this.scanType = type;
 				// #ifdef H5
-				this.showH5Scan = true;
-				this.$nextTick(() => {
-					if (!window.Html5Qrcode) {
-						window.Html5Qrcode = Html5Qrcode;
-					}
-					this.html5QrCode = new window.Html5Qrcode("reader");
-					this.html5QrCode.start(
-						{ facingMode: "environment" },
-						{ fps: 10, qrbox: 250 },
-						qrCodeMessage => {
-							this.closeH5Scan();
-							let url = qrCodeMessage;
-							let id = '';
-							const match = url.match(/[?&]id=([^&]+)/);
-							if (match) {
-								id = match[1];
-							}
-							if (!id) {
-								uni.showToast({ title: '二维码无效', icon: 'none' });
-								return;
+				// 先请求摄像头权限
+				navigator.mediaDevices.getUserMedia({ 
+					video: { 
+						facingMode: "environment",
+						width: { ideal: 1280 },
+						height: { ideal: 720 }
+					} 
+				})
+					.then(() => {
+						this.showH5Scan = true;
+						this.$nextTick(() => {
+							if (!window.Html5Qrcode) {
+								window.Html5Qrcode = Html5Qrcode;
 							}
-							if (this.scanType === 'inventory') {
-								uni.navigateTo({ url: `/pages/inventory/inventory?code=${encodeURIComponent(id)}` });
-							} else {
-								uni.navigateTo({ url: `/pages/inventory/inventory?code=${encodeURIComponent(id)}&view=1` });
+							const config = {
+								fps: 10,
+								qrbox: { width: 250, height: 250 },
+								aspectRatio: 1.0,
+								formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ]
+							};
+							
+							this.html5QrCode = new window.Html5Qrcode("reader");
+							this.html5QrCode.start(
+								{ facingMode: "environment" },
+								config,
+								qrCodeMessage => {
+									this.closeH5Scan();
+									let url = qrCodeMessage;
+									let id = '';
+									const match = url.match(/[?&]id=([^&]+)/);
+									if (match) {
+										id = match[1];
+									}
+									if (!id) {
+										uni.showToast({ title: '二维码无效', icon: 'none' });
+										return;
+									}
+									if (this.scanType === 'inventory') {
+										uni.navigateTo({ url: `/pages/inventory/inventory?code=${encodeURIComponent(id)}` });
+									} else {
+										uni.navigateTo({ url: `/pages/inventory/inventory?code=${encodeURIComponent(id)}&view=1` });
+									}
+								},
+								errorMessage => {
+									console.log('扫码错误:', errorMessage);
+								}
+							).catch(err => {
+								console.error('启动扫码失败:', err);
+								uni.showToast({ 
+									title: '启动扫码失败，请检查摄像头权限', 
+									icon: 'none',
+									duration: 2000
+								});
+								this.closeH5Scan();
+							});
+						});
+					})
+					.catch(err => {
+						console.error('摄像头权限错误:', err);
+						uni.showModal({
+							title: '提示',
+							content: '请允许访问摄像头以使用扫码功能',
+							confirmText: '确定',
+							showCancel: false,
+							success: () => {
+								// 引导用户去设置页面开启权限
+								if (uni.getSystemInfoSync().platform === 'android') {
+									uni.showToast({
+										title: '请在系统设置中开启摄像头权限',
+										icon: 'none',
+										duration: 2000
+									});
+								}
 							}
-						},
-						errorMessage => {}
-					);
-				});
+						});
+					});
 				// #endif
 				// #ifndef H5
 				uni.scanCode({
@@ -306,4 +352,43 @@
 		align-items: center;
 		justify-content: center;
 	}
+
+	.h5-scan-modal #reader {
+		width: 300px !important;
+		height: 300px !important;
+		margin: 0 auto;
+		background: #fff;
+		border-radius: 8px;
+		overflow: hidden;
+	}
+
+	.h5-scan-modal #reader video {
+		width: 100% !important;
+		height: 100% !important;
+		object-fit: cover;
+	}
+
+	.h5-scan-modal #reader__scan_region {
+		width: 100% !important;
+		height: 100% !important;
+	}
+
+	.h5-scan-modal #reader__scan_region video {
+		width: 100% !important;
+		height: 100% !important;
+	}
+
+	.h5-scan-modal button {
+		margin-top: 20px;
+		padding: 8px 20px;
+		background: #409eff;
+		color: #fff;
+		border: none;
+		border-radius: 4px;
+		cursor: pointer;
+	}
+
+	.h5-scan-modal button:hover {
+		background: #66b1ff;
+	}
 </style>