miniprogram-linejoy/src/stores/tabbar.ts

//管理导航栏状态和导航逻辑
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<string, any>; 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<string, any> } = {}) {
      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))
    }
  }
})