hookehuyr

feat(bottomnav): 根据 URL 参数 activityId 动态切换导航项

- 导入 useRoute 获取 URL 查询参数
- 将 navItems 从 shallowRef 改为 computed 实现动态更新
- 有 activityId 参数时显示"便民地图"
- 无 activityId 参数时显示"乐在重阳"
- 兼容不同活动场景的导航需求

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1 <!-- 1 <!--
2 * @Date: 2025-08-27 17:44:10 2 * @Date: 2025-08-27 17:44:10
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2026-02-10 10:18:46 4 + * @LastEditTime: 2026-02-10 11:03:56
5 * @FilePath: /map-demo/src/components/BottomNav.vue 5 * @FilePath: /map-demo/src/components/BottomNav.vue
6 - * @Description: 文件描述 6 + * @Description: 底部导航组件
7 --> 7 -->
8 <template> 8 <template>
9 <div v-if="isMiniProgramWebView" class="bottom-nav"> 9 <div v-if="isMiniProgramWebView" class="bottom-nav">
...@@ -21,7 +21,8 @@ ...@@ -21,7 +21,8 @@
21 </template> 21 </template>
22 22
23 <script setup> 23 <script setup>
24 -import { computed, shallowRef } from 'vue'; 24 +import { computed } from 'vue';
25 +import { useRoute } from 'vue-router';
25 import wx from 'weixin-js-sdk' 26 import wx from 'weixin-js-sdk'
26 27
27 const homeIcon = 'https://cdn.ipadbiz.cn/lls_prog/icon/home.svg'; 28 const homeIcon = 'https://cdn.ipadbiz.cn/lls_prog/icon/home.svg';
...@@ -32,6 +33,7 @@ const activitiesIcon = 'https://cdn.ipadbiz.cn/lls_prog/icon/activities.svg'; ...@@ -32,6 +33,7 @@ const activitiesIcon = 'https://cdn.ipadbiz.cn/lls_prog/icon/activities.svg';
32 const activitiesIconActive = 'https://cdn.ipadbiz.cn/lls_prog/icon/activities_active1.svg'; 33 const activitiesIconActive = 'https://cdn.ipadbiz.cn/lls_prog/icon/activities_active1.svg';
33 const meIcon = 'https://cdn.ipadbiz.cn/lls_prog/icon/me.svg'; 34 const meIcon = 'https://cdn.ipadbiz.cn/lls_prog/icon/me.svg';
34 const meIconActive = 'https://cdn.ipadbiz.cn/lls_prog/icon/me_active1.svg'; 35 const meIconActive = 'https://cdn.ipadbiz.cn/lls_prog/icon/me_active1.svg';
36 +
35 /** 37 /**
36 * 检测是否在小程序web-view环境中 38 * 检测是否在小程序web-view环境中
37 * @returns {boolean} 是否在小程序环境 39 * @returns {boolean} 是否在小程序环境
...@@ -40,14 +42,33 @@ const isMiniProgramWebView = computed(() => { ...@@ -40,14 +42,33 @@ const isMiniProgramWebView = computed(() => {
40 return navigator.userAgent.includes('miniProgram'); 42 return navigator.userAgent.includes('miniProgram');
41 }); 43 });
42 44
43 -const navItems = shallowRef([ 45 +const route = useRoute();
46 +
47 +// 根据 URL 参数 activityId 动态生成导航项
48 +const navItems = computed(() => {
49 + const hasActivityId = route.query.activityId;
50 +
51 + const baseNavItems = [
44 { path: '/pages/Dashboard/index', icon: homeIcon, activeIcon: homeIconActive, label: '首页' }, 52 { path: '/pages/Dashboard/index', icon: homeIcon, activeIcon: homeIconActive, label: '首页' },
45 - { path: '/pages/CheckinMap/index', icon: activitiesIcon, activeIcon: activitiesIconActive, label: '便民地图' },
46 // { path: '/pages/RewardCategories/index', icon: rewardsIcon, activeIcon: rewardsIconActive, label: '兑换' }, 53 // { path: '/pages/RewardCategories/index', icon: rewardsIcon, activeIcon: rewardsIconActive, label: '兑换' },
47 // TAG: 暂时写死以后可能会改变 54 // TAG: 暂时写死以后可能会改变
48 { path: '/pages/Rewards/index?id=health&category=health', icon: rewardsIcon, activeIcon: rewardsIconActive, label: '兑换' }, 55 { path: '/pages/Rewards/index?id=health&category=health', icon: rewardsIcon, activeIcon: rewardsIconActive, label: '兑换' },
49 { path: '/pages/Profile/index', icon: meIcon, activeIcon: meIconActive, label: '我的' }, 56 { path: '/pages/Profile/index', icon: meIcon, activeIcon: meIconActive, label: '我的' },
50 -]); 57 + ];
58 +
59 + // 根据是否有 activityId 插入不同的第二个导航项
60 + const activitiesItem = hasActivityId
61 + ? { path: '/pages/CheckinMap/index', icon: activitiesIcon, activeIcon: activitiesIconActive, label: '便民地图' }
62 + : { path: '/pages/ActivitiesCover/index', icon: activitiesIcon, activeIcon: activitiesIconActive, label: '乐在重阳' };
63 +
64 + // 将活动相关项插入到首页和兑换之间
65 + return [
66 + baseNavItems[0], // 首页
67 + activitiesItem, // 活动/地图
68 + baseNavItems[1], // 兑换
69 + baseNavItems[2], // 我的
70 + ];
71 +});
51 72
52 const currentPage = computed(() => { 73 const currentPage = computed(() => {
53 // const pages = Taro.getCurrentPages(); 74 // const pages = Taro.getCurrentPages();
......