Просмотр исходного кода

feat(frontend): 商品详情页展示套餐包含明细

Xiaogang Liao 1 месяц назад
Родитель
Сommit
f8685a96c4
1 измененных файлов с 31 добавлено и 1 удалено
  1. 31 1
      cfc-frontend/pages/discover-detail/product-detail/product-detail.vue

+ 31 - 1
cfc-frontend/pages/discover-detail/product-detail/product-detail.vue

@@ -100,6 +100,19 @@
         <text class="section-title">商品详情</text>
         <text class="section-title">商品详情</text>
         <mp-html :content="product.description" :domain="apiBaseUrl" />
         <mp-html :content="product.description" :domain="apiBaseUrl" />
       </view>
       </view>
+
+      <!-- 套餐包含(bundle商品展示子商品组成) -->
+      <view v-if="isBundleProduct && bundleItems.length > 0" class="bundle-section">
+        <text class="section-title">套餐包含</text>
+        <view class="bundle-item" v-for="(bi, idx) in bundleItems" :key="getBundleKey(bi, idx)">
+          <image v-if="bi.coverImage" class="bundle-item-img" :src="getImageUrl(bi.coverImage)" mode="aspectFill" />
+          <view class="bundle-item-info">
+            <text class="bundle-item-name">{{ bi.childProductName }}</text>
+            <text v-if="bi.specs" class="bundle-item-spec">{{ bi.specs }}</text>
+          </view>
+          <text class="bundle-item-qty">×{{ bi.quantity }}</text>
+        </view>
+      </view>
     </scroll-view>
     </scroll-view>
     <view v-else class="empty-wrap">
     <view v-else class="empty-wrap">
       <text class="empty-text">商品不存在或已下架</text>
       <text class="empty-text">商品不存在或已下架</text>
@@ -150,7 +163,8 @@ export default {
       cfEarnedValue: 0,
       cfEarnedValue: 0,
       // 会员身份(实时调 getMyMembership,FREE=非会员)
       // 会员身份(实时调 getMyMembership,FREE=非会员)
       isMember: false,
       isMember: false,
-      memberLevel: 'FREE'
+      memberLevel: 'FREE',
+      bundleItems: []
     }
     }
   },
   },
   computed: {
   computed: {
@@ -177,6 +191,9 @@ export default {
       }
       }
       return map[this.product.domain] || this.product.domain
       return map[this.product.domain] || this.product.domain
     },
     },
+    isBundleProduct: function() {
+      return this.product && this.product.productType === 'bundle'
+    },
     priceText() {
     priceText() {
       if (!this.product || !this.product.price) return ''
       if (!this.product || !this.product.price) return ''
       // 海报场景: 有会员价且当前是会员,展示会员价; 否则展示原价
       // 海报场景: 有会员价且当前是会员,展示会员价; 否则展示原价
@@ -316,6 +333,7 @@ export default {
         that.loading = false
         that.loading = false
         if (res.code === 200 && res.data) {
         if (res.code === 200 && res.data) {
           that.product = res.data
           that.product = res.data
+          that.bundleItems = (res.data && res.data.bundleItems) || []
           that.setShareInfo(
           that.setShareInfo(
             that.product.name,
             that.product.name,
             '/pages/discover-detail/product-detail/product-detail?id=' + that.product.id
             '/pages/discover-detail/product-detail/product-detail?id=' + that.product.id
@@ -361,6 +379,9 @@ export default {
     getCouponKey: function(item, index) {
     getCouponKey: function(item, index) {
       return item.id + '-' + index
       return item.id + '-' + index
     },
     },
+    getBundleKey: function(item, idx) {
+      return item ? (item.childProductId || idx) : idx
+    },
 
 
     getCouponDesc: function(item) {
     getCouponDesc: function(item) {
       if (item.type === 'DISCOUNT') {
       if (item.type === 'DISCOUNT') {
@@ -742,6 +763,15 @@ export default {
   line-height: 1.6;
   line-height: 1.6;
   display: block;
   display: block;
 }
 }
+/* 套餐包含 */
+.bundle-section { background: #fff; margin: 20rpx; border-radius: 16rpx; padding: 24rpx; }
+.bundle-item { display: flex; align-items: center; padding: 12rpx 0; border-bottom: 1rpx solid #f5f5f5; }
+.bundle-item:last-child { border-bottom: none; }
+.bundle-item-img { width: 80rpx; height: 80rpx; border-radius: 12rpx; margin-right: 16rpx; flex-shrink: 0; background: #f7f7f7; }
+.bundle-item-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.bundle-item-name { font-size: 28rpx; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bundle-item-spec { font-size: 24rpx; color: #999; margin-top: 4rpx; }
+.bundle-item-qty { font-size: 30rpx; font-weight: bold; color: #F97316; margin-left: 16rpx; flex-shrink: 0; }
 /* SKU 选择器 */
 /* SKU 选择器 */
 .sku-section {
 .sku-section {
   background: #fff;
   background: #fff;