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

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 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 v-if="loading" class="skeleton-container">
+      <view class="skeleton-item" v-for="i in 3" :key="i">
+        <view class="skeleton-img"></view>
+        <view class="skeleton-text"></view>
       </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>