修复：解决google play的图片和视频权限要求

pages/book/listen/index.vue

@@ -2,35 +2,31 @@
   <view class="listen-page">
     <!-- 导航栏 -->
     <nav-bar :title="$t('listen.title')"></nav-bar>
-    
-    <scroll-view 
-      scroll-y 
-      class="listen-scroll"
-      :style="{ height: scrollHeight + 'px' }"
-    >
-      <!-- 书籍信息 -->
-      <view class="book-info">
-        <image :src="bookInfo.images" class="cover" mode="aspectFill" />
-        <view class="info">
-          <text class="title">{{ bookInfo.name }}</text>
-          <text class="author">{{ $t('bookDetails.authorName') }}{{ bookInfo.author?.authorName }}</text>
-        </view>
-        <wd-button 
-          v-if="!bookInfo.isBuy && !hasVip" 
-          type="primary"
-          size="small"
-          @click="purchaseVisible = true"
-        >
-          {{ $t('bookDetails.buy') }}
-        </wd-button>
+
+    <!-- 书籍信息 -->
+    <view class="book-info">
+      <image :src="bookInfo.images" class="cover" mode="aspectFill" />
+      <view class="info">
+        <text class="title">{{ bookInfo.name }}</text>
+        <text class="author">{{ $t('bookDetails.authorName') }}{{ bookInfo.author?.authorName }}</text>
       </view>
-      
-      <view class="divider-line" />
-      
-      <!-- 章节列表 -->
-      <view class="chapter-section">
-        <text class="section-title">{{ $t('book.zjContents') }}</text>
-        
+      <wd-button 
+        v-if="!bookInfo.isBuy && !hasVip" 
+        type="primary"
+        size="small"
+        @click="purchaseVisible = true"
+      >
+        {{ $t('bookDetails.buy') }}
+      </wd-button>
+    </view>
+    
+    <!-- 章节列表 -->
+    <view class="chapter-section">
+      <text class="section-title">{{ $t('book.zjContents') }}</text>
+      <scroll-view 
+        scroll-y
+        style="height: calc(100vh - 570rpx);"
+      >
         <view v-if="chapterList.length > 0" class="chapter-list">
           <view 
             v-for="(chapter, index) in chapterList" 
@@ -47,8 +43,8 @@
         </view>
         
         <text v-else class="empty-text">{{ nullText }}</text>
-      </view>
-    </scroll-view>
+      </scroll-view>
+    </view>
 
     <!-- 购买弹窗 -->
     <GoodsSelector
@@ -62,7 +58,7 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { onLoad } from '@dcloudio/uni-app'
+import { onLoad, onShow } from '@dcloudio/uni-app'
 import { t } from '@/utils/i18n'
 import { bookApi } from '@/api/modules/book'
 import { useUserStore } from '@/stores/user'
@@ -91,7 +87,6 @@ const bookInfo = ref<IBookDetail>({
 const chapterList = ref<IChapter[]>([])
 const activeIndex = ref(-1)
 const nullText = ref('')
-const scrollHeight = ref(0)
 
 // 生命周期
 onLoad((options: any) => {
@@ -102,11 +97,12 @@ onLoad((options: any) => {
     fromIndex.value = Number(options.index)
     activeIndex.value = fromIndex.value
   }
-  
-  initScrollHeight()
+  loadGoodsInfo()
+})
+
+onShow(() => {
   loadBookInfo()
   loadChapterList()
-  loadGoodsInfo()
 })
 
 // 购买弹窗状态
@@ -131,21 +127,6 @@ async function loadGoodsInfo() {
   goodsList.value = res.productList || []
 }
 
-// 初始化滚动区域高度
-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
-  scrollHeight.value = systemInfo.windowHeight - totalNavHeight
-}
-
 // 加载书籍信息
 async function loadBookInfo() {
   const res = await bookApi.getBookInfo(bookId.value)
@@ -212,106 +193,99 @@ function goToPurchase() {
 .listen-page {
   background: #f7faf9;
   min-height: 100vh;
+}
+
+.book-info {
+  margin: 20rpx;
+  padding: 30rpx;
+  background: #fff;
+  border-radius: 15rpx;
+  display: flex;
+  align-items: center;
+  position: relative;
   
-  .listen-scroll {
-    .book-info {
-      margin: 20rpx;
-      padding: 30rpx;
-      background: #fff;
-      border-radius: 15rpx;
-      display: flex;
-      align-items: center;
-      position: relative;
-      
-      .cover {
-        width: 180rpx;
-        height: 240rpx;
-        border-radius: 10rpx;
-        flex-shrink: 0;
-      }
-      
-      .info {
-        flex: 1;
-        padding: 0 20rpx;
-        
-        .title {
-          display: block;
-          font-size: 36rpx;
-          font-weight: bold;
-          color: #333;
-          line-height: 44rpx;
-          max-height: 88rpx;
-          overflow: hidden;
-        }
-        
-        .author {
-          display: block;
-          font-size: 30rpx;
-          padding-top: 15rpx;
-          color: #666;
-        }
-      }
+  .cover {
+    width: 180rpx;
+    height: 240rpx;
+    border-radius: 10rpx;
+    flex-shrink: 0;
+  }
+  
+  .info {
+    flex: 1;
+    padding: 0 20rpx;
+    
+    .title {
+      display: block;
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #333;
+      line-height: 44rpx;
+      max-height: 88rpx;
+      overflow: hidden;
     }
     
-    .divider-line {
-      height: 20rpx;
-      background: #f7faf9;
-    }
-    
-    .chapter-section {
-      background: #fff;
-      padding: 30rpx;
-      min-height: 400rpx;
-      
-      .section-title {
-        display: block;
-        font-size: 34rpx;
-        line-height: 50rpx;
-        margin-bottom: 20rpx;
-        color: #333;
-        font-weight: 500;
-      }
-      
-      .chapter-list {
-        .chapter-item {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding: 18rpx 0;
-          border-bottom: 1rpx solid #dcdfe6;
-          
-          &.active .chapter-text {
-            color: #54a966;
-          }
-          
-          .chapter-text {
-            flex: 1;
-            font-size: 28rpx;
-            line-height: 50rpx;
-            color: #333;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            
-            &.locked {
-              color: #999;
-            }
-          }
-          
-          &:last-child {
-            border-bottom: none;
-          }
-        }
-      }
-      
-      .empty-text {
-        display: block;
-        text-align: center;
-        padding: 100rpx 0;
-        font-size: 28rpx;
-        color: #999;
-      }
+    .author {
+      display: block;
+      font-size: 30rpx;
+      padding-top: 15rpx;
+      color: #666;
     }
   }
 }
+
+.chapter-section {
+  background: #fff;
+  padding: 30rpx;
+  min-height: 400rpx;
+  
+  .section-title {
+    display: block;
+    font-size: 34rpx;
+    line-height: 50rpx;
+    margin-bottom: 20rpx;
+    color: #333;
+    font-weight: 500;
+  }
+  
+  .chapter-list {
+    .chapter-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 18rpx 0;
+      border-bottom: 1rpx solid #dcdfe6;
+      
+      &.active .chapter-text {
+        color: #54a966;
+      }
+      
+      .chapter-text {
+        flex: 1;
+        font-size: 28rpx;
+        line-height: 50rpx;
+        color: #333;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        
+        &.locked {
+          color: #999;
+        }
+      }
+      
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+  
+  .empty-text {
+    display: block;
+    text-align: center;
+    padding: 100rpx 0;
+    font-size: 28rpx;
+    color: #999;
+  }
+}
 </style>