future
295 lines
7.5 KiB
Vue
295 lines
7.5 KiB
Vue
<!-- components/TabBar.vue -->
|
|
<template>
|
|
<view v-if="shouldShowTabBar" 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, 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)
|
|
|
|
// 是否需要显示 TabBar
|
|
const shouldShowTabBar = ref(true)
|
|
|
|
// 不需要显示 TabBar 的页面路径列表（注意：不要带开头的 /）
|
|
const HIDE_TABBAR_PAGES = [
|
|
'pages/memberInfo/courseList', // 预约课程
|
|
'pages/memberInfo/courseDetail', // 课程详情
|
|
'pages/memberInfo/booking', // 我的预约
|
|
'pages/memberInfo/bodyTestReport', // 体测报告
|
|
'pages/groupCourse/list', // 团课列表
|
|
'pages/groupCourse/detail', // 团课详情
|
|
'pages/searchCourse/searchCourse', // 搜索课程
|
|
'pages/checkIn/checkIn', // 会员签到
|
|
'pages/memberInfo/myCourses', // 我的课程
|
|
'pages/memberInfo/coupons', // 我的优惠券
|
|
'pages/memberInfo/points', // 我的积分
|
|
'pages/memberInfo/pointsMall', // 积分商城
|
|
'pages/memberInfo/referral', // 邀请好友
|
|
'pages/memberInfo/userInfo', // 个人信息
|
|
'pages/memberInfo/memberCard', // 我的会员卡
|
|
]
|
|
|
|
// 从路由获取当前激活的 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
|
|
}
|
|
}
|
|
|
|
// 检查当前页面是否需要隐藏 TabBar
|
|
function checkShouldShow() {
|
|
let routePath = getCurrentRoutePath()
|
|
|
|
// 标准化路径：去掉开头的 /
|
|
if (routePath.startsWith('/')) {
|
|
routePath = routePath.slice(1)
|
|
}
|
|
// 去掉查询参数（?后面的内容）
|
|
if (routePath.includes('?')) {
|
|
routePath = routePath.split('?')[0]
|
|
}
|
|
|
|
// 检查是否在隐藏列表中
|
|
const shouldHide = HIDE_TABBAR_PAGES.includes(routePath)
|
|
shouldShowTabBar.value = !shouldHide
|
|
|
|
console.log('=== TabBar 显示控制 ===')
|
|
console.log('原始路径:', getCurrentRoutePath())
|
|
console.log('标准化路径:', routePath)
|
|
console.log('是否隐藏:', shouldHide)
|
|
console.log('是否显示 TabBar:', shouldShowTabBar.value)
|
|
}
|
|
|
|
// 监听路由变化（页面切换时自动同步）
|
|
let routeWatcher = null
|
|
let appRouteCallback = null
|
|
|
|
onMounted(() => {
|
|
// 初始同步
|
|
syncActiveState()
|
|
checkShouldShow()
|
|
|
|
// #ifdef APP-PLUS
|
|
// App 端：监听页面显示
|
|
routeWatcher = setInterval(() => {
|
|
syncActiveState()
|
|
checkShouldShow()
|
|
}, 300)
|
|
// #endif
|
|
|
|
// #ifdef MP-WEIXIN
|
|
// 小程序端：监听路由变化
|
|
if (typeof uni.onAppRoute === 'function') {
|
|
appRouteCallback = () => {
|
|
setTimeout(() => {
|
|
syncActiveState()
|
|
checkShouldShow()
|
|
}, 100)
|
|
}
|
|
uni.onAppRoute(appRouteCallback)
|
|
}
|
|
// #endif
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
// #ifdef APP-PLUS
|
|
if (routeWatcher) {
|
|
clearInterval(routeWatcher)
|
|
}
|
|
// #endif
|
|
|
|
// #ifdef MP-WEIXIN
|
|
if (appRouteCallback && typeof uni.offAppRoute === 'function') {
|
|
uni.offAppRoute(appRouteCallback)
|
|
}
|
|
// #endif
|
|
})
|
|
|
|
// 监听 props 变化
|
|
watch(() => props.active, () => {
|
|
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()
|
|
checkShouldShow()
|
|
}, 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> |