Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7bd8a351 1 parent dc1a6547

feat(地图页面): 添加底部导航组件并调整地图高度 

新增底部导航组件BottomNav，用于小程序web-view环境中的页面导航
动态计算地图高度以适应底部导航栏
添加相关图标资源并更新vite配置路径
更新组件类型声明文件
Inline Side-by-side
Showing 11 changed files with 164 additions and 8 deletions
...@@ -12,6 +12,7 @@ declare module '@vue/runtime-core' { ...@@ -12,6 +12,7 @@ declare module '@vue/runtime-core' {
12 AudioBackground: typeof import('./src/components/audioBackground.vue')['default'] 12 AudioBackground: typeof import('./src/components/audioBackground.vue')['default']
13 AudioBackground1: typeof import('./src/components/audioBackground1.vue')['default'] 13 AudioBackground1: typeof import('./src/components/audioBackground1.vue')['default']
14 AudioList: typeof import('./src/components/audioList.vue')['default'] 14 AudioList: typeof import('./src/components/audioList.vue')['default']
15 + BottomNav: typeof import('./src/components/BottomNav.vue')['default']
15 ElButton: typeof import('element-plus/es')['ElButton'] 16 ElButton: typeof import('element-plus/es')['ElButton']
16 ElInput: typeof import('element-plus/es')['ElInput'] 17 ElInput: typeof import('element-plus/es')['ElInput']
17 ElOption: typeof import('element-plus/es')['ElOption'] 18 ElOption: typeof import('element-plus/es')['ElOption']
......
1 +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1756303912062" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21734" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m0 73.142857C323.486476 170.666667 170.666667 323.486476 170.666667 512s152.81981 341.333333 341.333333 341.333333 341.333333-152.81981 341.333333-341.333333S700.513524 170.666667 512 170.666667z m190.854095 160.572952l-86.186666 275.334095L341.333333 692.760381l86.211048-275.334095 275.309714-86.186667z m-216.941714 144.579048l-33.01181 105.374476 105.398858-32.987429-72.411429-72.411428z" p-id="21735"></path></svg>
...\ No newline at end of file ...\ No newline at end of file
1 +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1756302772088" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8533" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M549.61981 133.022476l319.683047 203.605334A70.851048 70.851048 0 0 1 902.095238 396.361143v434.883047A70.89981 70.89981 0 0 1 831.146667 902.095238h-282.819048l0.024381-218.112h-71.826286v218.087619L192.853333 902.095238A70.89981 70.89981 0 0 1 121.904762 831.24419V390.241524c0-24.527238 12.678095-47.299048 33.54819-60.220953l318.659048-197.485714a70.972952 70.972952 0 0 1 75.50781 0.487619zM828.952381 828.952381V397.214476L511.488 195.047619 195.047619 391.119238V828.952381h211.309714v-216.551619h212.187429v216.527238L828.952381 828.952381z" p-id="8534"></path></svg>
...\ No newline at end of file ...\ No newline at end of file
1 +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1756304253215" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16498" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M853.333333 896a42.666667 42.666667 0 0 1-42.666666-42.666667 298.666667 298.666667 0 0 0-6.186667-60.16 289.066667 289.066667 0 0 0-17.28-56.106666 292.266667 292.266667 0 0 0-27.52-50.773334 313.386667 313.386667 0 0 0-36.48-44.16 301.653333 301.653333 0 0 0-44.16-36.48 42.666667 42.666667 0 1 1 47.573333-70.613333 375.253333 375.253333 0 0 1 56.96 46.72 395.52 395.52 0 0 1 46.72 56.746667A379.733333 379.733333 0 0 1 865.706667 704 386.773333 386.773333 0 0 1 896 853.333333a42.666667 42.666667 0 0 1-42.666667 42.666667zM741.973333 272.64a228.48 228.48 0 0 0-13.866666-43.946667 225.28 225.28 0 0 0-21.333334-39.893333 236.16 236.16 0 0 0-28.586666-34.773333 234.666667 234.666667 0 0 0-34.773334-28.586667 234.666667 234.666667 0 0 0-178.346666-35.413333 240.213333 240.213333 0 0 0-84.053334 35.413333 234.666667 234.666667 0 0 0-34.773333 28.586667 236.16 236.16 0 0 0-28.586667 34.773333 241.28 241.28 0 0 0-21.333333 39.893333 243.84 243.84 0 0 0-13.653333 43.946667 241.28 241.28 0 0 0 0 94.72 228.48 228.48 0 0 0 13.866666 43.946667 225.28 225.28 0 0 0 21.333334 39.893333 42.666667 42.666667 0 0 0 70.826666-47.786667 131.84 131.84 0 0 1-13.866666-25.173333 149.333333 149.333333 0 0 1-8.746667-28.16 152.96 152.96 0 0 1 0-60.16 141.653333 141.653333 0 0 1 8.746667-27.946667 138.24 138.24 0 0 1 13.653333-25.386666 166.186667 166.186667 0 0 1 18.346667-21.333334 151.253333 151.253333 0 0 1 21.333333-18.346666 138.24 138.24 0 0 1 25.386667-13.653334 141.653333 141.653333 0 0 1 27.946666-8.746666 149.333333 149.333333 0 0 1 60.16 0 141.653333 141.653333 0 0 1 27.946667 8.746666 138.24 138.24 0 0 1 25.386667 13.653334 147.84 147.84 0 0 1 40.32 40.533333 131.84 131.84 0 0 1 13.866666 25.173333 149.333333 149.333333 0 0 1 8.746667 28.16 152.96 152.96 0 0 1 0 60.16 141.653333 141.653333 0 0 1-8.746667 27.946667 138.24 138.24 0 0 1-13.653333 25.386667A166.186667 166.186667 0 0 1 618.666667 426.666667a151.253333 151.253333 0 0 1-21.333334 18.346666 138.24 138.24 0 0 1-25.386666 13.653334 141.653333 141.653333 0 0 1-27.946667 8.746666A156.373333 156.373333 0 0 1 512 469.333333a386.773333 386.773333 0 0 0-149.333333 30.293334 384 384 0 0 0-64 35.413333 375.253333 375.253333 0 0 0-56.96 46.72 395.52 395.52 0 0 0-46.72 56.746667A379.733333 379.733333 0 0 0 158.293333 704 386.773333 386.773333 0 0 0 128 853.333333a42.666667 42.666667 0 0 0 85.333333 0 298.666667 298.666667 0 0 1 6.186667-60.16 289.066667 289.066667 0 0 1 17.28-56.106666 292.266667 292.266667 0 0 1 27.52-50.773334 313.386667 313.386667 0 0 1 36.48-44.16 301.653333 301.653333 0 0 1 44.16-36.48 292.266667 292.266667 0 0 1 50.773333-27.52 305.28 305.28 0 0 1 56.106667-17.493333A314.453333 314.453333 0 0 1 512 554.666667a248.746667 248.746667 0 0 0 47.146667-4.693334 240.213333 240.213333 0 0 0 84.053333-35.413333 234.666667 234.666667 0 0 0 34.773333-28.586667 236.16 236.16 0 0 0 28.586667-34.773333 241.28 241.28 0 0 0 21.333333-39.893333 243.84 243.84 0 0 0 13.653334-43.946667 241.28 241.28 0 0 0 0-94.72z" fill="#333333" p-id="16499"></path></svg>
...\ No newline at end of file ...\ No newline at end of file
1 +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1756303617166" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8875" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M584.655238 97.52381l7.753143 0.121904a127.024762 127.024762 0 0 1 109.592381 181.052953h152.064a73.142857 73.142857 0 0 1 73.142857 73.142857v86.625524a73.142857 73.142857 0 0 1-73.142857 73.142857h-4.510476v340.967619a73.142857 73.142857 0 0 1-73.142857 73.142857H223.963429a73.142857 73.142857 0 0 1-73.142858-73.142857l-0.024381-340.967619H146.285714a73.142857 73.142857 0 0 1-73.142857-73.142857v-86.625524a73.142857 73.142857 0 0 1 73.142857-73.142857h139.897905a127.024762 127.024762 0 0 1 109.568-181.077334L403.504762 97.52381a128.975238 128.975238 0 0 1 90.599619 37.010285A128.926476 128.926476 0 0 1 584.655238 97.52381zM223.963429 852.577524l237.397333-0.024381V511.609905H223.914667v340.967619z m552.472381-340.967619h-237.421715v340.943238h237.446095l-0.02438-340.943238zM461.336381 351.817143H146.285714v86.649905h4.486096v-2.218667l310.564571-0.024381V351.817143z m392.728381 0H538.989714v84.406857l310.588953 0.024381-0.024381 2.218667h4.510476v-86.625524zM403.504762 170.666667h-2.364952a53.881905 53.881905 0 0 0 0 107.763809h54.125714V226.937905c0-6.339048 0.463238-12.55619 1.340952-18.627048A56.246857 56.246857 0 0 0 403.504762 170.666667z m183.539809 0h-2.364952a56.295619 56.295619 0 0 0-53.126095 37.668571c0.902095 6.046476 1.365333 12.263619 1.365333 18.602667l-0.024381 51.492571h54.150095a53.881905 53.881905 0 0 0 53.76-50.029714l0.121905-3.852191c0-29.744762-24.137143-53.881905-53.881905-53.881904z" p-id="8876"></path></svg>
...\ No newline at end of file ...\ No newline at end of file
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
30 "dependencies": { 30 "dependencies": {
31 "@amap/amap-jsapi-loader": "^1.0.1", 31 "@amap/amap-jsapi-loader": "^1.0.1",
32 "@element-plus/icons-vue": "^2.3.1", 32 "@element-plus/icons-vue": "^2.3.1",
33 + "@nutui/icons-vue": "^0.1.1",
33 "@photo-sphere-viewer/core": "^5.7.3", 34 "@photo-sphere-viewer/core": "^5.7.3",
34 "@photo-sphere-viewer/gallery-plugin": "^5.7.3", 35 "@photo-sphere-viewer/gallery-plugin": "^5.7.3",
35 "@photo-sphere-viewer/gyroscope-plugin": "^5.7.3", 36 "@photo-sphere-viewer/gyroscope-plugin": "^5.7.3",
......
1 +<!--
2 + * @Date: 2025-08-27 17:44:10
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2025-08-27 22:43:22
5 + * @FilePath: /map-demo/src/components/BottomNav.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div v-if="isMiniProgramWebView" class="bottom-nav">
10 + <div
11 + v-for="item in navItems"
12 + :key="item.path"
13 + @click="navigate(item.path)"
14 + :class="['nav-item', isActive(item.path) ? 'nav-item-active' : 'nav-item-inactive']"
15 + >
16 + <img :src="item.icon" :class="['nav-icon', isActive(item.path) ? 'filter-blue' : 'filter-gray']" alt="" />
17 + <span class="nav-label">{{ item.label }}</span>
18 + <div v-if="isActive(item.path)" class="nav-indicator"></div>
19 + </div>
20 + </div>
21 +</template>
22 +
23 +<script setup>
24 +import { computed, shallowRef } from 'vue';
25 +import wx from 'weixin-js-sdk'
26 +import homeIcon from '@images/icons/home.svg';
27 +import rewardsIcon from '@images/icons/rewards.svg';
28 +import activitiesIcon from '@images/icons/activities.svg';
29 +import meIcon from '@images/icons/me.svg';
30 +
31 +/**
32 + * 检测是否在小程序web-view环境中
33 + * @returns {boolean} 是否在小程序环境
34 + */
35 +const isMiniProgramWebView = computed(() => {
36 + return navigator.userAgent.includes('miniProgram');
37 +});
38 +
39 +const navItems = shallowRef([
40 + { path: '/pages/Dashboard/index', icon: homeIcon, label: '首页' },
41 + { path: '/pages/Activities/index', icon: activitiesIcon, label: '活动' },
42 + { path: '/pages/Rewards/index', icon: rewardsIcon, label: '兑换' },
43 + { path: '/pages/Profile/index', icon: meIcon, label: '我的' },
44 +]);
45 +
46 +const currentPage = computed(() => {
47 + // const pages = Taro.getCurrentPages();
48 + // return pages.length > 0 ? '/' + pages[pages.length - 1].route : '';
49 + // 默认选中活动页面
50 + return '/pages/Activities/index';
51 +});
52 +
53 +const isActive = (path) => {
54 + return currentPage.value === path;
55 +};
56 +
57 +const navigate = (path) => {
58 + wx.miniProgram.reLaunch({ url: path });
59 +};
60 +</script>
61 +
62 +<style scoped>
63 +/* 底部导航容器 */
64 +.bottom-nav {
65 + position: fixed;
66 + bottom: 0;
67 + left: 0;
68 + right: 0;
69 + background-color: white;
70 + border-top: 1px solid #f3f4f6;
71 + display: flex;
72 + justify-content: space-around;
73 + padding: 8px 0;
74 + z-index: 50;
75 +}
76 +
77 +/* 导航项 */
78 +.nav-item {
79 + display: flex;
80 + flex-direction: column;
81 + align-items: center;
82 + padding: 8px 20px;
83 + position: relative;
84 +}
85 +
86 +/* 激活状态 */
87 +.nav-item-active {
88 + color: #2563eb;
89 +}
90 +
91 +/* 非激活状态 */
92 +.nav-item-inactive {
93 + color: #6b7280;
94 +}
95 +
96 +/* 图标样式 */
97 +.nav-icon {
98 + width: 24px;
99 + height: 24px;
100 +}
101 +
102 +/* 标签样式 */
103 +.nav-label {
104 + font-size: 12px;
105 + margin-top: 4px;
106 +}
107 +
108 +/* 激活指示器 */
109 +.nav-indicator {
110 + position: absolute;
111 + bottom: 0;
112 + width: 40px;
113 + height: 4px;
114 + background-color: #2563eb;
115 + border-radius: 2px 2px 0 0;
116 +}
117 +
118 +/* 图标滤镜 */
119 +.filter-blue {
120 + filter: brightness(0) saturate(100%) invert(22%) sepia(100%) saturate(3441%) hue-rotate(229deg) brightness(101%) contrast(101%);
121 +}
122 +
123 +.filter-gray {
124 + filter: brightness(0) saturate(100%) invert(91%) sepia(6%) saturate(394%) hue-rotate(201deg) brightness(50%) contrast(92%);
125 +}
126 +</style>
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-31 12:06:19 3 * @Date: 2022-05-31 12:06:19
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2025-03-04 18:04:19 5 + * @LastEditTime: 2025-08-27 22:20:35
6 * @FilePath: /map-demo/src/main.js 6 * @FilePath: /map-demo/src/main.js
7 * @Description: 7 * @Description:
8 */ 8 */
......
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: 2025-08-26 17:01:40 4 + * @LastEditTime: 2025-08-27 22:38:11
5 * @FilePath: /map-demo/src/views/checkin/map.vue 5 * @FilePath: /map-demo/src/views/checkin/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: mapHeight, position: 'relative', overflow: 'hidden' }">
10 <div id="container"></div> 10 <div id="container"></div>
11 <!-- 添加导航面板容器 --> 11 <!-- 添加导航面板容器 -->
12 <div id="walking-panel" style="position: absolute; bottom: 1rem; left: 1rem; padding: 1rem;"></div> 12 <div id="walking-panel" style="position: absolute; bottom: 1rem; left: 1rem; padding: 1rem;"></div>
...@@ -86,6 +86,9 @@ ...@@ -86,6 +86,9 @@
86 <p style="padding: 0.5rem 1rem;">{{ toast_text }}</p> 86 <p style="padding: 0.5rem 1rem;">{{ toast_text }}</p>
87 </template> 87 </template>
88 </van-toast> 88 </van-toast>
89 +
90 + <!-- 底部导航组件 -->
91 + <BottomNav />
89 </div> 92 </div>
90 </template> 93 </template>
91 94
...@@ -101,6 +104,7 @@ import { mapAPI } from '@/api/map.js' ...@@ -101,6 +104,7 @@ import { mapAPI } from '@/api/map.js'
101 import wx from 'weixin-js-sdk' 104 import wx from 'weixin-js-sdk'
102 import pageInfo from '@/views/checkin/info.vue' 105 import pageInfo from '@/views/checkin/info.vue'
103 import audioBackground1 from '@/components/audioBackground1.vue' 106 import audioBackground1 from '@/components/audioBackground1.vue'
107 +import BottomNav from '@/components/BottomNav.vue'
104 import { mapState, mapActions } from 'pinia' 108 import { mapState, mapActions } from 'pinia'
105 import { mainStore } from '@/store' 109 import { mainStore } from '@/store'
106 import { parseQueryString } from '@/utils/tools' 110 import { parseQueryString } from '@/utils/tools'
...@@ -169,7 +173,24 @@ window._AMapSecurityConfig = { ...@@ -169,7 +173,24 @@ window._AMapSecurityConfig = {
169 } 173 }
170 174
171 export default { 175 export default {
172 - components: { pageInfo, audioBackground1 }, 176 + components: { pageInfo, audioBackground1, BottomNav },
177 + computed: {
178 + ...mapState(mainStore, ['audio_entity', 'audio_src', 'audio_status']),
179 + /**
180 + * 检测是否在小程序web-view环境中
181 + * @returns {boolean} 是否在小程序环境
182 + */
183 + isMiniProgramWebView() {
184 + return navigator.userAgent.includes('miniProgram');
185 + },
186 + /**
187 + * 动态计算地图高度
188 + * @returns {string} 地图容器高度
189 + */
190 + mapHeight() {
191 + return this.isMiniProgramWebView ? 'calc(100vh - 80px)' : '100vh';
192 + }
193 + },
173 data() { 194 data() {
174 return { 195 return {
175 map: '', 196 map: '',
...@@ -388,9 +409,7 @@ export default { ...@@ -388,9 +409,7 @@ export default {
388 // deep: true // 如果 query 是嵌套对象，可以设置 deep 监听深层变化 409 // deep: true // 如果 query 是嵌套对象，可以设置 deep 监听深层变化
389 // } 410 // }
390 }, 411 },
391 - computed: { 412 +
392 - ...mapState(mainStore, ['audio_entity', 'audio_src', 'audio_status'])
393 - },
394 methods: { 413 methods: {
395 ...mapActions(mainStore, ['changeAudio', 'changeAudioSrc', 'changeAudioStatus']), 414 ...mapActions(mainStore, ['changeAudio', 'changeAudioSrc', 'changeAudioStatus']),
396 initMap() { 415 initMap() {
......
...@@ -69,7 +69,7 @@ export default ({ command, mode }) => { ...@@ -69,7 +69,7 @@ export default ({ command, mode }) => {
69 '@components': path.resolve(__dirname, 'src/components'), 69 '@components': path.resolve(__dirname, 'src/components'),
70 '@composables': path.resolve(__dirname, 'src/composables'), 70 '@composables': path.resolve(__dirname, 'src/composables'),
71 '@utils': path.resolve(__dirname, 'src/utils'), 71 '@utils': path.resolve(__dirname, 'src/utils'),
72 - '@images': path.resolve(__dirname, 'src/assets/images'), 72 + '@images': path.resolve(__dirname, 'images'),
73 '@css': path.resolve(__dirname, 'src/assets/css'), 73 '@css': path.resolve(__dirname, 'src/assets/css'),
74 '@mock': path.resolve(__dirname, 'src/assets/mock'), 74 '@mock': path.resolve(__dirname, 'src/assets/mock'),
75 common: path.resolve(__dirname, 'src/common'), 75 common: path.resolve(__dirname, 'src/common'),
......
...@@ -155,6 +155,11 @@ ...@@ -155,6 +155,11 @@
155 "@nodelib/fs.scandir" "2.1.5" 155 "@nodelib/fs.scandir" "2.1.5"
156 fastq "^1.6.0" 156 fastq "^1.6.0"
157 157
158 +"@nutui/icons-vue@^0.1.1":
159 + version "0.1.1"
160 + resolved "https://registry.yarnpkg.com/@nutui/icons-vue/-/icons-vue-0.1.1.tgz#d90b3e5d5e109aebb775e4dd5167d702f3adcec1"
161 + integrity sha512-ekn6R9GNHWNUcV4pxdhQzrI1g1VhZ5zknklXoUJrCzt0RkRRLU0bUXX3ouWT0sl0U3MNJClnXAzZe7iPAvgPtw==
162 +
158 "@photo-sphere-viewer/core@^5.7.3": 163 "@photo-sphere-viewer/core@^5.7.3":
159 version "5.7.3" 164 version "5.7.3"
160 resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/core/-/core-5.7.3.tgz#b17523df65c1a57c86f023d9a8cc0819d026f4c2" 165 resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/core/-/core-5.7.3.tgz#b17523df65c1a57c86f023d9a8cc0819d026f4c2"
......