优化会员信息模块及首页组件，清理冗余图片资源

gym-manage-uniapp/components/TabBar.vue

@@ -8,11 +8,13 @@
       hover-class="tab-item--hover"
       @tap.stop="onTabTap(index)"
     >
-      <image
-        :src="currentActiveIndex === index ? tab.iconActive : tab.icon"
-        mode="aspectFit"
-        class="tab-icon"
-      />
+      <!-- 判断是否使用字体图标（我的页面用字体，其他用图片） -->
+      <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>
@@ -34,32 +36,27 @@ const props = defineProps({
 
 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',      // 我的会员卡
+  '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)
@@ -67,16 +64,12 @@ function getActiveIndexFromRoute() {
   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) {
@@ -86,23 +79,16 @@ 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)
@@ -110,25 +96,19 @@ function checkShouldShow() {
   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(() => {
@@ -143,11 +123,8 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   // #ifdef APP-PLUS
-  if (routeWatcher) {
-    clearInterval(routeWatcher)
-  }
+  if (routeWatcher) { clearInterval(routeWatcher) }
   // #endif
-  
   // #ifdef MP-WEIXIN
   if (appRouteCallback && typeof uni.offAppRoute === 'function') {
     uni.offAppRoute(appRouteCallback)
@@ -155,44 +132,48 @@ onBeforeUnmount(() => {
   // #endif
 })
 
-// 监听 props 变化
 watch(() => props.active, () => {
   const routeIndex = getActiveIndexFromRoute()
-  if (routeIndex !== currentActiveIndex.value) {
-    syncActiveState()
-  }
+  if (routeIndex !== currentActiveIndex.value) { syncActiveState() }
 })
 
+// tabs 配置：只有"我的"用字体图标
 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: '首页'
+    icon: 'icon-home',
+    label: '首页',
+    useFontIcon: true,
+	fontSize:"36rpx"
   },
   {
     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: '课程'
+    icon: 'icon-course',
+    iconActive: '/static/tabBar/active/course.png',
+    label: '课程',
+    useFontIcon: true,
+	fontSize:"36rpx"
   },
   {
     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: '训练'
+    icon: 'icon-train',
+    label: '训练',
+    useFontIcon: true,
+	fontSize:"48rpx"
   },
   {
     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: '发现'
+    icon: 'icon-discover',
+    label: '发现',
+    useFontIcon: true,
+	fontSize:"48rpx"
   },
   {
     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: '我的'
+    icon: 'icon-profile', 
+    label: '我的',
+    useFontIcon: true,
+	fontSize:"36rpx"
   }
 ]
 
@@ -200,37 +181,22 @@ 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)
-    },
+    success: () => { console.log('switchTab 成功:', targetPath) },
     fail: (err) => {
       console.error('switchTab 失败:', err)
-      // 降级
       uni.reLaunch({ url: targetPath })
     },
     complete: () => {
@@ -238,7 +204,6 @@ function onTabTap(index) {
       uni.hideLoading()
       setTimeout(() => {
         isSwitching = false
-        // 跳转完成后，再次同步确保高亮正确
         syncActiveState()
         checkShouldShow()
       }, 100)
@@ -248,19 +213,24 @@ function onTabTap(index) {
 </script>
 
 <style lang="scss" scoped>
+// 引入字体图标 CSS（定义 @font-face）
+@import '/common/style/tabbar_icon/tabbar.css';
+
 .tab-bar {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   height: 120rpx;
-  background: #1A4A6F;
+  background: rgba(200, 225, 238, 0.8);
+  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 20rpx rgba(0, 0, 0, 0.06);
+  box-shadow: 0 -4rpx 24rpx rgba(120, 185, 215, 0.2);
   border-radius: 32rpx 32rpx 0 0;
   z-index: 999;
 }
@@ -278,18 +248,34 @@ function onTabTap(index) {
   transform: scale(0.95);
 }
 
+// 图片图标样式
 .tab-icon {
   width: 40rpx;
   height: 40rpx;
 }
 
+// 字体图标样式
+.tab-icon-font {
+  font-size: 44rpx;
+  line-height: 1;
+}
+
+// 字体图标颜色控制（根据选中状态）
+.tab-item .iconfont {
+  color: gray;  // 未选中颜色
+}
+
+.tab-item.active .iconfont {
+  color: #5A98B0;  // 选中颜色
+}
+
 .tab-label {
   font-size: 22rpx;
-  color: #94a3b8;
+  color: #8AABBB;
 }
 
 .tab-item.active .tab-label {
-  color: #f97316;
+  color: #5A98B0;
   font-weight: 600;
 }
 </style>