feat: 订单模块:vue-barcode-reader 扫条码和二维码

package-lock.json

@@ -25,6 +25,7 @@
         "deepmerge": "4.3.1",
         "pinia": "2.3.1",
         "vue": "3.5.13",
+        "vue-barcode-reader": "^1.0.3",
         "vue-i18n": "11.1.0",
         "vue-router": "4.5.0",
         "vue-table-with-tree-grid": "^0.2.4",
@@ -4480,6 +4481,28 @@
         }
       }
     },
+    "node_modules/@zxing/library": {
+      "version": "0.19.3",
+      "resolved": "https://registry.npmmirror.com/@zxing/library/-/library-0.19.3.tgz",
+      "integrity": "sha512-RUv5svewpDoD0ymXleOP8yVTO5BLkR0zn5coGC/Vs1671u0OBJ4xdtR8WVWf08OcvrieEMHdSfQY3ZKtqII/hg==",
+      "license": "MIT",
+      "dependencies": {
+        "ts-custom-error": "^3.2.1"
+      },
+      "engines": {
+        "node": ">= 10.4.0"
+      },
+      "optionalDependencies": {
+        "@zxing/text-encoding": "~0.9.0"
+      }
+    },
+    "node_modules/@zxing/text-encoding": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmmirror.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
+      "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==",
+      "license": "(Unlicense OR Apache-2.0)",
+      "optional": true
+    },
     "node_modules/abbrev": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/abbrev/-/abbrev-3.0.0.tgz",
@@ -12564,6 +12587,15 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/ts-custom-error": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/ts-custom-error/-/ts-custom-error-3.3.1.tgz",
+      "integrity": "sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
@@ -13256,6 +13288,15 @@
         }
       }
     },
+    "node_modules/vue-barcode-reader": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/vue-barcode-reader/-/vue-barcode-reader-1.0.3.tgz",
+      "integrity": "sha512-z4mv7+ai/8vECppBTb00tHnyFMMx6W1rAaQe+v214ihoaWK9iGrn8ZZsmgSxf3lwnrtGaibLdkonTtMrGsO+dA==",
+      "license": "MIT",
+      "dependencies": {
+        "@zxing/library": "^0.19.1"
+      }
+    },
     "node_modules/vue-component-type-helpers": {
       "version": "2.2.4",
       "resolved": "https://registry.npmmirror.com/vue-component-type-helpers/-/vue-component-type-helpers-2.2.4.tgz",

package.json

@@ -93,6 +93,7 @@
     "deepmerge": "4.3.1",
     "pinia": "2.3.1",
     "vue": "3.5.13",
+    "vue-barcode-reader": "^1.0.3",
     "vue-i18n": "11.1.0",
     "vue-router": "4.5.0",
     "vue-table-with-tree-grid": "^0.2.4",

src/main/webapp/app/orders/order/order.component.ts

@@ -4,11 +4,14 @@ import { useRouter } from 'vue-router';
 import { useAlertService } from '@/shared/alert/alert.service';
 import buildPaginationQueryOpts from '@/shared/sort/sorts';
 import axios from 'axios';
-import Quagga from '@ericblade/quagga2';
+import { StreamBarcodeReader } from 'vue-barcode-reader';
 
 export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'Order',
+  components: {
+    StreamBarcodeReader,
+  },
   setup() {
     const { t: t$ } = useI18n();
     const alertService = useAlertService();
@@ -134,57 +137,23 @@ export default defineComponent({
       }
     };
 
-    const initScanner = () => {
-      Quagga.init(
-        {
-          inputStream: {
-            name: 'Live',
-            type: 'LiveStream',
-            target: document.querySelector('#interactive'),
-            constraints: {
-              facingMode: 'environment',
-            },
-          },
-          decoder: {
-            readers: ['code_128_reader', 'ean_reader', 'ean_8_reader', 'code_39_reader', 'upc_reader'],
-          },
-        },
-        err => {
-          if (err) {
-            alertService.showError('扫码器初始化失败，请检查摄像头权限');
-            return;
-          }
-          Quagga.start();
-          scannerActive.value = true;
-        },
-      );
-
-      Quagga.onDetected(result => {
-        if (result && result.codeResult) {
-          const code = result.codeResult.code;
-          filterParams.value.number = code;
-          handleFilter();
-          stopScanner();
-          alertService.showInfo(`扫描成功：${code}`);
-        }
-      });
-    };
-
-    const stopScanner = () => {
-      if (scannerActive.value) {
-        Quagga.stop();
-        scannerActive.value = false;
-      }
-    };
-
     const handleScan = () => {
-      if (!scannerActive.value) {
-        initScanner();
-      } else {
-        stopScanner();
+      scannerActive.value = !scannerActive.value;
+    };
+
+    const onDecode = result => {
+      if (result) {
+        filterParams.value.number = result;
+        handleFilter();
+        scannerActive.value = false;
+        alertService.showInfo(`扫描成功：${result}`);
       }
     };
 
+    const onLoaded = () => {
+      alertService.showInfo('扫码器已就绪');
+    };
+
     const handlePrint = () => {
       // TODO: 实现打印功能
       alertService.showInfo('打印功能开发中');
@@ -212,6 +181,8 @@ export default defineComponent({
       handleScan,
       handlePrint,
       scannerActive,
+      onDecode,
+      onLoaded,
     };
   },
 });

src/main/webapp/app/orders/order/order.vue

@@ -35,7 +35,7 @@
 
     <!-- 扫码预览区域 -->
     <div v-show="scannerActive" class="scanner-container">
-      <div id="interactive" class="viewport"></div>
+      <StreamBarcodeReader v-if="scannerActive" @decode="onDecode" @loaded="onLoaded" />
     </div>
 
     <!-- 过滤表单 -->
@@ -176,15 +176,13 @@
   background: #000;
   padding: 10px;
   border-radius: 5px;
-}
-
-.viewport {
   width: 320px;
   height: 240px;
 }
 
-#interactive.viewport > video {
+.scanner-container video {
   width: 100%;
   height: 100%;
+  object-fit: cover;
 }
 </style>