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

components/course/ChapterList.vue

@@ -134,7 +134,8 @@ interface Props {
 const props = defineProps<Props>()
 
 const emit = defineEmits<{
-  click: [chapter: IChapter]
+  click: [chapter: IChapter],
+  purchase: [catalogue: ICatalogue],
 }>()
 
 /**

components/order/GoodsSelector.vue

@@ -2,16 +2,21 @@
   <wd-popup 
     v-model="visible" 
     position="bottom"
-    :close-on-click-modal="true"
     @close="handleClose"
   >
     <view class="goods-selector">
-      <view class="selector-header">
+      <view v-if="selectedIndex !== -1" class="goods-info-mini">
-        <text class="title">{{ isFudu ? '选择复读方案' : '选择购买方案' }}</text>
+        <image :src="goods[selectedIndex].productImages" mode="aspectFit" class="goods-cover" />
-        <wd-icon name="close" @click="handleClose" />
+        <view class="info">
+          <text class="name">{{ goods[selectedIndex].productName }}</text>
+          <text v-if="selectedGoodsPrice" class="price">NZ$ {{ selectedGoodsPrice }}</text>
+        </view>
       </view>
       
       <!-- 商品列表 -->
+      <view class="selector-header">
+        <text class="title">{{ isFudu ? t('order.selectFuduScheme') : t('order.selectPurchaseScheme') }}</text>
+      </view>
       <view class="goods-list">
         <view
           v-for="(item, index) in goods"
@@ -19,46 +24,35 @@
           :class="['goods-item', selectedIndex === index ? 'selected' : '']"
           @click="selectGoods(index)"
         >
+          <image :src="item.productImages" mode="aspectFit" class="goods-cover" />
           <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-price">NZ$ {{ parseFloat(item.vipPrice).toFixed(2) }}</text>
               <text class="vip-label">VIP到手价</text>
-              <text class="original-price">￥{{ item.price.toFixed(2) }}</text>
+              <text class="original-price">NZ$ {{ parseFloat(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-price">NZ$ {{ parseFloat(item.activityPrice).toFixed(2) }}</text>
               <text class="activity-label">活动价</text>
-              <text class="original-price">￥{{ item.price.toFixed(2) }}</text>
+              <text class="original-price">NZ$ {{ parseFloat(item.price).toFixed(2) }}</text>
             </view>
             
             <!-- 普通价格 -->
             <view v-else class="price-info">
-              <text class="normal-price">￥{{ item.price.toFixed(2) }}</text>
+              <text class="normal-price">NZ$ {{ parseFloat(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 
+        <wd-button type="primary" block :disabled="selectedIndex === -1" @click="handleConfirm">立即购买</wd-button>
-          type="primary" 
-          block
-          @click="handleConfirm"
-          :disabled="selectedIndex === -1"
-        >
-          立即购买
-        </wd-button>
       </view>
     </view>
   </wd-popup>
@@ -66,7 +60,10 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import type { IGoods } from '@/types/course'
+import { useI18n } from 'vue-i18n'
+import type { IGoods } from '@/types/order'
+
+const { t } = useI18n()
 
 interface Props {
   show: boolean
@@ -84,12 +81,23 @@ const emit = defineEmits<{
 
 const visible = computed({
   get: () => props.show,
-  set: (val) => {
+  set: (val: boolean) => {
     if (!val) emit('close')
   }
 })
 
 const selectedIndex = ref(-1)
+// 选中商品的价格
+const selectedGoodsPrice = computed(() => {
+  if (selectedIndex.value === -1) return 0
+  const selectedGoods = props.goods[selectedIndex.value]
+  if (selectedGoods.isVipPrice === 1 && selectedGoods.vipPrice) {
+    return parseFloat(selectedGoods.vipPrice).toFixed(2)
+  } else if (selectedGoods.activityPrice && selectedGoods.activityPrice > 0) {
+    return parseFloat(selectedGoods.activityPrice).toFixed(2)
+  }
+  return parseFloat(selectedGoods.price).toFixed(2)
+})
 
 /**
  * 选择商品
@@ -122,7 +130,7 @@ const handleClose = () => {
 }
 
 // 监听显示状态，重置选择
-watch(() => props.show, (newVal) => {
+watch(() => props.show, (newVal: boolean) => {
   if (newVal && props.goods.length > 0) {
     // 默认选中第一个
     selectedIndex.value = 0
@@ -135,7 +143,7 @@ watch(() => props.show, (newVal) => {
 
 <style lang="scss" scoped>
 .goods-selector {
-  padding: 30rpx;
+  padding: 15px;
   background-color: #fff;
   max-height: 80vh;
   overflow-y: auto;
@@ -145,37 +153,81 @@ watch(() => props.show, (newVal) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 30rpx;
+  margin-bottom: 10px;
   
   .title {
-    font-size: 32rpx;
+    font-size: 14px;
     font-weight: 500;
     color: #333;
   }
 }
 
+.goods-info-mini {
+  display: flex;
+  align-items: center;
+  margin: 5px 0 10px;
+  
+  .goods-cover {
+    max-width: 80px;
+    max-height: 80px;
+    border-radius: 10rpx;
+    background-color: #f5f5f5;
+  }
+  
+  .info {
+    flex: 1;
+    padding-left: 10px;
+    
+    .name {
+      display: block;
+      font-size: 30rpx;
+      line-height: 38rpx;
+      color: #333;
+      max-height: 76rpx;
+      overflow: hidden;
+    }
+    
+    .price {
+      display: block;
+      padding-top: 20rpx;
+      font-size: 36rpx;
+      color: #ff4703;
+      font-weight: bold;
+    }
+  }
+}
+
 .goods-list {
-  margin-bottom: 30rpx;
+  margin-bottom: 15px;
   
   .goods-item {
     position: relative;
-    padding: 30rpx;
+    padding: 5px 10px;
-    margin-bottom: 20rpx;
+    margin-bottom: 10px;
-    border: 2rpx solid #e5e5e5;
+    border: 1px solid #e5e5e5;
-    border-radius: 12rpx;
+    border-radius: 6px;
     transition: all 0.3s;
+    display: flex;
+    align-items: center;
     
     &.selected {
       border-color: #258feb;
       background-color: #f0f8ff;
     }
+
+    .goods-cover {
+      max-width: 40px;
+      max-height: 40px;
+      border-radius: 6px;
+      margin-right: 10px;
+      background-color: #f5f5f5;
+    }
     
     .goods-info {
       .goods-name {
         display: block;
-        font-size: 30rpx;
+        font-size: 14px;
         color: #333;
-        margin-bottom: 15rpx;
         line-height: 1.4;
       }
       
@@ -185,48 +237,32 @@ watch(() => props.show, (newVal) => {
         gap: 10rpx;
         
         .vip-price,
-        .activity-price {
+        .activity-price,
-          font-size: 36rpx;
+        .normal-price {
+          font-size: 16px;
           font-weight: bold;
           color: #e97512;
         }
         
-        .normal-price {
+        // .normal-price {}
-          font-size: 36rpx;
-          font-weight: bold;
-          color: #333;
-        }
         
         .vip-label {
-          font-size: 24rpx;
+          font-size: 12px;
           color: #fa2d12;
         }
         
         .activity-label {
-          font-size: 24rpx;
+          font-size: 12px;
           color: #613804;
         }
         
         .original-price {
-          font-size: 24rpx;
+          font-size: 12px;
           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;
-    }
   }
 }
 

locale/en.json

@@ -409,5 +409,9 @@
     "pleaseSelectAddress": "Please select address",
     "orderCreateSuccess": "Order created successfully",
     "orderCreateFailed": "Failed to create order"
+  },
+  "order": {
+    "selectFuduScheme": "Select Fudu Scheme",
+    "selectPurchaseScheme": "Select Purchase Scheme"
   }
 }

locale/zh-Hans.json

@@ -410,5 +410,9 @@
     "pleaseSelectAddress": "请选择收货地址",
     "orderCreateSuccess": "订单创建成功",
     "orderCreateFailed": "订单创建失败"
+  },
+  "order": {
+    "selectFuduScheme": "选择复读方案",
+    "selectPurchaseScheme": "选择购买方案"
   }
 }

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">
+          <view v-if="commentList.length > 0" class="more-link" @click="goToReview">
-            {{ $t('bookDetails.more') }}
+            <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/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

style/ui.scss

@@ -114,6 +114,9 @@ uni-textarea {
 .wd-overlay {
 	z-index: 9998 !important;
 }
+.wd-popup-wrapper .wd-popup {
+	border-radius: 15px 15px 0 0 !important;
+}
 
 // uni-ui form
 // .uni-forms-item {

types/course.d.ts

@@ -4,6 +4,7 @@
  */
 
 import type { IApiResponse } from './book'
+import type { IGoods } from './order'
 
 /** 医学标签（课程分类） */
 export interface ICategory {
@@ -106,19 +107,6 @@ export interface IVipInfo {
   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 {
   // 继承商品信息

types/order.d.ts

@@ -1,4 +1,17 @@
-// types/order.d.ts
+/**
+ * 商品信息
+ **/
+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-已下架
+}
 
 /**
  * 订单创建参数接口