扫描功能测试，效果不好，放弃

@@ -12,7 +12,7 @@ VITE_PROXY_PREFIX = /srv/
 VITE_OUTDIR = map
 
 # 是否开启调试
-VITE_CONSOLE = 0
+VITE_CONSOLE = 1
 
 # appID相关
 VITE_APPID=微信appID

@@ -21,6 +21,7 @@
     "@videojs-player/vue": "^1.0.0",
     "@vitejs/plugin-legacy": "^1.8.2",
     "@vueuse/core": "^8.5.0",
+    "@zxing/library": "^0.21.3",
     "animate.css": "^4.1.1",
     "dayjs": "^1.11.3",
     "default-passive-events": "^2.0.0",

 /*
  * @Date: 2023-05-29 11:10:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-14 14:23:54
+ * @LastEditTime: 2024-09-15 11:46:59
  * @FilePath: /map-demo/src/route.js
  * @Description: 文件描述
  */
@@ -42,10 +42,24 @@ export default [
     },
   },
   {
+    path: '/bieyuan',
+    component: () => import('@/views/bieyuan/index.vue'),
+    meta: {
+      title: '首页',
+    },
+  },
+  {
     path: '/bieyuan/map',
     component: () => import('@/views/bieyuan/map.vue'),
     meta: {
       title: '地图',
     },
-  }
+  },
+  {
+    path: '/bieyuan/scan',
+    component: () => import('@/views/bieyuan/scan.vue'),
+    meta: {
+      title: '扫描',
+    },
+  },
 ];

+<!--
+ * @Date: 2024-09-14 17:48:55
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-09-14 18:20:47
+ * @FilePath: /map-demo/src/views/bieyuan/index.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="index-page">
+    <div style="display: flex; flex-direction: column; align-items: center;">
+      <van-image
+        width="12rem"
+        height="12rem"
+        fit="contain"
+        src="https://cdn.ipadbiz.cn/bieyuan/map/icon/index_logo@3x.png"
+      />
+      <div style="margin-top: 2rem; font-size: 0.95rem; letter-spacing: 5px; color: #47525F;">山水逢甘露，静心遇桃源</div>
+    </div>
+    <div @click="goTo" style="border: 1px solid #DD7850; padding: 0.8rem 5.5rem; border-radius: 5px; font-size: 1.15rem; color: #DD7850;">进&nbsp;入</div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+//import { } from '@/utils/generateModules.js'
+//import { } from '@/utils/generateIcons.js'
+//import { } from '@/composables'
+const $route = useRoute();
+const $router = useRouter();
+
+const goTo = () => {
+  $router.push({
+    path: './map',
+    query: {
+      id: $route.query.id
+    }
+  })
+}
+</script>
+
+<style lang="less" scoped>
+  .index-page {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+  }
+</style>

 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-14 17:35:43
+ * @LastEditTime: 2024-09-15 19:04:38
  * @FilePath: /map-demo/src/views/bieyuan/map.vue
  * @Description: 公众地图主体页面
 -->
 <template>
   <div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
     <div id="container"></div>
+    <div @click="scanQrcode" style="position: absolute; bottom: 3rem; left: calc(50% - 2.5rem);">
+      <van-image
+        width="5rem"
+        height="5rem"
+        fit="contain"
+        src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan@3x.png"
+      />
+    </div>
   </div>
 </template>
 
@@ -496,6 +504,19 @@ export default {
         "],"
       console.log(text);
     },
+    scanQrcode() {
+      wx.scanQRCode({
+        needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
+        scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
+        success: function (res) {
+          var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
+        }
+      });
+      // 识别率太低
+      // this.$router.push({
+      //   path: '/bieyuan/scan'
+      // })
+    },
   }
 }
 </script>

+<!--
+ * @Date: 2024-09-15 11:45:13
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-09-15 18:54:36
+ * @FilePath: /map-demo/src/views/bieyuan/scan.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="scan-page">
+    <!--<div class="scan_wrapper">
+      <div class="scan_box">
+        <!~~ 镜头区域 ~~>
+        <video ref="video" id="video" class="scan-video" autoplay></video>
+      </div>
+      <div @click="openScan" class="scan_text">点击扫描二维码查看详情</div>
+    </div>
+    <div class="sys_logo">
+      <van-image
+        width="3rem"
+        height="3rem"
+        fit="contain"
+        src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_logo.png"
+      />
+    </div>-->
+
+    <video ref="video" id="video" class="video vjs-fluid" autoplay></video>
+    <div v-show="tipShow" class="tip">{{tipMsg}}</div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const $route = useRoute();
+const $router = useRouter();
+
+import { BrowserMultiFormatReader } from "@zxing/library";
+// import axios from 'axios'
+const codeReader = ref(null);
+
+const scanText = ref("");
+// 初始化相机
+const openScan = () => {
+  codeReader.value = new BrowserMultiFormatReader();
+  codeReader.value
+    .getVideoInputDevices()
+    .then((videoDevices) => {
+      let firstDeviceId = videoDevices[videoDevices.length - 1].deviceId;
+      if (videoDevices.length > 1) {
+        // 一般通过判断摄像头列表项里的 label 字段，'camera2 0, facing back' 字符串含有 'back' 和 '0'，大部分机型是这样，如果有些机型没有，那就还是默认获取最后一个
+        firstDeviceId = videoDevices.find((el) => {
+          return el.label.indexOf("back") > -1 && el.label.indexOf("0") > -1;
+        })
+          ? videoDevices.find((el) => {
+              return el.label.indexOf("back") > -1 && el.label.indexOf("0") > -1;
+            }).deviceId
+          : videoDevices[videoDevices.length - 1].deviceId;
+      }
+      decodeFromInputVideoFunc(firstDeviceId);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+// 扫码
+const decodeFromInputVideoFunc = (firstDeviceId) => {
+  // 使用摄像头扫描
+  codeReader.value.reset(); // 重置
+  codeReader.value.decodeFromInputVideoDeviceContinuously(
+    firstDeviceId,
+    "video",
+    (result, err) => {
+      if (result) {
+        alert(result.text);
+        console.log("扫码结果", result);
+        scanText.value = result.text;
+        if (scanText.value) {
+          // 识别成功关闭摄像头
+          codeReader.value.reset();
+          codeReader.value.stopContinuousDecodeFromInputVideoDevice();
+        }
+      }
+    }
+  );
+};
+
+onMounted(() => {});
+</script>
+
+
+<style lang="less" scoped>
+.scan-page {
+  position: relative;
+  height: 100vh;
+  .scan_wrapper {
+    display: flex;
+    padding: 1rem;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 5rem;
+    .scan_box {
+      padding: 1rem;
+      background-image: url('https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_bg.png');
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      height: 20rem;
+      width: 90%;
+      position: relative;
+      overflow: hidden; /* 确保溢出内容被隐藏 */
+      box-sizing: border-box; /* 包括 padding 在内的尺寸计算 */
+      .scan-video {
+        object-fit: cover; /* 保持视频内容的比例，同时填满容器 */
+        position: absolute; /* 确保视频覆盖整个容器 */
+        top: -1rem;
+        left: -1rem;
+        width: calc(100% - 2rem); /* 视频宽度减去左右1rem的padding */
+        height: calc(100% - 2rem); /* 视频高度减去上下1rem的padding */
+        padding: 2rem;
+        object-fit: cover; /* 保持视频比例，同时填充容器 */
+      }
+    }
+    .scan_text {
+      font-size: 0.9rem;
+      color: #DD7850;
+      padding: 0.5rem 1rem;
+      margin: 1rem;
+      border: 1px solid #DD7850;
+      border-radius: 5px;
+    }
+  }
+  .sys_logo {
+    position: absolute;
+    bottom: 3rem;
+    left: calc(50% - 1.5rem);
+  }
+}
+</style>

@@ -458,6 +458,20 @@
   resolved "https://mirrors.cloud.tencent.com/npm/@xmldom/xmldom/-/xmldom-0.8.7.tgz"
   integrity sha512-sI1Ly2cODlWStkINzqGrZ8K6n+MTSbAeQnAipGyL+KZCXuHaRlj2gyyy8B/9MvsFFqN7XHryQnB2QwhzvJXovg==
 
+"@zxing/library@^0.21.3":
+  version "0.21.3"
+  resolved "https://mirrors.cloud.tencent.com/npm/@zxing/library/-/library-0.21.3.tgz#0a4cb777701884131832b05922d7e88ef1b87ab4"
+  integrity sha512-hZHqFe2JyH/ZxviJZosZjV+2s6EDSY0O24R+FQmlWZBZXP9IqMo7S3nb3+2LBWxodJQkSurdQGnqE7KXqrYgow==
+  dependencies:
+    ts-custom-error "^3.2.1"
+  optionalDependencies:
+    "@zxing/text-encoding" "~0.9.0"
+
+"@zxing/text-encoding@~0.9.0":
+  version "0.9.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/@zxing/text-encoding/-/text-encoding-0.9.0.tgz#fb50ffabc6c7c66a0c96b4c03e3d9be74864b70b"
+  integrity sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://mirrors.cloud.tencent.com/npm/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
@@ -2913,6 +2927,11 @@ tough-cookie@~2.5.0:
     psl "^1.1.28"
     punycode "^2.1.1"
 
+ts-custom-error@^3.2.1:
+  version "3.3.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/ts-custom-error/-/ts-custom-error-3.3.1.tgz#8bd3c8fc6b8dc8e1cb329267c45200f1e17a65d1"
+  integrity sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==
+
 tslib@^1.13.0, tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"