Mini-Program/custom-tab-bar/index.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },

  /**
   * 组件的初始数据
   */
  data: {
    selected: 'index',
    show: true, // 控制tab-bar显示状态
    badges: {}, // 存储各tab的未读标记
    // 记录tabBar数据，用于匹配
    tabBarItems: [
      { key: 'index', route: 'pages/index/index' },
      { key: 'chat', route: 'pages/chat/index', badgeKey: 'chat' }, // 消息中心
      { key: 'settlement', route: 'pages/settlement/index' },
      { key: 'profile', route: 'pages/profile/index' }
    ]
  },
  
  /**
   * 组件的方法列表
   */
  methods: {
    // 切换tab页面的方法 - 增强版，改进状态管理
    switchTab(e) {
      try {
        const data = e.currentTarget.dataset
        let url = data.path
        const key = data.key
        
        console.log('点击tab项:', key, '原始路径:', url)
        
        // 确保路径格式正确 - 移除可能的前缀斜杠
        if (url.startsWith('/')) {
          url = url.substring(1)
        }
        
        console.log('修正后路径:', url)
        
        // 更新全局数据 - 先更新全局状态，确保状态一致性
        const app = getApp()
        if (app && app.globalData) {
          app.globalData.currentTab = key
          console.log('同步选中状态到全局数据:', key)
        }
        
        // 立即更新UI选中状态
        this.setData({
          selected: key
        })
        
        // 无论跳转到哪个页面，先确保用户身份被正确设置
        if (key === 'seller') {
          const userId = wx.getStorageSync('userId');
          if (userId) {
            // 更新用户类型
            let users = wx.getStorageSync('users');
            if (typeof users !== 'object' || users === null) {
              users = {};
            }
            if (!users[userId]) {
              users[userId] = {};
            }
            users[userId].type = key;
            wx.setStorageSync('users', users);
            
            // 更新标签
            let tags = wx.getStorageSync('tags');
            if (typeof tags !== 'object' || tags === null) {
              tags = {};
            }
            tags[userId] = tags[userId] || [];
            tags[userId] = tags[userId].filter(tag => !tag.startsWith('身份:'));
            tags[userId].push(`身份:${key}`);
            wx.setStorageSync('tags', tags);
          }
        }
        
        // 无论是否登录，直接跳转到对应页面
        this.navigateToTabPage(url)
      } catch (e) {
        console.error('switchTab方法执行错误:', e)
      }
    },
    
    // 跳转到tab页面的通用方法
    navigateToTabPage(url) {
      // 定义tabBar页面列表
    const tabBarPages = [
      'pages/index/index',
      'pages/chat/index', 
      'pages/seller/index',
      'pages/settlement/index',
      'pages/profile/index'
    ];
      
      // 检查是否为tabBar页面
      if (tabBarPages.includes(url)) {
        console.log('使用switchTab跳转到tabbar页面:', url)
        wx.switchTab({
          url: '/' + url,
          success: (res) => {
            console.log('switchTab成功:', url, res)
          },
          fail: (err) => {
            console.error('switchTab失败:', url, err)
            console.log('尝试使用reLaunch跳转...')
            wx.reLaunch({
              url: '/' + url,
              success: (res) => {
                console.log('reLaunch成功:', url, res)
              },
              fail: (err) => {
                console.error('reLaunch也失败:', url, err)
              }
            })
          }
        })
      } else {
        // 非tabBar页面，使用navigateTo跳转
        console.log('使用navigateTo跳转到非tabbar页面:', url)
        wx.navigateTo({
          url: '/' + url,
          success: (res) => {
            console.log('navigateTo成功:', url, res)
          },
          fail: (err) => {
            console.error('navigateTo失败:', url, err)
          }
        })
      }
    },

    // 强制更新选中状态
    forceUpdateSelectedState(key) {
      try {
        this.setData({
          selected: key
        })
        console.log('强制更新选中状态:', key)
        // 再次同步全局数据，确保双向一致性
        const app = getApp()
        if (app && app.globalData) {
          app.globalData.currentTab = key
        }
      } catch (e) {
        console.error('强制更新选中状态失败:', e)
      }
    },

    // 恢复到之前的状态
    restorePreviousState() {
      try {
        const app = getApp()
        if (app && app.globalData && app.globalData.currentTab) {
          this.setData({
            selected: app.globalData.currentTab
          })
          console.log('恢复选中状态到:', app.globalData.currentTab)
        }
      } catch (e) {
        console.error('恢复状态失败:', e)
      }
    },

    // 跳转到收藏页面
    goToFavoritesPage() {
      wx.navigateTo({
        url: '/pages/favorites/index'
      })
    },
    
    // 从全局数据同步状态的方法 - 增强版
  syncFromGlobalData() {
    try {
      const app = getApp()
      const pages = getCurrentPages()
      let currentRoute = ''
      
      // 获取当前页面路由
      if (pages && pages.length > 0) {
        const currentPage = pages[pages.length - 1]
        currentRoute = currentPage.route
        console.log('当前页面路由:', currentRoute)
      }
      
      // 根据当前页面路由确定应该选中的tab
      let shouldSelect = 'index'
      for (let item of this.data.tabBarItems) {
        if (item.route === currentRoute) {
          shouldSelect = item.key
          break
        }
      }
      
      // 检查全局数据中是否有控制tab-bar显示的状态
      let showTabBar = true
      // 如果是tabBar页面，默认显示tab-bar
      const tabBarPages = this.data.tabBarItems.map(item => item.route)
      if (tabBarPages.includes(currentRoute)) {
        showTabBar = true
        // 同时更新全局状态，确保一致性
        if (app && app.globalData) {
          app.globalData.showTabBar = true
        }
      } else if (app && app.globalData && typeof app.globalData.showTabBar !== 'undefined') {
        showTabBar = app.globalData.showTabBar
      }
      
      // 更新全局数据和本地数据，确保一致性
      if (app && app.globalData) {
        app.globalData.currentTab = shouldSelect
      }
      
      // 只在状态不一致时更新，避免频繁重绘
      const updates = {}
      if (this.data.selected !== shouldSelect) {
        updates.selected = shouldSelect
        console.log('根据当前页面路由更新选中状态:', shouldSelect)
      }
      
      if (this.data.show !== showTabBar) {
        updates.show = showTabBar
        console.log('更新tab-bar显示状态:', showTabBar)
      }
      
      if (Object.keys(updates).length > 0) {
        this.setData(updates)
      }
    } catch (e) {
      console.error('从全局数据同步状态失败:', e)
    }
  },
  
  // 更新未读标记
  updateBadges() {
    try {
      const app = getApp()
      if (app && app.globalData && app.globalData.tabBarBadge) {
        const tabBarBadge = app.globalData.tabBarBadge
        const badges = {}
        
        // 根据tabBarItems中的badgeKey映射未读标记
        this.data.tabBarItems.forEach(item => {
          if (item.badgeKey && tabBarBadge[item.badgeKey]) {
            badges[item.key] = tabBarBadge[item.badgeKey]
          }
        })
        
        if (JSON.stringify(this.data.badges) !== JSON.stringify(badges)) {
          this.setData({ badges })
          console.log('更新TabBar未读标记:', badges)
        }
      }
    } catch (e) {
      console.error('更新未读标记失败:', e)
    }
  },
  
  // 开始监听全局tab-bar显示状态变化
  startTabBarStatusListener() {
    // 使用定时器定期检查全局状态
    this.tabBarStatusTimer = setInterval(() => {
      try {
        const app = getApp()
        if (app && app.globalData) {
          // 检查显示状态
          if (typeof app.globalData.showTabBar !== 'undefined') {
            const showTabBar = app.globalData.showTabBar
            if (this.data.show !== showTabBar) {
              this.setData({
                show: showTabBar
              })
              console.log('tab-bar显示状态更新:', showTabBar)
            }
          }
          
          // 更新未读标记
          this.updateBadges()
        }
      } catch (e) {
        console.error('监听tab-bar状态失败:', e)
      }
    }, 100) // 每100ms检查一次，确保响应迅速
  }
  },

  // 组件生命周期
  lifetimes: {
    // 组件挂载时执行
    attached() {
      console.log('tabBar组件挂载')
      // 初始化时从全局数据同步一次状态，使用较长延迟确保页面完全加载
      setTimeout(() => {
        this.syncFromGlobalData()
        // 同时更新未读标记
        this.updateBadges()
      }, 100)
      
      // 监听全局tab-bar显示状态变化
      this.startTabBarStatusListener()
    },
    
    // 组件被移动到节点树另一个位置时执行
    moved() {
      console.log('tabBar组件移动')
      // 组件移动时重新同步状态
      this.syncFromGlobalData()
    },
    
    // 组件卸载时执行
    detached() {
      console.log('tabBar组件卸载')
      // 清理定时器
      if (this.tabBarStatusTimer) {
        clearInterval(this.tabBarStatusTimer)
      }
    }
  },
  
  // 页面生命周期
  pageLifetimes: {
    // 页面显示时执行
    show() {
      console.log('页面显示')
      const pages = getCurrentPages()
      if (pages && pages.length > 0) {
        const currentPage = pages[pages.length - 1]
        // 对于profile页面，使用更长的延迟以避免服务器错误影响
        if (currentPage.route === 'pages/profile/index') {
          setTimeout(() => {
            this.syncFromGlobalData()
            // 同时更新未读标记
            this.updateBadges()
            // 额外确保profile页面状态正确
            setTimeout(() => {
              this.forceUpdateSelectedState('profile')
            }, 200)
          }, 200)
        } else {
          // 其他页面使用适当延迟
          setTimeout(() => {
            this.syncFromGlobalData()
            // 同时更新未读标记
            this.updateBadges()
          }, 50)
        }
      }
      
      // 页面显示时默认显示tab-bar，除非有全局控制
      const app = getApp()
      if (app && app.globalData && typeof app.globalData.showTabBar === 'undefined') {
        this.setData({
          show: true
        })
      }
    },
    
    // 页面隐藏时执行
    hide() {
      console.log('页面隐藏')
      // 页面隐藏时保存当前选中状态到全局
      const app = getApp()
      if (app && app.globalData) {
        app.globalData.currentTab = this.data.selected
      }
    }
  }
})