更新：1.课程详情增加骨架屏；2.图书首页和图书详情增加骨架屏；

2025-12-11 16:13:40 +08:00
parent b3d9b0c100
commit b8dd0584aa
27 changed files with 897 additions and 649 deletions
--- a/pages/course/details/chapter.vue
+++ b/pages/course/details/chapter.vue
@@ -6,8 +6,9 @@
    <!-- 页面内容 -->
    <view class="page-content">
      <!-- 视频播放器 -->
-      <view v-if="videoList.length > 0" class="video-section">
+      <view class="video-section">
        <VideoPlayer
+          v-if="videoList.length > 0"
          ref="videoPlayerRef"
          v-model:current-index="currentVideoIndex"
          :video-list="videoList"
@@ -32,7 +33,7 @@
        <view class="section-title">{{ $t('courseDetails.videoTeaching') }}</view>
        <wd-radio-group v-model="currentVideoIndex" shape="button" >
          <wd-radio v-for="(video, index) in videoList" :key="video.id" :value="index" class="mb-2!">
-            【{{ video.type == "2" ? $t('courseDetails.audio') : $t('courseDetails.video') }}】{{ index + 1 }}
+            【{{ video.type == 2 ? $t('courseDetails.audio') : $t('courseDetails.video') }}】{{ index + 1 }}
          </wd-radio>
        </wd-radio-group>
      </view>
@@ -74,7 +75,8 @@ import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { courseApi } from '@/api/modules/course'
 import VideoPlayer from '@/components/video-player/index.vue'
-import type { IChapterDetail, IVideo } from '@/types/course'
+import type { IChapterDetail } from '@/types/course'
+import type { IVideoInfo } from '@/types/video'

 // 页面参数
 const chapterId = ref<number>(0)
@@ -83,7 +85,7 @@ const chapterTitle = ref('')

 // 页面数据
 const chapterDetail = ref<IChapterDetail | null>(null)
-const videoList = ref<IVideo[]>([])
+const videoList = ref<IVideoInfo[]>([])
 const currentVideoIndex = ref(0)
 const activeVideoIndex = ref(0)
 const currentTab = ref('chapterIntro')
@@ -141,6 +143,7 @@ const previewImage = (url: string) => {

 .video-section {
  background-color: #000;
+  height: 400rpx;
 }

 .info-section {
--- a/pages/course/details/components/CatalogueList.vue
+++ b/pages/course/details/components/CatalogueList.vue
@@ -1,135 +1,147 @@
 <template>
-  <view class="course-content-wrapper">
-    <view 
-      v-if="catalogues.length > 1" 
-      :class="['catalogue-list', userVip ? 'vip-style' : '']"
-    >
-      <view
-        v-for="(catalogue, index) in catalogues"
-        :key="catalogue.id"
-        :class="['catalogue-item', currentCatalogueIndex === index ? 'active' : '']"
-        @click="handleSelect(index)"
-      >
-        <text class="catalogue-title">{{ catalogue.title }}</text>
-      </view>
-    </view>
-
-    <view class="chapter-list">
-      <!-- 目录状态信息 -->
-      <view class="catalogue-status">
-        <view v-if="currentCatalogue?.isBuy === 1 || userVip" class="purchased-info">
-          <view class="info-row">
-            <text v-if="userVip">
-              VIP畅学权益有效期截止到：{{ userVip.endTime }}
-            </text>
-            <template v-else>
-              <text v-if="!currentCatalogue.startTime">
-                当前目录还未开始学习
-              </text>
-              <text v-else>
-                课程有效期截止到：{{ currentCatalogue.endTime }}
-              </text>
-              <!-- <wd-button 
-                v-if="currentCatalogue.startTime"
-                size="small"
-                @click="handleRenew"
-              >
-                续费
-              </wd-button> -->
-            </template>
+  <view>
+    <Skeleton ref="skeleton" theme="line-list" :request="[getChapters, checkRenewPayment]" :auto="false" @success="getDataSuccess">
+      <template #loading-top>
+        <wd-skeleton :row-col="[
+          [{ width: '45%', height: '35px' }, { width: '45%', height: '35px' }],
+          [{ width: '100%', height: '90px' }]
+        ]" animation="gradient" class="mb-2.5! mt-5!" />
+      </template>
+      <template #content>
+        <view class="course-content-wrapper">
+          <view 
+            v-if="catalogues.length > 1" 
+            :class="['catalogue-list', userVip ? 'vip-style' : '']"
+          >
+            <view
+              v-for="(catalogue, index) in catalogues"
+              :key="catalogue.id"
+              :class="['catalogue-item', currentCatalogueIndex === index ? 'active' : '']"
+              @click="handleSelect(index)"
+            >
+              <text class="catalogue-title">{{ catalogue.title }}</text>
+            </view>
          </view>
-        </view>
-        
-        <!-- 未购买状态 -->
-        <view v-else-if="currentCatalogue?.type === 0" class="free-course">
-          <wd-button type="success" @click="handleGetFreeCourse">
-            {{ $t('courseDetails.free') }}
-          </wd-button>
-        </view>
-        
-        <view v-else class="unpurchased-info">
-          <text class="tip-text">
-            {{ $t('courseDetails.unpurchasedTip') }}
-          </text>
-          <view class="action-btns">
-            <wd-button size="small" type="warning" @click="handlePurchase">
-              {{ $t('courseDetails.purchase') }}
-            </wd-button>
-            <!-- 如果是复读显示复读按钮 -->
-            <wd-button v-if="canRenlearn" size="small" type="success" @click="handleRenlearn">
-              {{ $t('courseDetails.relearn') }}
-            </wd-button>
-            <wd-button size="small" type="primary" @click="goToVip">
-              {{ $t('courseDetails.openVip') }}
-            </wd-button>
-          </view>
-        </view>
-      </view>

-      <view v-if="chapterList.length > 0" class="chapter-content">
-        <!-- VIP标识 -->
-        <view v-if="userVip" class="vip-badge">
-          <text>VIP畅学权益生效中</text>
-        </view>
-        
-        <!-- 章节列表 -->
-        <view
-          v-for="(chapter, index) in chapterList"
-          :key="chapter.id"
-          class="chapter-item"
-          @click="handleChapterClick(chapter)"
-        >
-          <view class="chapter-content-wrapper">
-            <view :class="['chapter-info', !canAccess(chapter) ? 'locked' : '']">
-              <text class="chapter-title">{{ chapter.title }}</text>
+          <view class="chapter-list">
+            <!-- 目录状态信息 -->
+            <view class="catalogue-status">
+              <view v-if="currentCatalogue?.isBuy === 1 || userVip" class="purchased-info">
+                <view class="info-row">
+                  <text v-if="userVip">
+                    VIP畅学权益有效期截止到：{{ userVip.endTime }}
+                  </text>
+                  <template v-else>
+                    <text v-if="!currentCatalogue.startTime">
+                      当前目录还未开始学习
+                    </text>
+                    <text v-else>
+                      课程有效期截止到：{{ currentCatalogue.endTime }}
+                    </text>
+                    <!-- <wd-button 
+                      v-if="currentCatalogue.startTime"
+                      size="small"
+                      @click="handleRenew"
+                    >
+                      续费
+                    </wd-button> -->
+                  </template>
+                </view>
+              </view>
              
-              <!-- 试听标签 -->
-              <wd-tag
-                v-if="chapter.isAudition === 1 && !isPurchased && !userVip"
-                type="success"
-                plain
-                size="small"
-                custom-class="chapter-tag"
+              <!-- 未购买状态 -->
+              <view v-else-if="currentCatalogue?.type === 0" class="free-course">
+                <wd-button type="success" @click="handleGetFreeCourse">
+                  {{ $t('courseDetails.free') }}
+                </wd-button>
+              </view>
+              
+              <view v-else class="unpurchased-info">
+                <text class="tip-text">
+                  {{ $t('courseDetails.unpurchasedTip') }}
+                </text>
+                <view class="action-btns">
+                  <wd-button size="small" type="warning" @click="handlePurchase">
+                    {{ $t('courseDetails.purchase') }}
+                  </wd-button>
+                  <!-- 如果是复读显示复读按钮 -->
+                  <wd-button v-if="canRenlearn" size="small" type="success" @click="handleRenlearn">
+                    {{ $t('courseDetails.relearn') }}
+                  </wd-button>
+                  <wd-button size="small" type="primary" @click="goToVip">
+                    {{ $t('courseDetails.openVip') }}
+                  </wd-button>
+                </view>
+              </view>
+            </view>
+
+            <view v-if="chapterList.length > 0" class="chapter-content">
+              <!-- VIP标识 -->
+              <view v-if="userVip" class="vip-badge">
+                <text>VIP畅学权益生效中</text>
+              </view>
+              
+              <!-- 章节列表 -->
+              <view
+                v-for="(chapter, index) in chapterList"
+                :key="chapter.id"
+                class="chapter-item"
+                @click="handleChapterClick(chapter)"
              >
-                试听
-              </wd-tag>
-              
-              <!-- 学习状态标签 -->
-              <template v-if="isPurchased || userVip">
-                <wd-tag
-                  v-if="chapter.isLearned === 0"
-                  type="primary"
-                  plain
-                  size="small"
-                  custom-class="chapter-tag"
-                >
-                  未学
-                </wd-tag>
-                <wd-tag
-                  v-else
-                  type="success"
-                  plain
-                  size="small"
-                  custom-class="chapter-tag"
-                >
-                  已学
-                </wd-tag>
-              </template>
+                <view class="chapter-content-wrapper">
+                  <view :class="['chapter-info', !canAccess(chapter) ? 'locked' : '']">
+                    <text class="chapter-title">{{ chapter.title }}</text>
+                    
+                    <!-- 试听标签 -->
+                    <wd-tag
+                      v-if="chapter.isAudition === 1 && !isPurchased && !userVip"
+                      type="success"
+                      plain
+                      size="small"
+                      custom-class="chapter-tag"
+                    >
+                      试听
+                    </wd-tag>
+                    
+                    <!-- 学习状态标签 -->
+                    <template v-if="isPurchased || userVip">
+                      <wd-tag
+                        v-if="chapter.isLearned === 0"
+                        type="primary"
+                        plain
+                        size="small"
+                        custom-class="chapter-tag"
+                      >
+                        未学
+                      </wd-tag>
+                      <wd-tag
+                        v-else
+                        type="success"
+                        plain
+                        size="small"
+                        custom-class="chapter-tag"
+                      >
+                        已学
+                      </wd-tag>
+                    </template>
+                  </view>
+                  
+                  <!-- 锁定图标 -->
+                  <view v-if="!canAccess(chapter) && currentCatalogue.type != 0" class="lock-icon">
+                    <wd-icon name="lock-on" size="24px" color="#258feb" />
+                  </view>
+                </view>
+              </view>
            </view>
            
-            <!-- 锁定图标 -->
-            <view v-if="!canAccess(chapter) && currentCatalogue.type != 0" class="lock-icon">
-              <wd-icon name="lock-on" size="24px" color="#258feb" />
+            <!-- 暂无章节 -->
+            <view v-else class="no-chapters">
+              <text>暂无章节内容</text>
            </view>
          </view>
        </view>
-      </view>
-      
-      <!-- 暂无章节 -->
-      <view v-else class="no-chapters">
-        <text>暂无章节内容</text>
-      </view>
-    </view>
+      </template>
+    </Skeleton>

    <!-- 商品选择器 -->
    <GoodsSelector
@@ -147,12 +159,15 @@

 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
 import { courseApi } from '@/api/modules/course'
 import GoodsSelector from '@/components/order/GoodsSelector.vue'
 import Protocol from './Protocol.vue'
 import type { IChapter, ICatalogue, IVipInfo } from '@/types/course'
 import type { IGoods } from '@/types/order'

+const skeleton = ref()
+
 interface Props {
  catalogues: ICatalogue[]
  userVip: IVipInfo | null
@@ -207,33 +222,43 @@ const handleSelect = (index: number) => {
 /**
 * 获取当前目录的章节
 */
-const getChapters = async () => {
-  const res = await courseApi.getCatalogueChapterList(currentCatalogue.value.id)
-  chapterList.value = res.chapterList || []
-}
+const getChapters = () => courseApi.getCatalogueChapterList(currentCatalogue.value.id)

 /**
 * 检查目录是否支持复读
 */
 const checkRenewPayment = async () => {
  if (currentCatalogue.value.isBuy === 0 && !props.userVip) {
-    const renewRes = await courseApi.checkRenewPayment(currentCatalogue.value.id)
-    canRenlearn.value = renewRes.canRelearn || false
+    return courseApi.checkRenewPayment(currentCatalogue.value.id)
  } else {
-    canRenlearn.value = false
+    return null
  }
 }

+/**
+ * 获取数据完成后处理
+ */
+const getDataSuccess = (res: any) => {
+  const { getChapters, checkRenewPayment } = res
+  chapterList.value = getChapters.chapterList || []
+  canRenlearn.value = checkRenewPayment.canRelearn || false
+}
+
 /**
 * 监听目录变化
 */
 watch(() => props.catalogues, (newVal: ICatalogue[]) => {
  if (newVal.length > 0) {
    currentCatalogueIndex.value = 0
-    getChapters()
-    checkRenewPayment()
+    skeleton.value.reload()
  }
 }, { immediate: true, deep: true })
+/**
+ * 刷新章节数据
+ */
+onShow(async () => {
+  skeleton.value && skeleton.value.reload()
+})

 // 购买
 const handlePurchase = async () => {
--- a/pages/course/details/components/Protocol.vue
+++ b/pages/course/details/components/Protocol.vue
@@ -37,8 +37,6 @@ const props = defineProps<{
  visible: boolean
 }>()

-console.log(props.visible)
-
 const showProtocol = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
--- a/pages/course/details/course.vue
+++ b/pages/course/details/course.vue
@@ -13,11 +13,14 @@
    </view>

    <!-- 课程信息 -->
-    <CourseInfo v-if="courseDetail" :course="courseDetail" :class="{'pt-10': !!vipTip}" />
+    <Skeleton theme="image-text" :request="getCourseDetail" @success="getCourseDetailSuccess">
+      <template #content>
+        <CourseInfo v-if="courseDetail" :course="courseDetail" :class="{'pt-10': !!vipTip}" />
+      </template>
+    </Skeleton>

    <!-- 课程内容包装器 -->
    <CatalogueList
-      v-if="catalogueList.length > 0"
      :catalogues="catalogueList"
      :userVip="userVip"
      @toVip="goToVip"
@@ -177,38 +180,29 @@ const vipTip = computed(() => {
 */
 onLoad(async (options: any) => {
  courseId.value = parseInt(options.id)
-})
-
-/**
- * 页面显示
- */
-onShow(async () => {
-  await loadPageData()
+  loadPageData()
 })

 /**
 * 加载页面数据
 */
-const loadPageData = async () => {
-  // 获取课程详情
-  const res = await courseApi.getCourseDetail(courseId.value)
+const getCourseDetail = () => courseApi.getCourseDetail(courseId.value)
+const getCourseDetailSuccess = async (res: any) => {
  if (res.code === 0 && res.data) {
    courseDetail.value = res.data.course
    catalogueList.value = res.data.catalogues || []
    relatedBooks.value = res.data.shopProductList || []
-    
+
    // 计算学习进度
    if (catalogueList.value.length > 0) {
      const totalProgress = catalogueList.value.reduce((sum, cat) => sum + cat.completion, 0)
      learningProgress.value = Number((totalProgress / catalogueList.value.length).toFixed(2))
    }
  }
-  
+}
+const loadPageData = async () => {
  // 检查VIP权益
  await checkVipStatus()
-  
-  // 加载评论
-  await loadComments()
 }

 /**
@@ -448,11 +442,11 @@ onPullDownRefresh(async () => {
 /**
 * 触底加载
 */
-onReachBottom(() => {
-  if (hasMoreComments.value && !commentsLoading.value) {
-    loadComments()
-  }
-})
+// onReachBottom(() => {
+//   if (hasMoreComments.value && !commentsLoading.value) {
+//     loadComments()
+//   }
+// })
 </script>

 <style lang="scss" scoped>