xiangqinxiangmu/LiangZhiYUMao/components/common-tabbar/common-tabbar.vue

<template>
  <view class="tabbar" v-if="tabbarList.length > 0">
    <view 
      class="tabbar-item" 
      :class="{ active: currentTab === item.tabKey }"
      v-for="item in tabbarList" 
      :key="item.id"
      @click="switchTab(item)"
    >
      <text class="tabbar-icon">{{ currentTab === item.tabKey ? (item.iconSelected || item.icon) : item.icon }}</text>
      <text class="tabbar-text">{{ item.name }}</text>
      <!-- 角标 -->
      <view v-if="item.badgeType === 'dot'" class="tabbar-badge-dot"></view>
      <view v-else-if="item.badgeType === 'number' && getBadgeValue(item.badgeKey) > 0" class="tabbar-badge">
        {{ getBadgeValue(item.badgeKey) > 99 ? '99+' : getBadgeValue(item.badgeKey) }}
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/utils/api.js'

export default {
  name: 'CommonTabbar',
  props: {
    // 当前选中的tab
    current: {
      type: String,
      default: ''
    },
    // 客户端类型：user-用户端，matchmaker-红娘端
    clientType: {
      type: String,
      default: 'user'
    },
    // 角标数据（key-value形式）
    badgeData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      tabbarList: [],
      currentTab: '',
      defaultTabbar: [
        { id: 1, name: '首页', icon: '🏠', iconSelected: '🏠', path: '/pages/index/index', tabKey: 'index', sortOrder: 1 },
        { id: 2, name: '动态', icon: '💕', iconSelected: '💕', path: '/pages/plaza/index', tabKey: 'plaza', sortOrder: 2 },
        { id: 3, name: '推荐', icon: '👍', iconSelected: '👍', path: '/pages/recommend/index', tabKey: 'recommend', sortOrder: 3 },
        { id: 4, name: '我的', icon: '👤', iconSelected: '👤', path: '/pages/mine/index', tabKey: 'mine', sortOrder: 4 }
      ]
    }
  },
  watch: {
    current: {
      immediate: true,
      handler(val) {
        this.currentTab = val
      }
    }
  },
  created() {
    this.loadTabbarConfig()
  },
  methods: {
    // 加载导航配置
    async loadTabbarConfig() {
      try {
        // 先尝试从缓存获取
        const cacheKey = `tabbar_config_${this.clientType}`
        const cached = uni.getStorageSync(cacheKey)
        const cacheTime = uni.getStorageSync(cacheKey + '_time')
        
        // 缓存有效期5分钟
        if (cached && cacheTime && (Date.now() - cacheTime < 5 * 60 * 1000)) {
          this.tabbarList = cached
          return
        }
        
        // 从服务器获取
        const list = await api.tabbar.getTabbarConfig(this.clientType)
        if (list && list.length > 0) {
          this.tabbarList = list
          // 缓存配置
          uni.setStorageSync(cacheKey, list)
          uni.setStorageSync(cacheKey + '_time', Date.now())
        } else {
          // 使用默认配置
          this.tabbarList = this.defaultTabbar
        }
      } catch (e) {
        console.error('加载导航配置失败:', e)
        // 使用默认配置
        this.tabbarList = this.defaultTabbar
      }
    },
    
    // 切换tab
    switchTab(item) {
      if (this.currentTab === item.tabKey) {
        return
      }
      
      this.currentTab = item.tabKey
      this.$emit('change', item)
      
      // 跳转页面
      uni.switchTab({
        url: item.path,
        fail: () => {
          // switchTab失败时尝试navigateTo
          uni.navigateTo({
            url: item.path,
            fail: () => {
              uni.redirectTo({
                url: item.path
              })
            }
          })
        }
      })
    },
    
    // 获取角标值
    getBadgeValue(key) {
      if (!key) return 0
      return this.badgeData[key] || 0
    },
    
    // 刷新配置（供外部调用）
    refreshConfig() {
      const cacheKey = `tabbar_config_${this.clientType}`
      uni.removeStorageSync(cacheKey)
      uni.removeStorageSync(cacheKey + '_time')
      this.loadTabbarConfig()
    }
  }
}
</script>

<style scoped lang="scss">
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 999;
  
  .tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 10rpx 0;
    
    .tabbar-icon {
      font-size: 44rpx;
      margin-bottom: 4rpx;
    }
    
    .tabbar-text {
      font-size: 22rpx;
      color: #999999;
    }
    
    &.active {
      .tabbar-text {
        color: #E91E63;
        font-weight: 500;
      }
    }
    
    // 数字角标
    .tabbar-badge {
      position: absolute;
      top: 2rpx;
      right: 50%;
      transform: translateX(30rpx);
      min-width: 32rpx;
      height: 32rpx;
      line-height: 32rpx;
      padding: 0 8rpx;
      background: #FF4757;
      color: #FFFFFF;
      font-size: 20rpx;
      border-radius: 16rpx;
      text-align: center;
    }
    
    // 红点角标
    .tabbar-badge-dot {
      position: absolute;
      top: 8rpx;
      right: 50%;
      transform: translateX(24rpx);
      width: 16rpx;
      height: 16rpx;
      background: #FF4757;
      border-radius: 50%;
    }
  }
}
</style>