feat(bottomnav): 根据 URL 参数 activityId 动态切换导航项
- 导入 useRoute 获取 URL 查询参数 - 将 navItems 从 shallowRef 改为 computed 实现动态更新 - 有 activityId 参数时显示"便民地图" - 无 activityId 参数时显示"乐在重阳" - 兼容不同活动场景的导航需求 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
1 changed file
with
27 additions
and
6 deletions
| 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(); | ... | ... |
-
Please register or login to post a comment