59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
/**
|
||
* 自定义 tabBar 组件
|
||
*
|
||
* 微信 custom-tab-bar 机制：tabBar 页面由框架自动挂载；
|
||
* 非 tabBar 页面（如 board-customer/board-coach）可手动引用。
|
||
*
|
||
* 支持 2/3 按钮动态布局，权限数据由外部注入（当前 mock 为 3 按钮）。
|
||
*/
|
||
|
||
/** tab 路由映射（key → url + 是否为 tabBar 页面） */
|
||
const TAB_ROUTES: Record<string, { url: string; isTabBarPage: boolean }> = {
|
||
task: { url: '/pages/task-list/task-list', isTabBarPage: true },
|
||
board: { url: '/pages/board-finance/board-finance', isTabBarPage: true },
|
||
my: { url: '/pages/my-profile/my-profile', isTabBarPage: true },
|
||
}
|
||
|
||
// TODO: 联调时从全局状态/接口获取权限，过滤可见 tab
|
||
// 示例：const visibleKeys = getApp().globalData.visibleTabs || ['task', 'board', 'my']
|
||
const VISIBLE_KEYS = ['task', 'board', 'my']
|
||
|
||
/** 根据权限过滤后的 tab 列表 */
|
||
const TABS = [
|
||
{ key: 'task', label: '任务', icon: '/assets/icons/tab-task-nav.svg', activeIcon: '/assets/icons/tab-task-nav-active.svg' },
|
||
{ key: 'board', label: '看板', icon: '/assets/icons/tab-board-nav.svg', activeIcon: '/assets/icons/tab-board-nav-active.svg' },
|
||
{ key: 'my', label: '我的', icon: '/assets/icons/tab-my-nav.svg', activeIcon: '/assets/icons/tab-my-nav-active.svg' },
|
||
].filter((t) => VISIBLE_KEYS.includes(t.key))
|
||
|
||
Component({
|
||
properties: {
|
||
/** 当前激活的 tab key */
|
||
active: {
|
||
type: String,
|
||
value: '',
|
||
},
|
||
},
|
||
|
||
data: {
|
||
tabs: TABS,
|
||
tabCount: TABS.length,
|
||
},
|
||
|
||
methods: {
|
||
onTap(e: WechatMiniprogram.TouchEvent) {
|
||
const key = e.currentTarget.dataset.key as string
|
||
// 通过 properties 获取 active，避免 this.data 类型推断问题
|
||
if (key === (this as unknown as { data: { active: string } }).data.active) return
|
||
|
||
const route = TAB_ROUTES[key]
|
||
if (!route) return
|
||
|
||
if (route.isTabBarPage) {
|
||
wx.switchTab({ url: route.url })
|
||
} else {
|
||
wx.navigateTo({ url: route.url })
|
||
}
|
||
},
|
||
},
|
||
})
|