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

2025-11-19 14:16:01 +08:00
parent d76c6cdff1
commit 2731bfba38
12 changed files with 156 additions and 84 deletions
--- a/components/course/ChapterList.vue
+++ b/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],
 }>()

 /**
--- a/pages/course/details/components/course-info.vue
+++ b/pages/course/details/components/course-info.vue
--- a/components/course/GoodsSelector.vue
+++ b/components/course/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">
-        <text class="title">{{ isFudu ? '选择复读方案' : '选择购买方案' }}</text>
-        <wd-icon name="close" @click="handleClose" />
+      <view v-if="selectedIndex !== -1" class="goods-info-mini">
+        <image :src="goods[selectedIndex].productImages" mode="aspectFit" class="goods-cover" />
+        <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 
-          type="primary" 
-          block
-          @click="handleConfirm"
-          :disabled="selectedIndex === -1"
-        >
-          立即购买
-        </wd-button>
+        <wd-button type="primary" block :disabled="selectedIndex === -1" @click="handleConfirm">立即购买</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;
-    margin-bottom: 20rpx;
-    border: 2rpx solid #e5e5e5;
-    border-radius: 12rpx;
+    padding: 5px 10px;
+    margin-bottom: 10px;
+    border: 1px solid #e5e5e5;
+    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 {
-          font-size: 36rpx;
+        .activity-price,
+        .normal-price {
+          font-size: 16px;
          font-weight: bold;
          color: #e97512;
        }
        
-        .normal-price {
-          font-size: 36rpx;
-          font-weight: bold;
-          color: #333;
-        }
+        // .normal-price {}
        
        .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;
-    }
  }
 }

--- a/locale/en.json
+++ b/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"
  }
 }
--- a/locale/zh-Hans.json
+++ b/locale/zh-Hans.json
@@ -410,5 +410,9 @@
    "pleaseSelectAddress": "请选择收货地址",
    "orderCreateSuccess": "订单创建成功",
    "orderCreateFailed": "订单创建失败"
+  },
+  "order": {
+    "selectFuduScheme": "选择复读方案",
+    "selectPurchaseScheme": "选择购买方案"
  }
 }
--- a/pages/book/detail.vue
+++ b/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({
--- a/pages/course/details/chapter.vue
+++ b/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'

 // 页面参数
--- a/pages/course/details/course.vue
+++ b/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
--- a/pages/course/index.vue
+++ b/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
--- a/style/ui.scss
+++ b/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 {
--- a/types/course.d.ts
+++ b/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 {
  // 继承商品信息
--- a/types/order.d.ts
+++ b/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-已下架
+}

 /**
 * 订单创建参数接口