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

<!-- pages/course/index.vue -->
<template>
  <!-- 滚动内容区域 -->
  <scroll-view scroll-y="false" class="scroll-container">
    <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>
    </view>
  </scroll-view>
  
  <!-- 固定 TabBar -->
  <view class="tabbar-fixed">
    <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;
  padding-bottom: 160rpx;
  position: relative;
  z-index: 2;
}

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

.tab-page__title {
  display: block;
  font-size: 40rpx;
  font-weight: $font-weight-bold;
  color: $text-dark;
}

.tab-page__subtitle {
  display: block;
  margin-top: 8rpx;
  font-size: 24rpx;
  color: $text-muted;
}

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

.tab-page__btn {
  flex: 1;
  height: 80rpx;
  border-radius: $radius-full;
  background: $gradient-orange;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: $shadow-orange-glow;
  transition: all 0.2s ease;
}

.tab-page__btn:active {
  transform: scale(0.97);
  background: $accent-orange-dark;
}

.tab-page__btn--ghost {
  background: $bg-white;
  border: 1px solid $border-light;
  box-shadow: $shadow-sm;
}

.tab-page__btn-text {
  font-size: 28rpx;
  font-weight: $font-weight-bold;
  color: $text-inverse;
}

.tab-page__btn-text--ghost {
  color: $primary-deep;
}

.bottom-placeholder {
  height: 40rpx;
}

/* 骨架屏样式 */
.skeleton-container {
  padding: 24rpx 32rpx;
}

.skeleton-item {
  margin-bottom: 24rpx;
  padding: 20rpx;
  background: $bg-white;
  border-radius: $radius-md;
  box-shadow: $shadow-sm;
}

.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: $radius-sm;
}

.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; }
}

/* 滚动容器 */
.scroll-container {
  position: relative;
  z-index: 1;
  height: 100vh;
  width: 100%;
}

/* 固定 TabBar */
.tabbar-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: transparent;
}
</style>