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

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 () => {

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)