更新：课程详情的初步代码

pages/course/details/chapter.vue

@@ -0,0 +1,466 @@
+<template>
+  <view class="chapter-detail-page">
+    <!-- 自定义导航栏 -->
+    <nav-bar :title="$t('courseDetails.chapter')" />
+    
+    <!-- 页面内容 -->
+    <view class="page-content" :style="{ height: contentHeight }">
+      <!-- 视频播放器 -->
+      <view v-if="videoList.length > 0" class="video-section">
+        <VideoPlayer
+          ref="videoPlayerRef"
+          :videoList="videoList"
+          :currentIndex="currentVideoIndex"
+          :noRecored="noRecored"
+          @end="handleVideoEnd"
+          @fullscreen="handleFullscreen"
+          @change="handleVideoChange"
+        />
+      </view>
+      
+      <!-- 课程和章节信息 -->
+      <view class="info-section">
+        <view class="info-item">
+          <text class="label">{{ $t('courseDetails.courseInfo') }}：</text>
+          <text class="value">{{ navTitle }}</text>
+        </view>
+        <view class="info-item">
+          <text class="label">{{ $t('courseDetails.chapterInfo') }}：</text>
+          <text class="value">{{ chapterTitle }}</text>
+        </view>
+      </view>
+      
+      <!-- 视频列表 -->
+      <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>
+              <!-- <wd-icon 
+                v-if="currentVideoIndex === index" 
+                name="play-circle" 
+                color="#258feb" 
+                size="14px"
+              /> -->
+            </view>
+          </view>
+        </view>
+      </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">
+        <!-- 章节介绍 -->
+        <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>
+          
+          <view class="copyright">
+            <text>{{ $t('courseDetails.copyright') }}</text>
+          </view>
+        </view>
+        
+        <!-- 思考题 -->
+        <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-divider>{{ $t('courseDetails.noQuestion') }}</wd-divider>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { onLoad, onShow, onHide, onUnload } from '@dcloudio/uni-app'
+import { courseApi } from '@/api/modules/course'
+import VideoPlayer from '@/components/course/VideoPlayer.vue'
+import NavBar from '@/components/nav-bar/nav-bar.vue'
+import type { IChapterDetail, IVideo } from '@/types/course'
+
+// 页面参数
+const chapterId = ref<number>(0)
+const courseId = ref<number>(0)
+const navTitle = ref('')
+const chapterTitle = ref('')
+const noRecored = ref(false)
+
+// 页面数据
+const chapterDetail = ref<IChapterDetail | null>(null)
+const videoList = ref<IVideo[]>([])
+const currentVideoIndex = ref(0)
+const currentTab = ref(0)
+const isFullScreen = ref(false)
+
+// 视频播放器引用
+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 || ''
+  chapterTitle.value = options.title || ''
+  noRecored.value = options.noRecored === 'true'
+  
+  loadChapterDetail()
+})
+
+/**
+ * 加载章节详情
+ */
+const loadChapterDetail = async () => {
+  try {
+    uni.showLoading({ title: '加载中...' })
+    
+    const res = await courseApi.getChapterDetail(chapterId.value)
+    if (res.code === 0 && res.data) {
+      chapterDetail.value = res.data.detail
+      videoList.value = res.data.videos || []
+      
+      // 如果有历史播放记录，定位到对应视频
+      if (res.data.current) {
+        const index = videoList.value.findIndex(v => v.id === res.data.current)
+        if (index !== -1) {
+          currentVideoIndex.value = index
+        }
+      }
+    }
+  } catch (error) {
+    console.error('加载章节详情失败:', error)
+  } finally {
+    uni.hideLoading()
+  }
+}
+
+/**
+ * 选择视频
+ */
+const selectVideo = (index: number) => {
+  if (index === currentVideoIndex.value) return
+  currentVideoIndex.value = index
+}
+
+/**
+ * 视频切换
+ */
+const handleVideoChange = (index: number) => {
+  currentVideoIndex.value = index
+}
+
+/**
+ * 视频播放结束
+ */
+const handleVideoEnd = () => {
+  // 视频播放结束的处理已在 VideoPlayer 组件中完成
+}
+
+/**
+ * 全屏变化
+ */
+const handleFullscreen = (fullscreen: boolean) => {
+  isFullScreen.value = fullscreen
+  
+  // 全屏时锁定屏幕方向
+  // #ifdef APP-PLUS
+  if (fullscreen) {
+    plus.screen.unlockOrientation()
+    plus.screen.lockOrientation('landscape-primary')
+  } else {
+    plus.screen.unlockOrientation()
+    plus.screen.lockOrientation('portrait-primary')
+  }
+  // #endif
+}
+
+/**
+ * 切换选项卡
+ */
+const switchTab = (index: number) => {
+  currentTab.value = index
+}
+
+/**
+ * 预览图片
+ */
+const previewImage = (url: string) => {
+  uni.previewImage({
+    urls: [url],
+    current: url
+  })
+}
+
+/**
+ * 页面显示
+ */
+onShow(() => {
+  // 锁定竖屏
+  // #ifdef APP-PLUS
+  plus.screen.unlockOrientation()
+  plus.screen.lockOrientation('portrait-primary')
+  // #endif
+})
+
+/**
+ * 页面隐藏
+ */
+onHide(() => {
+  // 暂停视频
+  if (videoPlayerRef.value) {
+    videoPlayerRef.value.pause()
+  }
+})
+
+/**
+ * 页面卸载
+ */
+onUnload(() => {
+  // 停止视频
+  if (videoPlayerRef.value) {
+    videoPlayerRef.value.stop()
+  }
+  
+  // 解锁屏幕方向
+  // #ifdef APP-PLUS
+  plus.screen.unlockOrientation()
+  // #endif
+})
+</script>
+
+<style lang="scss" scoped>
+.chapter-detail-page {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.page-content {
+  padding-bottom: 100rpx;
+}
+
+.video-section {
+  background-color: #000;
+}
+
+.info-section {
+  padding: 20rpx;
+  background-color: #fff;
+  
+  .info-item {
+    margin-bottom: 15rpx;
+    font-size: 26rpx;
+    color: #666;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    .label {
+      color: #999;
+    }
+    
+    .value {
+      color: #333;
+    }
+  }
+}
+
+.video-list-section {
+  padding: 20rpx;
+  background-color: #fff;
+  margin-top: 20rpx;
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: 500;
+    color: #2979ff;
+    margin-bottom: 20rpx;
+  }
+  
+  .video-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10rpx;
+
+    .video-item {
+      padding: 20rpx;
+      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;
+        }
+      }
+    }
+  }
+}
+
+.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;
+    }
+  }
+}
+</style>

pages/course/details/components/course-info.vue

@@ -0,0 +1,187 @@
+<template>
+  <view class="course-info">
+    <!-- 课程封面 -->
+    <view class="course-cover">
+      <image 
+        :src="course.image || '/static/nobg.jpg'" 
+        mode="widthFix"
+        class="cover-image"
+      />
+    </view>
+    
+    <!-- 课程标题 -->
+    <view class="course-title">
+      <text class="title-text">{{ course.title }}</text>
+    </view>
+    
+    <!-- 课程简介 -->
+    <view v-if="course.content && course.content !== ''" class="course-content">
+      <view class="content-wrapper">
+        <view 
+          :class="['content-html', isCollapsed ? 'collapsed' : '']"
+          v-html="parsedContent"
+        />
+        
+        <!-- 图片列表 -->
+        <view v-if="images.length > 0" class="content-images">
+          <image
+            v-for="(img, index) in images"
+            :key="index"
+            :src="img"
+            mode="widthFix"
+            class="content-image"
+            @click="previewImage(img, index)"
+          />
+        </view>
+        
+        <!-- 展开/收起按钮 -->
+        <view class="toggle-btn" @click="toggleContent">
+          <text>{{ isCollapsed ? '展开' : '收起' }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { ICourseDetail } from '@/types/course'
+
+interface Props {
+  course: ICourseDetail
+}
+
+const props = defineProps<Props>()
+
+const isCollapsed = ref(true)
+const parsedContent = ref('')
+const images = ref<string[]>([])
+
+/**
+ * 解析课程内容，分离文本和图片
+ */
+const parseContent = () => {
+  if (!props.course.content) {
+    parsedContent.value = ''
+    images.value = []
+    return
+  }
+  
+  // 提取图片URL
+  const imgRegex = /<img[^>]+src="([^"]+)"[^>]*>/g
+  const imgUrls: string[] = []
+  let match
+  
+  while ((match = imgRegex.exec(props.course.content)) !== null) {
+    imgUrls.push(match[1])
+  }
+  
+  // 移除图片标签，保留文本内容
+  const cleanText = props.course.content.replace(/<img[^>]*>/g, '')
+  
+  parsedContent.value = cleanText
+  images.value = imgUrls
+}
+
+/**
+ * 切换展开/收起
+ */
+const toggleContent = () => {
+  isCollapsed.value = !isCollapsed.value
+}
+
+/**
+ * 预览图片
+ */
+const previewImage = (current: string, index: number) => {
+  uni.previewImage({
+    current,
+    urls: images.value,
+    currentIndex: index
+  })
+}
+
+// 监听课程变化，重新解析内容
+watch(() => props.course, () => {
+  parseContent()
+}, { immediate: true, deep: true })
+</script>
+
+<style lang="scss" scoped>
+.course-info {
+  background-color: #fff;
+}
+
+.course-cover {
+  width: 100%;
+  
+  .cover-image {
+    width: 100%;
+    display: block;
+  }
+}
+
+.course-title {
+  padding: 30rpx 20rpx;
+  
+  .title-text {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #333;
+    line-height: 1.4;
+  }
+}
+
+.course-content {
+  padding: 0 20rpx 20rpx;
+  
+  .content-wrapper {
+    position: relative;
+    
+    .content-html {
+      font-size: 28rpx;
+      line-height: 1.8;
+      color: #666;
+      text-align: justify;
+      word-break: break-all;
+      
+      &.collapsed {
+        max-height: 200rpx;
+        overflow: hidden;
+        position: relative;
+        
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 60rpx;
+          background: linear-gradient(to bottom, transparent, #fff);
+        }
+      }
+    }
+    
+    .content-images {
+      margin-top: 20rpx;
+      
+      .content-image {
+        width: 100%;
+        display: block;
+        margin-bottom: 20rpx;
+        border-radius: 8rpx;
+      }
+    }
+    
+    .toggle-btn {
+      text-align: right;
+      padding: 20rpx 0 0;
+      
+      text {
+        color: #838588;
+        font-size: 26rpx;
+      }
+    }
+  }
+}
+</style>

pages/course/details/course.vue

@@ -0,0 +1,876 @@
+<template>
+  <view class="course-detail-page">
+    <!-- 自定义导航栏 -->
+    <nav-bar :title="$t('courseDetails.detail')" />
+
+    <!-- VIP权益提示条 -->
+    <view v-if="vipTip" class="vip-tip">
+      <view class="tip-content">
+        <wd-icon name="info-circle" color="#fff" size="16"></wd-icon>
+        <text>{{ vipTip }}</text>
+      </view>
+      <wd-button v-if="!userVip" type="error" size="small" custom-class="vip-btn" @click="goToVip">{{ $t('courseDetails.purchase') }}</wd-button>
+    </view>
+
+    <!-- 课程信息 -->
+    <CourseInfo v-if="courseDetail" :course="courseDetail" class="pt-[40px]" />
+
+    <!-- 课程内容包装器 -->
+    <view class="course-content-wrapper">
+      <!-- 目录列表 -->
+      <CatalogueList
+        v-if="catalogueList.length > 0"
+        :catalogues="catalogueList"
+        :currentIndex="currentCatalogueIndex"
+        :userVip="userVip"
+        @change="handleCatalogueChange"
+      />
+
+      <!-- 章节列表 -->
+      <ChapterList
+        v-if="chapterList.length > 0"
+        :chapters="chapterList"
+        :catalogue="currentCatalogue"
+        :userVip="userVip"
+        @purchase="handlePurchase"
+        @toVip="goToVip"
+        @click="handleChapterClick"
+      />
+    </view>
+
+    <!-- 学习进度 -->
+    <view class="learning-progress">
+      <view class="progress-title">
+        <text>{{ $t('courseDetails.progress') }}</text>
+      </view>
+      <wd-progress 
+        :percentage="learningProgress" 
+        show-text
+        stroke-width="6"
+      />
+    </view>
+
+    <!-- 相关书籍 -->
+    <!-- <view v-if="relatedBooks.length > 0" class="related-books">
+      <view class="section-title">
+        <text>{{ $t('courseDetails.relatedBooks') }}</text>
+      </view>
+      <scroll-view class="books-scroll" scroll-x>
+        <view
+          v-for="book in relatedBooks"
+          :key="book.productId"
+          class="book-item"
+          @click="goToBookDetail(book)"
+        >
+          <view class="book-cover">
+            <view v-if="book.isVipPrice === 1 && book.vipPrice" class="vip-badge">
+              VIP优惠
+            </view>
+            <image :src="book.productImages" mode="aspectFit" />
+          </view>
+          <view class="book-name">{{ book.productName }}</view>
+          <view class="book-price">
+            <text v-if="book.isVipPrice === 1 && book.vipPrice" class="vip-price">
+              ￥{{ book.vipPrice.toFixed(2) }}
+            </text>
+            <text v-else-if="book.activityPrice" class="activity-price">
+              ￥{{ book.activityPrice.toFixed(2) }}
+            </text>
+            <text v-else class="normal-price">
+              ￥{{ book.price.toFixed(2) }}
+            </text>
+          </view>
+        </view>
+      </scroll-view>
+    </view> -->
+
+    <!-- 留言板 -->
+    <!-- <view class="comments-section">
+      <view class="section-header">
+        <text class="section-title">{{ $t('courseDetails.comments') }}</text>
+        <wd-button size="small" type="primary" @click="showCommentEditor">
+          {{ $t('courseDetails.publishComment') }}
+        </wd-button>
+      </view>
+      
+      <CommentList
+        :comments="commentList"
+        :loading="commentsLoading"
+        :hasMore="hasMoreComments"
+        type="course"
+        @like="handleCommentLike"
+        @reply="handleCommentReply"
+        @loadMore="loadMoreComments"
+      />
+    </view> -->
+    
+    <!-- 商品选择器 -->
+    <GoodsSelector
+      :show="showGoodsSelector"
+      :goods="goodsList"
+      :isFudu="isFudu"
+      @select="handleGoodsSelect"
+      @confirm="handleGoodsConfirm"
+      @close="closeGoodsSelector"
+    />
+    
+    <!-- 购买协议弹窗 -->
+    <wd-popup v-model="showProtocol" position="center">
+      <view class="protocol-popup">
+        <view class="protocol-title">温馨提示</view>
+        <view class="protocol-content">
+          <text>
+            用户您好，本软件对于一个用户名及密码仅允许一部电子设备登陆，多部设备使用同一用户名操作软件的行为属于违规操作，发现违规一次将提出警告，再次违规您的用户名将被封号，无法正常登陆，如因此对您使用带来不便，敬请谅解。
+          </text>
+          <text>
+            课程购买之后一年内不打开，此一年内不会计算有效学习时间，一年后会自动开始计算有效学习时间。
+          </text>
+          <text>
+            本课程一经购买，暂不支持退款，敬请谅解。
+          </text>
+        </view>
+        <view class="protocol-actions">
+          <wd-button type="info" plain @click="showProtocol = false">不同意</wd-button>
+          <wd-button type="primary" @click="confirmPurchase">同意</wd-button>
+        </view>
+      </view>
+    </wd-popup>
+    
+    <!-- 评论编辑器 -->
+    <CommentEditor
+      :show="showEditor"
+      :parentComment="replyComment"
+      type="course"
+      @submit="handleCommentSubmit"
+      @close="closeCommentEditor"
+    />
+    
+    <!-- 返回顶部 -->
+    <wd-backtop :scrollTop="scrollTop" custom-class="back-top">
+      <wd-icon name="arrow-up" size="24px" color="#258feb" />
+    </wd-backtop>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { onLoad, onPageScroll, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
+import { useCourseStore } from '@/stores/course'
+import { useUserStore } from '@/stores/user'
+import { courseApi } from '@/api/modules/course'
+import CourseInfo from './components/course-info.vue'
+import CatalogueList from '@/components/course/CatalogueList.vue'
+import ChapterList from '@/components/course/ChapterList.vue'
+import GoodsSelector from '@/components/course/GoodsSelector.vue'
+import CommentList from '@/components/comment/CommentList.vue'
+import CommentEditor from '@/components/comment/CommentEditor.vue'
+import NavBar from '@/components/nav-bar/nav-bar.vue'
+import type { ICourseDetail, ICatalogue, IChapter, IGoods, IVipInfo } from '@/types/course'
+import type { IComment } from '@/types/comment'
+
+// Stores
+const courseStore = useCourseStore()
+const userStore = useUserStore()
+
+// 页面数据
+const courseId = ref<number>(0)
+const courseDetail = ref<ICourseDetail | null>(null)
+const catalogueList = ref<ICatalogue[]>([])
+const currentCatalogueIndex = ref(0)
+const chapterList = ref<IChapter[]>([])
+const userVip = ref<IVipInfo | null>(null)
+const vipModuleList = ref<string[]>([])
+const learningProgress = ref(0)
+const relatedBooks = ref<IGoods[]>([])
+
+// 商品选择
+const showGoodsSelector = ref(false)
+const goodsList = ref<IGoods[]>([])
+const selectedGoods = ref<IGoods | null>(null)
+const showProtocol = ref(false)
+const isFudu = ref(false)
+const fuduCatalogueId = ref<number>(0)
+const showRenewBtn = ref(false)
+
+// 评论相关
+const commentList = ref<IComment[]>([])
+const commentsLoading = ref(false)
+const hasMoreComments = ref(true)
+const commentPage = ref(0)
+const showEditor = ref(false)
+const replyComment = ref<IComment | undefined>(undefined)
+
+// UI状态
+const scrollTop = ref(0)
+
+/**
+ * 当前目录
+ */
+const currentCatalogue = computed(() => {
+  if (catalogueList.value.length === 0) return null
+  return catalogueList.value[currentCatalogueIndex.value] || null
+})
+
+/**
+ * VIP提示文案
+ */
+const vipTip = computed(() => {
+  if (userVip.value) {
+    const vipTypeMap: Record<number, string> = {
+      4: '中医学',
+      5: '针灸学',
+      6: '肿瘤学',
+      7: '国学',
+      8: '心理学',
+      9: '中西汇通学'
+    }
+    const typeName = vipTypeMap[userVip.value.type] || ''
+    return `尊贵的${typeName}VIP，您的有效期到${userVip.value.endTime}`
+  }
+  
+  if (vipModuleList.value.length > 0) {
+    const typeMap: Record<string, string> = {
+      '4': '中医学',
+      '5': '针灸学',
+      '6': '肿瘤学',
+      '7': '国学',
+      '8': '心理学',
+      '9': '中西汇通学'
+    }
+    const typeNames = vipModuleList.value.map(type => typeMap[type]).filter(Boolean)
+    return `购买${typeNames.join('/')}VIP，即可畅享更多专属权益`
+  }
+  
+  return ''
+})
+
+/**
+ * 页面加载
+ */
+onLoad(async (options: any) => {
+  courseId.value = parseInt(options.id)
+  await loadPageData()
+})
+
+/**
+ * 加载页面数据
+ */
+const loadPageData = async () => {
+  try {
+    uni.showLoading({ title: '加载中...' })
+    
+    // 获取课程详情
+    const res = await courseApi.getCourseDetail(courseId.value)
+    if (res.code === 0 && res.data) {
+      courseDetail.value = res.data.course
+      catalogueList.value = res.data.catalogues || []
+      relatedBooks.value = res.data.shopProductList || []
+      
+      // 计算学习进度
+      if (catalogueList.value.length > 0) {
+        const totalProgress = catalogueList.value.reduce((sum, cat) => sum + cat.completion, 0)
+        learningProgress.value = Number((totalProgress / catalogueList.value.length).toFixed(2))
+      }
+      
+      // 默认选择第一个目录
+      if (catalogueList.value.length > 0) {
+        await switchCatalogue(0)
+      }
+    }
+    
+    // 检查VIP权益
+    await checkVipStatus()
+    
+    // 加载评论
+    await loadComments()
+    
+  } catch (error) {
+    console.error('加载页面数据失败:', error)
+  } finally {
+    uni.hideLoading()
+  }
+}
+
+/**
+ * 检查VIP状态
+ */
+const checkVipStatus = async () => {
+  try {
+    const res = await courseApi.checkCourseVip(courseId.value)
+    if (res.code === 0) {
+      userVip.value = res.userVip || null
+      
+      // 如果不是VIP，获取需要的VIP类型
+      if (!userVip.value) {
+        const moduleRes = await courseApi.getCourseVipModule(courseId.value)
+        if (moduleRes.code === 0) {
+          vipModuleList.value = moduleRes.list || []
+        }
+      }
+    }
+  } catch (error) {
+    console.error('检查VIP状态失败:', error)
+  }
+}
+
+/**
+ * 切换目录
+ */
+const switchCatalogue = async (index: number) => {
+  currentCatalogueIndex.value = index
+  const catalogue = catalogueList.value[index]
+  
+  // 获取章节列表
+  try {
+    const res = await courseApi.getCatalogueChapterList(catalogue.id)
+    if (res.code === 0) {
+      chapterList.value = res.chapterList || []
+    }
+    
+    // 检查是否支持复读
+    if (catalogue.isBuy === 0 && !userVip.value) {
+      const renewRes = await courseApi.checkRenewPayment(catalogue.id)
+      showRenewBtn.value = renewRes.canRelearn || false
+    } else {
+      showRenewBtn.value = false
+    }
+  } catch (error) {
+    console.error('切换目录失败:', error)
+  }
+}
+
+/**
+ * 目录切换事件
+ */
+const handleCatalogueChange = (index: number) => {
+  switchCatalogue(index)
+}
+
+/**
+ * 点击章节
+ */
+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}`
+  })
+}
+
+/**
+ * 领取免费课程
+ */
+const handleGetFreeCourse = async () => {
+  if (!currentCatalogue.value) return
+  
+  try {
+    uni.showLoading({ title: '领取中...' })
+    const res = await courseApi.startStudyForMF(currentCatalogue.value.id)
+    if (res.code === 0) {
+      uni.showToast({ title: '领取成功', icon: 'success' })
+      // 刷新页面数据
+      await loadPageData()
+    }
+  } catch (error) {
+    console.error('领取免费课程失败:', error)
+  } finally {
+    uni.hideLoading()
+  }
+}
+
+/**
+ * 购买课程
+ */
+const handlePurchase = async () => {
+  if (!currentCatalogue.value) return
+  
+  try {
+    isFudu.value = false
+    const res = await courseApi.getProductListForCourse(currentCatalogue.value.id)
+    if (res.code === 0 && res.productList.length > 0) {
+      goodsList.value = res.productList
+      showGoodsSelector.value = true
+    } else {
+      uni.showToast({ title: '此课程暂无购买方式', icon: 'none' })
+    }
+  } catch (error) {
+    console.error('获取商品列表失败:', error)
+  }
+}
+
+/**
+ * 续费/复读
+ */
+const handleRenew = async () => {
+  if (!currentCatalogue.value) return
+  
+  try {
+    isFudu.value = true
+    fuduCatalogueId.value = currentCatalogue.value.id
+    const res = await courseApi.getRenewProductList(currentCatalogue.value.id)
+    if (res.code === 0 && res.productList.length > 0) {
+      goodsList.value = res.productList
+      showGoodsSelector.value = true
+    } else {
+      uni.showToast({ title: '暂无复读方案', icon: 'none' })
+    }
+  } catch (error) {
+    console.error('获取复读商品列表失败:', error)
+  }
+}
+
+/**
+ * 选择商品
+ */
+const handleGoodsSelect = (goods: IGoods) => {
+  selectedGoods.value = goods
+}
+
+/**
+ * 确认购买
+ */
+const handleGoodsConfirm = () => {
+  showGoodsSelector.value = false
+  showProtocol.value = true
+}
+
+/**
+ * 关闭商品选择器
+ */
+const closeGoodsSelector = () => {
+  showGoodsSelector.value = false
+}
+
+/**
+ * 确认购买协议
+ */
+const confirmPurchase = () => {
+  showProtocol.value = false
+  uni.showToast({ icon: 'none', title: '订单及支付功能开发中' })
+  return false
+  if (!selectedGoods.value) return
+  
+  showProtocol.value = false
+  
+  // 跳转到确认订单页
+  const orderData = {
+    goods: [{ ...selectedGoods.value, productAmount: 1 }],
+    typeId: 0,
+    navTitle: courseDetail.value?.title,
+    title: courseDetail.value?.title,
+    isFudu: isFudu.value,
+    fuduId: isFudu.value ? fuduCatalogueId.value : undefined
+  }
+  
+  uni.navigateTo({
+    url: `/pages/course/order?data=${encodeURIComponent(JSON.stringify(orderData))}`
+  })
+}
+
+/**
+ * 跳转到VIP页面
+ */
+const goToVip = () => {
+  uni.showToast({ icon: 'none', title: 'VIP功能开发中' })
+  return false
+  uni.navigateTo({
+    url: '/pages/user/wallet/index'
+  })
+}
+
+/**
+ * 跳转到书籍详情
+ */
+const goToBookDetail = (book: IGoods) => {
+  if (book.delFlag === -1) {
+    uni.showToast({ title: '商品已下架', icon: 'none' })
+    return
+  }
+  
+  uni.navigateTo({
+    url: `/pages/book/detail?id=${book.productId}`
+  })
+}
+
+/**
+ * 加载评论
+ */
+const loadComments = async () => {
+  if (commentsLoading.value) return
+  
+  try {
+    commentsLoading.value = true
+    commentPage.value++
+    
+    const res = await courseApi.getCourseComments(
+      courseId.value,
+      commentPage.value,
+      15,
+      userStore.userInfo.id
+    )
+    
+    if (res.code === 0 && res.page) {
+      const newComments = res.page.records.map(comment => {
+        // 处理图片
+        if (comment.images) {
+          comment.imgList = comment.images.split(',')
+        } else {
+          comment.imgList = []
+        }
+        
+        // 处理子评论
+        if (comment.children && comment.children.length > 0) {
+          comment.Bchildren = comment.children.slice(0, 5)
+        } else {
+          comment.Bchildren = []
+        }
+        
+        return comment
+      })
+      
+      commentList.value = [...commentList.value, ...newComments]
+      hasMoreComments.value = res.page.pages > commentPage.value
+    }
+  } catch (error) {
+    console.error('加载评论失败:', error)
+  } finally {
+    commentsLoading.value = false
+  }
+}
+
+/**
+ * 加载更多评论
+ */
+const loadMoreComments = () => {
+  loadComments()
+}
+
+/**
+ * 显示评论编辑器
+ */
+const showCommentEditor = () => {
+  replyComment.value = undefined
+  showEditor.value = true
+}
+
+/**
+ * 回复评论
+ */
+const handleCommentReply = (comment: IComment) => {
+  replyComment.value = comment
+  showEditor.value = true
+}
+
+/**
+ * 提交评论
+ */
+const handleCommentSubmit = async (content: string, images: string[]) => {
+  try {
+    const data = {
+      type: 0,
+      courseId: courseId.value,
+      chapterId: '',
+      pid: replyComment.value?.id || 0,
+      userId: userStore.userInfo.id,
+      forUserId: replyComment.value?.user.id || userStore.userInfo.id,
+      content,
+      images: images.join(',')
+    }
+    const res = await courseApi.addCourseComment(data)
+    if (res.code === 0 && res.courseGuestbook) {
+      uni.showToast({ title: '发布成功', icon: 'success' })
+      
+      // 处理新评论
+      const newComment = res.courseGuestbook
+      newComment.imgList = newComment.images ? newComment.images.split(',') : []
+      newComment.children = []
+      newComment.Bchildren = []
+      
+      if (replyComment.value) {
+        // 回复评论，添加到父评论的子评论列表
+        const parentIndex = commentList.value.findIndex(c => c.id === replyComment.value!.id)
+        if (parentIndex !== -1) {
+          commentList.value[parentIndex].children.unshift(newComment)
+          commentList.value[parentIndex].Bchildren.unshift(newComment)
+        }
+      } else {
+        // 一级评论，添加到列表顶部
+        commentList.value.unshift(newComment)
+      }
+      
+      closeCommentEditor()
+    }
+  } catch (error) {
+    console.error('提交评论失败:', error)
+    uni.showToast({ title: '发布失败', icon: 'none' })
+  }
+}
+
+/**
+ * 关闭评论编辑器
+ */
+const closeCommentEditor = () => {
+  showEditor.value = false
+  replyComment.value = undefined
+}
+
+/**
+ * 点赞评论
+ */
+const handleCommentLike = async (commentId: number) => {
+  try {
+    // 查找评论
+    let targetComment: IComment | null = null
+    let parentComment: IComment | null = null
+    
+    for (const comment of commentList.value) {
+      if (comment.id === commentId) {
+        targetComment = comment
+        break
+      }
+      
+      for (const child of comment.children) {
+        if (child.id === commentId) {
+          targetComment = child
+          parentComment = comment
+          break
+        }
+      }
+      
+      if (targetComment) break
+    }
+    
+    if (!targetComment) return
+    
+    // 调用API
+    if (targetComment.support) {
+      await courseApi.unlikeComment(userStore.userInfo.id, commentId)
+      targetComment.support = false
+      targetComment.supportCount--
+    } else {
+      await courseApi.likeComment(userStore.userInfo.id, commentId)
+      targetComment.support = true
+      targetComment.supportCount++
+    }
+  } catch (error) {
+    console.error('点赞失败:', error)
+  }
+}
+
+/**
+ * 页面滚动
+ */
+onPageScroll((e: any) => {
+  scrollTop.value = e.scrollTop
+})
+
+/**
+ * 下拉刷新
+ */
+onPullDownRefresh(async () => {
+  commentPage.value = 0
+  commentList.value = []
+  await loadPageData()
+  uni.stopPullDownRefresh()
+})
+
+/**
+ * 触底加载
+ */
+onReachBottom(() => {
+  if (hasMoreComments.value && !commentsLoading.value) {
+    loadComments()
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.course-detail-page {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.page-content {
+  padding-bottom: 100rpx;
+}
+
+.vip-tip {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 9;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 30px;
+  padding: 5px 10px;
+  box-sizing: content-box;
+  background: linear-gradient(90deg, #258feb 0%, #00e1ec 100%);
+  color: #fff;
+  
+  .tip-content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 10rpx;
+    font-size: 26rpx;
+  }
+  
+  .vip-btn {
+    flex-shrink: 0;
+    font-size: 12px;
+    padding: 0px 5px;
+    border-radius: 4px;
+  }
+}
+
+.course-content-wrapper {
+  background: linear-gradient(108deg, #c3e7ff 0%, #59bafe 100%);
+}
+
+.learning-progress {
+  padding: 20rpx;
+  background-color: #fff;
+  margin-top: 20rpx;
+  
+  .progress-title {
+    margin-bottom: 20rpx;
+    font-size: 28rpx;
+    color: #666;
+  }
+}
+
+.related-books {
+  padding: 20rpx;
+  background-color: #fff;
+  margin-top: 20rpx;
+  
+  .section-title {
+    font-size: 30rpx;
+    font-weight: 500;
+    color: #333;
+    margin-bottom: 20rpx;
+  }
+  
+  .books-scroll {
+    white-space: nowrap;
+    
+    .book-item {
+      display: inline-block;
+      width: 210rpx;
+      margin-right: 20rpx;
+      vertical-align: top;
+      
+      .book-cover {
+        position: relative;
+        width: 100%;
+        height: 260rpx;
+        background-color: #f5f5f5;
+        border-radius: 8rpx;
+        overflow: hidden;
+        
+        .vip-badge {
+          position: absolute;
+          top: 10rpx;
+          left: 10rpx;
+          padding: 4rpx 10rpx;
+          background-color: #f94f04;
+          color: #fff;
+          font-size: 22rpx;
+          border-radius: 4rpx;
+          z-index: 1;
+        }
+        
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      
+      .book-name {
+        margin-top: 10rpx;
+        font-size: 24rpx;
+        color: #666;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      
+      .book-price {
+        margin-top: 5rpx;
+        
+        .vip-price,
+        .activity-price {
+          font-size: 26rpx;
+          font-weight: bold;
+          color: #e97512;
+        }
+        
+        .normal-price {
+          font-size: 26rpx;
+          font-weight: bold;
+          color: #333;
+        }
+      }
+    }
+  }
+}
+
+.comments-section {
+  padding: 20rpx;
+  background-color: #fff;
+  margin-top: 20rpx;
+  
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30rpx;
+    
+    .section-title {
+      font-size: 30rpx;
+      font-weight: 500;
+      color: #333;
+    }
+  }
+}
+
+.protocol-popup {
+  width: 600rpx;
+  padding: 40rpx;
+  background-color: #fff;
+  border-radius: 12rpx;
+  
+  .protocol-title {
+    font-size: 32rpx;
+    font-weight: 500;
+    color: #333;
+    text-align: center;
+    margin-bottom: 30rpx;
+  }
+  
+  .protocol-content {
+    max-height: 500rpx;
+    overflow-y: auto;
+    font-size: 26rpx;
+    line-height: 1.8;
+    color: #666;
+    margin-bottom: 30rpx;
+    
+    text {
+      display: block;
+      margin-bottom: 20rpx;
+    }
+  }
+  
+  .protocol-actions {
+    display: flex;
+    gap: 20rpx;
+  }
+}
+
+:deep(.back-top) {
+  background-color: #fff !important;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+</style>