完成APP盘点

pages/index/index.vue

@@ -17,6 +17,11 @@
 					</view>
 				</view>
 			</view>
+			<!-- H5扫码弹窗 -->
+			<div v-if="showH5Scan" class="h5-scan-modal">
+				<div id="reader" style="width:300px;height:300px;margin:0 auto;"></div>
+				<button @click="closeH5Scan">关闭</button>
+			</div>
 		</view>
 	</view>
 </template>
@@ -45,7 +50,10 @@
 						status: 'in-progress',
 						statusText: '进行中'
 					}
-				]
+				],
+				showH5Scan: false,
+				html5QrCode: null,
+				scanType: '' // 'inventory' or 'view'
 			}
 		},
 		onLoad() {
@@ -59,32 +67,42 @@
 				const day = String(now.getDate()).padStart(2, '0')
 				this.currentDate = `${year}-${month}-${day}`
 			},
-			scanInventory() {
-				uni.scanCode({
-					success: (res) => {
-						console.log("url:", res.result);
-						let url = res.result;
-						let id = '';
-						// 用正则提取 id=xxx
-						const match = url.match(/[?&]id=([^&]+)/);
-						if (match) {
-							id = match[1];
-						}
-						console.log("id:", id);
-						if (!id) {
-							uni.showToast({ title: '二维码无效', icon: 'none' });
-							return;
-						}
-						uni.navigateTo({
-							url: `/pages/inventory/inventory?code=${encodeURIComponent(id)}`
-						});
-					},
-					fail: () => {
-						uni.showToast({ title: '扫码失败', icon: 'none' });
+			handleScan(type) {
+				this.scanType = type;
+				// #ifdef H5
+				this.showH5Scan = true;
+				this.$nextTick(() => {
+					if (!window.Html5Qrcode) {
+						uni.showToast({ title: '扫码库未加载', icon: 'none' });
+						return;
 					}
+					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;
+							}
+							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 => {}
+					);
 				});
-			},
-			scanView() {
+				// #endif
+				// #ifndef H5
 				uni.scanCode({
 					success: (res) => {
 						let url = res.result;
@@ -97,14 +115,31 @@
 							uni.showToast({ title: '二维码无效', icon: 'none' });
 							return;
 						}
-						uni.navigateTo({
-							url: `/pages/inventory/inventory?code=${encodeURIComponent(id)}&view=1`
-						});
+						if (type === 'inventory') {
+							uni.navigateTo({ url: `/pages/inventory/inventory?code=${encodeURIComponent(id)}` });
+						} else {
+							uni.navigateTo({ url: `/pages/inventory/inventory?code=${encodeURIComponent(id)}&view=1` });
+						}
 					},
 					fail: () => {
 						uni.showToast({ title: '扫码失败', icon: 'none' });
 					}
 				});
+				// #endif
+			},
+			scanInventory() {
+				this.handleScan('inventory');
+			},
+			scanView() {
+				this.handleScan('view');
+			},
+			closeH5Scan() {
+				this.showH5Scan = false;
+				if (this.html5QrCode) {
+					this.html5QrCode.stop().then(() => {
+						this.html5QrCode.clear();
+					});
+				}
 			},
 			goTaskDetail(item) {
 				uni.navigateTo({
@@ -257,4 +292,15 @@
 		background-color: #e8f5e9;
 		color: #4caf50;
 	}
+
+	.h5-scan-modal {
+		position: fixed;
+		left: 0; top: 0; right: 0; bottom: 0;
+		background: rgba(0,0,0,0.6);
+		z-index: 9999;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
 </style>

unpackage/dist/dev/app-plus/app-service.js

@@ -31,13 +31,6 @@ if (uni.restoreGlobal) {
 }
 (function(vue) {
   "use strict";
-  function formatAppLog(type, filename, ...args) {
-    if (uni.__log__) {
-      uni.__log__(type, filename, ...args);
-    } else {
-      console[type].apply(console, [...args, filename]);
-    }
-  }
   const _export_sfc = (sfc, props) => {
     const target = sfc.__vccOpts || sfc;
     for (const [key, val] of props) {
@@ -68,7 +61,11 @@ if (uni.restoreGlobal) {
             status: "in-progress",
             statusText: "进行中"
           }
-        ]
+        ],
+        showH5Scan: false,
+        html5QrCode: null,
+        scanType: ""
+        // 'inventory' or 'view'
       };
     },
     onLoad() {
@@ -82,51 +79,44 @@ if (uni.restoreGlobal) {
         const day = String(now.getDate()).padStart(2, "0");
         this.currentDate = `${year}-${month}-${day}`;
       },
-      scanInventory() {
+      handleScan(type) {
+        this.scanType = type;
         uni.scanCode({
           success: (res) => {
-            formatAppLog("log", "at pages/index/index.vue:65", "url:", res.result);
             let url = res.result;
             let id = "";
             const match = url.match(/[?&]id=([^&]+)/);
             if (match) {
               id = match[1];
             }
-            formatAppLog("log", "at pages/index/index.vue:73", "id:", id);
             if (!id) {
               uni.showToast({ title: "二维码无效", icon: "none" });
               return;
             }
-            uni.navigateTo({
-              url: `/pages/inventory/inventory?code=${encodeURIComponent(id)}`
-            });
+            if (type === "inventory") {
+              uni.navigateTo({ url: `/pages/inventory/inventory?code=${encodeURIComponent(id)}` });
+            } else {
+              uni.navigateTo({ url: `/pages/inventory/inventory?code=${encodeURIComponent(id)}&view=1` });
+            }
           },
           fail: () => {
             uni.showToast({ title: "扫码失败", icon: "none" });
           }
         });
       },
+      scanInventory() {
+        this.handleScan("inventory");
+      },
       scanView() {
-        uni.scanCode({
-          success: (res) => {
-            let url = res.result;
-            let id = "";
-            const match = url.match(/[?&]id=([^&]+)/);
-            if (match) {
-              id = match[1];
-            }
-            if (!id) {
-              uni.showToast({ title: "二维码无效", icon: "none" });
-              return;
-            }
-            uni.navigateTo({
-              url: `/pages/inventory/inventory?code=${encodeURIComponent(id)}&view=1`
-            });
-          },
-          fail: () => {
-            uni.showToast({ title: "扫码失败", icon: "none" });
-          }
-        });
+        this.handleScan("view");
+      },
+      closeH5Scan() {
+        this.showH5Scan = false;
+        if (this.html5QrCode) {
+          this.html5QrCode.stop().then(() => {
+            this.html5QrCode.clear();
+          });
+        }
       },
       goTaskDetail(item) {
         uni.navigateTo({
@@ -191,11 +181,31 @@ if (uni.restoreGlobal) {
               /* KEYED_FRAGMENT */
             ))
           ])
-        ])
+        ]),
+        vue.createCommentVNode(" H5扫码弹窗 "),
+        $data.showH5Scan ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: "h5-scan-modal"
+        }, [
+          vue.createElementVNode("div", {
+            id: "reader",
+            style: { "width": "300px", "height": "300px", "margin": "0 auto" }
+          }),
+          vue.createElementVNode("button", {
+            onClick: _cache[2] || (_cache[2] = (...args) => $options.closeH5Scan && $options.closeH5Scan(...args))
+          }, "关闭")
+        ])) : vue.createCommentVNode("v-if", true)
       ])
     ]);
   }
   const PagesIndexIndex = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$4], ["__file", "D:/Lynn/Langye/stocktaking/pages/index/index.vue"]]);
+  function formatAppLog(type, filename, ...args) {
+    if (uni.__log__) {
+      uni.__log__(type, filename, ...args);
+    } else {
+      console[type].apply(console, [...args, filename]);
+    }
+  }
   const BASE_API = "http://192.168.60.99:8004/";
   const config = {
     BASE_API

unpackage/dist/dev/app-plus/pages/index/index.css

@@ -120,4 +120,14 @@
 .task-status.in-progress {
 		background-color: #e8f5e9;
 		color: #4caf50;
+}
+.h5-scan-modal {
+		position: fixed;
+		left: 0; top: 0; right: 0; bottom: 0;
+		background: rgba(0,0,0,0.6);
+		z-index: 9999;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
 }