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

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>

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>

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>

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>