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

pages/book/detail.vue

@@ -43,10 +43,10 @@
       <view v-if="!isIOS" class="comments-section">
         <view class="section-header">
           <text class="section-title">{{ $t('bookDetails.message') }}</text>
-          <text v-if="commentList.length > 0" class="more-link" @click="goToReview">
-            {{ $t('bookDetails.more') }}
+          <view v-if="commentList.length > 0" class="more-link" @click="goToReview">
+            <text>{{ $t('bookDetails.more') }}</text>
             <wd-icon name="arrow-right" size="14px" />
-          </text>
+          </view>
         </view>
         <view class="comment-wrapper">
           <CommentList 
@@ -108,7 +108,13 @@
     </view>
     
     <!-- 购买弹窗 -->
-    <wd-popup v-model="purchaseVisible" position="bottom">
+    <GoodsSelector
+      :show="purchaseVisible"
+      :goods="goodsList"
+      @confirm="handlePurchase"
+      @close="closePurchasePopup"
+    />
+    <!-- <wd-popup v-model="purchaseVisible" position="bottom">
       <view class="purchase-popup">
         <view class="book-info-mini">
           <image :src="bookInfo.images" mode="aspectFill" />
@@ -132,7 +138,7 @@
           {{ $t('bookDetails.buy') }}
         </wd-button>
       </view>
-    </wd-popup>
+    </wd-popup> -->
   </view>
 </template>
 
@@ -142,7 +148,8 @@ import { onLoad, onShow } from '@dcloudio/uni-app'
 import { useI18n } from 'vue-i18n'
 import { bookApi } from '@/api/modules/book'
 import type { IBookDetail, IBook, IComment } from '@/types/book'
-import CustomNavbar from '@/components/book/CustomNavbar.vue'
+import type { IGoods } from '@/types/order'
+import GoodsSelector from '@/components/order/GoodsSelector.vue'
 import CommentList from '@/components/book/CommentList.vue'
 
 const { t } = useI18n()
@@ -160,6 +167,7 @@ const bookInfo = ref<IBookDetail>({
   isBuy: false,
   freeChapterCount: 0
 })
+const goodsList = ref<IGoods[]>([])
 const readCount = ref(0)
 const listenCount = ref(0)
 const buyCount = ref(0)
@@ -226,6 +234,16 @@ async function loadBookInfo() {
     
     if (res.bookInfo) {
       bookInfo.value = res.bookInfo
+      goodsList.value = [{
+        productId: bookId.value,
+        productName: bookInfo.value.name,
+        productImages: bookInfo.value.images,
+        price: bookInfo.value.priceData?.dictValue || 0,
+        vipPrice: null,
+        activityPrice: null,
+        isVipPrice: 0,
+        productAmount: 1,
+      }]
     }
   } catch (error) {
     console.error('Failed to load book info:', error)
@@ -281,6 +299,11 @@ function showPurchasePopup() {
   purchaseVisible.value = true
 }
 
+// 关闭购买弹窗
+function closePurchasePopup() {
+  purchaseVisible.value = false
+}
+
 // 处理购买
 function handlePurchase() {
   uni.navigateTo({

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