Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
dd7bb0d9 1 parent 878fc12d

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

Inline Side-by-side
Showing 7 changed files with 250 additions and 4 deletions
...@@ -12,7 +12,7 @@ VITE_PROXY_PREFIX = /srv/ ...@@ -12,7 +12,7 @@ VITE_PROXY_PREFIX = /srv/
12 VITE_OUTDIR = map 12 VITE_OUTDIR = map
13 13
14 # 是否开启调试 14 # 是否开启调试
15 -VITE_CONSOLE = 0 15 +VITE_CONSOLE = 1
16 16
17 # appID相关 17 # appID相关
18 VITE_APPID=微信appID 18 VITE_APPID=微信appID
......
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
21 "@videojs-player/vue": "^1.0.0", 21 "@videojs-player/vue": "^1.0.0",
22 "@vitejs/plugin-legacy": "^1.8.2", 22 "@vitejs/plugin-legacy": "^1.8.2",
23 "@vueuse/core": "^8.5.0", 23 "@vueuse/core": "^8.5.0",
24 + "@zxing/library": "^0.21.3",
24 "animate.css": "^4.1.1", 25 "animate.css": "^4.1.1",
25 "dayjs": "^1.11.3", 26 "dayjs": "^1.11.3",
26 "default-passive-events": "^2.0.0", 27 "default-passive-events": "^2.0.0",
......
1 /* 1 /*
2 * @Date: 2023-05-29 11:10:19 2 * @Date: 2023-05-29 11:10:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-14 14:23:54 4 + * @LastEditTime: 2024-09-15 11:46:59
5 * @FilePath: /map-demo/src/route.js 5 * @FilePath: /map-demo/src/route.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -42,10 +42,24 @@ export default [ ...@@ -42,10 +42,24 @@ export default [
42 }, 42 },
43 }, 43 },
44 { 44 {
45 + path: '/bieyuan',
46 + component: () => import('@/views/bieyuan/index.vue'),
47 + meta: {
48 + title: '首页',
49 + },
50 + },
51 + {
45 path: '/bieyuan/map', 52 path: '/bieyuan/map',
46 component: () => import('@/views/bieyuan/map.vue'), 53 component: () => import('@/views/bieyuan/map.vue'),
47 meta: { 54 meta: {
48 title: '地图', 55 title: '地图',
49 }, 56 },
50 - } 57 + },
58 + {
59 + path: '/bieyuan/scan',
60 + component: () => import('@/views/bieyuan/scan.vue'),
61 + meta: {
62 + title: '扫描',
63 + },
64 + },
51 ]; 65 ];
......
1 +<!--
2 + * @Date: 2024-09-14 17:48:55
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-09-14 18:20:47
5 + * @FilePath: /map-demo/src/views/bieyuan/index.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="index-page">
10 + <div style="display: flex; flex-direction: column; align-items: center;">
11 + <van-image
12 + width="12rem"
13 + height="12rem"
14 + fit="contain"
15 + src="https://cdn.ipadbiz.cn/bieyuan/map/icon/index_logo@3x.png"
16 + />
17 + <div style="margin-top: 2rem; font-size: 0.95rem; letter-spacing: 5px; color: #47525F;">山水逢甘露，静心遇桃源</div>
18 + </div>
19 + <div @click="goTo" style="border: 1px solid #DD7850; padding: 0.8rem 5.5rem; border-radius: 5px; font-size: 1.15rem; color: #DD7850;">进&nbsp;入</div>
20 + </div>
21 +</template>
22 +
23 +<script setup>
24 +import { ref } from 'vue'
25 +import { useRoute, useRouter } from 'vue-router'
26 +
27 +//import { } from '@/utils/generateModules.js'
28 +//import { } from '@/utils/generateIcons.js'
29 +//import { } from '@/composables'
30 +const $route = useRoute();
31 +const $router = useRouter();
32 +
33 +const goTo = () => {
34 + $router.push({
35 + path: './map',
36 + query: {
37 + id: $route.query.id
38 + }
39 + })
40 +}
41 +</script>
42 +
43 +<style lang="less" scoped>
44 + .index-page {
45 + height: 100vh;
46 + display: flex;
47 + flex-direction: column;
48 + justify-content: space-evenly;
49 + align-items: center;
50 + }
51 +</style>
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-14 17:35:43 4 + * @LastEditTime: 2024-09-15 19:04:38
5 * @FilePath: /map-demo/src/views/bieyuan/map.vue 5 * @FilePath: /map-demo/src/views/bieyuan/map.vue
6 * @Description: 公众地图主体页面 6 * @Description: 公众地图主体页面
7 --> 7 -->
8 <template> 8 <template>
9 <div ref="root" style="height: 100vh; position: relative; overflow: hidden;"> 9 <div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
10 <div id="container"></div> 10 <div id="container"></div>
11 + <div @click="scanQrcode" style="position: absolute; bottom: 3rem; left: calc(50% - 2.5rem);">
12 + <van-image
13 + width="5rem"
14 + height="5rem"
15 + fit="contain"
16 + src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan@3x.png"
17 + />
18 + </div>
11 </div> 19 </div>
12 </template> 20 </template>
13 21
...@@ -496,6 +504,19 @@ export default { ...@@ -496,6 +504,19 @@ export default {
496 "]," 504 "],"
497 console.log(text); 505 console.log(text);
498 }, 506 },
507 + scanQrcode() {
508 + wx.scanQRCode({
509 + needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
510 + scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
511 + success: function (res) {
512 + var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
513 + }
514 + });
515 + // 识别率太低
516 + // this.$router.push({
517 + // path: '/bieyuan/scan'
518 + // })
519 + },
499 } 520 }
500 } 521 }
501 </script> 522 </script>
......
1 +<!--
2 + * @Date: 2024-09-15 11:45:13
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-09-15 18:54:36
5 + * @FilePath: /map-demo/src/views/bieyuan/scan.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="scan-page">
10 + <!--<div class="scan_wrapper">
11 + <div class="scan_box">
12 + <!~~ 镜头区域 ~~>
13 + <video ref="video" id="video" class="scan-video" autoplay></video>
14 + </div>
15 + <div @click="openScan" class="scan_text">点击扫描二维码查看详情</div>
16 + </div>
17 + <div class="sys_logo">
18 + <van-image
19 + width="3rem"
20 + height="3rem"
21 + fit="contain"
22 + src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_logo.png"
23 + />
24 + </div>-->
25 +
26 + <video ref="video" id="video" class="video vjs-fluid" autoplay></video>
27 + <div v-show="tipShow" class="tip">{{tipMsg}}</div>
28 + </div>
29 +</template>
30 +
31 +<script setup>
32 +import { ref } from "vue";
33 +import { useRoute, useRouter } from "vue-router";
34 +
35 +const $route = useRoute();
36 +const $router = useRouter();
37 +
38 +import { BrowserMultiFormatReader } from "@zxing/library";
39 +// import axios from 'axios'
40 +const codeReader = ref(null);
41 +
42 +const scanText = ref("");
43 +// 初始化相机
44 +const openScan = () => {
45 + codeReader.value = new BrowserMultiFormatReader();
46 + codeReader.value
47 + .getVideoInputDevices()
48 + .then((videoDevices) => {
49 + let firstDeviceId = videoDevices[videoDevices.length - 1].deviceId;
50 + if (videoDevices.length > 1) {
51 + // 一般通过判断摄像头列表项里的 label 字段，'camera2 0, facing back' 字符串含有 'back' 和 '0'，大部分机型是这样，如果有些机型没有，那就还是默认获取最后一个
52 + firstDeviceId = videoDevices.find((el) => {
53 + return el.label.indexOf("back") > -1 && el.label.indexOf("0") > -1;
54 + })
55 + ? videoDevices.find((el) => {
56 + return el.label.indexOf("back") > -1 && el.label.indexOf("0") > -1;
57 + }).deviceId
58 + : videoDevices[videoDevices.length - 1].deviceId;
59 + }
60 + decodeFromInputVideoFunc(firstDeviceId);
61 + })
62 + .catch((err) => {
63 + console.log(err);
64 + });
65 +};
66 +
67 +// 扫码
68 +const decodeFromInputVideoFunc = (firstDeviceId) => {
69 + // 使用摄像头扫描
70 + codeReader.value.reset(); // 重置
71 + codeReader.value.decodeFromInputVideoDeviceContinuously(
72 + firstDeviceId,
73 + "video",
74 + (result, err) => {
75 + if (result) {
76 + alert(result.text);
77 + console.log("扫码结果", result);
78 + scanText.value = result.text;
79 + if (scanText.value) {
80 + // 识别成功关闭摄像头
81 + codeReader.value.reset();
82 + codeReader.value.stopContinuousDecodeFromInputVideoDevice();
83 + }
84 + }
85 + }
86 + );
87 +};
88 +
89 +onMounted(() => {});
90 +</script>
91 +
92 +
93 +<style lang="less" scoped>
94 +.scan-page {
95 + position: relative;
96 + height: 100vh;
97 + .scan_wrapper {
98 + display: flex;
99 + padding: 1rem;
100 + flex-direction: column;
101 + align-items: center;
102 + padding-top: 5rem;
103 + .scan_box {
104 + padding: 1rem;
105 + background-image: url('https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_bg.png');
106 + background-size: contain;
107 + background-repeat: no-repeat;
108 + background-position: center center;
109 + height: 20rem;
110 + width: 90%;
111 + position: relative;
112 + overflow: hidden; /* 确保溢出内容被隐藏 */
113 + box-sizing: border-box; /* 包括 padding 在内的尺寸计算 */
114 + .scan-video {
115 + object-fit: cover; /* 保持视频内容的比例，同时填满容器 */
116 + position: absolute; /* 确保视频覆盖整个容器 */
117 + top: -1rem;
118 + left: -1rem;
119 + width: calc(100% - 2rem); /* 视频宽度减去左右1rem的padding */
120 + height: calc(100% - 2rem); /* 视频高度减去上下1rem的padding */
121 + padding: 2rem;
122 + object-fit: cover; /* 保持视频比例，同时填充容器 */
123 + }
124 + }
125 + .scan_text {
126 + font-size: 0.9rem;
127 + color: #DD7850;
128 + padding: 0.5rem 1rem;
129 + margin: 1rem;
130 + border: 1px solid #DD7850;
131 + border-radius: 5px;
132 + }
133 + }
134 + .sys_logo {
135 + position: absolute;
136 + bottom: 3rem;
137 + left: calc(50% - 1.5rem);
138 + }
139 +}
140 +</style>
...@@ -458,6 +458,20 @@ ...@@ -458,6 +458,20 @@
458 resolved "https://mirrors.cloud.tencent.com/npm/@xmldom/xmldom/-/xmldom-0.8.7.tgz" 458 resolved "https://mirrors.cloud.tencent.com/npm/@xmldom/xmldom/-/xmldom-0.8.7.tgz"
459 integrity sha512-sI1Ly2cODlWStkINzqGrZ8K6n+MTSbAeQnAipGyL+KZCXuHaRlj2gyyy8B/9MvsFFqN7XHryQnB2QwhzvJXovg== 459 integrity sha512-sI1Ly2cODlWStkINzqGrZ8K6n+MTSbAeQnAipGyL+KZCXuHaRlj2gyyy8B/9MvsFFqN7XHryQnB2QwhzvJXovg==
460 460
461 +"@zxing/library@^0.21.3":
462 + version "0.21.3"
463 + resolved "https://mirrors.cloud.tencent.com/npm/@zxing/library/-/library-0.21.3.tgz#0a4cb777701884131832b05922d7e88ef1b87ab4"
464 + integrity sha512-hZHqFe2JyH/ZxviJZosZjV+2s6EDSY0O24R+FQmlWZBZXP9IqMo7S3nb3+2LBWxodJQkSurdQGnqE7KXqrYgow==
465 + dependencies:
466 + ts-custom-error "^3.2.1"
467 + optionalDependencies:
468 + "@zxing/text-encoding" "~0.9.0"
469 +
470 +"@zxing/text-encoding@~0.9.0":
471 + version "0.9.0"
472 + resolved "https://mirrors.cloud.tencent.com/npm/@zxing/text-encoding/-/text-encoding-0.9.0.tgz#fb50ffabc6c7c66a0c96b4c03e3d9be74864b70b"
473 + integrity sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==
474 +
461 acorn-jsx@^5.3.2: 475 acorn-jsx@^5.3.2:
462 version "5.3.2" 476 version "5.3.2"
463 resolved "https://mirrors.cloud.tencent.com/npm/acorn-jsx/-/acorn-jsx-5.3.2.tgz" 477 resolved "https://mirrors.cloud.tencent.com/npm/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
...@@ -2913,6 +2927,11 @@ tough-cookie@~2.5.0: ...@@ -2913,6 +2927,11 @@ tough-cookie@~2.5.0:
2913 psl "^1.1.28" 2927 psl "^1.1.28"
2914 punycode "^2.1.1" 2928 punycode "^2.1.1"
2915 2929
2930 +ts-custom-error@^3.2.1:
2931 + version "3.3.1"
2932 + resolved "https://mirrors.cloud.tencent.com/npm/ts-custom-error/-/ts-custom-error-3.3.1.tgz#8bd3c8fc6b8dc8e1cb329267c45200f1e17a65d1"
2933 + integrity sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==
2934 +
2916 tslib@^1.13.0, tslib@^1.8.1: 2935 tslib@^1.13.0, tslib@^1.8.1:
2917 version "1.14.1" 2936 version "1.14.1"
2918 resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz" 2937 resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
......