修复：图书详情和课程详情无数据问题

pages/book/detail.vue

@@ -3,76 +3,82 @@
     <!-- 导航栏 -->
     <nav-bar :title="$t('bookDetails.title')"></nav-bar>
     
-    <Skeleton
-      ref="bookInfoSkeleton"
-      theme="book-info"
-      class="p-3"
-      :request="[getBookInfo, getBookReadCount]"
-      @success="getBookInfoSuccess"
+    <scroll-view 
+      scroll-y 
+      class="detail-scroll"
+      :style="{ height: scrollHeight + 'px' }"
     >
-      <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 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 class="introduction">
-          <text class="section-title">{{ $t('bookDetails.introduction') }}</text>
-          <text class="content">{{ data.getBookInfo.bookInfo.author?.introduction }}</text>
+      </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>
-      </template>
-    </Skeleton>
+        <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>
-      <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 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>
             </view>
-          </scroll-view>
-          <text v-else class="empty-text">{{ $t('common.data_null') }}</text>
-        </template>
-      </Skeleton>
-    </view>
-      
+          </view>
+        </scroll-view>
+        <text v-else class="empty-text">{{ nullBookText }}</text>
+      </view>
+    </scroll-view>
+    
     <!-- 底部操作栏 -->
-    <view v-if="bookInfoLoading" class="action-bar">
+    <view class="action-bar">
       <template v-if="bookInfo.isBuy || hasVip">
         <view class="action-btn read" @click="goToReader">
           <text>{{ $t('bookDetails.startReading') }}</text>
@@ -114,12 +120,13 @@
 <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 } from '@/types/book'
+import type { IBookDetail, IBook, IComment } from '@/types/book'
 import type { IGoods } from '@/types/order'
 import GoodsSelector from '@/components/order/GoodsSelector.vue'
-import Skeleton from '@/components/Skeleton/Skeleton.vue'
+import CommentList from '@/components/book/CommentList.vue'
 
 const userStore = useUserStore()
 
@@ -131,8 +138,6 @@ 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: '',
@@ -142,7 +147,23 @@ 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) => {
@@ -152,23 +173,45 @@ onLoad((options: any) => {
   if (options.page) {
     pageFrom.value = options.page
   }
+  
+  initScrollHeight()
+  loadBookCount()
+  loadRecommendBooks()
 })
 
 onShow(() => {
-  bookInfoSkeleton.value?.reload()
+  loadBookInfo()
+  loadGoodsInfo()
+  if (!isIOS.value) {
+    loadComments()
+  }
 })
 
+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
+}
 
 // 加载书籍详情
-const getBookInfo = () => bookApi.getBookInfo(bookId.value)
-const getBookInfoSuccess = (res: any) => {
-  bookInfoLoading.value = true
-  bookInfo.value = res.getBookInfo.bookInfo || {}
+async function loadBookInfo() {
+  const res = await bookApi.getBookInfo(bookId.value)
+  bookInfo.value = res.bookInfo
 }
-// 加载统计数据
-const getBookReadCount = () => bookApi.getBookReadCount(bookId.value)
-// 加载推荐书籍
-const getRecommendBook = () => bookApi.getRecommendBook(bookId.value)
 
 // 加载购买商品信息
 async function loadGoodsInfo() {
@@ -176,9 +219,38 @@ 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')
+  }
+}
+
 // 显示购买弹窗
-async function showPurchasePopup() {
-  await loadGoodsInfo()
+function showPurchasePopup() {
   purchaseVisible.value = true
 }
 
@@ -209,6 +281,12 @@ 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}`
@@ -223,7 +301,7 @@ function goToDetail(id: number) {
   
   .book-info {
     text-align: center;
-    padding-bottom: 40rpx;
+    padding: 40rpx 30rpx;
     
     .cover {
       width: 300rpx;
@@ -281,7 +359,9 @@ function goToDetail(id: number) {
     }
   }
   
-  .introduction {    
+  .introduction {
+    padding: 40rpx 30rpx 0;
+    
     .section-title {
       display: block;
       font-size: 34rpx;
@@ -330,7 +410,7 @@ function goToDetail(id: number) {
   }
   
   .related-books {
-    padding: 0rpx 30rpx calc(40rpx + 110rpx);
+    padding: 40rpx 30rpx 40rpx;
     
     .section-title {
       display: block;

pages/book/index.vue

@@ -1,11 +1,12 @@
 <template>
-  <scroll-view 
+  <!-- <scroll-view 
       class="home-page" 
       scroll-y 
       refresher-enabled 
       :refresher-triggered="isRefreshing"
       @refresherrefresh="handleRefresh"
-    >
+    > -->
+  <view class="home-page">
     <!-- 顶部背景区域 -->
     <view class="home-bg" :style="{ paddingTop: getNotchHeight() + 'px' }">
       <wd-search
@@ -250,12 +251,12 @@
         </Skeleton>
       </view>
     </view>
-  </scroll-view>
+  </view>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { onShow } from '@dcloudio/uni-app'
+import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
 import { bookHomeApi } from '@/api/modules/book_home'
 import { getNotchHeight } from '@/utils/system'
 import { useUserStore } from '@/stores/user'
@@ -433,14 +434,10 @@ const getPrompt = () => {
  }
 }
 
-// 下拉刷新状态
-const isRefreshing = ref(false)
 /**
- * 处理下拉刷新
+ * 刷新页面数据
  */
 const handleRefresh = async () => {
-  isRefreshing.value = true
-  
   try {
     // 刷新所有数据
     await Promise.all([
@@ -453,18 +450,25 @@ const handleRefresh = async () => {
   } finally {
     // 延迟关闭刷新状态，避免闪烁
     setTimeout(() => {
-      isRefreshing.value = false
+      uni.stopPullDownRefresh();
     }, 500)
   }
 }
 
+/**
+ * 下拉刷新
+ */
+onPullDownRefresh(() => {
+  handleRefresh()
+})
+
 /**
  * 页面显示
  */
 onShow(() => {
   // 刷新数据
   myBookSkeleton.value?.reload()
-  categoryLevel1LabelSkeleton.value.reload()
+  categoryLevel1LabelSkeleton.value?.reload()
 })
 </script>