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

pages/book/detail.vue

@@ -3,82 +3,76 @@
     <!-- 导航栏 -->
     <nav-bar :title="$t('bookDetails.title')"></nav-bar>
     
-    <scroll-view 
-      scroll-y 
-      class="detail-scroll"
-      :style="{ height: scrollHeight + 'px' }"
+    <Skeleton
+      ref="bookInfoSkeleton"
+      theme="book-info"
+      class="p-3"
+      :request="[getBookInfo, getBookReadCount]"
+      @success="getBookInfoSuccess"
     >
-      <!-- 书籍信息 -->
-      <view class="book-info">
-        <image :src="bookInfo.images" class="cover" mode="aspectFill" />
-        <text class="title">{{ bookInfo.name }}</text>
-        <text class="author">{{ $t('bookDetails.authorName') }}{{ bookInfo.author?.authorName }}</text>
-        
-        <!-- 统计信息 -->
-        <view class="stats">
-          <view class="stat-item">
-            <image src="@/static/icon/icon_look_c.png" mode="aspectFit" />
-            <text>{{ readCount }}{{ $t('bookHome.readingCount') }}</text>
-          </view>
-          <view class="divider" />
-          <view class="stat-item">
-            <image src="@/static/icon/icon_listen_c.png" mode="aspectFit" />
-            <text>{{ listenCount }}{{ $t('bookHome.listenCount') }}</text>
-          </view>
-          <view class="divider" />
-          <view class="stat-item">
-            <image src="@/static/icon/icon_bug_c.png" mode="aspectFit" />
-            <text>{{ buyCount }}{{ $t('bookHome.purchased') }}</text>
-          </view>
-        </view>
-      </view>
-      
-      <!-- 简介 -->
-      <view class="introduction">
-        <text class="section-title">{{ $t('bookDetails.introduction') }}</text>
-        <text class="content">{{ bookInfo.author?.introduction }}</text>
-      </view>
-      
-      <!-- 书评列表 (非iOS) -->
-      <!-- <view v-if="!isIOS" class="comments-section">
-        <view class="section-header">
-          <text class="section-title">{{ $t('bookDetails.message') }}</text>
-          <view v-if="commentList.length > 0" class="more-link" @click="goToReview">
-            <text>{{ $t('bookDetails.more') }}</text>
-            <wd-icon name="arrow-right" size="14px" />
-          </view>
-        </view>
-        <view class="comment-wrapper">
-          <CommentList 
-            v-if="commentList.length > 0"
-            :comments="commentList.slice(0, 2)" 
-          />
-          <text v-else class="empty-text">{{ nullText }}</text>
-        </view>
-      </view> -->
-      
-      <!-- 相关推荐 -->
-      <view class="related-books">
-        <text class="section-title">{{ $t('bookDetails.relatedBooks') }}</text>
-        <scroll-view v-if="relatedBooks.length > 0" scroll-x class="book-scroll">
-          <view class="book-list">
-            <view 
-              class="book-item" 
-              v-for="item in relatedBooks" 
-              :key="item.id"
-              @click="goToDetail(item.id)"
-            >
-              <image :src="item.images" mode="aspectFill" />
-              <text>{{ item.name }}</text>
+      <template #content="{ data }">
+        <!-- 书籍信息 -->
+        <view class="book-info">
+          <image :src="data.getBookInfo.bookInfo.images" class="cover" mode="aspectFill" />
+          <text class="title">{{ data.getBookInfo.bookInfo.name }}</text>
+          <text class="author">{{ $t('bookDetails.authorName') }}{{ data.getBookInfo.bookInfo.author?.authorName }}</text>
+          
+          <!-- 统计信息 -->
+          <view class="stats">
+            <view class="stat-item">
+              <image src="@/static/icon/icon_look_c.png" mode="aspectFit" />
+              <text>{{ data.getBookReadCount.readCount }}{{ $t('bookHome.readingCount') }}</text>
+            </view>
+            <view class="divider" />
+            <view class="stat-item">
+              <image src="@/static/icon/icon_listen_c.png" mode="aspectFit" />
+              <text>{{ data.getBookReadCount.listenCount }}{{ $t('bookHome.listenCount') }}</text>
+            </view>
+            <view class="divider" />
+            <view class="stat-item">
+              <image src="@/static/icon/icon_bug_c.png" mode="aspectFit" />
+              <text>{{ data.getBookReadCount.buyCount }}{{ $t('bookHome.purchased') }}</text>
             </view>
           </view>
-        </scroll-view>
-        <text v-else class="empty-text">{{ nullBookText }}</text>
-      </view>
-    </scroll-view>
-    
+        </view>
+        
+        <!-- 简介 -->
+        <view class="introduction">
+          <text class="section-title">{{ $t('bookDetails.introduction') }}</text>
+          <text class="content">{{ data.getBookInfo.bookInfo.author?.introduction }}</text>
+        </view>
+      </template>
+    </Skeleton>
+      
+    <!-- 相关推荐 -->
+    <view class="related-books">
+      <text class="section-title">{{ $t('bookDetails.relatedBooks') }}</text>
+      <Skeleton
+        theme="image-card"
+        :size="Array(4).fill({ height: '100px', width: '23%' })"
+        :request="getRecommendBook"
+      >
+        <template #content="{ data }">
+          <scroll-view v-if="data.bookList.length > 0" scroll-x class="book-scroll">
+            <view class="book-list">
+              <view 
+                class="book-item" 
+                v-for="item in data.bookList" 
+                :key="item.id"
+                @click="goToDetail(item.id)"
+              >
+                <image :src="item.images" mode="aspectFill" />
+                <text>{{ item.name }}</text>
+              </view>
+            </view>
+          </scroll-view>
+          <text v-else class="empty-text">{{ $t('common.data_null') }}</text>
+        </template>
+      </Skeleton>
+    </view>
+      
     <!-- 底部操作栏 -->
-    <view class="action-bar">
+    <view v-if="bookInfoLoading" class="action-bar">
       <template v-if="bookInfo.isBuy || hasVip">
         <view class="action-btn read" @click="goToReader">
           <text>{{ $t('bookDetails.startReading') }}</text>
@@ -120,13 +114,12 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { onLoad, onShow } from '@dcloudio/uni-app'
-import { t } from '@/utils/i18n'
 import { bookApi } from '@/api/modules/book'
 import { useUserStore } from '@/stores/user'
-import type { IBookDetail, IBook, IComment } from '@/types/book'
+import type { IBookDetail } from '@/types/book'
 import type { IGoods } from '@/types/order'
 import GoodsSelector from '@/components/order/GoodsSelector.vue'
-import CommentList from '@/components/book/CommentList.vue'
+import Skeleton from '@/components/Skeleton/Skeleton.vue'
 
 const userStore = useUserStore()
 
@@ -138,6 +131,8 @@ const pageFrom = ref('')
 const hasVip = computed(() => userStore.userInfo?.userEbookVip?.length > 0 || false)
 
 // 数据状态
+const bookInfoSkeleton = ref()
+const bookInfoLoading = ref(false)
 const bookInfo = ref<IBookDetail>({
   id: 0,
   name: '',
@@ -147,23 +142,7 @@ const bookInfo = ref<IBookDetail>({
   freeChapterCount: 0
 })
 const goodsList = ref<IGoods[]>([])
-const readCount = ref(0)
-const listenCount = ref(0)
-const buyCount = ref(0)
-const commentList = ref<IComment[]>([])
-const relatedBooks = ref<IBook[]>([])
-const nullText = ref('')
-const nullBookText = ref('')
 const purchaseVisible = ref(false)
-const scrollHeight = ref(0)
-
-// 计算属性
-const isIOS = computed(() => {
-  // #ifdef APP-PLUS
-  return uni.getSystemInfoSync().platform === 'ios'
-  // #endif
-  return false
-})
 
 // 生命周期
 onLoad((options: any) => {
@@ -173,45 +152,23 @@ onLoad((options: any) => {
   if (options.page) {
     pageFrom.value = options.page
   }
-  
-  initScrollHeight()
-  loadBookCount()
-  loadRecommendBooks()
 })
 
 onShow(() => {
-  loadBookInfo()
-  loadGoodsInfo()
-  if (!isIOS.value) {
-    loadComments()
-  }
+  bookInfoSkeleton.value?.reload()
 })
 
-onMounted(() => {
-  initScrollHeight()
-})
-
-// 初始化滚动区域高度
-function initScrollHeight() {
-  const systemInfo = uni.getSystemInfoSync()
-  const statusBarHeight = systemInfo.statusBarHeight || 0
-  let navBarHeight = 44
-  if (systemInfo.model.includes('iPhone')) {
-    const modelNumber = parseInt(systemInfo.model.match(/\d+/)?.[0] || '0')
-    if (modelNumber >= 11) {
-      navBarHeight = 48
-    }
-  }
-  const totalNavHeight = statusBarHeight + navBarHeight
-  const actionBarHeight = 110 // rpx转px约55
-  scrollHeight.value = systemInfo.windowHeight - totalNavHeight - actionBarHeight / 2
-}
 
 // 加载书籍详情
-async function loadBookInfo() {
-  const res = await bookApi.getBookInfo(bookId.value)
-  bookInfo.value = res.bookInfo
+const getBookInfo = () => bookApi.getBookInfo(bookId.value)
+const getBookInfoSuccess = (res: any) => {
+  bookInfoLoading.value = true
+  bookInfo.value = res.getBookInfo.bookInfo || {}
 }
+// 加载统计数据
+const getBookReadCount = () => bookApi.getBookReadCount(bookId.value)
+// 加载推荐书籍
+const getRecommendBook = () => bookApi.getRecommendBook(bookId.value)
 
 // 加载购买商品信息
 async function loadGoodsInfo() {
@@ -219,38 +176,9 @@ async function loadGoodsInfo() {
   goodsList.value = res.productList || []
 }
 
-// 加载统计数据
-async function loadBookCount() {
-  const res = await bookApi.getBookReadCount(bookId.value)
-  if (res.code === 0) {
-    readCount.value = res.readCount || 0
-    listenCount.value = res.listenCount || 0
-    buyCount.value = res.buyCount || 0
-  }
-}
-
-// 加载评论
-async function loadComments() {
-  const res = await bookApi.getBookComments(bookId.value, 1, 10)
-  if (res.commentsTree && res.commentsTree.length > 0) {
-    commentList.value = res.commentsTree
-  } else {
-    nullText.value = t('common.data_null')
-  }
-}
-
-// 加载推荐书籍
-async function loadRecommendBooks() {
-  const res = await bookApi.getRecommendBook(bookId.value)
-  if (res.bookList && res.bookList.length > 0) {
-    relatedBooks.value = res.bookList
-  } else {
-    nullBookText.value = t('common.data_null')
-  }
-}
-
 // 显示购买弹窗
-function showPurchasePopup() {
+async function showPurchasePopup() {
+  await loadGoodsInfo()
   purchaseVisible.value = true
 }
 
@@ -281,12 +209,6 @@ function goToListen() {
   })
 }
 
-function goToReview() {
-  uni.navigateTo({
-    url: `/pages/book/review?bookId=${bookId.value}&page=0`
-  })
-}
-
 function goToDetail(id: number) {
   uni.navigateTo({
     url: `/pages/book/detail?id=${id}`
@@ -301,7 +223,7 @@ function goToDetail(id: number) {
   
   .book-info {
     text-align: center;
-    padding: 40rpx 30rpx;
+    padding-bottom: 40rpx;
     
     .cover {
       width: 300rpx;
@@ -359,9 +281,7 @@ function goToDetail(id: number) {
     }
   }
   
-  .introduction {
-    padding: 40rpx 30rpx 0;
-    
+  .introduction {    
     .section-title {
       display: block;
       font-size: 34rpx;
@@ -410,7 +330,7 @@ function goToDetail(id: number) {
   }
   
   .related-books {
-    padding: 40rpx 30rpx 40rpx;
+    padding: 0rpx 30rpx calc(40rpx + 110rpx);
     
     .section-title {
       display: block;