//管理导航栏状态和导航逻辑 import { defineStore } from 'pinia' import Taro from '@tarojs/taro' // TabBar 项目的接口定义 export interface TabBarItem { pagePath: string text: string icon: any } export const useTabBarStore = defineStore('tabbar', { state: () => ({ currentIndex: 0, switching: false, tabList: [ { pagePath: '/pages/index/index', text: '游戏广场', icon: 'Home' }, { pagePath: '/pages/room/join/index', text: '房间', icon: 'Find' }, { pagePath: '/pages/history/index', text: '历史记录', icon: 'Clock' }, { pagePath: '/pages/profile/index', text: '我的', icon: 'My' } ] }), actions: { // 更新当前选中的 tab updateSelected() { const pages = Taro.getCurrentPages() if (!pages || pages.length === 0) return const currentPage = pages[pages.length - 1] if (!currentPage || !currentPage.route) return const url = `/${currentPage.route}` console.log('当前页面路径:', url) // 查找当前页面在哪个 tab const index = this.tabList.findIndex(item => item.pagePath === url) // 只有确实匹配到 tab 时才更新状态 if (index !== -1) { console.log('更新选中 tab 为:', index) this.currentIndex = index } else { console.log('当前页面不在 tab 列表中:', url) } }, /** * 封装页面跳转逻辑 * @param url 目标页面路径 * @param options 配置项 */ navigate(url: string, options: { params?: Record; isTab?: boolean } = {}) { const { params, isTab } = options // 拼接参数 let fullUrl = url if (params) { const queryString = Object.entries(params) .map(([key, value]) => `${key}=${encodeURIComponent(value)}`) .join('&') fullUrl = `${url}?${queryString}` } console.log('fullUrl:', fullUrl) // 判断是否为 TabBar 页面 const tabIndex = this.tabList.findIndex((item) => item.pagePath === url) if (isTab || tabIndex !== -1) { // 如果是 TabBar 页面,切换 TabBar this.currentIndex = tabIndex this.switchTab(fullUrl, tabIndex) } else { // 非 TabBar 页面,普通跳转 Taro.navigateTo({ url: fullUrl }).catch((err) => { console.error('navigateTo 错误:', err) }) } }, /** * 切换到房间 Tab 的逻辑 * @param subPage 子页面路径 * @param options 带有 params 的选项对象 */ switchToRoomTab(subPage = '/pages/room/join/index', options: { params?: Record } = {}) { const isSubPage = !this.tabList.some((item) => item.pagePath === subPage) if (isSubPage) { // 如果是房间的子页面,更新 TabBar 状态并跳转 this.currentIndex = 1 // 房间 Tab 的索引 this.navigate(subPage, options) // 正确传递整个 options 对象 } else { // 否则直接切换到 `房间` Tab this.navigate('/pages/room/join/index', { isTab: true }) } }, // 切换 tab switchTab(url: string, index: number) { if (this.switching) return // 防止重复点击 console.log('尝试切换到:', url, index) this.switching = true // 先更新 UI 状态 this.currentIndex = index // 执行页面跳转 Taro.reLaunch({ url, success: () => { console.log('跳转成功到:', url) this.currentIndex = index }, fail: (error) => { console.error('跳转失败:', error) }, complete: () => { this.switching = false } }) }, // 在应用启动时初始化监听 setupListeners() { // 绑定页面显示事件 Taro.eventCenter.on('taroPageShow', this.updateSelected.bind(this)) // 绑定路由变化事件 Taro.eventCenter.on('routeChange', this.updateSelected.bind(this)) // 监听小程序显示事件 Taro.onAppShow(this.updateSelected.bind(this)) }, // 移除监听 removeListeners() { Taro.eventCenter.off('taroPageShow', this.updateSelected.bind(this)) Taro.eventCenter.off('routeChange', this.updateSelected.bind(this)) Taro.offAppShow(this.updateSelected.bind(this)) } } })