新增搜索课程和加载组件页面，签到页面添加遮罩防重复扫码，添加 request 便捷方法（get/post/put/delete）

gym-manage-uniapp/App.vue

@@ -1,28 +1,82 @@
+<!-- App.vue -->
 <script>
-	export default {
+export default {
-		onLaunch: function() {
+  onLaunch: function() {
-			console.log('App Launch')
+    console.log('App Launch')
-		},
+    this.preloadTabData()
-		onShow: function() {
+  },
-			console.log('App Show')
+  onShow: function() {
-		},
+    console.log('App Show')
-		onHide: function() {
+  },
-			console.log('App Hide')
+  onHide: function() {
-		}
+    console.log('App Hide')
-	}
+  },
-	
+  methods: {
+    // 预加载所有 Tab 页面的核心数据
+    preloadTabData() {
+      // 延迟执行，不阻塞首屏
+      setTimeout(() => {
+        // 预加载课程数据
+        // #ifdef MP-WEIXIN
+        // 小程序端预请求数据
+        uni.request({
+          url: '/api/course/recommend',
+          method: 'GET',
+          success: (res) => {
+            uni.setStorageSync('course_cache', {
+              data: res.data,
+              time: Date.now()
+            })
+          }
+        })
+        // #endif
+        
+        // 预加载训练数据
+       
+      }, 1000)
+    }
+  }
+}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
-	@import 'common/style/base.css';
+@import 'common/style/base.css';
-	/*每个页面公共css */
+
-	.app-container {
+/* 全局骨架屏样式 */
-	  width: 100%;
+.skeleton {
-	  min-height: 100vh;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-	  max-width: 430px;
+  background-size: 200% 100%;
-	  margin: 0 auto;
+  animation: skeleton-loading 1.5s infinite;
-	  background-color: var(--bg-light);
+}
-	  position: relative;
+
-	  overflow-x: hidden;
+@keyframes skeleton-loading {
-	}
+  0% { background-position: 200% 0; }
-</style>
+  100% { background-position: -200% 0; }
+}
+
+/* 页面切换动画 */
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.page-enter-from {
+  opacity: 0;
+  transform: translateX(30rpx);
+}
+
+.page-leave-to {
+  opacity: 0;
+  transform: translateX(-30rpx);
+}
+
+.app-container {
+  width: 100%;
+  min-height: 100vh;
+  max-width: 430px;
+  margin: 0 auto;
+  background-color: var(--bg-light);
+  position: relative;
+  overflow-x: hidden;
+}
+</style>

gym-manage-uniapp/api/main.js

@@ -0,0 +1,50 @@
+import request from "@/utils/request.js"
+
+export function login(params) {
+  return request.post('/member/auth/miniapp/login', params)
+}
+
+export function logout() {
+  return request.post('/member/auth/logout')
+}
+
+export function getQRCode(options = { cache: true, cacheTime: 5 * 60 * 1000 }) {
+  return request.get('/checkIn/qrcode', {}, options)
+}
+
+export function checkIn(params) {
+  return request.post('/checkIn/scan', params)
+}
+
+export function getUserInfo(options = { cache: true, cacheTime: 30 * 60 * 1000 }) {
+  return request.get('/member/info', {}, options)
+}
+
+export function updateUserInfo(params) {
+  return request.put('/member/info', params)
+}
+
+export function getRecommendCourses(options = { cache: true, cacheTime: 10 * 60 * 1000 }) {
+  return request.get('/course/recommend', {}, options)
+}
+
+export function getCourseDetail(id, options = { cache: true, cacheTime: 15 * 60 * 1000 }) {
+  return request.get(`/course/${id}`, {}, options)
+}
+
+export function getGroupCoursePage(params = {}, options = { cache: true, cacheTime: 5 * 60 * 1000 }) {
+  const { page = 0, size = 10, sort = 'id', order = 'asc', keyword } = params
+  return request.post('/groupCourse/page', { page, size, sort, order, keyword }, options)
+}
+
+export default {
+  login,
+  logout,
+  getQRCode,
+  checkIn,
+  getUserInfo,
+  updateUserInfo,
+  getRecommendCourses,
+  getCourseDetail,
+  getGroupCoursePage
+}

gym-manage-uniapp/common/constants/routes.js

@@ -1,7 +1,7 @@
 /** 与 pages.json 保持一致 */
 export const PAGE = {
     INDEX: '/pages/index/index',
-    COURSE: '/pages/groupCourse/list',
+    COURSE: '/pages/course/index',
     TRAIN: '/pages/train/index',
     DISCOVER: '/pages/discover/index',
     MEMBER: '/pages/memberInfo/memberInfo',

gym-manage-uniapp/components/TabBar.vue

@@ -1,14 +1,15 @@
+<!-- components/TabBar.vue -->
 <template>
   <view class="tab-bar">
     <view
       v-for="(tab, index) in tabs"
       :key="tab.path"
-      :class="['tab-item', { active: currentIndex === index }]"
+      :class="['tab-item', { active: currentActiveIndex === index }]"
       hover-class="tab-item--hover"
       @tap.stop="onTabTap(index)"
     >
       <image
-        :src="currentIndex === index ? tab.iconActive : tab.icon"
+        :src="currentActiveIndex === index ? tab.iconActive : tab.icon"
         mode="aspectFit"
         class="tab-icon"
       />
@@ -18,7 +19,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
 import {
   PAGE,
   TAB_ROUTES,
@@ -31,6 +32,76 @@ const props = defineProps({
   activeTab: { type: Number, default: -1 }
 })
 
+const emit = defineEmits(['update:active', 'tab-change'])
+
+// 当前激活的索引 - 默认从路由获取
+const currentActiveIndex = ref(-1)
+
+// 从路由获取当前激活的 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
+  }
+}
+
+// 监听路由变化（页面切换时自动同步）
+let routeWatcher = null
+
+onMounted(() => {
+  // 初始同步
+  syncActiveState()
+  
+  // 监听路由变化（App 端）
+  // #ifdef APP-PLUS
+  routeWatcher = plus.globalEvent.addEventListener('newintent', () => {
+    setTimeout(syncActiveState, 50)
+  })
+  // #endif
+  
+  // 监听页面显示（跨端通用）
+  uni.onAppRoute ? uni.onAppRoute(() => {
+    setTimeout(syncActiveState, 50)
+  }) : null
+})
+
+onBeforeUnmount(() => {
+  // 清理监听
+  // #ifdef APP-PLUS
+  if (routeWatcher) {
+    plus.globalEvent.removeEventListener('newintent', routeWatcher)
+  }
+  // #endif
+})
+
+// 监听 props 变化
+watch(() => props.active, () => {
+  // 只有当 props 主动变化且不是来自路由同步时才更新
+  const routeIndex = getActiveIndexFromRoute()
+  if (routeIndex !== currentActiveIndex.value) {
+    syncActiveState()
+  }
+})
+
 const tabs = [
   {
     path: PAGE.INDEX,
@@ -64,19 +135,51 @@ const tabs = [
   }
 ]
 
-const currentIndex = computed(() => {
+let isSwitching = false
-  if (props.active >= 0) return props.active
-  if (props.activeTab >= 0) return props.activeTab
-  return getTabIndexByRoute(getCurrentRoutePath())
-})
 
 function onTabTap(index) {
-  if (index === currentIndex.value) return
+  if (isSwitching) return
-  const path = TAB_ROUTES[index]
+  
-  uni.reLaunch({
+  const targetPath = TAB_ROUTES[index]
-    url: path,
+  const currentPath = TAB_ROUTES[currentActiveIndex.value]
-    fail: () => {
+  
-      uni.showToast({ title: '页面跳转失败', icon: 'none' })
+  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()
+      }, 100)
     }
   })
 }
@@ -106,6 +209,11 @@ function onTabTap(index) {
   align-items: center;
   gap: 8rpx;
   padding: 12rpx 24rpx;
+  transition: all 0.1s ease;
+}
+
+.tab-item:active {
+  transform: scale(0.95);
 }
 
 .tab-icon {
@@ -122,4 +230,4 @@ function onTabTap(index) {
   color: #f97316;
   font-weight: 600;
 }
-</style>
+</style>

gym-manage-uniapp/components/index/QuickEntry.vue

@@ -23,9 +23,9 @@
 
 <script setup>
 
-const QEClick = () => {
+const QEClick = path => {
 	uni.navigateTo({
-		url:"/pages/checkIn/checkIn"
+		url:path
 	})
 }
 // 快捷入口数据列表
@@ -34,7 +34,8 @@ const entries = [
 		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/course.png',
 		   title: '找课程',
 		   desc: '精品课程',
-		   accent: false
+		   accent: false,
+		   path: "/pages/searchCourse/searchCourse"
 	   },
 	  { 
 		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/plan.png',

gym-manage-uniapp/components/index/RecommendCourses.vue

@@ -21,7 +21,7 @@
         <!-- 课程卡片 -->
         <view
           v-for="(course, index) in courses"
-          :key="index"
+          :key="course.id || index"
           class="course-card"
         >
           <!-- 课程图片区域 -->
@@ -65,7 +65,7 @@
               <text>{{ course.participants }}人参与</text>
             </view>
             <!-- 去参与按钮 -->
-            <view class="join-btn">
+            <view class="join-btn" @click="handleJoinCourse(course)">
               <text>去参与</text>
             </view>
           </view>
@@ -76,36 +76,231 @@
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
+import { getGroupCoursePage } from '@/api/main.js'
+
 // 推荐课程数据列表
-const courses = [
+const courses = ref([])
-  {
+
-    image: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80',
+// 课程类型映射（用于显示标签）
-    tag: '限时免费',
+const getCourseTypeName = (type) => {
-    tagType: 'free',
+  const typeMap = {
-    name: 'HIIT高强度燃脂',
+    '1': '瑜伽',
-    duration: '30分钟',
+    '2': '搏击',
-    level: '中级',
+    '3': '塑形'
-    participants: '4587'
-  },
-  {
-    image: 'https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=400&q=80',
-    tag: '人气TOP',
-    tagType: 'hot',
-    name: '力量进阶训练',
-    duration: '45分钟',
-    level: '高级',
-    participants: '6231'
-  },
-  {
-    image: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=400&q=80',
-    tag: '新课上线',
-    tagType: 'new',
-    name: '瑜伽·身心平衡',
-    duration: '60分钟',
-    level: '初级',
-    participants: '3210'
   }
-]
+  return typeMap[type] || '课程'
+}
+
+// 根据课程信息获取标签文本
+const getTag = (course) => {
+  // 满员标签
+  if (course.currentMembers >= course.maxMembers) {
+    return '已满员'
+  }
+  // 已结束的课程
+  if (course.status === '2') {
+    return '已结束'
+  }
+  // 高人气标签（参与人数超过最大人数的80%）
+  if (course.currentMembers / course.maxMembers >= 0.8) {
+    return '热门'
+  }
+  // 课程类型标签
+  return getCourseTypeName(course.courseType)
+}
+
+// 根据课程信息获取标签样式类型
+const getTagType = (course) => {
+  // 满员标签样式
+  if (course.currentMembers >= course.maxMembers) {
+    return 'full'
+  }
+  // 已结束标签样式
+  if (course.status === '2') {
+    return 'ended'
+  }
+  // 热门标签样式
+  if (course.currentMembers / course.maxMembers >= 0.8) {
+    return 'hot'
+  }
+  // 默认样式
+  return 'default'
+}
+
+// 计算课程时长（从startTime和endTime计算）
+const calculateDuration = (startTime, endTime) => {
+  if (!startTime || !endTime) return '60分钟'
+  const start = new Date(startTime)
+  const end = new Date(endTime)
+  const durationMinutes = Math.floor((end - start) / (1000 * 60))
+  return `${durationMinutes}分钟`
+}
+
+// 获取课程难度（基于课程类型和描述简单判断）
+const getCourseLevel = (course) => {
+  // 可以根据实际需求调整逻辑
+  if (course.courseType === '2') return '中级'
+  if (course.courseType === '3') return '高级'
+  if (course.courseType === '1') return '初级'
+  return '初级'
+}
+
+// 处理图片URL
+const getImageUrl = (coverImage) => {
+  if (!coverImage) {
+    return 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80'
+  }
+  // 如果已经是完整URL直接返回，否则拼接基础路径
+  if (coverImage.startsWith('http')) {
+    return coverImage
+  }
+  // 这里需要根据您的实际图片基础路径配置
+  return `https://your-domain.com${coverImage}`
+}
+
+// 获取推荐课程（按最火排序，返回5条）
+const fetchRecommendCourses = async () => {
+  try {
+    const res = await getGroupCoursePage({
+      page: 0,
+      size: 5,
+      sort: 'current_members', // 按参与人数排序
+      order: 'desc' // 降序，即最火的在前
+    }, { cache: true, cacheTime: 5 * 60 * 1000 })
+    
+    if (res && res.content && Array.isArray(res.content)) {
+      // 将后端数据转换为组件所需格式
+      courses.value = res.content.map(course => ({
+        id: course.id,
+        image: getImageUrl(course.coverImage),
+        tag: getTag(course),
+        tagType: getTagType(course),
+        name: course.courseName || '未知课程',
+        duration: calculateDuration(course.startTime, course.endTime),
+        level: getCourseLevel(course),
+        participants: course.currentMembers || 0,
+        // 保存原始数据供点击事件使用
+        rawData: course
+      }))
+    } else {
+      // 如果没有数据，使用提供的示例数据作为fallback
+      useFallbackData()
+    }
+  } catch (err) {
+    // console.error('获取推荐课程失败:', err)
+    // 使用提供的示例数据作为fallback
+    useFallbackData()
+  }
+}
+
+// 使用提供的响应数据作为默认数据
+const useFallbackData = () => {
+  const fallbackContent = [
+    {
+      id: "3",
+      courseName: "燃脂搏击",
+      courseType: "2",
+      startTime: "2026-06-10T18:30:00",
+      endTime: "2026-06-10T19:30:00",
+      maxMembers: 20,
+      currentMembers: 20,
+      status: "0",
+      coverImage: "/images/kickboxing.jpg",
+      description: "高强度间歇训练，配合音乐快速燃脂，释放压力。名额已满，无法预约。"
+    },
+    {
+      id: "2",
+      courseName: "清晨流瑜伽",
+      courseType: "1",
+      startTime: "2026-06-12T09:00:00",
+      endTime: "2026-06-12T10:30:00",
+      maxMembers: 15,
+      currentMembers: 5,
+      status: "0",
+      coverImage: "/images/yoga_flow.jpg",
+      description: "适合有一定基础的学员，通过流畅的体式连接呼吸，唤醒身体能量。"
+    },
+    {
+      id: "4",
+      courseName: "哈他瑜伽",
+      courseType: "1",
+      startTime: "2026-06-01T15:20:00",
+      endTime: "2026-06-01T16:50:00",
+      maxMembers: 12,
+      currentMembers: 3,
+      status: "0",
+      coverImage: "/images/hatha_yoga.jpg",
+      description: "基础哈他瑜伽，适合所有级别。距开始不足30分钟，已停止预约。"
+    },
+    {
+      id: "6",
+      courseName: "蜜桃臀塑造",
+      courseType: "3",
+      startTime: "2026-05-30T19:00:00",
+      endTime: "2026-05-30T20:00:00",
+      maxMembers: 10,
+      currentMembers: 8,
+      status: "2",
+      coverImage: "/images/glute.jpg",
+      description: "针对性训练臀部肌肉群，课程已于5月30日结束，无法预约。"
+    },
+    {
+      id: "7",
+      courseName: "午间冥想放松",
+      courseType: "1",
+      startTime: "2026-05-31T12:00:00",
+      endTime: "2026-05-31T13:00:00",
+      maxMembers: 15,
+      currentMembers: 6,
+      status: "2",
+      coverImage: "/images/meditation_noon.jpg",
+      description: "午间冥想课程，已于5月31日结束。"
+    }
+  ]
+
+  courses.value = fallbackContent.map(course => ({
+    id: course.id,
+    image: getImageUrl(course.coverImage),
+    tag: getTag(course),
+    tagType: getTagType(course),
+    name: course.courseName || '未知课程',
+    duration: calculateDuration(course.startTime, course.endTime),
+    level: getCourseLevel(course),
+    participants: course.currentMembers || 0,
+    rawData: course
+  }))
+}
+
+// 处理参与课程点击
+const handleJoinCourse = (course) => {
+  // 根据课程状态判断是否可以参与
+  if (course.rawData.status === '2') {
+    uni.showToast({
+      title: '课程已结束',
+      icon: 'none'
+    })
+    return
+  }
+  
+  if (course.rawData.currentMembers >= course.rawData.maxMembers) {
+    uni.showToast({
+      title: '课程已满员',
+      icon: 'none'
+    })
+    return
+  }
+  
+  // 跳转到课程详情页
+  uni.navigateTo({
+    url: `/pages/course/detail?id=${course.id}`
+  })
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchRecommendCourses()
+})
 </script>
 
 <style lang="scss">
@@ -206,6 +401,37 @@ const courses = [
   font-weight: 600;
   color: #ffffff;
   background: #f97316;
+  z-index: 2;
+  
+  /* 热门标签 */
+  &.hot {
+    background: #ef4444;
+  }
+  
+  /* 新课标签 */
+  &.new {
+    background: #10b981;
+  }
+  
+  /* 免费标签 */
+  &.free {
+    background: #3b82f6;
+  }
+  
+  /* 满员标签 */
+  &.full {
+    background: #64748b;
+  }
+  
+  /* 已结束标签 */
+  &.ended {
+    background: #94a3b8;
+  }
+  
+  /* 默认标签 */
+  &.default {
+    background: #f97316;
+  }
 }
 
 /* 课程信息区域样式 */
@@ -244,10 +470,10 @@ const courses = [
   font-size: 20rpx;
   image{
   	display: flex;
-  align-items: center;
+    align-items: center;
-  	  width: 25rpx;
+  	width: 25rpx;
-  	  height: 25rpx;
+  	height: 25rpx;
-    }
+  }
 }
 
 /* 课程底部区域样式 */
@@ -272,9 +498,9 @@ const courses = [
   font-size: 24rpx;
   image{
 	display: flex;
-align-items: center;
+    align-items: center;
-	  width: 30rpx;
+	width: 30rpx;
-	  height: 30rpx;
+	height: 30rpx;
   }
 }
 
@@ -288,4 +514,4 @@ align-items: center;
   font-weight: 600;
   color: #f97316;
 }
-</style>
+</style>

gym-manage-uniapp/pages.json

@@ -3,32 +3,52 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "健身房"
+				"navigationBarTitleText": "健身房",
+        "app-plus": {
+          "animationType": "fade-in",
+          "animationDuration": 200
+        }
 			}
 		},
 		{
 			"path": "pages/course/index",
 			"style": {
-				"navigationBarTitleText": "课程"
+				"navigationBarTitleText": "课程",
+        "app-plus": {
+          "animationType": "fade-in",
+          "animationDuration": 200
+        }
 			}
 		},
 		{
 			"path": "pages/train/index",
 			"style": {
-				"navigationBarTitleText": "训练"
+				"navigationBarTitleText": "训练",
+        "app-plus": {
+          "animationType": "fade-in",
+          "animationDuration": 200
+        }
 			}
 		},
 		{
 			"path": "pages/discover/index",
 			"style": {
-				"navigationBarTitleText": "发现"
+				"navigationBarTitleText": "发现",
+        "app-plus": {
+          "animationType": "fade-in",
+          "animationDuration": 200
+        }
 			}
 		},
 		{
 			"path": "pages/memberInfo/memberInfo",
 			"style": {
 				"navigationStyle": "custom",
-				"navigationBarTitleText": "我的"
+				"navigationBarTitleText": "我的",
+        "app-plus": {
+          "animationType": "fade-in",
+          "animationDuration": 200
+        }
 			}
 		},
 		{
@@ -231,13 +251,39 @@
 				"navigationBarTitleText": "课程详情",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/LoadingOverlay/LoadingOverlay",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		},
+		{
+			"path": "pages/searchCourse/searchCourse",
+			"style": {
+				"navigationBarTitleText": "搜索课程"
+			}
 		}
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "健身房",
 		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
+		"backgroundColor": "#F8F8F8",
+		"app-plus": {
+		      "animationType": "pop-in",
+		      "animationDuration": 200
+		    }
 	},
-	"uniIdRouter": {}
+	"uniIdRouter": {},
+	"tabBar": {
+	    "custom": true,  // 启用自定义 tabBar
+	    "list": [
+	        { "pagePath": "pages/index/index", "text": "首页" },
+	        { "pagePath": "pages/course/index", "text": "课程" },
+	        { "pagePath": "pages/train/index", "text": "训练" },
+	        { "pagePath": "pages/discover/index", "text": "发现" },
+	        { "pagePath": "pages/memberInfo/memberInfo", "text": "我的" }
+	      ]
+	  }
 }

gym-manage-uniapp/pages/LoadingOverlay/LoadingOverlay.vue

@@ -0,0 +1,74 @@
+<!-- components/LoadingOverlay.vue -->
+<template>
+  <view v-if="visible" class="loading-overlay">
+    <view class="loading-content">
+      <view class="loading-spinner"></view>
+      <text class="loading-text">{{ text }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+  text: { type: String, default: '加载中...' },
+  delay: { type: Number, default: 200 }
+})
+
+const visible = ref(false)
+let timer = null
+
+onMounted(() => {
+  timer = setTimeout(() => {
+    visible.value = true
+  }, props.delay)
+})
+
+onUnmounted(() => {
+  if (timer) clearTimeout(timer)
+})
+</script>
+
+<style lang="scss" scoped>
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+}
+
+.loading-content {
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 16rpx;
+  padding: 32rpx 48rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20rpx;
+}
+
+.loading-spinner {
+  width: 48rpx;
+  height: 48rpx;
+  border: 4rpx solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.loading-text {
+  color: #fff;
+  font-size: 24rpx;
+}
+</style>

gym-manage-uniapp/pages/checkIn/checkIn.vue

@@ -104,7 +104,7 @@ import { onLoad, onUnload } from '@dcloudio/uni-app'
 // 引入状态组件（路径与你保持一致）
 import QrStatus from '@/components/QRCode/StatusCard.vue'
 // 引入API封装
-import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
+import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
 
 	let image = ref("")
 	let width = ref(0)
@@ -115,6 +115,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
 	const QRStatus = ref("生成中...")
 	const STQRC = ref(false)//是否扫码
 	const isCheckIn = ref(false)
+	const webSoketURL = "ws://localhost:8084/webSocket/checkIn"
 	
 	const qrcode = ref("")
 	
@@ -209,22 +210,31 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
 	}
 
 	/**
-	 * 清除所有QR_开头的缓存（用于测试阶段）
+	 * 清除所有与签到相关的缓存（用于测试阶段）
 	 */
 	const clearQRCache = () => {
 		try {
 			const keys = uni.getStorageInfoSync().keys || []
 			let clearedCount = 0
 			for (const key of keys) {
+				// 清除 QR_ 开头的缓存（页面内部缓存）
 				if (key.startsWith(CACHE_PREFIX)) {
 					uni.removeStorageSync(key)
 					clearedCount++
 				}
+				// 清除 API_CACHE_ 开头的缓存（通过 utils/cache.js 缓存的接口数据）
+				if (key.startsWith('API_CACHE_')) {
+					// 只清除与签到相关的 API 缓存
+					if (key.includes('checkIn') || key.includes('qrcode')) {
+						uni.removeStorageSync(key)
+						clearedCount++
+					}
+				}
 			}
-			console.log(`已清除 ${clearedCount} 个QR_开头的缓存`)
+			console.log(`已清除 ${clearedCount} 个签到相关缓存`)
 			return clearedCount
 		} catch (e) {
-			console.error('清除QR缓存失败:', e)
+			console.error('清除 QR 缓存失败:', e)
 			return 0
 		}
 	}
@@ -256,10 +266,8 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
 						duration: 2000
 					})
 					
-					// 重新请求二维码
+					// 重置页面状态后不再自动请求二维码
-					setTimeout(() => {
+					uni.hideLoading()
-						getStorage(null)
-					}, 500)
 				}
 			}
 		})
@@ -319,7 +327,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
 	    errorText.value = '' // 重置错误文本
 	    image.value = ""
 	    
-	    getQRCode(true).then(res => {
+	    getQRCode({ cache: true, cacheTime: 5 * 60 * 1000 }).then(res => {
 	        console.log(res)
 	        // 保存到本地缓存（用于签到状态判断）
 	        setCacheData("QRInfo", res)
@@ -403,7 +411,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
 	// 手动签到接口
 	const checkIn = (qrContent) => {
 		console.log(qrContent)
-		apiCheckIn(qrContent).then(res => {
+		apiCheckIn({ qrContent }).then(res => {
 			closeWebSocket()
 			console.log(res)
 			status.value = 'scanned'
@@ -422,17 +430,20 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
 			console.error('签到请求失败:', err)
 			status.value = 'error'
 			errorText.value = err.message || '签到失败，请重试' // 对应错误文案
+			uni.showToast({
+			    title: err.message,
+			    icon: 'none'
+			})
 		})
 	}
 	
 	// 建立WebSocket连接
 	const connectWebSocket = (qrContent) => {
-	    const wsUrl = `ws://192.168.43.89:8084/webSocket/checkIn`
 	    
-	    console.log('WebSocket 连接地址:', wsUrl)
+	    console.log('WebSocket 连接地址:', webSoketURL)
 	    
 	    socketTask = uni.connectSocket({
-	        url: wsUrl,
+	        url: webSoketURL,
 	        success: () => {
 	            console.log('WebSocket 连接中...')
 	        },
@@ -477,17 +488,27 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
 	    socketTask.onMessage((res) => {
 	        console.log('收到 WebSocket 消息:', res.data)
 	        const message = res.data
-	        
+
 	        if (message === '正在进行签到') {
+				// 显示遮罩，防止用户重复扫码
 				QRStatus.value = "正在进行签到..."
 				STQRC.value = true
-	   //          status.value = 'scanned'
+	        } else if (message === '签到成功' || message.includes('签到成功')) {
-				// errorText.value = '' // 成功重置错误文本
+				// 签到成功，更新状态
-	   //          uni.showToast({
+				status.value = 'scanned'
-	   //              title: '签到成功！',
+				errorText.value = ''
-	   //              icon: 'success',
+				isCheckIn.value = true
-	   //              duration: 2000
+				QRStatus.value = "签到成功"
-	   //          })
+				// 缓存签到状态
+				setCacheData("isCheckIn", true)
+				setCacheData("checkInTime", "签到成功")
+				uni.showToast({
+				    title: '签到成功！',
+				    icon: 'success',
+				    duration: 2000
+				})
+				// 关闭WebSocket连接
+				closeWebSocket()
 	        } else if (message.startsWith('二维码无效')) {
 	            uni.showToast({
 	                title: message,
@@ -495,18 +516,32 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
 	                duration: 2000
 	            })
 	            status.value = 'error'
-	            errorText.value = '二维码无效，请刷新' // 对应错误文案
+	            errorText.value = '二维码无效，请刷新'
+				// 隐藏遮罩，允许用户重新操作
+				STQRC.value = false
+				QRStatus.value = "生成中..."
 	            setTimeout(() => {
 	                closeWebSocket()
 	            }, 3000)
 	        } else if (message === '消息格式错误') {
-	            uni.showToast({
-	                title: '消息格式错误',
-	                icon: 'none'
-	            })
 	            status.value = 'error'
-	            errorText.value = '消息格式错误' // 对应错误文案
+	            errorText.value = '消息格式错误'
-	        } else {
+				// 隐藏遮罩，允许用户重新操作
+				STQRC.value = false
+				QRStatus.value = "生成中..."
+	        } else if (message.includes('失败') || message.includes('错误')) {
+				// 其他失败情况
+				uni.showToast({
+				    title: message,
+				    icon: 'none',
+				    duration: 2000
+				})
+				status.value = 'error'
+				errorText.value = message
+				// 隐藏遮罩，允许用户重新操作
+				STQRC.value = false
+				QRStatus.value = "生成中..."
+			} else {
 	            console.log('未知消息:', message)
 	        }
 	    })
@@ -523,10 +558,6 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
 	        console.error('WebSocket 错误:', err)
 	        status.value = 'error'
 	        errorText.value = '连接失败，请重试' // 对应错误文案
-	        uni.showToast({
-	            title: '连接失败',
-	            icon: 'none'
-	        })
 	    })
 	}
 	

gym-manage-uniapp/pages/course/index.vue

@@ -1,3 +1,4 @@
+<!-- pages/course/index.vue -->
 <template>
   <view class="tab-page">
     <view class="tab-page__header">
@@ -5,27 +6,114 @@
       <text class="tab-page__subtitle">精品团课 · 私教 · 线上课</text>
     </view>
 
-    <RecommendCourses />
+    <!-- 骨架屏 -->
-
+    <view v-if="loading" class="skeleton-container">
-    <view class="tab-page__actions">
+      <view class="skeleton-item" v-for="i in 3" :key="i">
-      <view class="tab-page__btn" hover-class="tab-page__btn--hover" @tap="goCourseList">
+        <view class="skeleton-img"></view>
-        <text class="tab-page__btn-text">预约课程</text>
+        <view class="skeleton-text"></view>
-      </view>
-      <view class="tab-page__btn tab-page__btn--ghost" hover-class="tab-page__btn--hover" @tap="goMyCourses">
-        <text class="tab-page__btn-text tab-page__btn-text--ghost">我的课程</text>
       </view>
     </view>
 
+    <!-- 真实内容 -->
+    <template v-else>
+      <RecommendCourses :data="courseData" />
+      
+      <view class="tab-page__actions">
+        <view class="tab-page__btn" hover-class="tab-page__btn--hover" @tap="goCourseList">
+          <text class="tab-page__btn-text">预约课程</text>
+        </view>
+        <view class="tab-page__btn tab-page__btn--ghost" hover-class="tab-page__btn--hover" @tap="goMyCourses">
+          <text class="tab-page__btn-text tab-page__btn-text--ghost">我的课程</text>
+        </view>
+      </view>
+    </template>
+
     <view class="bottom-placeholder"></view>
-    <TabBar :active="1" />
+    <TabBar @update:active="handleTabActive" />
   </view>
 </template>
 
 <script setup>
+	import { ref } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
 import RecommendCourses from '@/components/index/RecommendCourses.vue'
 import TabBar from '@/components/TabBar.vue'
 import { PAGE, navigateToPage } from '@/common/constants/routes.js'
 
+const loading = ref(true)
+const courseData = ref(null)
+
+// 从缓存加载数据
+function loadFromCache() {
+  try {
+    const cached = uni.getStorageSync('course_cache')
+    if (cached && Date.now() - cached.time < 5 * 60 * 1000) {
+      courseData.value = cached.data
+      loading.value = false
+      return true
+    }
+  } catch (e) {
+    console.error('读取缓存失败', e)
+  }
+  return false
+}
+
+// 从网络加载数据
+async function loadFromNetwork() {
+  loading.value = true
+  
+  try {
+    // 模拟 API 请求
+    const res = await new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({ code: 0, data: { list: [] } })
+      }, 500)
+    })
+    
+    if (res.code === 0) {
+      courseData.value = res.data
+      // 更新缓存
+      uni.setStorageSync('course_cache', {
+        data: res.data,
+        time: Date.now()
+      })
+    }
+  } catch (err) {
+    console.error('加载失败', err)
+    uni.showToast({ title: '加载失败', icon: 'none' })
+  } finally {
+    loading.value = false
+  }
+}
+
+// 页面激活时刷新数据（可选）
+function handleTabActive(index) {
+  // Tab 切换时后台刷新数据
+  if (index === 1 && !loading.value) {
+    loadFromNetwork()
+  }
+}
+
+onLoad(() => {
+  // 优先显示缓存
+  const hasCache = loadFromCache()
+  if (!hasCache) {
+    loadFromNetwork()
+  } else {
+    // 后台静默更新
+    setTimeout(() => {
+      loadFromNetwork()
+    }, 100)
+  }
+})
+
+onShow(() => {
+  // 每次显示时确保加载完成
+  if (loading.value && !courseData.value) {
+    loadFromNetwork()
+  }
+})
+
 function goCourseList() {
   navigateToPage(PAGE.COURSE_LIST)
 }
@@ -94,4 +182,39 @@ function goMyCourses() {
 .bottom-placeholder {
   height: 40rpx;
 }
-</style>
+
+/* 骨架屏样式 */
+.skeleton-container {
+  padding: 24rpx 32rpx;
+}
+
+.skeleton-item {
+  margin-bottom: 24rpx;
+  padding: 20rpx;
+  background: #fff;
+  border-radius: 20rpx;
+}
+
+.skeleton-img {
+  width: 100%;
+  height: 200rpx;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+  border-radius: 16rpx;
+}
+
+.skeleton-text {
+  height: 32rpx;
+  margin-top: 16rpx;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+  border-radius: 8rpx;
+}
+
+@keyframes skeleton-loading {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+</style>

gym-manage-uniapp/pages/index/index.vue

@@ -15,8 +15,8 @@
     <!-- 底部占位 -->
     <view class="bottom-placeholder"></view>
 
-    <!-- 底部导航 -->
+    <!-- TabBar -->
-    <TabBar :active="0" />
+    <TabBar />
   </view>
 </template>
 
@@ -38,4 +38,5 @@ import TabBar from '@/components/TabBar.vue'
 .bottom-placeholder {
   height: 40rpx;
 }
-</style>
+
+</style>

gym-manage-uniapp/utils/cache.js

@@ -0,0 +1,89 @@
+// 缓存相关常量
+const CACHE_PREFIX = 'API_CACHE_'
+const CACHE_EXPIRE_TIME = 5 * 60 * 1000 // 默认缓存时间5分钟
+
+/**
+ * 获取缓存数据
+ * @param {string} key - 缓存键名
+ * @returns {any} 缓存数据（过期返回null）
+ */
+export const getCache = (key) => {
+  try {
+    const cacheData = uni.getStorageSync(CACHE_PREFIX + key)
+    if (cacheData && cacheData.expireTime && Date.now() < cacheData.expireTime) {
+      return cacheData.data
+    }
+    // 缓存过期，清除
+    uni.removeStorageSync(CACHE_PREFIX + key)
+    return null
+  } catch (e) {
+    console.error('获取缓存失败:', e)
+    return null
+  }
+}
+
+/**
+ * 设置缓存数据
+ * @param {string} key - 缓存键名
+ * @param {any} data - 要缓存的数据
+ * @param {number} expireTime - 过期时间（毫秒），默认5分钟
+ */
+export const setCache = (key, data, expireTime = CACHE_EXPIRE_TIME) => {
+  try {
+    const cacheData = {
+      data: data,
+      expireTime: Date.now() + expireTime
+    }
+    uni.setStorageSync(CACHE_PREFIX + key, cacheData)
+  } catch (e) {
+    console.error('设置缓存失败:', e)
+  }
+}
+
+/**
+ * 清除指定缓存
+ * @param {string} key - 缓存键名
+ */
+export const clearCache = (key) => {
+  try {
+    uni.removeStorageSync(CACHE_PREFIX + key)
+  } catch (e) {
+    console.error('清除缓存失败:', e)
+  }
+}
+
+/**
+ * 清除所有API缓存
+ */
+export const clearAllCache = () => {
+  try {
+    const keys = uni.getStorageInfoSync().keys || []
+    for (const key of keys) {
+      if (key.startsWith(CACHE_PREFIX)) {
+        uni.removeStorageSync(key)
+      }
+    }
+  } catch (e) {
+    console.error('清除所有缓存失败:', e)
+  }
+}
+
+/**
+ * 生成请求缓存键名
+ * @param {string} url - 请求URL
+ * @param {object} data - 请求参数
+ * @param {string} method - 请求方法
+ * @returns {string} 缓存键名
+ */
+export const generateCacheKey = (url, data, method) => {
+  const params = JSON.stringify(data || {})
+  return `${method}_${url}_${params}`
+}
+
+export default {
+  getCache,
+  setCache,
+  clearCache,
+  clearAllCache,
+  generateCacheKey
+}

gym-manage-uniapp/utils/request.js

@@ -1,4 +1,4 @@
-const BASE_URL = 'http://192.168.5.15:8084/api'
+const BASE_URL = '/api'
 
 // 缓存相关常量
 const CACHE_PREFIX = 'API_CACHE_'
@@ -212,4 +212,21 @@ export const requestUtils = {
   clearAllCache
 }
 
+// 添加便捷方法
+request.get = (url, data = {}, options = {}) => {
+  return request({ url, method: 'GET', data, ...options })
+}
+
+request.post = (url, data = {}, options = {}) => {
+  return request({ url, method: 'POST', data, ...options })
+}
+
+request.put = (url, data = {}, options = {}) => {
+  return request({ url, method: 'PUT', data, ...options })
+}
+
+request.delete = (url, data = {}, options = {}) => {
+  return request({ url, method: 'DELETE', data, ...options })
+}
+
 export default request

gym-manage-uniapp/vite.config.js

@@ -7,17 +7,22 @@ export default defineConfig({
   plugins: [uni()],
   resolve: {
 	alias: {
-	  '@': path.resolve(__dirname, 'src')
+	  '@': path.resolve(__dirname, '.')
 	},
   },
   server: {
     proxy: {
-      // 匹配所有 /api 开头的请求
+      // 匹配所有 /api/ 开头的请求（排除静态文件）
       '/api': {
         target: 'http://192.168.5.15:8084', // 你的后端SpringBoot地址
         changeOrigin: true, // 开启跨域伪装
-        // rewrite: (path) => path.replace(/^\/areyouok/, '') 
+        // 只代理真正的后端API请求，排除 .js .vue 等静态文件
-        // 举例：前端请求 /api/login  → 代理成  http://localhost:8088/login
+        bypass: function(req, res, proxyOptions) {
+          if (req.url.indexOf('.js') !== -1 || req.url.indexOf('.vue') !== -1 || 
+              req.url.indexOf('.css') !== -1 || req.url.indexOf('.json') !== -1) {
+            return req.url
+          }
+        }
       }
     }
   }