From 21b03635a2b448bd208a5bc09c76fce0e3de2af0 Mon Sep 17 00:00:00 2001
From: chenghuan <chenghuanv587@qq.com>
Date: Fri, 14 Nov 2025 15:13:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=EF=BC=9A=E8=AF=BE=E7=A8=8B?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E7=9A=84=E5=88=9D=E6=AD=A5=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/modules/course.ts                         | 179 +++-
 components/bkhumor-emojiplus/index.vue        |  12 +-
 components/comment/CommentEditor.vue          | 491 ++++++++++
 components/comment/CommentList.vue            | 406 ++++++++
 components/course/CatalogueList.vue           |  96 ++
 components/course/ChapterList.vue             | 308 ++++++
 components/course/GoodsSelector.vue           | 237 +++++
 components/course/VideoPlayer.vue             | 242 +++++
 hooks/useComment.ts                           | 191 ++++
 hooks/useCourse.ts                            |  98 ++
 locale/en.json                                |  87 ++
 locale/zh-Hans.json                           |  87 ++
 pages.json                                    |  18 +
 pages/course/details/chapter.vue              | 466 ++++++++++
 .../course/details/components/course-info.vue | 187 ++++
 pages/course/details/course.vue               | 876 ++++++++++++++++++
 pages/course/index.vue                        |   2 +-
 pages/course/list/components/list-item.vue    |   2 +-
 pages/course/order.vue                        | 672 ++++++++++++++
 stores/course.ts                              | 142 +++
 style/tailwind.css                            |   5 +-
 style/ui.scss                                 |  12 +-
 tailwind-input.css                            |   2 +-
 types/comment.d.ts                            |  43 +
 types/course.d.ts                             | 109 +++
 25 files changed, 4958 insertions(+), 12 deletions(-)
 create mode 100644 components/comment/CommentEditor.vue
 create mode 100644 components/comment/CommentList.vue
 create mode 100644 components/course/CatalogueList.vue
 create mode 100644 components/course/ChapterList.vue
 create mode 100644 components/course/GoodsSelector.vue
 create mode 100644 components/course/VideoPlayer.vue
 create mode 100644 hooks/useComment.ts
 create mode 100644 hooks/useCourse.ts
 create mode 100644 pages/course/details/chapter.vue
 create mode 100644 pages/course/details/components/course-info.vue
 create mode 100644 pages/course/details/course.vue
 create mode 100644 pages/course/order.vue
 create mode 100644 stores/course.ts
 create mode 100644 types/comment.d.ts

diff --git a/api/modules/course.ts b/api/modules/course.ts
index 8b50f79..b947717 100644
--- a/api/modules/course.ts
+++ b/api/modules/course.ts
@@ -1,12 +1,19 @@
 // api/modules/course.ts
 import { createRequestClient } from '../request'
 import { SERVICE_MAP } from '../config'
+import type { IApiResponse } from '../types'
 import type {
   ICourseMedicalTreeResponse,
   IUserLateCourseListResponse,
-  IMarketCourseListResponse
+  IMarketCourseListResponse,
+  ICourseDetailResponse,
+  IChapterListResponse,
+  IChapterDetailResponse,
+  IProductListResponse,
+  IVipInfo
 } from '@/types/course'
 import type { ISearchRequest, ISearchResponse } from '@/types/search'
+import type { ICommentListResponse, IAddCommentResponse, IComment } from '@/types/comment'
 
 const client = createRequestClient({ baseURL: SERVICE_MAP.MAIN })
 
@@ -64,5 +71,175 @@ export const courseApi = {
       method: 'POST',
       data
     })
+  },
+
+  /**
+   * 获取课程详情
+   * @param id 课程ID
+   */
+  getCourseDetail(id: number) {
+    return client.request<ICourseDetailResponse>({
+      url: 'sociology/course/getCourseDetail',
+      method: 'POST',
+      data: { id }
+    })
+  },
+
+  /**
+   * 获取目录章节列表
+   * @param id 目录ID
+   */
+  getCatalogueChapterList(id: number) {
+    return client.request<IChapterListResponse>({
+      url: 'sociology/course/getCourseCatalogueChapterList',
+      method: 'POST',
+      data: { id }
+    })
+  },
+
+  /**
+   * 获取章节详情
+   * @param id 章节ID
+   */
+  getChapterDetail(id: number) {
+    return client.request<IChapterDetailResponse>({
+      url: 'sociology/course/getCourseCatalogueChapterDetail',
+      method: 'POST',
+      data: { id, load: false }
+    })
+  },
+
+  /**
+   * 开始学习免费课程
+   * @param catalogueId 目录ID
+   */
+  startStudyForMF(catalogueId: number) {
+    return client.request<IApiResponse>({
+      url: 'sociology/course/startStudyForMF',
+      method: 'POST',
+      data: { catalogueId }
+    })
+  },
+
+  /**
+   * 获取课程商品列表
+   * @param id 目录ID
+   */
+  getProductListForCourse(id: number) {
+    return client.request<IProductListResponse>({
+      url: 'sociology/product/getProductListForCourse',
+      method: 'POST',
+      data: { id }
+    })
+  },
+
+  /**
+   * 检查目录是否支持复读
+   * @param courseCatalogueId 目录ID
+   */
+  checkRenewPayment(courseCatalogueId: number) {
+    return client.request<IApiResponse<{ canRelearn: boolean }>>({
+      url: 'common/courseRelearn/courseCatalogueCanRelearn',
+      method: 'POST',
+      data: { courseCatalogueId }
+    })
+  },
+
+  /**
+   * 获取复读商品列表
+   * @param catalogueId 目录ID
+   */
+  getRenewProductList(catalogueId: number) {
+    return client.request<IProductListResponse>({
+      url: 'common/courseRelearn/relearnShopProductList',
+      method: 'POST',
+      data: { catalogueId }
+    })
+  },
+
+  /**
+   * 获取课程留言列表
+   * @param courseId 课程ID
+   * @param page 页码
+   * @param limit 每页数量
+   * @param userId 用户ID
+   */
+  getCourseComments(courseId: number, page: number, limit: number, userId: number) {
+    return client.request<ICommentListResponse>({
+      url: 'common/courseGuestbook/getCourseGuestbookList',
+      method: 'POST',
+      data: { courseId, page, limit, userId, chapterId: '' }
+    })
+  },
+
+  /**
+   * 添加课程留言
+   * @param data 留言数据
+   */
+  addCourseComment(data: {
+    type: number
+    courseId: number
+    chapterId: string
+    pid: number
+    userId: number
+    forUserId: number
+    content: string
+    images: string
+  }) {
+    return client.request<IAddCommentResponse>({
+      url: 'common/courseGuestbook/addCourseGuestbook',
+      method: 'POST',
+      data
+    })
+  },
+
+  /**
+   * 点赞留言
+   * @param userId 用户ID
+   * @param guestbookId 留言ID
+   */
+  likeComment(userId: number, guestbookId: number) {
+    return client.request<IApiResponse>({
+      url: 'common/courseGuestbook/addCourseGuestbookSupport',
+      method: 'POST',
+      data: { userId, guestbookId }
+    })
+  },
+
+  /**
+   * 取消点赞
+   * @param userId 用户ID
+   * @param guestbookId 留言ID
+   */
+  unlikeComment(userId: number, guestbookId: number) {
+    return client.request<IApiResponse>({
+      url: 'common/courseGuestbook/cancelCourseGuestbookSupport',
+      method: 'POST',
+      data: { userId, guestbookId }
+    })
+  },
+
+  /**
+   * 检查用户VIP权益
+   * @param courseId 课程ID
+   */
+  checkCourseVip(courseId: number) {
+    return client.request<IApiResponse<{ userVip: IVipInfo | null }>>({
+      url: 'common/userVip/ownCourseCatalogueByVip',
+      method: 'POST',
+      data: { courseId }
+    })
+  },
+
+  /**
+   * 获取课程需要的VIP类型
+   * @param courseId 课程ID
+   */
+  getCourseVipModule(courseId: number) {
+    return client.request<IApiResponse<{ list: string[] }>>({
+      url: 'common/userVip/getCourseVipModule',
+      method: 'POST',
+      data: { courseId }
+    })
   }
 }
diff --git a/components/bkhumor-emojiplus/index.vue b/components/bkhumor-emojiplus/index.vue
index 1d260a3..8292b97 100644
--- a/components/bkhumor-emojiplus/index.vue
+++ b/components/bkhumor-emojiplus/index.vue
@@ -1,7 +1,13 @@
 <template>
   <view
     class="emotion-box"
-    style="display: flex; flex-direction: row; flex-wrap: wrap; height: 275px; overflow-y: scroll;"
+    :style="{
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      height: props.height + 'px',
+      overflowY: 'scroll',
+    }"
   >
     <block v-for="(list, index) in emojilist" :key="index">
       <view style="width: 10%; margin: 10px 3.3%;">
@@ -24,6 +30,10 @@ const props = defineProps({
     type: Number,
     default: 320,
   },
+  height: {
+    type: Number,
+    default: 275,
+  }
 })
 
 const emit = defineEmits(['emotion'])
diff --git a/components/comment/CommentEditor.vue b/components/comment/CommentEditor.vue
new file mode 100644
index 0000000..a73530c
--- /dev/null
+++ b/components/comment/CommentEditor.vue
@@ -0,0 +1,491 @@
+<template>
+  <wd-popup 
+    v-model="visible" 
+    position="bottom"
+    lock-scroll
+    :close-on-click-modal="false"
+    @close="handleClose"
+  >
+    <view class="comment-editor">
+      <view class="editor-header">
+        <text class="title">{{ parentComment ? '回复留言' : '发布留言' }}</text>
+        <wd-icon name="close" @click="handleClose" />
+      </view>
+      
+      <!-- 回复对象 -->
+      <view v-if="parentComment" class="reply-to">
+        <text>回复@：{{ parentComment.user.name }} 的留言</text>
+      </view>
+      
+      <!-- 富文本编辑器 -->
+      <view class="editor-container">
+        <view class="editor-wrapper">
+          <editor
+            id="editor"
+            class="ql-container"
+            placeholder="~ 和谐社会 友善发言 ~"
+            show-img-size
+            show-img-toolbar
+            show-img-resize
+            :read-only="readOnly"
+            @statuschange="onStatusChange"
+            @ready="onEditorReady"
+          />
+        </view>
+      </view>
+      
+      <!-- 工具栏 -->
+      <view class="tools-panel">
+        <view class="tool-item" @click="showEmojiPicker">
+          <image src="/static/biaoqing.png" class="tool-icon" mode="aspectFit" />
+          <text class="tool-text">表情</text>
+        </view>
+        <!-- <view class="tool-item" @click="chooseImage">
+          <wd-icon name="picture" size="18px" color="#a9a9a9" />
+          <text class="tool-text">图片</text>
+        </view> -->
+      </view>
+      
+      <!-- 已上传的图片 -->
+      <view v-if="uploadedImages.length > 0" class="uploaded-images">
+        <view class="image-tip">
+          <text>最多可上传3张图片</text>
+        </view>
+        <view class="image-list">
+          <view 
+            v-for="(img, index) in uploadedImages" 
+            :key="index" 
+            class="image-item"
+          >
+            <image :src="img.url" mode="aspectFill" class="preview-image" />
+            <view class="delete-btn" @click="deleteImage(index)">
+              <wd-icon name="close" size="16px" color="#fff" />
+            </view>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 表情选择器 -->
+      <view v-if="showEmoji" class="emoji-picker">
+        <bkhumor-emojiplus 
+          @emotion="handleEmojiSelect" 
+          :height="230" 
+          :windowWidth="windowWidth"
+        />
+      </view>
+      
+      <!-- 操作按钮 -->
+      <view class="editor-actions">
+        <wd-button type="primary" block :loading="submitting" @click="handleSubmit">发 布</wd-button>
+        <!-- <wd-button type="info" block plain custom-style="margin-top: 20rpx" @click="handleClose">取 消</wd-button> -->
+      </view>
+    </view>
+  </wd-popup>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import type { IComment } from '@/types/comment'
+import BkhumorEmojiplus from '@/components/bkhumor-emojiplus/index.vue'
+
+interface Props {
+  show: boolean
+  parentComment?: IComment
+  type: 'course' | 'book'
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  submit: [content: string, images: string[]]
+  close: []
+}>()
+
+const visible = computed({
+  get: () => props.show,
+  set: (val) => {
+    if (!val) emit('close')
+  }
+})
+
+const editorCtx = ref<any>(null)
+const readOnly = ref(false)
+const showEdit = ref(false)
+const showTools = ref(false)
+const showEmoji = ref(false)
+const uploadedImages = ref<Array<{ url: string }>>([])
+const submitting = ref(false)
+const windowWidth = ref(0)
+
+// 获取窗口宽度
+windowWidth.value = uni.getSystemInfoSync().windowWidth
+
+/**
+ * 编辑器准备完成
+ */
+const onEditorReady = () => {
+  uni.createSelectorQuery()
+    .select('#editor')
+    .context((res: any) => {
+      editorCtx.value = res.context
+      editorCtx.value.clear()
+    })
+    .exec()
+}
+
+/**
+ * 编辑器状态变化
+ */
+const onStatusChange = (e: any) => {
+  // 可以在这里处理编辑器状态变化
+}
+
+/**
+ * 切换工具栏
+ */
+const toggleTools = () => {
+  showTools.value = true
+  showEdit.value = true
+  uni.hideKeyboard()
+}
+
+/**
+ * 隐藏工具栏
+ */
+const hideTools = () => {
+  showTools.value = false
+  showEdit.value = false
+  showEmoji.value = false
+}
+
+/**
+ * 显示表情选择器
+ */
+const showEmojiPicker = () => {
+  showEmoji.value = !showEmoji.value
+  showTools.value = false
+}
+
+/**
+ * 选择表情
+ */
+const handleEmojiSelect = (emoji: any) => {
+  if (editorCtx.value) {
+    editorCtx.value.insertImage({
+      src: emoji.emotion,
+      alt: '表情',
+      success: () => {
+        console.log('插入表情成功')
+      }
+    })
+  }
+}
+
+/**
+ * 选择图片
+ */
+const chooseImage = () => {
+  if (uploadedImages.value.length >= 3) {
+    uni.showToast({
+      title: '最多只能上传3张图片',
+      icon: 'none'
+    })
+    return
+  }
+  
+  uni.chooseImage({
+    count: 3 - uploadedImages.value.length,
+    sizeType: ['compressed'],
+    sourceType: ['album', 'camera'],
+    success: (res) => {
+      uploadImages(res.tempFilePaths)
+    }
+  })
+}
+
+/**
+ * 上传图片
+ */
+const uploadImages = (filePaths: string[]) => {
+  filePaths.forEach((filePath) => {
+    uni.uploadFile({
+      url: uni.getStorageSync('baseURL') + 'oss/fileoss',
+      filePath,
+      name: 'file',
+      success: (res) => {
+        try {
+          const data = JSON.parse(res.data)
+          if (data.url) {
+            uploadedImages.value.push({ url: data.url })
+          }
+        } catch (error) {
+          console.error('解析上传结果失败:', error)
+          uni.showToast({
+            title: '上传失败',
+            icon: 'none'
+          })
+        }
+      },
+      fail: () => {
+        uni.showToast({
+          title: '上传失败',
+          icon: 'none'
+        })
+      }
+    })
+  })
+}
+
+/**
+ * 删除图片
+ */
+const deleteImage = (index: number) => {
+  uploadedImages.value.splice(index, 1)
+}
+
+/**
+ * 获取编辑器内容
+ */
+const getEditorContent = (): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    if (!editorCtx.value) {
+      reject('编辑器未初始化')
+      return
+    }
+    
+    editorCtx.value.getContents({
+      success: (res: any) => {
+        resolve(res.html || '')
+      },
+      fail: (error: any) => {
+        reject(error)
+      }
+    })
+  })
+}
+
+/**
+ * 提交评论
+ */
+const handleSubmit = async () => {
+  try {
+    submitting.value = true
+    
+    // 获取编辑器内容
+    const content = await getEditorContent()
+    
+    // 去除HTML标签检查是否为空
+    const textContent = content.replace(/<(?!img\s*\/?)[^>]*>/g, '').trim()
+    
+    if (!textContent && uploadedImages.value.length === 0) {
+      uni.showToast({
+        title: '请输入内容',
+        icon: 'none'
+      })
+      return
+    }
+    
+    // 获取图片URL列表
+    const images = uploadedImages.value.map(img => img.url)
+    // 提交
+    emit('submit', content, images)
+    
+    // 清空编辑器和图片
+    if (editorCtx.value) {
+      editorCtx.value.clear()
+    }
+    uploadedImages.value = []
+    showTools.value = false
+    showEmoji.value = false
+    showEdit.value = false
+    
+  } catch (error) {
+    console.error('提交评论失败:', error)
+    uni.showToast({
+      title: '提交失败',
+      icon: 'none'
+    })
+  } finally {
+    submitting.value = false
+  }
+}
+
+/**
+ * 关闭编辑器
+ */
+const handleClose = () => {
+  // 清空状态
+  if (editorCtx.value) {
+    editorCtx.value.clear()
+  }
+  uploadedImages.value = []
+  showTools.value = false
+  showEmoji.value = false
+  showEdit.value = false
+  
+  emit('close')
+}
+
+// 监听显示状态，重置编辑器
+watch(() => props.show, (newVal) => {
+  if (newVal) {
+    // 延迟初始化编辑器
+    setTimeout(() => {
+      onEditorReady()
+    }, 300)
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.comment-editor {
+  padding: 30rpx;
+  background-color: #fff;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.editor-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30rpx;
+  
+  .title {
+    font-size: 32rpx;
+    font-weight: 500;
+    color: #333;
+  }
+}
+
+.reply-to {
+  padding: 20rpx;
+  margin-bottom: 20rpx;
+  background-color: #f7f8f9;
+  border-radius: 8rpx;
+  
+  text {
+    font-size: 26rpx;
+    color: #666;
+  }
+}
+
+.editor-container {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 20rpx;
+  
+  .editor-wrapper {
+    flex: 1;
+    
+    .ql-container {
+      min-height: 100rpx;
+      max-height: 400rpx;
+      height: auto;
+      padding: 20rpx;
+      border: 1px solid #e5e5e5;
+      border-radius: 8rpx;
+      font-size: 28rpx;
+      line-height: 1.2;
+      box-sizing: border-box;
+
+      :deep(.ql-editor) img {
+        width: 20px;
+      }
+    }
+  }
+  
+  .editor-tools {
+    height: 100rpx;
+    width: 100rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 20rpx;
+    border: 1px solid #e5e5e5;
+    border-radius: 8rpx;
+    cursor: pointer;
+  }
+}
+
+.tools-panel {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20rpx;
+  border-radius: 8rpx;
+  
+  .tool-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    background-color: #f7f8f9;
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 10px;
+    
+    .tool-icon {
+      width: 40rpx;
+      height: 40rpx;
+    }
+    
+    .tool-text {
+      font-size: 24rpx;
+      color: #666;
+    }
+  }
+}
+
+.uploaded-images {
+  margin-bottom: 20rpx;
+  
+  .image-tip {
+    margin-bottom: 15rpx;
+    
+    text {
+      font-size: 24rpx;
+      color: #999;
+    }
+  }
+  
+  .image-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15rpx;
+    
+    .image-item {
+      position: relative;
+      width: 200rpx;
+      height: 200rpx;
+      
+      .preview-image {
+        width: 100%;
+        height: 100%;
+        border-radius: 8rpx;
+      }
+      
+      .delete-btn {
+        position: absolute;
+        top: -10rpx;
+        right: -10rpx;
+        width: 40rpx;
+        height: 40rpx;
+        background-color: rgba(0, 0, 0, 0.6);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
+
+.emoji-picker {
+  margin-bottom: 20rpx;
+}
+
+.editor-actions {
+  margin-top: 30rpx;
+}
+</style>
diff --git a/components/comment/CommentList.vue b/components/comment/CommentList.vue
new file mode 100644
index 0000000..6488efd
--- /dev/null
+++ b/components/comment/CommentList.vue
@@ -0,0 +1,406 @@
+<template>
+  <view class="comment-list">
+    <!-- 评论列表 -->
+    <view v-for="comment in comments" :key="comment.id" class="comment-item">
+      <!-- 一级评论 -->
+      <view class="comment-main">
+        <view class="user-info">
+          <image 
+            :src="comment.user.avatar || defaultAvatar" 
+            class="avatar"
+            mode="aspectFill"
+          />
+          <text class="username">{{ comment.user.name }}</text>
+        </view>
+        
+        <view class="comment-content">
+          <view class="content-html" v-html="comment.content"></view>
+          
+          <!-- 图片列表 -->
+          <view v-if="comment.imgList && comment.imgList.length > 0" class="image-list">
+            <image
+              v-for="(img, imgIndex) in comment.imgList"
+              :key="imgIndex"
+              :src="img"
+              class="comment-image"
+              mode="aspectFill"
+              @click="previewImage(img, comment.imgList)"
+            />
+          </view>
+        </view>
+        
+        <view class="comment-actions">
+          <text class="time">{{ comment.createTime }}</text>
+          <view class="action-btns">
+            <wd-button
+              size="small"
+              custom-class="action-btn"
+              :type="comment.support ? 'primary' : 'default'"
+              @click="handleLike(comment.id)"
+            >
+              <wd-icon name="thumb-up" />
+              <text class="btn-text">{{ comment.supportCount || 0 }}</text>
+            </wd-button>
+            <wd-button
+              size="small"
+              custom-class="action-btn"
+              @click="handleReply(comment)"
+            >
+              <wd-icon name="chat" />
+              <text class="btn-text">回复</text>
+            </wd-button>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 子评论列表 -->
+      <view v-if="comment.Bchildren && comment.Bchildren.length > 0" class="sub-comments">
+        <view v-for="subComment in comment.Bchildren" :key="subComment.id" class="sub-comment-item">
+          <view class="sub-user-info">
+            <image 
+              :src="subComment.user.avatar || defaultAvatar" 
+              class="sub-avatar"
+              mode="aspectFill"
+            />
+            <text class="sub-username">{{ subComment.user.name }}</text>
+          </view>
+          
+          <view class="sub-comment-content">
+            <view class="content-html" v-html="subComment.content"></view>
+            
+            <!-- 子评论图片 -->
+            <view v-if="subComment.imgList && subComment.imgList.length > 0" class="image-list">
+              <image
+                v-for="(img, imgIndex) in subComment.imgList"
+                :key="imgIndex"
+                :src="img"
+                class="comment-image"
+                mode="aspectFill"
+                @click="previewImage(img, subComment.imgList)"
+              />
+            </view>
+          </view>
+          
+          <view class="sub-comment-actions">
+            <text class="time">{{ subComment.createTime }}</text>
+            <view class="action-btns">
+              <wd-button
+                size="small"
+                custom-class="action-btn"
+                :type="subComment.support ? 'primary' : 'default'"
+                @click="handleLike(subComment.id)"
+              >
+                <wd-icon name="thumb-up" />
+                <text class="btn-text">{{ subComment.supportCount || 0 }}</text>
+              </wd-button>
+              <wd-button
+                size="small"
+                custom-class="action-btn"
+                @click="handleReply(subComment)"
+              >
+                <wd-icon name="chat" />
+                <text class="btn-text">回复</text>
+              </wd-button>
+            </view>
+          </view>
+        </view>
+        
+        <!-- 查看更多回复 -->
+        <view 
+          v-if="comment.children && comment.children.length > comment.Bchildren.length" 
+          class="load-more-replies"
+          @click="loadMoreReplies(comment)"
+        >
+          <text>查看更多回复 ({{ comment.children.length - comment.Bchildren.length }})</text>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 加载更多 -->
+    <view v-if="hasMore" class="load-more-btn">
+      <wd-button 
+        @click="handleLoadMore" 
+        :loading="loading"
+        block
+      >
+        加载更多
+      </wd-button>
+    </view>
+    
+    <!-- 已加载全部 -->
+    <view v-else-if="comments.length > 0" class="no-more">
+      <wd-divider>已加载全部</wd-divider>
+    </view>
+    
+    <!-- 暂无评论 -->
+    <view v-else-if="!loading" class="no-comments">
+      <text>暂无留言数据</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { IComment } from '@/types/comment'
+
+interface Props {
+  comments: IComment[]
+  loading: boolean
+  hasMore: boolean
+  type: 'course' | 'book'
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  like: [commentId: number]
+  reply: [comment: IComment]
+  loadMore: []
+}>()
+
+const defaultAvatar = '/static/icon/default-avatar.png'
+
+/**
+ * 预览图片
+ */
+const previewImage = (current: string, urls: string[]) => {
+  uni.previewImage({
+    current,
+    urls,
+    longPressActions: {
+      itemList: ['很抱歉，暂不支持保存图片到本地'],
+    },
+  })
+}
+
+/**
+ * 点赞
+ */
+const handleLike = (commentId: number) => {
+  emit('like', commentId)
+}
+
+/**
+ * 回复
+ */
+const handleReply = (comment: IComment) => {
+  emit('reply', comment)
+}
+
+/**
+ * 加载更多
+ */
+const handleLoadMore = () => {
+  emit('loadMore')
+}
+
+/**
+ * 加载更多回复
+ */
+const loadMoreReplies = (comment: IComment) => {
+  // 显示所有子评论
+  comment.Bchildren = [...comment.children]
+}
+</script>
+
+<style lang="scss" scoped>
+.comment-list {
+  padding: 20rpx;
+  background-color: #fff;
+}
+
+.comment-item {
+  margin-bottom: 30rpx;
+  padding-bottom: 30rpx;
+  border-bottom: 1px solid #f0f0f0;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.comment-main {
+  .user-info {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20rpx;
+    
+    .avatar {
+      width: 60rpx;
+      height: 60rpx;
+      border-radius: 50%;
+      margin-right: 20rpx;
+    }
+    
+    .username {
+      font-size: 28rpx;
+      color: #333;
+      font-weight: 500;
+    }
+  }
+  
+  .comment-content {
+    margin-left: 80rpx;
+    margin-bottom: 20rpx;
+    
+    .content-html {
+      font-size: 28rpx;
+      line-height: 1.6;
+      color: #666;
+      word-break: break-all;
+    }
+    
+    .image-list {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 20rpx;
+      gap: 10rpx;
+      
+      .comment-image {
+        width: 200rpx;
+        height: 200rpx;
+        border-radius: 8rpx;
+      }
+    }
+  }
+  
+  .comment-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-left: 80rpx;
+    
+    .time {
+      font-size: 24rpx;
+      color: #999;
+    }
+    
+    .action-btns {
+      display: flex;
+      gap: 20rpx;
+      
+      .action-btn {
+        display: flex;
+        align-items: center;
+        gap: 8rpx;
+        
+        .btn-text {
+          font-size: 24rpx;
+        }
+      }
+    }
+  }
+}
+
+.sub-comments {
+  margin-left: 80rpx;
+  margin-top: 20rpx;
+  padding: 20rpx;
+  background-color: #f7f8f9;
+  border-radius: 8rpx;
+  
+  .sub-comment-item {
+    margin-bottom: 20rpx;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    .sub-user-info {
+      display: flex;
+      align-items: center;
+      margin-bottom: 15rpx;
+      
+      .sub-avatar {
+        width: 40rpx;
+        height: 40rpx;
+        border-radius: 50%;
+        margin-right: 15rpx;
+      }
+      
+      .sub-username {
+        font-size: 24rpx;
+        color: #666;
+      }
+    }
+    
+    .sub-comment-content {
+      margin-left: 55rpx;
+      margin-bottom: 15rpx;
+      
+      .content-html {
+        font-size: 26rpx;
+        line-height: 1.5;
+        color: #666;
+        word-break: break-all;
+      }
+      
+      .image-list {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 15rpx;
+        gap: 10rpx;
+        
+        .comment-image {
+          width: 150rpx;
+          height: 150rpx;
+          border-radius: 8rpx;
+        }
+      }
+    }
+    
+    .sub-comment-actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-left: 55rpx;
+      
+      .time {
+        font-size: 22rpx;
+        color: #999;
+      }
+      
+      .action-btns {
+        display: flex;
+        gap: 15rpx;
+        
+        .action-btn {
+          display: flex;
+          align-items: center;
+          gap: 6rpx;
+          
+          .btn-text {
+            font-size: 22rpx;
+          }
+        }
+      }
+    }
+  }
+  
+  .load-more-replies {
+    text-align: center;
+    padding: 15rpx 0;
+    margin-top: 15rpx;
+    
+    text {
+      font-size: 24rpx;
+      color: #2979ff;
+    }
+  }
+}
+
+.load-more-btn {
+  margin-top: 30rpx;
+}
+
+.no-more {
+  margin-top: 30rpx;
+}
+
+.no-comments {
+  text-align: center;
+  padding: 80rpx 0;
+  color: #999;
+  font-size: 28rpx;
+}
+</style>
diff --git a/components/course/CatalogueList.vue b/components/course/CatalogueList.vue
new file mode 100644
index 0000000..da9ddef
--- /dev/null
+++ b/components/course/CatalogueList.vue
@@ -0,0 +1,96 @@
+<template>
+  <view 
+    v-if="catalogues.length > 1" 
+    :class="['catalogue-list', userVip ? 'vip-style' : '']"
+  >
+    <view
+      v-for="(catalogue, index) in catalogues"
+      :key="catalogue.id"
+      :class="['catalogue-item', currentIndex === index ? 'active' : '']"
+      @click="handleSelect(index)"
+    >
+      <text class="catalogue-title">{{ catalogue.title }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { ICatalogue, IVipInfo } from '@/types/course'
+
+interface Props {
+  catalogues: ICatalogue[]
+  currentIndex: number
+  userVip: IVipInfo | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  change: [index: number]
+}>()
+
+/**
+ * 选择目录
+ */
+const handleSelect = (index: number) => {
+  if (index === props.currentIndex) return
+  emit('change', index)
+}
+</script>
+
+<style lang="scss" scoped>
+.catalogue-list {
+  display: flex;
+  align-items: flex-end;
+  padding: 20rpx;
+  padding-bottom: 0;
+  border-radius: 20rpx 20rpx 0 0;
+  margin-top: 20rpx;
+  
+  &.vip-style {
+    background: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
+    
+    .catalogue-item {
+      background-color: rgba(0, 0, 0, 0.4);
+      color: #fff;
+      border-color: #fff;
+      
+      &.active {
+        background-color: #258feb;
+        color: #fff;
+      }
+    }
+  }
+  
+  .catalogue-item {
+    flex: 1;
+    text-align: center;
+    padding: 16rpx 0;
+    margin-right: 10rpx;
+    border-radius: 20rpx 20rpx 0 0;
+    border: 1px solid #fff;
+    border-bottom: none;
+    background-color: rgba(0, 0, 0, 0.4);
+    color: #fff;
+    transition: all 0.3s;
+    
+    &:last-child {
+      margin-right: 0;
+    }
+    
+    &.active {
+      background-color: #258feb;
+      padding: 20rpx 0;
+      
+      .catalogue-title {
+        font-size: 36rpx;
+        font-weight: bold;
+      }
+    }
+    
+    .catalogue-title {
+      font-size: 30rpx;
+    }
+  }
+}
+</style>
diff --git a/components/course/ChapterList.vue b/components/course/ChapterList.vue
new file mode 100644
index 0000000..19d9e4e
--- /dev/null
+++ b/components/course/ChapterList.vue
@@ -0,0 +1,308 @@
+<template>
+  <view class="chapter-list">
+    <!-- 目录状态信息 -->
+    <view v-if="catalogue" class="catalogue-status">
+      <view v-if="catalogue.isBuy === 1 || userVip" class="purchased-info">
+        <view class="info-row">
+          <text v-if="userVip">
+            VIP畅学权益有效期截止到：{{ userVip.endTime }}
+          </text>
+          <template v-else>
+            <text v-if="!catalogue.startTime">
+              当前目录还未开始学习
+            </text>
+            <text v-else>
+              课程有效期截止到：{{ catalogue.endTime }}
+            </text>
+            <wd-button 
+              v-if="catalogue.startTime"
+              size="small"
+              @click="handleRenew"
+            >
+              续费
+            </wd-button>
+          </template>
+        </view>
+      </view>
+      
+      <!-- 未购买状态 -->
+      <view v-else-if="catalogue.type === 0" class="free-course">
+        <wd-button type="success" @click="handleGetFreeCourse">
+          {{ $t('courseDetails.free') }}
+        </wd-button>
+      </view>
+      
+      <view v-else class="unpurchased-info">
+        <text class="tip-text">
+          {{ $t('courseDetails.unpurchasedTip') }}
+        </text>
+        <view class="action-btns">
+          <wd-button size="small" type="warning" @click="handlePurchase">
+            {{ $t('courseDetails.purchase') }}
+          </wd-button>
+          <wd-button 
+            v-if="showRenewBtn"
+            size="small"
+            type="success"
+            @click="handleRenew"
+          >
+            {{ $t('courseDetails.relearn') }}
+          </wd-button>
+          <wd-button size="small" type="primary" @click="goToVip">
+            {{ $t('courseDetails.openVip') }}
+          </wd-button>
+        </view>
+      </view>
+    </view>
+
+    <view v-if="chapters.length > 0" class="chapter-content">
+      <!-- VIP标识 -->
+      <view v-if="userVip" class="vip-badge">
+        <text>VIP畅学权益生效中</text>
+      </view>
+      
+      <!-- 章节列表 -->
+      <view
+        v-for="(chapter, index) in chapters"
+        :key="chapter.id"
+        class="chapter-item"
+        @click="handleChapterClick(chapter)"
+      >
+        <view class="chapter-content-wrapper">
+          <view :class="['chapter-info', !canAccess(chapter) ? 'locked' : '']">
+            <text class="chapter-title">{{ chapter.title }}</text>
+            
+            <!-- 试听标签 -->
+            <wd-tag
+              v-if="chapter.isAudition === 1 && !isPurchased && !userVip"
+              type="success"
+              plain
+              size="small"
+              custom-class="chapter-tag"
+            >
+              试听
+            </wd-tag>
+            
+            <!-- 学习状态标签 -->
+            <template v-if="isPurchased || userVip">
+              <wd-tag
+                v-if="chapter.isLearned === 0"
+                type="primary"
+                plain
+                size="small"
+                custom-class="chapter-tag"
+              >
+                未学
+              </wd-tag>
+              <wd-tag
+                v-else
+                type="success"
+                plain
+                size="small"
+                custom-class="chapter-tag"
+              >
+                已学
+              </wd-tag>
+            </template>
+          </view>
+          
+          <!-- 锁定图标 -->
+          <view v-if="!canAccess(chapter)" class="lock-icon">
+            <wd-icon name="lock-on" size="24px" color="#258feb" />
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 暂无章节 -->
+    <view v-else class="no-chapters">
+      <text>暂无章节内容</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { IChapter, ICatalogue, IVipInfo } from '@/types/course'
+
+interface Props {
+  chapters: IChapter[]
+  catalogue: ICatalogue
+  userVip: IVipInfo | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  click: [chapter: IChapter]
+}>()
+
+/**
+ * 判断目录是否已购买
+ */
+const isPurchased = computed(() => {
+  return props.catalogue.isBuy === 1
+})
+// 购买
+const handlePurchase = () => {
+  emit('purchase', props.catalogue)
+}
+// 去开通vip
+const goToVip = () => {
+  emit('toVip', props.catalogue)
+}
+
+/**
+ * 判断章节是否可以访问
+ */
+const canAccess = (chapter: IChapter): boolean => {
+  // VIP用户可以访问所有章节
+  if (props.userVip) return true
+  
+  // 已购买目录可以访问所有章节
+  if (isPurchased.value) return true
+  
+  // 试听章节可以访问
+  if (chapter.isAudition === 1) return true
+  
+  // 免费课程可以访问
+  if (props.catalogue.type === 0) return true
+  
+  return false
+}
+
+/**
+ * 点击章节
+ */
+const handleChapterClick = (chapter: IChapter) => {
+  if (!canAccess(chapter)) {
+    if (props.catalogue.type === 0) {
+      uni.showToast({
+        title: '请先领取课程',
+        icon: 'none'
+      })
+    } else {
+      uni.showToast({
+        title: '请先购买课程',
+        icon: 'none'
+      })
+    }
+    return
+  }
+  
+  emit('click', chapter)
+}
+</script>
+
+<style lang="scss" scoped>
+.chapter-list {
+  padding: 20rpx;
+}
+
+.catalogue-status {
+  padding: 20rpx;
+  margin-bottom: 20rpx;
+  background-color: #fff;
+  
+  .purchased-info {
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 26rpx;
+      line-height: 50rpx;
+    }
+  }
+  
+  .free-course {
+    text-align: center;
+  }
+  
+  .unpurchased-info {
+    .tip-text {
+      display: block;
+      font-size: 26rpx;
+      color: #666;
+      margin-bottom: 20rpx;
+      line-height: 1.6;
+    }
+    
+    .action-btns {
+      display: flex;
+      gap: 20rpx;
+      justify-content: center;
+    }
+  }
+}
+
+.chapter-content {
+  position: relative;
+  padding: 20rpx;
+  border: 4rpx solid #fffffc;
+  background: linear-gradient(52deg, #e8f6ff 0%, #e3f2fe 50%);
+  box-shadow: 0px 0px 10px 0px #89c8e9;
+  border-top-right-radius: 40rpx;
+  border-bottom-left-radius: 40rpx;
+  
+  .vip-badge {
+    position: absolute;
+    left: 0;
+    top: 0;
+    font-size: 24rpx;
+    background: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
+    color: #fff;
+    padding: 10rpx 20rpx;
+    border-radius: 0 50rpx 50rpx 0;
+    z-index: 1;
+  }
+  
+  .chapter-item {
+    padding: 20rpx 0;
+    border-bottom: 1px solid #fff;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    .chapter-content-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      
+      .chapter-info {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: 10rpx;
+        
+        &.locked {
+          opacity: 0.6;
+        }
+        
+        .chapter-title {
+          flex: 1;
+          font-size: 28rpx;
+          color: #1e2f3e;
+          line-height: 1.5;
+        }
+        
+        .chapter-tag {
+          flex-shrink: 0;
+        }
+      }
+      
+      .lock-icon {
+        margin-left: 20rpx;
+        flex-shrink: 0;
+      }
+    }
+  }
+}
+
+.no-chapters {
+  text-align: center;
+  padding: 80rpx 0;
+  color: #999;
+  font-size: 28rpx;
+}
+</style>
diff --git a/components/course/GoodsSelector.vue b/components/course/GoodsSelector.vue
new file mode 100644
index 0000000..fff34c6
--- /dev/null
+++ b/components/course/GoodsSelector.vue
@@ -0,0 +1,237 @@
+<template>
+  <wd-popup 
+    v-model="visible" 
+    position="bottom"
+    :close-on-click-modal="true"
+    @close="handleClose"
+  >
+    <view class="goods-selector">
+      <view class="selector-header">
+        <text class="title">{{ isFudu ? '选择复读方案' : '选择购买方案' }}</text>
+        <wd-icon name="close" @click="handleClose" />
+      </view>
+      
+      <!-- 商品列表 -->
+      <view class="goods-list">
+        <view
+          v-for="(item, index) in goods"
+          :key="item.productId"
+          :class="['goods-item', selectedIndex === index ? 'selected' : '']"
+          @click="selectGoods(index)"
+        >
+          <view class="goods-info">
+            <text class="goods-name">{{ item.productName }}</text>
+            
+            <!-- VIP优惠价 -->
+            <view v-if="item.isVipPrice === 1 && item.vipPrice" class="price-info">
+              <text class="vip-price">￥{{ item.vipPrice.toFixed(2) }}</text>
+              <text class="vip-label">VIP到手价</text>
+              <text class="original-price">￥{{ item.price.toFixed(2) }}</text>
+            </view>
+            
+            <!-- 活动价 -->
+            <view v-else-if="item.activityPrice && item.activityPrice > 0" class="price-info">
+              <text class="activity-price">￥{{ item.activityPrice.toFixed(2) }}</text>
+              <text class="activity-label">活动价</text>
+              <text class="original-price">￥{{ item.price.toFixed(2) }}</text>
+            </view>
+            
+            <!-- 普通价格 -->
+            <view v-else class="price-info">
+              <text class="normal-price">￥{{ item.price.toFixed(2) }}</text>
+            </view>
+          </view>
+          
+          <!-- 选中标记 -->
+          <view v-if="selectedIndex === index" class="selected-mark">
+            <wd-icon name="check" color="#fff" size="20px" />
+          </view>
+        </view>
+      </view>
+      
+      <!-- 操作按钮 -->
+      <view class="selector-actions">
+        <wd-button 
+          type="primary" 
+          block
+          @click="handleConfirm"
+          :disabled="selectedIndex === -1"
+        >
+          立即购买
+        </wd-button>
+      </view>
+    </view>
+  </wd-popup>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import type { IGoods } from '@/types/course'
+
+interface Props {
+  show: boolean
+  goods: IGoods[]
+  isFudu?: boolean  // 是否为复读
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  select: [goods: IGoods]
+  confirm: [goods: IGoods]
+  close: []
+}>()
+
+const visible = computed({
+  get: () => props.show,
+  set: (val) => {
+    if (!val) emit('close')
+  }
+})
+
+const selectedIndex = ref(-1)
+
+/**
+ * 选择商品
+ */
+const selectGoods = (index: number) => {
+  selectedIndex.value = index
+  emit('select', props.goods[index])
+}
+
+/**
+ * 确认购买
+ */
+const handleConfirm = () => {
+  if (selectedIndex.value === -1) {
+    uni.showToast({
+      title: '请选择购买方案',
+      icon: 'none'
+    })
+    return
+  }
+  
+  emit('confirm', props.goods[selectedIndex.value])
+}
+
+/**
+ * 关闭选择器
+ */
+const handleClose = () => {
+  emit('close')
+}
+
+// 监听显示状态，重置选择
+watch(() => props.show, (newVal) => {
+  if (newVal && props.goods.length > 0) {
+    // 默认选中第一个
+    selectedIndex.value = 0
+    emit('select', props.goods[0])
+  } else {
+    selectedIndex.value = -1
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.goods-selector {
+  padding: 30rpx;
+  background-color: #fff;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.selector-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30rpx;
+  
+  .title {
+    font-size: 32rpx;
+    font-weight: 500;
+    color: #333;
+  }
+}
+
+.goods-list {
+  margin-bottom: 30rpx;
+  
+  .goods-item {
+    position: relative;
+    padding: 30rpx;
+    margin-bottom: 20rpx;
+    border: 2rpx solid #e5e5e5;
+    border-radius: 12rpx;
+    transition: all 0.3s;
+    
+    &.selected {
+      border-color: #258feb;
+      background-color: #f0f8ff;
+    }
+    
+    .goods-info {
+      .goods-name {
+        display: block;
+        font-size: 30rpx;
+        color: #333;
+        margin-bottom: 15rpx;
+        line-height: 1.4;
+      }
+      
+      .price-info {
+        display: flex;
+        align-items: baseline;
+        gap: 10rpx;
+        
+        .vip-price,
+        .activity-price {
+          font-size: 36rpx;
+          font-weight: bold;
+          color: #e97512;
+        }
+        
+        .normal-price {
+          font-size: 36rpx;
+          font-weight: bold;
+          color: #333;
+        }
+        
+        .vip-label {
+          font-size: 24rpx;
+          color: #fa2d12;
+        }
+        
+        .activity-label {
+          font-size: 24rpx;
+          color: #613804;
+        }
+        
+        .original-price {
+          font-size: 24rpx;
+          color: #8a8a8a;
+          text-decoration: line-through;
+        }
+      }
+    }
+    
+    .selected-mark {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 50rpx;
+      height: 50rpx;
+      background-color: #258feb;
+      border-radius: 0 12rpx 0 12rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+.selector-actions {
+  padding-top: 20rpx;
+  border-top: 1px solid #f0f0f0;
+}
+</style>
diff --git a/components/course/VideoPlayer.vue b/components/course/VideoPlayer.vue
new file mode 100644
index 0000000..c68e444
--- /dev/null
+++ b/components/course/VideoPlayer.vue
@@ -0,0 +1,242 @@
+<template>
+  <view class="video-player">
+    <!-- 视频播放器 -->
+    <video
+      v-if="currentVideo"
+      :id="videoId"
+      :src="currentVideo.url"
+      :title="currentVideo.title"
+      :controls="true"
+      :show-fullscreen-btn="true"
+      :show-play-btn="true"
+      :enable-progress-gesture="true"
+      :object-fit="objectFit"
+      class="video-element"
+      @fullscreenchange="handleFullscreenChange"
+      @ended="handleVideoEnd"
+      @error="handleVideoError"
+    />
+    
+    <!-- 自动播放下一个提示 -->
+    <view v-if="showCountDown && hasNext" class="countdown-overlay">
+      <view class="countdown-content">
+        <text class="countdown-text">{{ countDownSeconds }}秒后自动播放下一个</text>
+        <wd-button size="small" @click="cancelAutoPlay">
+          取消自动播放
+        </wd-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import type { IVideo } from '@/types/course'
+
+interface Props {
+  videoList: IVideo[]
+  currentIndex: number
+  noRecored?: boolean  // 是否为试听（不记录进度）
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  end: []
+  fullscreen: [isFullScreen: boolean]
+  change: [index: number]
+}>()
+
+const videoId = 'course-video-player'
+const videoContext = ref<any>(null)
+const objectFit = ref<'contain' | 'fill' | 'cover'>('contain')
+const showCountDown = ref(false)
+const countDownSeconds = ref(10)
+const countDownTimer = ref<any>(null)
+
+/**
+ * 当前视频
+ */
+const currentVideo = computed(() => {
+  if (props.videoList.length === 0) return null
+  return props.videoList[props.currentIndex] || null
+})
+
+/**
+ * 是否有下一个视频
+ */
+const hasNext = computed(() => {
+  return props.currentIndex < props.videoList.length - 1
+})
+
+/**
+ * 初始化视频上下文
+ */
+const initVideoContext = () => {
+  videoContext.value = uni.createVideoContext(videoId)
+}
+
+/**
+ * 视频播放结束
+ */
+const handleVideoEnd = () => {
+  emit('end')
+  
+  // 如果有下一个视频，开始倒计时
+  if (hasNext.value) {
+    startCountDown()
+  }
+}
+
+/**
+ * 开始倒计时
+ */
+const startCountDown = () => {
+  showCountDown.value = true
+  countDownSeconds.value = 10
+  
+  countDownTimer.value = setInterval(() => {
+    countDownSeconds.value--
+    
+    if (countDownSeconds.value <= 0) {
+      stopCountDown()
+      playNext()
+    }
+  }, 1000)
+}
+
+/**
+ * 停止倒计时
+ */
+const stopCountDown = () => {
+  if (countDownTimer.value) {
+    clearInterval(countDownTimer.value)
+    countDownTimer.value = null
+  }
+  showCountDown.value = false
+}
+
+/**
+ * 取消自动播放
+ */
+const cancelAutoPlay = () => {
+  stopCountDown()
+}
+
+/**
+ * 播放下一个视频
+ */
+const playNext = () => {
+  if (hasNext.value) {
+    emit('change', props.currentIndex + 1)
+  }
+}
+
+/**
+ * 全屏变化
+ */
+const handleFullscreenChange = (e: any) => {
+  const isFullScreen = e.detail.fullScreen
+  emit('fullscreen', isFullScreen)
+  
+  // 全屏时使用 cover 模式
+  objectFit.value = isFullScreen ? 'cover' : 'contain'
+}
+
+/**
+ * 视频错误
+ */
+const handleVideoError = (e: any) => {
+  console.error('视频播放错误:', e)
+  uni.showToast({
+    title: '视频加载失败',
+    icon: 'none'
+  })
+}
+
+/**
+ * 播放视频
+ */
+const play = () => {
+  if (videoContext.value) {
+    videoContext.value.play()
+  }
+}
+
+/**
+ * 暂停视频
+ */
+const pause = () => {
+  if (videoContext.value) {
+    videoContext.value.pause()
+  }
+}
+
+/**
+ * 停止视频
+ */
+const stop = () => {
+  if (videoContext.value) {
+    videoContext.value.stop()
+  }
+}
+
+// 监听视频变化，重新播放
+watch(() => props.currentIndex, () => {
+  stopCountDown()
+  // 延迟播放，确保视频元素已更新
+  setTimeout(() => {
+    play()
+  }, 300)
+})
+
+onMounted(() => {
+  initVideoContext()
+})
+
+onUnmounted(() => {
+  stopCountDown()
+  stop()
+})
+
+// 暴露方法给父组件
+defineExpose({
+  play,
+  pause,
+  stop,
+  cancelAutoPlay: stopCountDown
+})
+</script>
+
+<style lang="scss" scoped>
+.video-player {
+  position: relative;
+  width: 100%;
+  background-color: #000;
+  
+  .video-element {
+    width: 100%;
+    height: 400rpx;
+  }
+  
+  .countdown-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.7);
+    padding: 20rpx;
+    
+    .countdown-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      .countdown-text {
+        color: #fff;
+        font-size: 28rpx;
+      }
+    }
+  }
+}
+</style>
diff --git a/hooks/useComment.ts b/hooks/useComment.ts
new file mode 100644
index 0000000..40c0d74
--- /dev/null
+++ b/hooks/useComment.ts
@@ -0,0 +1,191 @@
+// hooks/useComment.ts
+/**
+ * 评论相关的可复用逻辑
+ */
+import { ref } from 'vue'
+import { courseApi } from '@/api/modules/course'
+import { bookApi } from '@/api/modules/book'
+import type { IComment } from '@/types/comment'
+
+export function useComment(type: 'course' | 'book') {
+  const commentList = ref<IComment[]>([])
+  const loading = ref(false)
+  const hasMore = ref(true)
+  const currentPage = ref(0)
+
+  /**
+   * 加载评论列表
+   */
+  const loadComments = async (relationId: number, userId: number, limit: number = 15) => {
+    if (loading.value) return
+
+    try {
+      loading.value = true
+      currentPage.value++
+
+      let res: any
+      if (type === 'course') {
+        res = await courseApi.getCourseComments(relationId, currentPage.value, limit, userId)
+      } else {
+        res = await bookApi.getBookComments(relationId, currentPage.value, limit)
+      }
+
+      if (res.code === 0 && res.page) {
+        const newComments = res.page.records.map((comment: IComment) => {
+          // 处理图片
+          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]
+        hasMore.value = res.page.pages > currentPage.value
+      }
+    } catch (error) {
+      console.error('加载评论失败:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /**
+   * 添加评论
+   */
+  const addComment = async (
+    relationId: number,
+    userId: number,
+    content: string,
+    images: string[],
+    parentComment?: IComment
+  ) => {
+    try {
+      let res: any
+      if (type === 'course') {
+        res = await courseApi.addCourseComment({
+          type: 0,
+          courseId: relationId,
+          chapterId: '',
+          pid: parentComment?.id || 0,
+          userId,
+          forUserId: parentComment?.user.id || userId,
+          content,
+          images: images.join(',')
+        })
+      } else {
+        res = await bookApi.insertComment(relationId, content, parentComment?.id || 0)
+      }
+
+      if (res.code === 0) {
+        const newComment = type === 'course' ? res.courseGuestbook : res.bookComment
+        if (newComment) {
+          newComment.imgList = newComment.images ? newComment.images.split(',') : []
+          newComment.children = []
+          newComment.Bchildren = []
+
+          if (parentComment) {
+            // 回复评论
+            const parentIndex = commentList.value.findIndex(c => c.id === parentComment.id)
+            if (parentIndex !== -1) {
+              commentList.value[parentIndex].children.unshift(newComment)
+              commentList.value[parentIndex].Bchildren.unshift(newComment)
+            }
+          } else {
+            // 一级评论
+            commentList.value.unshift(newComment)
+          }
+        }
+
+        uni.showToast({ title: '发布成功', icon: 'success' })
+        return true
+      }
+      return false
+    } catch (error) {
+      console.error('添加评论失败:', error)
+      uni.showToast({ title: '发布失败', icon: 'none' })
+      return false
+    }
+  }
+
+  /**
+   * 点赞/取消点赞
+   */
+  const toggleLike = async (commentId: number, userId: number) => {
+    try {
+      // 查找评论
+      let targetComment: 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
+            break
+          }
+        }
+
+        if (targetComment) break
+      }
+
+      if (!targetComment) return
+
+      // 调用API
+      if (type === 'course') {
+        if (targetComment.support) {
+          await courseApi.unlikeComment(userId, commentId)
+          targetComment.support = false
+          targetComment.supportCount--
+        } else {
+          await courseApi.likeComment(userId, commentId)
+          targetComment.support = true
+          targetComment.supportCount++
+        }
+      } else {
+        if (targetComment.support) {
+          await bookApi.unlikeComment(commentId)
+          targetComment.support = false
+          targetComment.supportCount--
+        } else {
+          await bookApi.likeComment(commentId)
+          targetComment.support = true
+          targetComment.supportCount++
+        }
+      }
+    } catch (error) {
+      console.error('点赞失败:', error)
+    }
+  }
+
+  /**
+   * 重置评论列表
+   */
+  const resetComments = () => {
+    commentList.value = []
+    currentPage.value = 0
+    hasMore.value = true
+  }
+
+  return {
+    commentList,
+    loading,
+    hasMore,
+    loadComments,
+    addComment,
+    toggleLike,
+    resetComments
+  }
+}
diff --git a/hooks/useCourse.ts b/hooks/useCourse.ts
new file mode 100644
index 0000000..f154029
--- /dev/null
+++ b/hooks/useCourse.ts
@@ -0,0 +1,98 @@
+// hooks/useCourse.ts
+/**
+ * 课程相关的可复用逻辑
+ */
+import { ref } from 'vue'
+import { courseApi } from '@/api/modules/course'
+import type { ICourseDetail, ICatalogue, IChapter, IVipInfo } from '@/types/course'
+
+export function useCourse() {
+  const loading = ref(false)
+  const courseDetail = ref<ICourseDetail | null>(null)
+  const catalogueList = ref<ICatalogue[]>([])
+  const chapterList = ref<IChapter[]>([])
+  const userVip = ref<IVipInfo | null>(null)
+
+  /**
+   * 获取课程详情
+   */
+  const fetchCourseDetail = async (courseId: number) => {
+    try {
+      loading.value = true
+      const res = await courseApi.getCourseDetail(courseId)
+      if (res.code === 0 && res.data) {
+        courseDetail.value = res.data.course
+        catalogueList.value = res.data.catalogues || []
+        return res.data
+      }
+    } catch (error) {
+      console.error('获取课程详情失败:', error)
+      throw error
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /**
+   * 获取章节列表
+   */
+  const fetchChapterList = async (catalogueId: number) => {
+    try {
+      const res = await courseApi.getCatalogueChapterList(catalogueId)
+      if (res.code === 0) {
+        chapterList.value = res.chapterList || []
+        return res.chapterList
+      }
+    } catch (error) {
+      console.error('获取章节列表失败:', error)
+      chapterList.value = []
+      throw error
+    }
+  }
+
+  /**
+   * 检查VIP状态
+   */
+  const checkVipStatus = async (courseId: number) => {
+    try {
+      const res = await courseApi.checkCourseVip(courseId)
+      if (res.code === 0) {
+        userVip.value = res.userVip || null
+        return res.userVip
+      }
+    } catch (error) {
+      console.error('检查VIP状态失败:', error)
+      userVip.value = null
+      throw error
+    }
+  }
+
+  /**
+   * 领取免费课程
+   */
+  const getFreeCourse = async (catalogueId: number) => {
+    try {
+      const res = await courseApi.startStudyForMF(catalogueId)
+      if (res.code === 0) {
+        uni.showToast({ title: '领取成功', icon: 'success' })
+        return true
+      }
+      return false
+    } catch (error) {
+      console.error('领取免费课程失败:', error)
+      throw error
+    }
+  }
+
+  return {
+    loading,
+    courseDetail,
+    catalogueList,
+    chapterList,
+    userVip,
+    fetchCourseDetail,
+    fetchChapterList,
+    checkVipStatus,
+    getFreeCourse
+  }
+}
diff --git a/locale/en.json b/locale/en.json
index 89363d0..f26c5e6 100644
--- a/locale/en.json
+++ b/locale/en.json
@@ -322,5 +322,92 @@
     "required": "Required",
     "elective": "Elective",
     "each": "Each"
+  },
+  "courseDetails": {
+    "detail": "Course Details",
+    "chapter": "Chapter Content",
+    "catalogue": "Catalogue",
+    "chapterList": "Chapters",
+    "trial": "Trial",
+    "learned": "Learned",
+    "notLearned": "Not Learned",
+    "locked": "Locked",
+    "purchase": "Buy Now",
+    "renew": "Renew",
+    "relearn": "Relearn",
+    "free": "Get Free",
+    "vipOnly": "VIP Only",
+    "openVip": "Get VIP",
+    "progress": "Learning Progress",
+    "relatedBooks": "Related Books",
+    "comments": "Comments",
+    "publishComment": "Post Comment",
+    "reply": "Reply",
+    "like": "Like",
+    "chapterIntro": "Chapter Introduction",
+    "thinkingQuestion": "Thinking Question",
+    "noQuestion": "No question available",
+    "videoTeaching": "Video Teaching",
+    "autoPlayNext": "s to auto play next",
+    "cancelAutoPlay": "Cancel Auto Play",
+    "vipTip": "Get VIP to enjoy more exclusive benefits",
+    "vipExpireTime": "VIP expires on",
+    "courseExpireTime": "Course expires on",
+    "notStarted": "Not started yet",
+    "unpurchasedTip": "You haven't purchased this catalogue or it has expired. Purchase or get VIP to access",
+    "pleaseGetCourse": "Please get the course first",
+    "pleasePurchase": "Please purchase first",
+    "getSuccess": "Get successfully",
+    "noChapters": "No chapters available",
+    "totalChapters": "Total {count} catalogues",
+    "expand": "Expand",
+    "collapse": "Collapse",
+    "selectPlan": "Select Plan",
+    "selectRenewPlan": "Select Renew Plan",
+    "noPurchaseOption": "No purchase option available",
+    "noRenewOption": "No renew option available",
+    "purchaseAgreement": "Notice",
+    "agreementContent": "Dear user, this software only allows one device to log in with one username and password. Using the same username on multiple devices is a violation. A warning will be issued for the first violation, and your account will be banned for repeated violations. We apologize for any inconvenience.",
+    "agree": "Agree",
+    "disagree": "Disagree",
+    "commentPlaceholder": "~ Be friendly and respectful ~",
+    "commentSubmit": "Submit",
+    "commentCancel": "Cancel",
+    "replyTo": "Reply to @",
+    "addEmoji": "Emoji",
+    "addImage": "Image",
+    "maxImages": "Maximum 3 images",
+    "publishSuccess": "Published successfully",
+    "publishFailed": "Failed to publish",
+    "pleaseInputContent": "Please enter content",
+    "loadMoreComments": "Load More",
+    "allLoaded": "All Loaded",
+    "noComments": "No comments yet",
+    "viewMoreReplies": "View more replies",
+    "copyright": "Copyright © Tianjin Zhongmiao Zhimen Technology Co., Ltd. All rights reserved!",
+    "courseInfo": "Course",
+    "chapterInfo": "Chapter",
+    "videoLoadFailed": "Video load failed",
+    "vipBenefit": "VIP benefit active"
+  },
+  "courseOrder": {
+    "orderTitle": "Order Confirmation",
+    "goodsInfo": "Product Information",
+    "shippingAddress": "Shipping Address",
+    "addAddress": "Add Address",
+    "goodsAmount": "Subtotal",
+    "freight": "Shipping",
+    "availablePoints": "Available Points",
+    "pointsDiscount": " points (deduct",
+    "orderTotal": "Total",
+    "total": "Total",
+    "submitOrder": "Submit Order",
+    "submitting": "Submitting...",
+    "quantity": "Quantity",
+    "vipPrice": "VIP Price",
+    "activityPrice": "Sale Price",
+    "pleaseSelectAddress": "Please select address",
+    "orderCreateSuccess": "Order created successfully",
+    "orderCreateFailed": "Failed to create order"
   }
 }
diff --git a/locale/zh-Hans.json b/locale/zh-Hans.json
index d3fbc45..0e9199d 100644
--- a/locale/zh-Hans.json
+++ b/locale/zh-Hans.json
@@ -323,5 +323,92 @@
     "required": "必修",
     "elective": "选修",
     "each": "各"
+  },
+  "courseDetails": {
+    "detail": "课程介绍",
+    "chapter": "教学内容",
+    "catalogue": "目录",
+    "chapterList": "章节",
+    "trial": "试听",
+    "learned": "已学",
+    "notLearned": "未学",
+    "locked": "未购买",
+    "purchase": "立即购买",
+    "renew": "续费",
+    "relearn": "复读",
+    "free": "领取课程",
+    "vipOnly": "VIP专享",
+    "openVip": "开通VIP",
+    "progress": "学习进度",
+    "relatedBooks": "相关书籍",
+    "comments": "留言板",
+    "publishComment": "发布留言",
+    "reply": "回复",
+    "like": "点赞",
+    "chapterIntro": "章节介绍",
+    "thinkingQuestion": "思考题",
+    "noQuestion": "暂无思考题",
+    "videoTeaching": "视频教学",
+    "autoPlayNext": "秒后自动播放下一个",
+    "cancelAutoPlay": "取消自动播放",
+    "vipTip": "购买VIP，即可畅享更多专属权益",
+    "vipExpireTime": "VIP畅学权益有效期截止到",
+    "courseExpireTime": "课程有效期截止到",
+    "notStarted": "当前目录还未开始学习",
+    "unpurchasedTip": "您未购买此目录课程或已到期，购买后或开通VIP即可学习本目录课程",
+    "pleaseGetCourse": "请先领取课程",
+    "pleasePurchase": "请先购买课程",
+    "getSuccess": "领取成功",
+    "noChapters": "暂无章节内容",
+    "totalChapters": "共{count}个目录",
+    "expand": "展开",
+    "collapse": "收起",
+    "selectPlan": "选择购买方案",
+    "selectRenewPlan": "选择复读方案",
+    "noPurchaseOption": "此课程暂无购买方式",
+    "noRenewOption": "暂无复读方案",
+    "purchaseAgreement": "温馨提示",
+    "agreementContent": "用户您好，本软件对于一个用户名及密码仅允许一部电子设备登陆，多部设备使用同一用户名操作软件的行为属于违规操作，发现违规一次将提出警告，再次违规您的用户名将被封号，无法正常登陆，如因此对您使用带来不便，敬请谅解。",
+    "agree": "同意",
+    "disagree": "不同意",
+    "commentPlaceholder": "~ 和谐社会 友善发言 ~",
+    "commentSubmit": "发 布",
+    "commentCancel": "取 消",
+    "replyTo": "回复@",
+    "addEmoji": "表情",
+    "addImage": "图片",
+    "maxImages": "最多可上传3张图片",
+    "publishSuccess": "发布成功",
+    "publishFailed": "发布失败",
+    "pleaseInputContent": "请输入内容",
+    "loadMoreComments": "加载更多",
+    "allLoaded": "已加载全部",
+    "noComments": "暂无留言数据",
+    "viewMoreReplies": "查看更多回复",
+    "copyright": "本课程版权归天津众妙之门科技有限公司所有，翻版必究!",
+    "courseInfo": "课程",
+    "chapterInfo": "章节",
+    "videoLoadFailed": "视频加载失败",
+    "vipBenefit": "VIP畅学权益生效中"
+  },
+  "courseOrder": {
+    "orderTitle": "确认订单",
+    "goodsInfo": "商品信息",
+    "shippingAddress": "收货地址",
+    "addAddress": "添加收货地址",
+    "goodsAmount": "商品金额",
+    "freight": "运费",
+    "availablePoints": "可用积分",
+    "pointsDiscount": "分（可抵扣",
+    "orderTotal": "订单总价",
+    "total": "合计",
+    "submitOrder": "提交订单",
+    "submitting": "提交中...",
+    "quantity": "数量",
+    "vipPrice": "VIP到手价",
+    "activityPrice": "活动价",
+    "pleaseSelectAddress": "请选择收货地址",
+    "orderCreateSuccess": "订单创建成功",
+    "orderCreateFailed": "订单创建失败"
   }
 }
diff --git a/pages.json b/pages.json
index 15a66c5..e00b8c0 100644
--- a/pages.json
+++ b/pages.json
@@ -133,6 +133,24 @@
 				"navigationStyle": "custom",
 				"navigationBarTitleText": "%courseHome.tryListen%"
 			}
+		}, {
+			"path": "pages/course/details/course",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "%courseDetails.detail%"
+			}
+		}, {
+			"path": "pages/course/details/chapter",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "%courseDetails.chapter%"
+			}
+		}, {
+			"path": "pages/course/order",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "%courseOrder.orderTitle%"
+			}
 		}
 	],
 	"tabBar": {
diff --git a/pages/course/details/chapter.vue b/pages/course/details/chapter.vue
new file mode 100644
index 0000000..e2ff638
--- /dev/null
+++ b/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>
diff --git a/pages/course/details/components/course-info.vue b/pages/course/details/components/course-info.vue
new file mode 100644
index 0000000..b6ffc3a
--- /dev/null
+++ b/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>
diff --git a/pages/course/details/course.vue b/pages/course/details/course.vue
new file mode 100644
index 0000000..e5f99e4
--- /dev/null
+++ b/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>
diff --git a/pages/course/index.vue b/pages/course/index.vue
index c2bb567..69051a1 100644
--- a/pages/course/index.vue
+++ b/pages/course/index.vue
@@ -173,7 +173,7 @@
           class="item"
           v-for="(item, index) in tryListenList"
           :key="item.id"
-          @click="onPageJump('/pages/course/courseDetail', item.id, item.title)"
+          @click="onPageJump('/pages/course/details/course', item.id, item.title)"
         >
           <view class="imgcontainer">
             <image
diff --git a/pages/course/list/components/list-item.vue b/pages/course/list/components/list-item.vue
index e1bcf2f..c057ff2 100644
--- a/pages/course/list/components/list-item.vue
+++ b/pages/course/list/components/list-item.vue
@@ -94,7 +94,7 @@ const formatCatalogueTitle = (title: string): string => {
  */
 const goCourseDetail = (courseId: number) => {
   uni.navigateTo({
-    url: `/pages/course/courseDetail?id=${courseId}`
+    url: `/pages/course/details/course?id=${courseId}`
   })
 }
 </script>
diff --git a/pages/course/order.vue b/pages/course/order.vue
new file mode 100644
index 0000000..0cd5ebb
--- /dev/null
+++ b/pages/course/order.vue
@@ -0,0 +1,672 @@
+<template>
+  <view class="course-order-page">
+    <!-- 自定义导航栏 -->
+    <nav-bar :title="$t('courseOrder.orderTitle')" />
+    
+    <!-- 页面内容 -->
+    <view class="page-content">
+      <!-- 商品列表 -->
+      <view class="goods-section">
+        <view class="section-title">商品信息</view>
+        <view
+          v-for="(item, index) in goodsList"
+          :key="index"
+          class="goods-item"
+        >
+          <view class="goods-image">
+            <!-- VIP优惠标签 -->
+            <view
+              v-if="item.isVipPrice === 1 && item.vipPrice"
+              class="vip-badge"
+            >
+              VIP优惠
+            </view>
+            <image
+              :src="item.productImages || '/static/nobg.jpg'"
+              mode="aspectFit"
+            />
+          </view>
+          
+          <view class="goods-info">
+            <text class="goods-name">{{ item.productName }}</text>
+            
+            <!-- 价格信息 -->
+            <view class="price-info">
+              <!-- VIP优惠价 -->
+              <view v-if="item.isVipPrice === 1 && item.vipPrice" class="price-row">
+                <text class="vip-price">￥{{ item.vipPrice.toFixed(2) }}</text>
+                <text class="vip-label">VIP到手价</text>
+                <text class="original-price">￥{{ item.price.toFixed(2) }}</text>
+              </view>
+              
+              <!-- 活动价 -->
+              <view v-else-if="item.activityPrice && item.activityPrice > 0" class="price-row">
+                <text class="activity-price">￥{{ item.activityPrice.toFixed(2) }}</text>
+                <text class="activity-label">活动价</text>
+                <text class="original-price">￥{{ item.price.toFixed(2) }}</text>
+              </view>
+              
+              <!-- 普通价格 -->
+              <view v-else class="price-row">
+                <text class="normal-price">￥{{ item.price.toFixed(2) }}</text>
+              </view>
+            </view>
+            
+            <!-- 数量 -->
+            <view class="quantity">
+              <text>数量：{{ item.productAmount || 1 }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 收货地址（仅实体商品显示） -->
+      <view v-if="!isHideAddress" class="address-section">
+        <view class="section-title">收货地址</view>
+        <view v-if="selectedAddress" class="address-info" @click="selectAddress">
+          <view class="address-row">
+            <text class="name">{{ selectedAddress.name }}</text>
+            <text class="phone">{{ selectedAddress.phone }}</text>
+          </view>
+          <view class="address-detail">
+            {{ selectedAddress.province }} {{ selectedAddress.city }} {{ selectedAddress.district }} {{ selectedAddress.detail }}
+          </view>
+        </view>
+        <view v-else class="no-address" @click="selectAddress">
+          <wd-icon name="add-circle" size="24px" />
+          <text>添加收货地址</text>
+        </view>
+      </view>
+      
+      <!-- 订单信息 -->
+      <view class="order-info-section">
+        <view class="info-row">
+          <text class="label">商品金额</text>
+          <text class="value">￥{{ goodsAmount.toFixed(2) }}</text>
+        </view>
+        <view v-if="!isHideAddress" class="info-row">
+          <text class="label">运费</text>
+          <text class="value">￥{{ freight.toFixed(2) }}</text>
+        </view>
+        <view v-if="availablePoints > 0" class="info-row">
+          <text class="label">可用积分</text>
+          <text class="value">{{ availablePoints }} 分（可抵扣 ￥{{ pointsDiscount.toFixed(2) }}）</text>
+        </view>
+      </view>
+      
+      <!-- 订单总价 -->
+      <view class="total-section">
+        <view class="total-row">
+          <text class="label">订单总价</text>
+          <text class="value">￥{{ totalAmount.toFixed(2) }}</text>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 底部操作栏 -->
+    <view class="bottom-bar">
+      <view class="total-info">
+        <text class="label">合计：</text>
+        <text class="amount">￥{{ totalAmount.toFixed(2) }}</text>
+      </view>
+      <wd-button
+        type="primary"
+        :loading="submitting"
+        @click="submitOrder"
+      >
+        提交订单
+      </wd-button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useUserStore } from '@/stores/user'
+import NavBar from '@/components/nav-bar/nav-bar.vue'
+import type { IOrderGoods, IOrderInitData } from '@/types/course'
+
+interface OrderData {
+  goods: IOrderGoods[]
+  typeId?: number
+  navTitle?: string
+  title?: string
+  isFudu?: boolean
+  fuduId?: number
+  isVip?: boolean
+}
+
+// Stores
+const userStore = useUserStore()
+
+// 页面数据
+const orderData = ref<OrderData>({
+  goods: []
+})
+const goodsList = ref<IOrderGoods[]>([])
+const initData = ref<IOrderInitData | null>(null)
+const selectedAddress = ref<any>(null)
+const isHideAddress = ref(false)
+const availablePoints = ref(0)
+const freight = ref(0)
+const submitting = ref(false)
+
+/**
+ * 商品金额
+ */
+const goodsAmount = computed(() => {
+  return goodsList.value.reduce((sum, item) => {
+    const price = item.isVipPrice === 1 && item.vipPrice 
+      ? item.vipPrice 
+      : item.activityPrice || item.price
+    return sum + price * (item.productAmount || 1)
+  }, 0)
+})
+
+/**
+ * 积分抵扣金额
+ */
+const pointsDiscount = computed(() => {
+  // 假设100积分可抵扣1元
+  return Math.min(availablePoints.value / 100, goodsAmount.value * 0.1)
+})
+
+/**
+ * 订单总价
+ */
+const totalAmount = computed(() => {
+  return Math.max(0, goodsAmount.value + freight.value - pointsDiscount.value)
+})
+
+/**
+ * 页面加载
+ */
+onLoad(async (options: any) => {
+  if (options.data) {
+    try {
+      orderData.value = JSON.parse(decodeURIComponent(options.data))
+      goodsList.value = orderData.value.goods || []
+      
+      await initOrder()
+    } catch (error) {
+      console.error('解析订单数据失败:', error)
+      uni.showToast({
+        title: '订单数据错误',
+        icon: 'none'
+      })
+    }
+  }
+})
+
+/**
+ * 初始化订单
+ */
+const initOrder = async () => {
+  try {
+    uni.showLoading({ title: '加载中...' })
+    
+    // 根据订单类型调用不同的初始化接口
+    if (orderData.value.isVip) {
+      // VIP订单
+      await initVipOrder()
+    } else if (orderData.value.isFudu) {
+      // 复读订单
+      await initFuduOrder()
+    } else {
+      // 普通订单
+      await initNormalOrder()
+    }
+  } catch (error) {
+    console.error('初始化订单失败:', error)
+  } finally {
+    uni.hideLoading()
+  }
+}
+
+/**
+ * 初始化普通订单
+ */
+const initNormalOrder = async () => {
+  try {
+    const res = await uni.request({
+      url: uni.getStorageSync('baseURL') + 'common/buyOrder/initPrepareOrder',
+      method: 'POST',
+      header: {
+        'Content-Type': 'application/json',
+        'token': userStore.token
+      },
+      data: {
+        uid: userStore.userInfo.id,
+        productList: goodsList.value.map(item => ({
+          productId: item.productId,
+          quantity: item.productAmount || 1
+        }))
+      }
+    })
+    
+    const data = res.data as any
+    if (data.code === 0 && data.data) {
+      initData.value = data.data
+      isHideAddress.value = data.data.is_course || false
+      availablePoints.value = data.data.user?.jf || 0
+      
+      // 如果有默认地址，设置为选中地址
+      if (data.data.addressList && data.data.addressList.length > 0) {
+        selectedAddress.value = data.data.addressList.find((addr: any) => addr.isDefault === 1) 
+          || data.data.addressList[0]
+      }
+    }
+  } catch (error) {
+    console.error('初始化普通订单失败:', error)
+  }
+}
+
+/**
+ * 初始化复读订单
+ */
+const initFuduOrder = async () => {
+  // 复读订单不需要地址
+  isHideAddress.value = true
+  
+  // 获取用户信息
+  try {
+    const res = await uni.request({
+      url: uni.getStorageSync('baseURL') + 'common/user/getUserInfo',
+      method: 'POST',
+      header: {
+        'Content-Type': 'application/json',
+        'token': userStore.token
+      },
+      data: {}
+    })
+    
+    const data = res.data as any
+    if (data.code === 0 && data.result) {
+      initData.value = {
+        user: data.result,
+        is_course: true
+      }
+      availablePoints.value = data.result.jf || 0
+    }
+  } catch (error) {
+    console.error('获取用户信息失败:', error)
+  }
+}
+
+/**
+ * 初始化VIP订单
+ */
+const initVipOrder = async () => {
+  // VIP订单不需要地址
+  isHideAddress.value = true
+  
+  // 获取用户信息
+  try {
+    const res = await uni.request({
+      url: uni.getStorageSync('baseURL') + 'common/user/getUserInfo',
+      method: 'POST',
+      header: {
+        'Content-Type': 'application/json',
+        'token': userStore.token
+      },
+      data: {}
+    })
+    
+    const data = res.data as any
+    if (data.code === 0 && data.result) {
+      initData.value = {
+        user: data.result,
+        is_course: true
+      }
+      // VIP订单不使用积分
+      availablePoints.value = 0
+    }
+  } catch (error) {
+    console.error('获取用户信息失败:', error)
+  }
+}
+
+/**
+ * 选择地址
+ */
+const selectAddress = () => {
+  // 跳转到地址选择页面
+  uni.navigateTo({
+    url: '/pages/user/address/list'
+  })
+}
+
+/**
+ * 提交订单
+ */
+const submitOrder = async () => {
+  // 验证
+  if (!isHideAddress.value && !selectedAddress.value) {
+    uni.showToast({
+      title: '请选择收货地址',
+      icon: 'none'
+    })
+    return
+  }
+  
+  try {
+    submitting.value = true
+    
+    let orderUrl = ''
+    let orderParams: any = {}
+    
+    if (orderData.value.isVip) {
+      // VIP订单
+      orderUrl = 'common/userVip/placeVipOrder'
+      orderParams = {
+        vipConfigId: goodsList.value[0].productId,
+        payType: 1 // 默认支付方式
+      }
+    } else if (orderData.value.isFudu) {
+      // 复读订单
+      orderUrl = 'common/courseRelearn/relearnSave'
+      orderParams = {
+        catalogueId: orderData.value.fuduId,
+        productId: goodsList.value[0].productId,
+        quantity: 1
+      }
+    } else {
+      // 普通订单
+      orderUrl = 'book/buyOrder/placeOrder'
+      orderParams = {
+        uid: userStore.userInfo.id,
+        addressId: selectedAddress.value?.id,
+        productList: goodsList.value.map(item => ({
+          productId: item.productId,
+          quantity: item.productAmount || 1
+        })),
+        usePoints: pointsDiscount.value > 0
+      }
+    }
+    
+    const res = await uni.request({
+      url: uni.getStorageSync('baseURL') + orderUrl,
+      method: 'POST',
+      header: {
+        'Content-Type': 'application/json',
+        'token': userStore.token
+      },
+      data: orderParams
+    })
+    
+    const data = res.data as any
+    if (data.code === 0) {
+      uni.showToast({
+        title: '订单创建成功',
+        icon: 'success'
+      })
+      
+      // 跳转到支付页面或订单详情
+      setTimeout(() => {
+        uni.redirectTo({
+          url: `/pages/user/order/index`
+        })
+      }, 1500)
+    } else {
+      uni.showToast({
+        title: data.errMsg || '订单创建失败',
+        icon: 'none'
+      })
+    }
+  } catch (error) {
+    console.error('提交订单失败:', error)
+    uni.showToast({
+      title: '提交失败',
+      icon: 'none'
+    })
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.course-order-page {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding-bottom: 120rpx;
+}
+
+.page-content {
+  padding: 20rpx;
+}
+
+.section-title {
+  font-size: 30rpx;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 20rpx;
+}
+
+.goods-section {
+  background-color: #fff;
+  padding: 20rpx;
+  border-radius: 12rpx;
+  margin-bottom: 20rpx;
+  
+  .goods-item {
+    display: flex;
+    padding: 20rpx 0;
+    border-bottom: 1px solid #f0f0f0;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    .goods-image {
+      position: relative;
+      width: 140rpx;
+      height: 140rpx;
+      flex-shrink: 0;
+      margin-right: 20rpx;
+      background-color: #f5f5f5;
+      border-radius: 8rpx;
+      overflow: hidden;
+      
+      .vip-badge {
+        position: absolute;
+        top: 0;
+        left: 0;
+        padding: 4rpx 10rpx;
+        background-color: #f94f04;
+        color: #fff;
+        font-size: 20rpx;
+        border-radius: 8rpx 0 8rpx 0;
+        z-index: 1;
+      }
+      
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    
+    .goods-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      
+      .goods-name {
+        font-size: 28rpx;
+        color: #333;
+        line-height: 1.4;
+        margin-bottom: 10rpx;
+      }
+      
+      .price-info {
+        .price-row {
+          display: flex;
+          align-items: baseline;
+          gap: 10rpx;
+          
+          .vip-price,
+          .activity-price {
+            font-size: 32rpx;
+            font-weight: bold;
+            color: #e97512;
+          }
+          
+          .normal-price {
+            font-size: 32rpx;
+            font-weight: bold;
+            color: #333;
+          }
+          
+          .vip-label {
+            font-size: 22rpx;
+            color: #fa2d12;
+          }
+          
+          .activity-label {
+            font-size: 22rpx;
+            color: #613804;
+          }
+          
+          .original-price {
+            font-size: 24rpx;
+            color: #999;
+            text-decoration: line-through;
+          }
+        }
+      }
+      
+      .quantity {
+        font-size: 24rpx;
+        color: #999;
+      }
+    }
+  }
+}
+
+.address-section {
+  background-color: #fff;
+  padding: 20rpx;
+  border-radius: 12rpx;
+  margin-bottom: 20rpx;
+  
+  .address-info {
+    padding: 20rpx;
+    background-color: #f7f8f9;
+    border-radius: 8rpx;
+    
+    .address-row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 10rpx;
+      
+      .name {
+        font-size: 28rpx;
+        font-weight: 500;
+        color: #333;
+      }
+      
+      .phone {
+        font-size: 28rpx;
+        color: #666;
+      }
+    }
+    
+    .address-detail {
+      font-size: 26rpx;
+      color: #666;
+      line-height: 1.5;
+    }
+  }
+  
+  .no-address {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10rpx;
+    padding: 40rpx 20rpx;
+    background-color: #f7f8f9;
+    border-radius: 8rpx;
+    color: #999;
+    font-size: 28rpx;
+  }
+}
+
+.order-info-section {
+  background-color: #fff;
+  padding: 20rpx;
+  border-radius: 12rpx;
+  margin-bottom: 20rpx;
+  
+  .info-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 15rpx 0;
+    font-size: 28rpx;
+    
+    .label {
+      color: #666;
+    }
+    
+    .value {
+      color: #333;
+      font-weight: 500;
+    }
+  }
+}
+
+.total-section {
+  background-color: #fff;
+  padding: 20rpx;
+  border-radius: 12rpx;
+  
+  .total-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+    .label {
+      font-size: 30rpx;
+      color: #333;
+      font-weight: 500;
+    }
+    
+    .value {
+      font-size: 36rpx;
+      color: #ff4444;
+      font-weight: bold;
+    }
+  }
+}
+
+.bottom-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20rpx;
+  background-color: #fff;
+  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
+  z-index: 999;
+  
+  .total-info {
+    flex: 1;
+    
+    .label {
+      font-size: 28rpx;
+      color: #666;
+    }
+    
+    .amount {
+      font-size: 36rpx;
+      color: #ff4444;
+      font-weight: bold;
+      margin-left: 10rpx;
+    }
+  }
+}
+</style>
diff --git a/stores/course.ts b/stores/course.ts
new file mode 100644
index 0000000..b38dc26
--- /dev/null
+++ b/stores/course.ts
@@ -0,0 +1,142 @@
+// stores/course.ts
+import { defineStore } from 'pinia'
+import { courseApi } from '@/api/modules/course'
+import type { ICourseDetail, ICatalogue, IChapter, IVipInfo } from '@/types/course'
+
+interface CourseState {
+  currentCourse: ICourseDetail | null
+  catalogueList: ICatalogue[]
+  currentCatalogueIndex: number
+  chapterList: IChapter[]
+  userVip: IVipInfo | null
+  learningProgress: number
+}
+
+export const useCourseStore = defineStore('course', {
+  state: (): CourseState => ({
+    currentCourse: null,
+    catalogueList: [],
+    currentCatalogueIndex: 0,
+    chapterList: [],
+    userVip: null,
+    learningProgress: 0,
+  }),
+
+  getters: {
+    /**
+     * 获取当前选中的目录
+     */
+    currentCatalogue: (state): ICatalogue | null => {
+      if (state.catalogueList.length === 0) return null
+      return state.catalogueList[state.currentCatalogueIndex] || null
+    },
+
+    /**
+     * 判断当前目录是否已购买
+     */
+    isCurrentCataloguePurchased: (state): boolean => {
+      const catalogue = state.catalogueList[state.currentCatalogueIndex]
+      return catalogue ? catalogue.isBuy === 1 : false
+    },
+
+    /**
+     * 判断用户是否为VIP
+     */
+    isVip: (state): boolean => {
+      return state.userVip !== null
+    },
+  },
+
+  actions: {
+    /**
+     * 获取课程详情
+     * @param courseId 课程ID
+     */
+    async fetchCourseDetail(courseId: number) {
+      try {
+        const res = await courseApi.getCourseDetail(courseId)
+        if (res.code === 0 && res.data) {
+          this.currentCourse = res.data.course
+          this.catalogueList = res.data.catalogues || []
+          
+          // 计算学习进度
+          if (this.catalogueList.length > 0) {
+            const totalProgress = this.catalogueList.reduce((sum, cat) => sum + cat.completion, 0)
+            this.learningProgress = Number((totalProgress / this.catalogueList.length).toFixed(2))
+          } else {
+            this.learningProgress = 0
+          }
+        }
+        return res
+      } catch (error) {
+        console.error('获取课程详情失败:', error)
+        throw error
+      }
+    },
+
+    /**
+     * 切换目录
+     * @param index 目录索引
+     */
+    async switchCatalogue(index: number) {
+      if (index < 0 || index >= this.catalogueList.length) {
+        console.warn('目录索引超出范围')
+        return
+      }
+      
+      this.currentCatalogueIndex = index
+      const catalogue = this.catalogueList[index]
+      
+      // 获取该目录的章节列表
+      await this.fetchChapterList(catalogue.id)
+    },
+
+    /**
+     * 获取章节列表
+     * @param catalogueId 目录ID
+     */
+    async fetchChapterList(catalogueId: number) {
+      try {
+        const res = await courseApi.getCatalogueChapterList(catalogueId)
+        if (res.code === 0) {
+          this.chapterList = res.chapterList || []
+        }
+        return res
+      } catch (error) {
+        console.error('获取章节列表失败:', error)
+        this.chapterList = []
+        throw error
+      }
+    },
+
+    /**
+     * 检查用户VIP权益
+     * @param courseId 课程ID
+     */
+    async checkVipStatus(courseId: number) {
+      try {
+        const res = await courseApi.checkCourseVip(courseId)
+        if (res.code === 0) {
+          this.userVip = res.userVip || null
+        }
+        return res
+      } catch (error) {
+        console.error('检查VIP权益失败:', error)
+        this.userVip = null
+        throw error
+      }
+    },
+
+    /**
+     * 重置课程状态
+     */
+    resetCourseState() {
+      this.currentCourse = null
+      this.catalogueList = []
+      this.currentCatalogueIndex = 0
+      this.chapterList = []
+      this.userVip = null
+      this.learningProgress = 0
+    },
+  },
+})
diff --git a/style/tailwind.css b/style/tailwind.css
index dbb1504..1a56278 100644
--- a/style/tailwind.css
+++ b/style/tailwind.css
@@ -258,6 +258,9 @@
   .bg-\[transparent\] {
     background-color: transparent;
   }
+  .pt-\[40px\] {
+    padding-top: 40px;
+  }
   .text-center {
     text-align: center;
   }
@@ -324,7 +327,7 @@
     display: inline-block;
   }
   button {
-    line-height: inherit;
+    line-height: inherit !important;
   }
 }
 @property --tw-rotate-x {
diff --git a/style/ui.scss b/style/ui.scss
index f4247d3..119a59c 100644
--- a/style/ui.scss
+++ b/style/ui.scss
@@ -108,12 +108,12 @@ uni-textarea {
 }
 
 // popup
-// .wd-popup {
-// 	z-index: 9999 !important;
-// }
-// .wd-overlay {
-// 	z-index: 9998 !important;
-// }
+.wd-popup {
+	z-index: 9999 !important;
+}
+.wd-overlay {
+	z-index: 9998 !important;
+}
 
 // uni-ui form
 // .uni-forms-item {
diff --git a/tailwind-input.css b/tailwind-input.css
index 2d2d549..b4cd3f5 100644
--- a/tailwind-input.css
+++ b/tailwind-input.css
@@ -8,6 +8,6 @@
     display: inline-block;
   }
   button {
-    line-height: inherit;
+    line-height: inherit !important;
   }
 }
\ No newline at end of file
diff --git a/types/comment.d.ts b/types/comment.d.ts
new file mode 100644
index 0000000..52f45fa
--- /dev/null
+++ b/types/comment.d.ts
@@ -0,0 +1,43 @@
+// types/comment.d.ts
+/**
+ * 通用评论类型定义
+ * 用于课程和图书的评论功能
+ */
+
+import type { IApiResponse } from './book'
+
+/** 用户信息（评论中使用） */
+export interface ICommentUser {
+  id: number
+  name: string
+  avatar?: string
+}
+
+/** 通用评论数据结构 */
+export interface IComment {
+  id: number
+  user: ICommentUser
+  content: string
+  images: string              // 图片URL，逗号分隔
+  imgList: string[]           // 图片URL数组
+  createTime: string
+  support: boolean            // 当前用户是否已点赞
+  supportCount: number        // 点赞数
+  children: IComment[]        // 所有子评论
+  Bchildren: IComment[]       // 显示的子评论（最多5条）
+}
+
+/** 评论列表响应 */
+export interface ICommentListResponse extends IApiResponse {
+  page: {
+    records: IComment[]
+    total: number
+    pages: number
+  }
+}
+
+/** 添加评论响应 */
+export interface IAddCommentResponse extends IApiResponse {
+  courseGuestbook?: IComment  // 课程评论
+  bookComment?: IComment      // 图书评论
+}
diff --git a/types/course.d.ts b/types/course.d.ts
index 467cc87..9d2e3c6 100644
--- a/types/course.d.ts
+++ b/types/course.d.ts
@@ -51,3 +51,112 @@ export interface IMarketCourseListResponse extends IApiResponse {
 export interface IMessageListResponse extends IApiResponse {
   messages: INews[]             // 消息列表
 }
+
+/** 课程详情 */
+export interface ICourseDetail {
+  id: number
+  title: string
+  image: string
+  content: string
+  canzk: string                    // 是否支持自考 0-否 1-是
+}
+
+/** 课程目录 */
+export interface ICatalogue {
+  id: number
+  title: string
+  type: number                     // 0-免费 1-付费 2-VIP专享
+  isBuy: number                    // 是否已购买 0-否 1-是
+  startTime: string | null         // 开始学习时间
+  endTime: string | null           // 到期时间
+  completion: number               // 学习进度百分比
+}
+
+/** 章节信息 */
+export interface IChapter {
+  id: number
+  title: string
+  isAudition: number               // 是否试听 0-否 1-是
+  isLearned: number                // 是否已学 0-否 1-是
+  conditions: string
+  imgUrl?: string
+}
+
+/** 章节详情 */
+export interface IChapterDetail {
+  id: number
+  title: string
+  imgUrl: string
+  content: string
+  questions: string                // 思考题内容
+}
+
+/** 视频信息 */
+export interface IVideo {
+  id: number
+  title: string
+  url: string
+  duration?: number
+}
+
+/** VIP信息 */
+export interface IVipInfo {
+  type: number                     // VIP类型 4-中医学 5-针灸学 6-肿瘤学 7-国学 8-心理学 9-中西汇通学
+  endTime: string                  // 到期时间
+}
+
+/** 商品信息 */
+export interface IGoods {
+  productId: number
+  productName: string
+  productImages: string
+  price: number
+  vipPrice: number | null
+  activityPrice: number | null
+  isVipPrice: number               // 是否有VIP优惠 0-否 1-是
+  productAmount: number            // 购买数量
+  delFlag?: number                 // 删除标记 -1-已下架
+}
+
+/** 订单商品 */
+export interface IOrderGoods extends IGoods {
+  // 继承商品信息
+}
+
+/** 订单初始化数据 */
+export interface IOrderInitData {
+  user: {
+    id: number
+    name: string
+    jf: number                     // 积分
+  }
+  is_course: boolean               // 是否为课程订单
+}
+
+/** 课程详情响应 */
+export interface ICourseDetailResponse extends IApiResponse {
+  data: {
+    course: ICourseDetail
+    catalogues: ICatalogue[]
+    shopProductList?: IGoods[]     // 相关书籍
+  }
+}
+
+/** 章节列表响应 */
+export interface IChapterListResponse extends IApiResponse {
+  chapterList: IChapter[]
+}
+
+/** 章节详情响应 */
+export interface IChapterDetailResponse extends IApiResponse {
+  data: {
+    detail: IChapterDetail
+    videos: IVideo[]
+    current?: number               // 当前播放视频ID
+  }
+}
+
+/** 商品列表响应 */
+export interface IProductListResponse extends IApiResponse {
+  productList: IGoods[]
+}