future
317 lines
7.4 KiB
Vue
317 lines
7.4 KiB
Vue
<!-- components/TabBar.vue -->
|
||
<template>
|
||
<view v-if="shouldShowTabBar" class="tab-bar-wrapper">
|
||
<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)"
|
||
>
|
||
<!-- 判断是否使用字体图标（我的页面用字体，其他用图片） -->
|
||
<text
|
||
v-if="tab.useFontIcon"
|
||
:class="['iconfont', tab.icon]"
|
||
class="tab-icon-font"
|
||
:style="{ fontSize: tab.fontSize}"
|
||
></text>
|
||
<text class="tab-label">{{ tab.label }}</text>
|
||
</view>
|
||
</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)
|
||
const shouldShowTabBar = ref(true)
|
||
|
||
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',
|
||
]
|
||
|
||
function getActiveIndexFromRoute() {
|
||
const routePath = getCurrentRoutePath()
|
||
const index = getTabIndexByRoute(routePath)
|
||
console.log('从路由获取索引:', routePath, '->', index)
|
||
return index >= 0 ? index : 0
|
||
}
|
||
|
||
function syncActiveState() {
|
||
const routeIndex = getActiveIndexFromRoute()
|
||
if (routeIndex >= 0) {
|
||
currentActiveIndex.value = routeIndex
|
||
return
|
||
}
|
||
if (props.active >= 0) {
|
||
currentActiveIndex.value = props.active
|
||
} else if (props.activeTab >= 0) {
|
||
currentActiveIndex.value = props.activeTab
|
||
} else {
|
||
currentActiveIndex.value = 0
|
||
}
|
||
}
|
||
|
||
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
|
||
let isNavigating = false
|
||
|
||
onMounted(() => {
|
||
syncActiveState()
|
||
checkShouldShow()
|
||
// #ifndef MP-WEIXIN
|
||
// H5和其他平台使用轮询监听路由变化
|
||
routeWatcher = setInterval(() => {
|
||
// 导航期间不更新状态，避免覆盖用户点击的索引
|
||
if (isNavigating) return
|
||
const newIndex = getActiveIndexFromRoute()
|
||
if (newIndex !== currentActiveIndex.value) {
|
||
currentActiveIndex.value = newIndex
|
||
}
|
||
checkShouldShow()
|
||
}, 200)
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
if (typeof uni.onAppRoute === 'function') {
|
||
appRouteCallback = () => {
|
||
setTimeout(() => {
|
||
syncActiveState()
|
||
checkShouldShow()
|
||
}, 100)
|
||
}
|
||
uni.onAppRoute(appRouteCallback)
|
||
}
|
||
// #endif
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
// #ifndef MP-WEIXIN
|
||
// H5和其他平台清理定时器
|
||
if (routeWatcher) {
|
||
clearInterval(routeWatcher)
|
||
routeWatcher = null
|
||
}
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
if (appRouteCallback && typeof uni.offAppRoute === 'function') {
|
||
uni.offAppRoute(appRouteCallback)
|
||
appRouteCallback = null
|
||
}
|
||
// #endif
|
||
})
|
||
|
||
watch(() => props.active, () => {
|
||
const routeIndex = getActiveIndexFromRoute()
|
||
if (routeIndex !== currentActiveIndex.value) { syncActiveState() }
|
||
})
|
||
|
||
// tabs 配置：只有"我的"用字体图标
|
||
const tabs = [
|
||
{
|
||
path: PAGE.INDEX,
|
||
icon: 'icon-home',
|
||
label: '首页',
|
||
useFontIcon: true,
|
||
fontSize:"36rpx"
|
||
},
|
||
{
|
||
path: PAGE.COURSE,
|
||
icon: 'icon-course',
|
||
label: '课程',
|
||
useFontIcon: true,
|
||
fontSize:"36rpx"
|
||
},
|
||
{
|
||
path: PAGE.TRAIN,
|
||
icon: 'icon-train',
|
||
label: '训练',
|
||
useFontIcon: true,
|
||
fontSize:"48rpx"
|
||
},
|
||
{
|
||
path: PAGE.DISCOVER,
|
||
icon: 'icon-discover',
|
||
label: '发现',
|
||
useFontIcon: true,
|
||
fontSize:"48rpx"
|
||
},
|
||
{
|
||
path: PAGE.MEMBER,
|
||
icon: 'icon-profile',
|
||
label: '我的',
|
||
useFontIcon: true,
|
||
fontSize:"36rpx"
|
||
}
|
||
]
|
||
|
||
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)
|
||
// 立即更新状态
|
||
currentActiveIndex.value = index
|
||
emit('update:active', index)
|
||
emit('tab-change', index)
|
||
// 设置导航标志，阻止轮询覆盖状态
|
||
isNavigating = true
|
||
let timer = setTimeout(() => {
|
||
uni.showLoading({ title: '加载中...', mask: true })
|
||
}, 50)
|
||
isSwitching = true
|
||
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
|
||
isNavigating = false
|
||
// #ifdef MP-WEIXIN
|
||
syncActiveState()
|
||
// #endif
|
||
checkShouldShow()
|
||
}, 100)
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 引入字体图标 CSS（定义 @font-face）
|
||
@import '/common/style/tabbar_icon/tabbar.css';
|
||
|
||
// 固定容器 - 确保TabBar始终在屏幕底部
|
||
.tab-bar-wrapper {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 9999;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.tab-bar-wrapper .tab-bar {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.tab-bar {
|
||
height: 120rpx;
|
||
background: white;
|
||
backdrop-filter: blur(24px);
|
||
-webkit-backdrop-filter: blur(24px);
|
||
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 24rpx var(--tabbar-shadow);
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
/* 防闪烁优化 */
|
||
transform: translateZ(0);
|
||
-webkit-transform: translateZ(0);
|
||
will-change: transform;
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
perspective: 1000;
|
||
-webkit-perspective: 1000;
|
||
}
|
||
|
||
.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-icon-font {
|
||
font-size: 44rpx;
|
||
line-height: 1;
|
||
}
|
||
|
||
// 字体图标颜色控制（根据选中状态）
|
||
.tab-item .iconfont {
|
||
color: rgba(150, 150, 165, 1);
|
||
}
|
||
|
||
.tab-item.active .iconfont {
|
||
color: rgba(130, 220, 130, 0.9);
|
||
}
|
||
|
||
.tab-label {
|
||
font-size: 22rpx;
|
||
color: rgba(150, 150, 165, 1);
|
||
}
|
||
|
||
.tab-item.active .tab-label {
|
||
color: rgba(130, 220, 130, 0.9);
|
||
font-weight: 600;
|
||
}
|
||
</style> |