更新：提取公共选择商品组件

pages/course/details/chapter.vue

@@ -111,7 +111,6 @@ 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'
 
 // 页面参数

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

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

pages/course/details/course.vue

@@ -158,14 +158,15 @@ import { onLoad, onPageScroll, onPullDownRefresh, onReachBottom } from '@dcloudi
 import { useCourseStore } from '@/stores/course'
 import { useUserStore } from '@/stores/user'
 import { courseApi } from '@/api/modules/course'
-import CourseInfo from './components/course-info.vue'
+import CourseInfo from '@/components/course/CourseInfo.vue'
 import CatalogueList from '@/components/course/CatalogueList.vue'
 import ChapterList from '@/components/course/ChapterList.vue'
-import GoodsSelector from '@/components/course/GoodsSelector.vue'
+import GoodsSelector from '@/components/order/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 { ICourseDetail, ICatalogue, IChapter, IVipInfo } from '@/types/course'
+import type { IGoods } from '@/types/order'
 import type { IComment } from '@/types/comment'
 
 // Stores

pages/course/index.vue

@@ -117,7 +117,7 @@
           class="item"
           v-for="(item, index) in learnList"
           :key="item.id"
-          @click="onPageJump('/pages/course/courseDetail', item.id)"
+          @click="onPageJump('/pages/course/details/course', item.id, item.title)"
         >
           <view class="img" style="overflow: hidden">
             <image