From 178cb63862c610d4a1c11c003be8814d36982c45 Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Wed, 8 Jan 2025 14:52:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=AB=E7=A0=81=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json             |   6 ++
 package.json                  |   1 +
 src/utils/router/index.ts     |   5 ++
 src/views/home/index.vue      |   2 +-
 src/views/home/scanQrCode.vue | 165 ++++++++++++++++++++++++++++++++++
 5 files changed, 178 insertions(+), 1 deletion(-)
 create mode 100644 src/views/home/scanQrCode.vue

diff --git a/package-lock.json b/package-lock.json
index 1019f2f..7d61c22 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "axios": "^1.7.7",
         "element-plus": "^2.8.6",
         "font-awesome": "^4.7.0",
+        "html5-qrcode": "^2.3.8",
         "js-beautify": "^1.15.1",
         "nprogress": "^0.2.0",
         "path": "^0.12.7",
@@ -3895,6 +3896,11 @@
       "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
     },
+    "node_modules/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=="
+    },
     "node_modules/htmlparser2": {
       "version": "3.10.1",
       "resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-3.10.1.tgz",
diff --git a/package.json b/package.json
index f1821b0..bd95f16 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "axios": "^1.7.7",
     "element-plus": "^2.8.6",
     "font-awesome": "^4.7.0",
+    "html5-qrcode": "^2.3.8",
     "js-beautify": "^1.15.1",
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
diff --git a/src/utils/router/index.ts b/src/utils/router/index.ts
index 6883a97..85ba1a1 100644
--- a/src/utils/router/index.ts
+++ b/src/utils/router/index.ts
@@ -20,6 +20,11 @@ export const staticRouting : RouteRecordRaw[] = [
         component: () => import('@/views/home/index.vue'),
         meta: { hidden: true },
     },
+    {
+        path: '/scanQrCode',
+        component: () => import('@/views/home/scanQrCode.vue'),
+        meta: { hidden: true },
+    },
     {
         path: '/login',
         component: () => import('@/views/login/index.vue'),
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 438ec7d..61e4d7f 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -280,7 +280,7 @@ const openNews = (val:any,name:string) => {
                         </span>
                         <template #dropdown>
                             <el-dropdown-menu>
-                            <el-dropdown-item><el-icon :size="16"><SetUp /></el-icon>扫一扫</el-dropdown-item>
+                            <el-dropdown-item @click="router.push('/scanQrCode')"><el-icon :size="16"><SetUp /></el-icon>扫一扫</el-dropdown-item>
                             
                             </el-dropdown-menu>
                         </template>
diff --git a/src/views/home/scanQrCode.vue b/src/views/home/scanQrCode.vue
new file mode 100644
index 0000000..bdb8696
--- /dev/null
+++ b/src/views/home/scanQrCode.vue
@@ -0,0 +1,165 @@
+<template>
+    <div class="scanCode">
+      <div class="container">
+        <div class="qrcode">
+          <div id="reader"></div>
+        </div>
+      </div>
+      <div class="btn">
+        <div class="left-back">
+          <van-icon name="arrow-left" @click="clickBack" />
+        </div>
+        <div class="right-file">
+          <van-uploader
+            v-model="fileList"
+            :preview-image="false"
+            :after-read="dealSelectFiles"
+          >
+            <van-icon name="photo-o"
+          /></van-uploader>
+        </div>
+      </div>
+    </div>
+  </template>
+  ​
+  <script>
+  import { reactive } from "vue";
+  import { defineComponent, toRefs, onMounted, onUnmounted } from "vue";
+  import { Html5Qrcode } from "html5-qrcode";
+  
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        html5QrCode: null,
+        fileList: [],
+      });
+      const start = () => {
+        state.html5QrCode
+          .start(
+            { facingMode: "environment" },
+            {
+              fps: 1,
+              qrbox: { width: 250, height: 250 },
+            },
+            (decodedText, decodedResult) => {
+              console.log("decodedText", decodedText);
+              console.log("decodedResult", decodedResult);
+            }
+          )
+          .catch((err) => {
+            console.log("扫码错误信息", err);
+            let message = ""; // 错误信息处理仅供参考，具体描述自定义
+            if (typeof err == "string") {
+              message = "二维码识别失败！";
+            } else {
+              if (err.name == "NotAllowedError") {
+                message = "您需要授予相机访问权限！";
+              }
+              if (err.name == "NotFoundError") {
+                message = "这个设备上没有摄像头！";
+              }
+              if (err.name == "NotSupportedError") {
+                message =
+                  "摄像头访问只支持在安全的上下文中，如https或localhost！";
+              }
+              if (err.name == "NotReadableError") {
+                message = "相机被占用！";
+              }
+              if (err.name == "OverconstrainedError") {
+                message = "安装摄像头不合适！";
+              }
+              if (err.name == "StreamApiNotSupportedError") {
+                message = "此浏览器不支持流API！";
+              }
+            }
+          });
+      };
+      const getCameras = () => {
+        Html5Qrcode.getCameras()
+          .then((devices) => {
+            if (devices && devices.length) {
+              state.html5QrCode = new Html5Qrcode("reader");
+              start();
+            }
+          })
+          .catch((err) => {
+            alert("摄像头无访问权限！");
+          });
+      };
+      const stop = () => {
+        state.html5QrCode
+          .stop()
+          .then((ignore) => {
+            console.log("停止扫码", ignore);
+          })
+          .catch((err) => {
+            console.log(err);
+            alert("停止扫码失败");
+          });
+      };
+      const dealSelectFiles = () => {
+        try {
+          window.qrcode.callback = (result) => {
+            alert("成功了，结果是：" + result);
+          }; // get select files.
+          let file = state.fileList[0].file;
+          var reader = new FileReader();
+          reader.onload = (function () {
+            return function (e) {
+              window.qrcode.decode(e.target.result);
+            };
+          })(file);
+          reader.readAsDataURL(file);
+        } catch (error) {
+          alert("图片识别失败！");
+        }
+      };
+      onMounted(() => {
+        getCameras();
+      });
+      onUnmounted(() => {
+        //扫描设备是否在运行
+        if (state.html5QrCode.isScanning) {
+          stop();
+        }
+      });
+      return {
+        ...toRefs(state),
+        getCameras,
+        dealSelectFiles,
+      };
+    },
+  });
+  </script>
+  
+  <style lang="scss" scoped>
+  .scanCode {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: rgba(0, 0, 0);
+  }
+  .container {
+    height: 90vh;
+    position: relative;
+    width: 100%;
+  }
+  ​.qrcode {
+    height: 100%;
+  }
+  #reader {
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+  }
+  .btn {
+    flex: 1;
+    padding: 3vw;
+    display: flex;
+    justify-content: space-around;
+    color: #fff;
+    font-size: 8vw;
+    align-items: flex-start;
+  }
+  </style>
+  ​
\ No newline at end of file