hookehuyr

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

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
<!--
* @Date: 2025-08-27 17:44:10
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-02-10 10:18:46
* @LastEditTime: 2026-02-10 11:03:56
* @FilePath: /map-demo/src/components/BottomNav.vue
* @Description: 文件描述
* @Description: 底部导航组件
-->
<template>
<div v-if="isMiniProgramWebView" class="bottom-nav">
......@@ -21,7 +21,8 @@
</template>
<script setup>
import { computed, shallowRef } from 'vue';
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import wx from 'weixin-js-sdk'
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';
const activitiesIconActive = 'https://cdn.ipadbiz.cn/lls_prog/icon/activities_active1.svg';
const meIcon = 'https://cdn.ipadbiz.cn/lls_prog/icon/me.svg';
const meIconActive = 'https://cdn.ipadbiz.cn/lls_prog/icon/me_active1.svg';
/**
* 检测是否在小程序web-view环境中
* @returns {boolean} 是否在小程序环境
......@@ -40,14 +42,33 @@ const isMiniProgramWebView = computed(() => {
return navigator.userAgent.includes('miniProgram');
});
const navItems = shallowRef([
const route = useRoute();
// 根据 URL 参数 activityId 动态生成导航项
const navItems = computed(() => {
const hasActivityId = route.query.activityId;
const baseNavItems = [
{ path: '/pages/Dashboard/index', icon: homeIcon, activeIcon: homeIconActive, label: '首页' },
{ path: '/pages/CheckinMap/index', icon: activitiesIcon, activeIcon: activitiesIconActive, label: '便民地图' },
// { path: '/pages/RewardCategories/index', icon: rewardsIcon, activeIcon: rewardsIconActive, label: '兑换' },
// TAG: 暂时写死以后可能会改变
{ path: '/pages/Rewards/index?id=health&category=health', icon: rewardsIcon, activeIcon: rewardsIconActive, label: '兑换' },
{ path: '/pages/Profile/index', icon: meIcon, activeIcon: meIconActive, label: '我的' },
]);
];
// 根据是否有 activityId 插入不同的第二个导航项
const activitiesItem = hasActivityId
? { path: '/pages/CheckinMap/index', icon: activitiesIcon, activeIcon: activitiesIconActive, label: '便民地图' }
: { path: '/pages/ActivitiesCover/index', icon: activitiesIcon, activeIcon: activitiesIconActive, label: '乐在重阳' };
// 将活动相关项插入到首页和兑换之间
return [
baseNavItems[0], // 首页
activitiesItem, // 活动/地图
baseNavItems[1], // 兑换
baseNavItems[2], // 我的
];
});
const currentPage = computed(() => {
// const pages = Taro.getCurrentPages();
......