gym-manage/gym-manage-uniapp/components/TabBar.vue

<!-- components/TabBar.vue -->
<template>
  <view class="tab-bar">
    <view
      v-for="(tab, index) in tabs"
      :key="tab.path"
      :class="['tab-item', { active: currentActiveIndex === index }]"
      hover-class="tab-item--hover"
      @tap.stop="onTabTap(index)"
    >
      <image
        :src="currentActiveIndex === index ? tab.iconActive : tab.icon"
        mode="aspectFit"
        class="tab-icon"
      />
      <text class="tab-label">{{ tab.label }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import {
  PAGE,
  TAB_ROUTES,
  getCurrentRoutePath,
  getTabIndexByRoute
} from '@/common/constants/routes.js'

const props = defineProps({
  active: { type: Number, default: -1 },
  activeTab: { type: Number, default: -1 }
})

const emit = defineEmits(['update:active', 'tab-change'])

// 当前激活的索引 - 默认从路由获取
const currentActiveIndex = ref(-1)

// 从路由获取当前激活的 tab
function getActiveIndexFromRoute() {
  const routePath = getCurrentRoutePath()
  const index = getTabIndexByRoute(routePath)
  console.log('从路由获取索引:', routePath, '->', index)
  return index >= 0 ? index : 0
}

// 同步激活状态（高优先级：路由 > props）
function syncActiveState() {
  // 优先从路由获取（最准确）
  const routeIndex = getActiveIndexFromRoute()
  if (routeIndex >= 0) {
    currentActiveIndex.value = routeIndex
    return
  }
  
  // 其次使用 props
  if (props.active >= 0) {
    currentActiveIndex.value = props.active
  } else if (props.activeTab >= 0) {
    currentActiveIndex.value = props.activeTab
  } else {
    currentActiveIndex.value = 0
  }
}

// 监听路由变化（页面切换时自动同步）
let routeWatcher = null

onMounted(() => {
  // 初始同步
  syncActiveState()
  
  // 监听路由变化（App 端）
  // #ifdef APP-PLUS
  routeWatcher = plus.globalEvent.addEventListener('newintent', () => {
    setTimeout(syncActiveState, 50)
  })
  // #endif
  
  // 监听页面显示（跨端通用）
  uni.onAppRoute ? uni.onAppRoute(() => {
    setTimeout(syncActiveState, 50)
  }) : null
})

onBeforeUnmount(() => {
  // 清理监听
  // #ifdef APP-PLUS
  if (routeWatcher) {
    plus.globalEvent.removeEventListener('newintent', routeWatcher)
  }
  // #endif
})

// 监听 props 变化
watch(() => props.active, () => {
  // 只有当 props 主动变化且不是来自路由同步时才更新
  const routeIndex = getActiveIndexFromRoute()
  if (routeIndex !== currentActiveIndex.value) {
    syncActiveState()
  }
})

const tabs = [
  {
    path: PAGE.INDEX,
    icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/home.png',
    iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/home.png',
    label: '首页'
  },
  {
    path: PAGE.COURSE,
    icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/course.png',
    iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/course.png',
    label: '课程'
  },
  {
    path: PAGE.TRAIN,
    icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/train.png',
    iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/train.png',
    label: '训练'
  },
  {
    path: PAGE.DISCOVER,
    icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/discover.png',
    iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/discover.png',
    label: '发现'
  },
  {
    path: PAGE.MEMBER,
    icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/profile.png',
    iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/profile.png',
    label: '我的'
  }
]

let isSwitching = false

function onTabTap(index) {
  if (isSwitching) return
  
  const targetPath = TAB_ROUTES[index]
  const currentPath = TAB_ROUTES[currentActiveIndex.value]
  
  if (targetPath === currentPath) return
  
  console.log('Tab 点击:', index, targetPath)
  
  // 1. 立即更新 UI 高亮
  currentActiveIndex.value = index
  
  // 2. 通知父组件
  emit('update:active', index)
  emit('tab-change', index)
  
  // 3. 显示 loading（可选）
  let timer = setTimeout(() => {
    uni.showLoading({ title: '加载中...', mask: true })
  }, 50)
  
  isSwitching = true
  
  // 4. 执行跳转
  uni.switchTab({
    url: targetPath,
    success: () => {
      console.log('switchTab 成功:', targetPath)
    },
    fail: (err) => {
      console.error('switchTab 失败:', err)
      // 降级
      uni.reLaunch({ url: targetPath })
    },
    complete: () => {
      clearTimeout(timer)
      uni.hideLoading()
      setTimeout(() => {
        isSwitching = false
        // 跳转完成后，再次同步确保高亮正确
        syncActiveState()
      }, 100)
    }
  })
}
</script>

<style lang="scss" scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: #1A4A6F;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
  border-radius: 32rpx 32rpx 0 0;
  z-index: 999;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 24rpx;
  transition: all 0.1s ease;
}

.tab-item:active {
  transform: scale(0.95);
}

.tab-icon {
  width: 40rpx;
  height: 40rpx;
}

.tab-label {
  font-size: 22rpx;
  color: #94a3b8;
}

.tab-item.active .tab-label {
  color: #f97316;
  font-weight: 600;
}
</style>