更新：增加“图书首页”功能

pages/book/reader.vue

@@ -99,6 +99,8 @@
             <wd-icon v-if="isLocked(index)" name="lock" size="20px" />
           </view>
         </scroll-view>
+        <!-- 底部占位 -->
+        <view class="setting-ooter-placeholder"></view>
       </view>
     </wd-popup>
     
@@ -108,7 +110,7 @@
         <!-- 切换语言 -->
         <view class="setting-item">
           <text class="setting-label">{{ $t('book.language') }}</text>
-          <wd-radio-group v-model="currentLanguage" shape="button" custom-class="bg-[transparent]" @change="changeBookLanguage">
+          <wd-radio-group v-model="currentLanguage" shape="button" style="background-color: transparent;" @change="changeBookLanguage">
             <wd-radio v-for="lang in bookLanguages" :key="lang.language" :value="lang.language">{{ lang.language }}</wd-radio>
           </wd-radio-group>
         </view>
@@ -162,10 +164,9 @@
             </view>
           </view>
         </view>
-
-        <!-- 底部占位 -->
-        <view class="setting-ooter-placeholder"></view>
       </view>
+      <!-- 底部占位 -->
+      <view class="setting-ooter-placeholder"></view>
     </wd-popup>
     
     <!-- 空状态 -->
@@ -407,7 +408,7 @@ async function loadChapterContent(chapterId: number, index: number) {
 }
 
 // 切换章节
-function switchChapter(chapter: IChapter, index: number) {
+async function switchChapter(chapter: IChapter, index: number) {
   if (isLocked(index)) {
     uni.showToast({
       title: t('book.afterPurchase'),
@@ -416,7 +417,8 @@ function switchChapter(chapter: IChapter, index: number) {
     return
   }
   
-  loadChapterContent(chapter.id, index)
+  await loadChapterContent(chapter.id, index)
+  showControls.value = false
 }
 
 // 判断章节是否锁定
@@ -796,6 +798,10 @@ function goBack() {
     
     .setting-item {
       margin-bottom: 40rpx;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
       
       .setting-label {
         display: block;
@@ -866,11 +872,6 @@ function goBack() {
         }
       }
     }
-
-    /* 底部占位 */
-    .setting-ooter-placeholder {
-      height: 80rpx;
-    }
   }
   
   .empty-state {
@@ -884,5 +885,10 @@ function goBack() {
       color: #999;
     }
   }
+
+  /* 底部占位 */
+  .setting-ooter-placeholder {
+    height: 55px;
+  }
 }
 </style>