feat(路由): 新增签到模块相关页面和路由配置

添加签到模块的首页、扫码页和信息详情页
配置签到模块的路由路径
实现音频播放、图片预览等功能

 /*
  * @Date: 2023-05-29 11:10:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-02-10 16:19:29
+ * @LastEditTime: 2025-08-26 15:46:05
  * @FilePath: /map-demo/src/route.js
  * @Description: 文件描述
  */
@@ -112,4 +112,18 @@ export default [
       title: '详情页',
     },
   },
+  {
+    path: '/checkin',
+    component: () => import('@/views/checkin/map.vue'),
+    meta: {
+      title: '地图',
+    },
+  },
+  {
+    path: '/checkin/info',
+    component: () => import('@/views/checkin/info.vue'),
+    meta: {
+      title: '详情页',
+    },
+  },
 ];

+<!--
+ * @Date: 2024-09-14 17:48:55
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-09-21 23:04:40
+ * @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; background-color: white;">进&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
+    }
+  });
+  // 进入标记
+  localStorage.setItem('first_in_bieyuan', 1);
+}
+
+onMounted(() => {
+  // 记录第一次进入页面，之后判断是否第一次进入，直接跳转到MAP页面
+  if (localStorage.getItem('first_in_bieyuan') === '1') {
+    $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;
+    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
+    url('https://cdn.ipadbiz.cn/bieyuan/map/MAP@3x.png');
+    background-size: contain;
+  }
+</style>

+<!--
+ * @Date: 2024-09-15 11:45:13
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-09-18 11:15:56
+ * @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>