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

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/components/course/CourseInfo.vue
+++ b/components/course/CourseInfo.vue
@@ -0,0 +1,187 @@
+<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>
--- 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;
-    }
  }
 }