修复：开发测试问题修改

pages/course/details/chapter.vue

@@ -4,7 +4,7 @@
     <nav-bar :title="$t('courseDetails.chapter')" />
     
     <!-- 页面内容 -->
-    <view class="page-content" :style="{ height: contentHeight }">
+    <view class="page-content">
       <!-- 视频播放器 -->
       <view v-if="videoList.length > 0" class="video-section">
         <VideoPlayer
@@ -13,19 +13,13 @@
           :video-list="videoList"
           :countdown-seconds="5"
         />
-        <!-- <AliyunPlayer
-          ref="videoPlayerRef"
-          :currentVideo="videoList[currentVideoIndex]"
-          :currentVideoList="videoList"
-          @unlockChangeVideo="changeVideoLock = false"
-        /> -->
       </view>
       
       <!-- 课程和章节信息 -->
       <view class="info-section">
         <view class="info-item">
           <text class="label">{{ $t('courseDetails.courseInfo') }}：</text>
-          <text class="value">{{ navTitle }}</text>
+          <text class="value">{{ courseTitle }}</text>
         </view>
         <view class="info-item">
           <text class="label">{{ $t('courseDetails.chapterInfo') }}：</text>
@@ -36,126 +30,74 @@
       <!-- 视频列表 -->
       <view v-if="videoList.length > 0" class="video-list-section">
         <view class="section-title">{{ $t('courseDetails.videoTeaching') }}</view>
-        <view class="video-list">
-          <view
-            v-for="(video, index) in videoList"
-            :key="video.id"
-            :class="['video-item', currentVideoIndex === index ? 'active' : '']"
-            @click="selectVideo(index)"
-          >
-            <view class="video-info">
-              <text class="video-title">【{{ video.type == "2" ? "音频" : "视频" }}】{{ index + 1 }}</text>
-            </view>
-          </view>
-        </view>
+        <wd-radio-group v-model="currentVideoIndex" shape="button" >
+          <wd-radio v-for="(video, index) in videoList" :key="video.id" :value="index">
+            【{{ video.type == "2" ? $t('courseDetails.audio') : $t('courseDetails.video') }}】{{ index + 1 }}
+          </wd-radio>
+        </wd-radio-group>
       </view>
       
       <!-- 选项卡 -->
-      <view v-if="tabList.length > 0" class="tabs-section">
-        <view class="tabs">
-          <view
-            v-for="(tab, index) in tabList"
-            :key="tab.id"
-            :class="['tab-item', currentTab === index ? 'active' : '']"
-            @click="switchTab(index)"
-          >
-            <text>{{ tab.name }}</text>
-          </view>
-        </view>
-      </view>
-      
-      <!-- 选项卡内容 -->
-      <view class="tab-content">
+      <wd-tabs v-model="currentTab" class="tabs-section" lineWidth="30">
         <!-- 章节介绍 -->
-        <view v-show="currentTab === 0" class="intro-content">
-          <view class="section-title">{{ $t('courseDetails.chapterIntro') }}</view>
-          <view class="intro-wrapper">
-            <!-- 章节封面 -->
-            <image
-              v-if="chapterDetail?.imgUrl"
-              :src="chapterDetail.imgUrl"
-              mode="widthFix"
-              class="chapter-image"
-              @click="previewImage(chapterDetail.imgUrl)"
-            />
-            
-            <!-- 章节内容 -->
-            <view v-if="chapterDetail?.content" class="chapter-content" v-html="chapterDetail.content"></view>
-          </view>
+        <wd-tab name="chapterIntro" :title="$t('courseDetails.chapterIntro')">
+          <!-- 章节封面 -->
+          <image
+            v-if="chapterDetail?.imgUrl"
+            :src="chapterDetail.imgUrl"
+            mode="widthFix"
+            class="chapter-image"
+            @click="previewImage(chapterDetail.imgUrl)"
+          />
+          
+          <!-- 章节内容 -->
+          <view v-if="chapterDetail?.content" v-html="chapterDetail.content"></view>
           
           <view class="copyright">
             <text>{{ $t('courseDetails.copyright') }}</text>
           </view>
-        </view>
-        
+        </wd-tab>
         <!-- 思考题 -->
-        <view v-show="currentTab === 1" class="question-content">
-          <view class="section-title">{{ $t('courseDetails.thinkingQuestion') }}</view>
-          <view v-if="chapterDetail?.questions" class="question-wrapper">
-            <view class="question-html" v-html="chapterDetail.questions"></view>
-          </view>
-          <view v-else class="no-question">
+        <wd-tab v-if="chapterDetail?.questions" name="thinkingQuestion" :title="$t('courseDetails.thinkingQuestion')">
+          <view v-html="chapterDetail.questions"></view>
+          <!-- <view v-else class="no-question">
             <wd-divider>{{ $t('courseDetails.noQuestion') }}</wd-divider>
-          </view>
-        </view>
-      </view>
+          </view> -->
+        </wd-tab>
+      </wd-tabs>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
 import { courseApi } from '@/api/modules/course'
 import VideoPlayer from '@/components/video-player/index.vue'
 import type { IChapterDetail, IVideo } from '@/types/course'
 
 // 页面参数
 const chapterId = ref<number>(0)
-const courseId = ref<number>(0)
-const navTitle = ref('')
+const courseTitle = ref('')
 const chapterTitle = ref('')
-const noRecored = ref(false)
 
 // 页面数据
 const chapterDetail = ref<IChapterDetail | null>(null)
 const videoList = ref<IVideo[]>([])
 const currentVideoIndex = ref(0)
 const activeVideoIndex = ref(0)
-const currentTab = ref(0)
-const isFullScreen = ref(false)
+const currentTab = ref('chapterIntro')
 
 // 视频播放器引用
 const videoPlayerRef = ref<any>(null)
 
-// 选项卡列表
-const tabList = computed(() => {
-  const tabs = [
-    { id: '0', name: '章节介绍' }
-  ]
-  
-  // 如果有思考题，添加思考题选项卡
-  if (chapterDetail.value?.questions) {
-    tabs.push({ id: '1', name: '思考题' })
-  }
-  
-  return tabs
-})
-
-// 内容高度（全屏时调整）
-const contentHeight = computed(() => {
-  return isFullScreen.value ? '100vh' : 'auto'
-})
-
 /**
  * 页面加载
  */
 onLoad((options: any) => {
   chapterId.value = parseInt(options.id)
-  courseId.value = parseInt(options.courseId)
-  navTitle.value = options.navTitle || ''
+  courseTitle.value = options.courseTitle || ''
   chapterTitle.value = options.title || ''
-  noRecored.value = options.noRecored === 'true'
   
   loadChapterDetail()
 })
@@ -171,7 +113,7 @@ const loadChapterDetail = async () => {
 
     // 如果有历史播放记录，定位到对应视频
     if (res.data.current) {
-      const index = videoList.value.findIndex(v => v.id === res.data.current)
+      const index = videoList.value.findIndex((v:any) => v.id === res.data.current)
       if (index !== -1) {
         currentVideoIndex.value = index
         activeVideoIndex.value = index
@@ -188,13 +130,6 @@ const selectVideo = async (index: number) => {
   currentVideoIndex.value = index
 }
 
-/**
- * 切换选项卡
- */
-const switchTab = (index: number) => {
-  currentTab.value = index
-}
-
 /**
  * 预览图片
  */
@@ -212,10 +147,6 @@ const previewImage = (url: string) => {
   background-color: #f5f5f5;
 }
 
-.page-content {
-  padding-bottom: 100rpx;
-}
-
 .video-section {
   background-color: #000;
 }
@@ -254,135 +185,45 @@ const previewImage = (url: string) => {
     color: #2979ff;
     margin-bottom: 20rpx;
   }
-  
-  .video-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 10rpx;
-
-    .video-item {
-      padding: 18rpx;
-      margin-bottom: 10rpx;
-      background-color: #f7f8f9;
-      border-radius: 8rpx;
-      border: 2rpx solid transparent;
-      transition: all 0.3s;
-      
-      &.active {
-        background-color: #e8f4ff;
-        border-color: #258feb;
-      }
-      
-      .video-info {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        
-        .video-title {
-          flex: 1;
-          font-size: 28rpx;
-          color: #333;
-        }
-      }
-    }
-  }
 }
 
 .tabs-section {
   background-color: #fff;
   margin-top: 20rpx;
-  border-bottom: 2rpx solid #2979ff;
-  
-  .tabs {
-    display: flex;
-    
-    .tab-item {
-      flex: 1;
-      text-align: center;
-      padding: 25rpx 0;
-      font-size: 30rpx;
-      color: #666;
-      position: relative;
-      transition: all 0.3s;
-      
-      &.active {
-        color: #2979ff;
-        font-weight: 500;
-        
-        &::after {
-          content: '';
-          position: absolute;
-          bottom: 0;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 60rpx;
-          height: 4rpx;
-          background-color: #2979ff;
-          border-radius: 2rpx;
-        }
-      }
-    }
+
+  :deep(.wd-tabs__nav) {
+    border-bottom: 1px solid #2979ff;
+  }
+  :deep(.wd-tab__body) {
+    padding: 30rpx;
+    font-size: 28rpx;
+    line-height: 1.8;
+    color: #666;
+    word-break: break-all;
+  }
+  :deep(.wd-tabs__line) {
+    bottom: 0;
   }
 }
 
-.tab-content {
-  background-color: #fff;
-  padding: 20rpx;
-  
-  .section-title {
-    font-size: 32rpx;
-    font-weight: 500;
-    color: #333;
-    margin-bottom: 20rpx;
-  }
-  
-  .intro-content {
-    .intro-wrapper {
-      .chapter-image {
-        width: 100%;
-        display: block;
-        margin-bottom: 20rpx;
-        border-radius: 8rpx;
-      }
-      
-      .chapter-content {
-        font-size: 28rpx;
-        line-height: 1.8;
-        color: #666;
-        text-align: justify;
-        word-break: break-all;
-      }
-    }
-    
-    .copyright {
-      margin-top: 40rpx;
-      padding-top: 20rpx;
-      border-top: 1px solid #f0f0f0;
-      text-align: center;
-      
-      text {
-        font-size: 24rpx;
-        color: #ff4444;
-      }
-    }
-  }
-  
-  .question-content {
-    .question-wrapper {
-      .question-html {
-        font-size: 28rpx;
-        line-height: 1.8;
-        color: #666;
-        word-break: break-all;
-      }
-    }
-    
-    .no-question {
-      padding: 80rpx 0;
-      text-align: center;
-    }
-  }
+.chapter-image {
+  width: 100%;
+  display: block;
+  margin-bottom: 20rpx;
+  border-radius: 8rpx;
+}
+
+.copyright {
+  margin-top: 20rpx;
+  padding-top: 20rpx;
+  border-top: 1px solid #f0f0f0;
+  text-align: center;
+  font-size: 24rpx;
+  color: #ff4444;
+}
+
+.no-question {
+  padding: 80rpx 0;
+  text-align: center;
 }
 </style>

pages/course/details/course.vue

@@ -339,7 +339,7 @@ const handleChapterClick = (chapter: IChapter) => {
   const noRecored = chapter.isAudition === 1 && currentCatalogue.value?.isBuy === 0 && !userVip.value
   
   uni.navigateTo({
-    url: `/pages/course/details/chapter?id=${chapter.id}&courseId=${courseId.value}&navTitle=${courseDetail.value?.title}&title=${chapter.title}&noRecored=${noRecored}`
+    url: `/pages/course/details/chapter?id=${chapter.id}&courseId=${courseId.value}&courseTitle=${courseDetail.value?.title}&title=${chapter.title}&noRecored=${noRecored}`
   })
 }