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

<template>
  <view class="tab-bar">
    <view
      v-for="(tab, index) in tabs"
<<<<<<< HEAD
      :key="tab.path"
      :class="['tab-item', { active: currentIndex === index }]"
      hover-class="tab-item--hover"
      @tap="onTabTap(index)"
    >
      <image
        :src="currentIndex === index ? tab.iconActive : tab.icon"
        mode="aspectFit"
        class="tab-icon"
      />
=======
      :key="index"
      :class="['tab-item', { active: currentActive === index }]"
      @click="switchTab(index)"
    >
      <!-- 导航栏图标 -->
      <image :src="currentActive === index ? tab.iconActive : tab.icon" mode="aspectFit" class="tab-icon" />
      <!-- 导航栏标签文字 -->
>>>>>>> 8cf3c9ccee0d9274f647f0126b50dc1e79178809
      <text class="tab-label">{{ tab.label }}</text>
    </view>
  </view>
</template>

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

const props = defineProps({
  /** 当前 Tab 索引，由 Tab 页传入以保证高亮准确 */
  active: {
    type: Number,
    default: -1
  }
})

const tapping = ref(false)
=======
import { ref, watch } from 'vue'

// 当前激活的导航栏索引（从外部传入）
const props = defineProps({
  activeTab: {
    type: Number,
    default: 0
  }
})

// 当前激活状态
const currentActive = ref(props.activeTab)

// 监听外部传入的激活状态变化
watch(() => props.activeTab, (newVal) => {
  currentActive.value = newVal
})
>>>>>>> 8cf3c9ccee0d9274f647f0126b50dc1e79178809

const tabs = [
  {
<<<<<<< HEAD
    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: '我的'
  }
]

const currentIndex = computed(() => {
  if (props.active >= 0) return props.active
  return getTabIndexByRoute(getCurrentRoutePath())
})

function onTabTap(index) {
  if (tapping.value || index === currentIndex.value) return
  tapping.value = true
  switchToTab(TAB_ROUTES[index])
  setTimeout(() => {
    tapping.value = false
  }, 350)
=======
    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: '/pages/index/index'
  },
  {
    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: '/pages/groupCourse/list'
  },
  {
    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: '/pages/train/index'
  },
  {
    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: '/pages/discover/index'
  },
  {
    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: '我的',
    path: '/pages/profile/index'
  }
]

// 切换标签页
const switchTab = (index) => {
  currentActive.value = index
  const tab = tabs[index]
  
  // 获取当前页面路径
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const currentPath = '/' + currentPage.route
  
  // 如果点击的是当前页面，不跳转
  if (currentPath === tab.path) {
    return
  }
  
  // 跳转对应页面
  uni.redirectTo({
    url: tab.path
  })
>>>>>>> 8cf3c9ccee0d9274f647f0126b50dc1e79178809
}
</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;
<<<<<<< HEAD
  z-index: 999;
=======
  z-index: 100;
>>>>>>> 8cf3c9ccee0d9274f647f0126b50dc1e79178809
}

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

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

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

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