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

<!-- pages/course/index.vue -->
<template>
  <view class="tab-page">
    <view class="tab-page__header">
      <text class="tab-page__title">课程</text>
      <text class="tab-page__subtitle">精品团课 · 私教 · 线上课</text>
    </view>

    <!-- 骨架屏 -->
    <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 @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)
}

function goMyCourses() {
  navigateToPage(PAGE.MY_COURSES)
}
</script>

<style lang="scss" scoped>
.tab-page {
  min-height: 100vh;
  background-color: #f0f4f8;
  padding-bottom: 160rpx;
}

.tab-page__header {
  padding: 48rpx 32rpx 16rpx;
}

.tab-page__title {
  display: block;
  font-size: 40rpx;
  font-weight: 700;
  color: #1a202c;
}

.tab-page__subtitle {
  display: block;
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #64748b;
}

.tab-page__actions {
  display: flex;
  gap: 20rpx;
  padding: 24rpx 32rpx;
}

.tab-page__btn {
  flex: 1;
  height: 80rpx;
  border-radius: 999rpx;
  background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-page__btn--ghost {
  background: #fff;
  border: 1px solid #e2e8f0;
}

.tab-page__btn-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #fff;
}

.tab-page__btn-text--ghost {
  color: #1a4a6f;
}

.bottom-placeholder {
  height: 40rpx;
}

/* 骨架屏样式 */
.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>