新增首页骨架屏并优化页面体验

gym-manage-uniapp/components/TabBar.vue

@@ -1,6 +1,6 @@
 <!-- components/TabBar.vue -->
 <template>
-  <view class="tab-bar">
+  <view v-if="shouldShowTabBar" class="tab-bar">
     <view
       v-for="(tab, index) in tabs"
       :key="tab.path"
@@ -19,7 +19,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import {
   PAGE,
   TAB_ROUTES,
@@ -37,6 +37,28 @@ 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()
@@ -64,38 +86,77 @@ function syncActiveState() {
   }
 }
 
+// 检查当前页面是否需要隐藏 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()
   
-  // 监听路由变化（App 端）
   // #ifdef APP-PLUS
-  routeWatcher = plus.globalEvent.addEventListener('newintent', () => {
-    setTimeout(syncActiveState, 50)
-  })
+  // App 端：监听页面显示
+  routeWatcher = setInterval(() => {
+    syncActiveState()
+    checkShouldShow()
+  }, 300)
   // #endif
   
-  // 监听页面显示（跨端通用）
-  uni.onAppRoute ? uni.onAppRoute(() => {
-    setTimeout(syncActiveState, 50)
-  }) : null
+  // #ifdef MP-WEIXIN
+  // 小程序端：监听路由变化
+  if (typeof uni.onAppRoute === 'function') {
+    appRouteCallback = () => {
+      setTimeout(() => {
+        syncActiveState()
+        checkShouldShow()
+      }, 100)
+    }
+    uni.onAppRoute(appRouteCallback)
+  }
+  // #endif
 })
 
 onBeforeUnmount(() => {
-  // 清理监听
   // #ifdef APP-PLUS
   if (routeWatcher) {
-    plus.globalEvent.removeEventListener('newintent', routeWatcher)
+    clearInterval(routeWatcher)
+  }
+  // #endif
+  
+  // #ifdef MP-WEIXIN
+  if (appRouteCallback && typeof uni.offAppRoute === 'function') {
+    uni.offAppRoute(appRouteCallback)
   }
   // #endif
 })
 
 // 监听 props 变化
 watch(() => props.active, () => {
-  // 只有当 props 主动变化且不是来自路由同步时才更新
   const routeIndex = getActiveIndexFromRoute()
   if (routeIndex !== currentActiveIndex.value) {
     syncActiveState()
@@ -179,6 +240,7 @@ function onTabTap(index) {
         isSwitching = false
         // 跳转完成后，再次同步确保高亮正确
         syncActiveState()
+        checkShouldShow()
       }, 100)
     }
   })