代码优化】拼团重构

pages/goods/groupon.vue

@@ -54,7 +54,7 @@
                 <view class="origin-price ss-flex ss-col-center" v-if="state.goodsInfo.price">
                   单买价：
                   <view class="origin-price-text">
-                    {{ fen2yuan(state.goodsInfo.price) }}
+                    {{ fen2yuan(state.goodsInfo.marketPrice) }}
                   </view>
                 </view>
               </view>
@@ -90,7 +90,6 @@
         <s-select-groupon-sku
           :show="state.showSelectSku"
           :goodsInfo="state.goodsInfo"
-		  :selectedSku="state.selectedSku"
           :grouponAction="state.grouponAction"
           :grouponNum="state.grouponNum"
           @buy="onBuy"
@@ -105,7 +104,6 @@
       <detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
 
       <!-- 商品tabbar -->
-      <!-- TODO: 已售罄、预热 判断 设计-->
       <detail-tabbar v-model="state.goodsInfo">
         <view class="buy-box ss-flex ss-col-center ss-p-r-20">
           <button
@@ -126,7 +124,12 @@
             :disabled="state.goodsInfo.stock === 0 || state.activity.status !== 0"
           >
             <view class="btn-price">{{
-              fen2yuan(state.selectedSku.price * state.selectedSku.count || state.activity.price * state.selectedSku.count || state.goodsInfo.price * state.selectedSku.count || state.goodsInfo.price)
+              fen2yuan(
+                state.selectedSku.price * state.selectedSku.count ||
+                  state.activity.price * state.selectedSku.count ||
+                  state.goodsInfo.price * state.selectedSku.count ||
+                  state.goodsInfo.price,
+              )
             }}</view>
             <view v-if="state.activity.startTime > new Date().getTime()">未开始</view>
             <view v-else-if="state.activity.endTime <= new Date().getTime()">已结束</view>
@@ -263,10 +266,12 @@
     // 加载商品信息
     const { data: spu } = await SpuApi.getSpuDetail(activity.spuId);
     state.goodsId = spu.id;
+
     // 默认显示最低价
-    activity.products.forEach((product) => {
-      state.activity.price = Math.min(spu.price, product.combinationPrice); // 设置 SPU 的最低价格
-    });
+    spu.price = activity.products.reduce((min, product) => {
+      return Math.min(min, product.combinationPrice || Infinity);
+    }, Infinity);
+
     // 价格、库存使用活动的
     spu.skus.forEach((sku) => {
       const product = activity.products.find((product) => product.skuId === sku.id);

sheep/api/promotion/combination.js

@@ -2,15 +2,6 @@ import request from '@/sheep/request';
 
 // 拼团 API
 const CombinationApi = {
-  // 获得拼团活动列表
-  getCombinationActivityList: (count) => {
-    return request({
-      url: '/promotion/combination-activity/list',
-      method: 'GET',
-      params: { count },
-    });
-  },
-
   // 获得拼团活动分页
   getCombinationActivityPage: (params) => {
     return request({
@@ -31,13 +22,13 @@ const CombinationApi = {
     });
   },
 
-  // 获得拼团活动明细列表
-  getCombinationActivityDetailList: (ids) => {
+  // 获得拼团活动列表，基于活动编号数组
+  getCombinationActivityListByIds: (ids) => {
     return request({
       url: '/promotion/combination-activity/list-by-ids',
       method: 'GET',
       params: {
-        ids
+        ids,
       },
     });
   },
@@ -60,7 +51,7 @@ const CombinationApi = {
     return request({
       url: '/promotion/combination-record/page',
       method: 'GET',
-      params
+      params,
     });
   },
 

sheep/components/s-groupon-block/s-groupon-block.vue

@@ -1,149 +1,150 @@
-<!-- 装修商品组件：商品卡片 -->
-<!-- 商品卡片 -->
-<view>
-	<!-- 布局1. 单列大图（上图，下内容）-->
-	<view v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.spuList.length" class="goods-sl-box">
-		<view
-			class="goods-box"
-			v-for="item in state.spuList"
-			:key="item.id"
-			:style="[{ marginBottom: data.space * 2 + 'rpx' }]"
-		>
-			<s-goods-column
-				class=""
-				size="sl"
-				:goodsFields="data.fields"
-				:tagStyle="data.badge"
-				:data="item"
-				:titleColor="data.fields.name?.color"
-				:subTitleColor="data.fields.introduction.color"
-				:topRadius="data.borderRadiusTop"
-				:bottomRadius="data.borderRadiusBottom"
-				@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
-			>
-				<!-- 购买按钮 -->
-				<template v-slot:cart>
-					<button class="ss-reset-button cart-btn" :style="[buyStyle]">
-						{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
-					</button>
-				</template>
-			</s-goods-column>
-		</view>
-	</view>
+<!-- 装修商品组件：【拼团】商品卡片 -->
+<template>
+  <!-- 商品卡片 -->
+  <view>
+    <!-- 布局1. 单列大图（上图，下内容）-->
+    <view
+      v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.spuList.length"
+      class="goods-sl-box"
+    >
+      <view
+        class="goods-box"
+        v-for="item in state.spuList"
+        :key="item.id"
+        :style="[{ marginBottom: data.space * 2 + 'rpx' }]"
+      >
+        <s-goods-column
+          class=""
+          size="sl"
+          :goodsFields="data.fields"
+          :tagStyle="data.badge"
+          :data="item"
+          :titleColor="data.fields.name?.color"
+          :subTitleColor="data.fields.introduction.color"
+          :topRadius="data.borderRadiusTop"
+          :bottomRadius="data.borderRadiusBottom"
+          @click="sheep.$router.go('/pages/goods/groupon', { id: item.activityId })"
+        >
+          <!-- 购买按钮 -->
+          <template v-slot:cart>
+            <button class="ss-reset-button cart-btn" :style="[buyStyle]">
+              {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
+            </button>
+          </template>
+        </s-goods-column>
+      </view>
+    </view>
 
-	<!-- 布局2. 双列（每一列：上图，下内容）-->
-	<view
-		v-if="layoutType === LayoutTypeEnum.TWO_COL && state.spuList.length"
-		class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top"
-	>
-		<view class="goods-list-box">
-			<view
-				class="left-list"
-				:style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]"
-				v-for="item in state.leftSpuList"
-				:key="item.id"
-			>
-				<s-goods-column
-					class="goods-md-box"
-					size="md"
-					:goodsFields="data.fields"
-					:tagStyle="data.badge"
-					:data="item"
-					:titleColor="data.fields.name?.color"
-					:subTitleColor="data.fields.introduction.color"
-					:topRadius="data.borderRadiusTop"
-					:bottomRadius="data.borderRadiusBottom"
-					:titleWidth="330 - marginLeft - marginRight"
-					@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
-					@getHeight="calculateGoodsColumn($event, 'left')"
-				>
-					<!-- 购买按钮 -->
-					<template v-slot:cart>
-						<button class="ss-reset-button cart-btn" :style="[buyStyle]">
-							{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
-						</button>
-					</template>
-				</s-goods-column>
-			</view>
-		</view>
-		<view class="goods-list-box">
-			<view
-				class="right-list"
-				:style="[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]"
-				v-for="item in state.rightSpuList"
-				:key="item.id"
-			>
-				<s-goods-column
-					class="goods-md-box"
-					size="md"
-					:goodsFields="data.fields"
-					:tagStyle="data.badge"
-					:data="item"
-					:titleColor="data.fields.name?.color"
-					:subTitleColor="data.fields.introduction.color"
-					:topRadius="data.borderRadiusTop"
-					:bottomRadius="data.borderRadiusBottom"
-					:titleWidth="330 - marginLeft - marginRight"
-					@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
-					@getHeight="calculateGoodsColumn($event, 'right')"
-				>
-					<!-- 购买按钮 -->
-					<template v-slot:cart>
-						<button class="ss-reset-button cart-btn" :style="[buyStyle]">
-							{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
-						</button>
-					</template>
-				</s-goods-column>
-			</view>
-		</view>
-	</view>
+    <!-- 布局2. 单列小图（左图，右内容） -->
+    <view
+      v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.spuList.length"
+      class="goods-lg-box"
+    >
+      <view
+        class="goods-box"
+        :style="[{ marginBottom: data.space + 'px' }]"
+        v-for="item in state.spuList"
+        :key="item.id"
+      >
+        <s-goods-column
+          class="goods-card"
+          size="lg"
+          :goodsFields="data.fields"
+          :data="item"
+          :tagStyle="data.badge"
+          :titleColor="data.fields.name?.color"
+          :subTitleColor="data.fields.introduction.color"
+          :topRadius="data.borderRadiusTop"
+          :bottomRadius="data.borderRadiusBottom"
+          @tap="sheep.$router.go('/pages/goods/groupon', { id: item.activityId })"
+        >
+          <!-- 购买按钮 -->
+          <template v-slot:cart>
+            <button class="ss-reset-button cart-btn" :style="[buyStyle]">
+              {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
+            </button>
+          </template>
+        </s-goods-column>
+      </view>
+    </view>
 
-	<!-- 布局3. 单列小图（左图，右内容） -->
-	<view v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.spuList.length" class="goods-lg-box">
-		<view
-			class="goods-box"
-			:style="[{ marginBottom: data.space + 'px' }]"
-			v-for="item in state.spuList"
-			:key="item.id"
-		>
-			<s-goods-column
-				class="goods-card"
-				size="lg"
-				:goodsFields="data.fields"
-				:data="item"
-				:tagStyle="data.badge"
-				:titleColor="data.fields.name?.color"
-				:subTitleColor="data.fields.introduction.color"
-				:topRadius="data.borderRadiusTop"
-				:bottomRadius="data.borderRadiusBottom"
-				@tap="sheep.$router.go('/pages/goods/index', { id: item.id })"
-			>
-				<!-- 购买按钮 -->
-				<template v-slot:cart>
-					<button class="ss-reset-button cart-btn" :style="[buyStyle]">
-						{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
-					</button>
-				</template>
-			</s-goods-column>
-		</view>
-	</view>
-</view>
+    <!-- 布局3. 双列（每一列：上图，下内容）-->
+    <view
+      v-if="layoutType === LayoutTypeEnum.TWO_COL && state.spuList.length"
+      class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top"
+    >
+      <view class="goods-list-box">
+        <view
+          class="left-list"
+          :style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]"
+          v-for="item in state.leftSpuList"
+          :key="item.id"
+        >
+          <s-goods-column
+            class="goods-md-box"
+            size="md"
+            :goodsFields="data.fields"
+            :tagStyle="data.badge"
+            :data="item"
+            :titleColor="data.fields.name?.color"
+            :subTitleColor="data.fields.introduction.color"
+            :topRadius="data.borderRadiusTop"
+            :bottomRadius="data.borderRadiusBottom"
+            :titleWidth="330 - marginLeft - marginRight"
+            @click="sheep.$router.go('/pages/goods/groupon', { id: item.activityId })"
+            @getHeight="calculateGoodsColumn($event, 'left')"
+          >
+            <!-- 购买按钮 -->
+            <template v-slot:cart>
+              <button class="ss-reset-button cart-btn" :style="[buyStyle]">
+                {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
+              </button>
+            </template>
+          </s-goods-column>
+        </view>
+      </view>
+      <view class="goods-list-box">
+        <view
+          class="right-list"
+          :style="[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]"
+          v-for="item in state.rightSpuList"
+          :key="item.id"
+        >
+          <s-goods-column
+            class="goods-md-box"
+            size="md"
+            :goodsFields="data.fields"
+            :tagStyle="data.badge"
+            :data="item"
+            :titleColor="data.fields.name?.color"
+            :subTitleColor="data.fields.introduction.color"
+            :topRadius="data.borderRadiusTop"
+            :bottomRadius="data.borderRadiusBottom"
+            :titleWidth="330 - marginLeft - marginRight"
+            @click="sheep.$router.go('/pages/goods/groupon', { id: item.activityId })"
+            @getHeight="calculateGoodsColumn($event, 'right')"
+          >
+            <!-- 购买按钮 -->
+            <template v-slot:cart>
+              <button class="ss-reset-button cart-btn" :style="[buyStyle]">
+                {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
+              </button>
+            </template>
+          </s-goods-column>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script setup>
-	/**
+  /**
    * 商品卡片
    */
-	 import {
-    computed,
-    onMounted,
-    reactive,
-    ref,
-  } from 'vue';
+  import { computed, onMounted, reactive, ref } from 'vue';
   import sheep from '@/sheep';
   import CombinationApi from '@/sheep/api/promotion/combination';
   import SpuApi from '@/sheep/api/product/spu';
-  import spu from '@/sheep/api/product/spu';
 
   // 布局类型
   const LayoutTypeEnum = {
@@ -163,13 +164,11 @@
   const props = defineProps({
     data: {
       type: Object,
-      default() {
-      },
+      default() {},
     },
     styles: {
       type: Object,
-      default() {
-      },
+      default() {},
     },
   });
 
@@ -232,7 +231,7 @@
    * @return {Promise<undefined>} 商品列表
    */
   async function getCombinationActivityDetailList(ids) {
-    const { data } = await CombinationApi.getCombinationActivityDetailList(ids);
+    const { data } = await CombinationApi.getCombinationActivityListByIds(ids);
     return data;
   }
 
@@ -241,12 +240,11 @@
    * @param ids 商品编号列表
    * @return {Promise<undefined>} 商品列表
    */
-   async function getSpuDetail(ids) {
+  async function getSpuDetail(ids) {
     const { data: spu } = await SpuApi.getSpuDetail(ids);
     return spu;
   }
 
-
   // 初始化
   onMounted(async () => {
     // 加载活动列表
@@ -256,19 +254,21 @@
       state.spuList.push(await getSpuDetail(activity.spuId));
     }
 
-
     // 循环活动列表
-    activityList.forEach(activity => {
-      // 获取活动商品的最低价格
-      activity.products.forEach(product => {
-        const combinationPrice = product.combinationPrice || Infinity;
-
-        // 找到对应的 spu 并更新价格
-        const spu = state.spuList.find(spu => activity.spuId === spu.id);
-        if (spu) {
-          spu.price = Math.min(combinationPrice, spu.price || Infinity);
-        }
-      });
+    activityList.forEach((activity) => {
+      // 提取活动价格
+      const combinationPrice = activity.combinationPrice || Infinity;
+      // 查找对应的 spu 并更新价格
+      const spu = state.spuList.find((spu) => activity.spuId === spu.id);
+      if (spu) {
+        // 赋值活动名称
+        // TODO 芋艿：暂定活动名。会在调研一些类似有赞、淘宝、京东的选择
+        spu.name = activity.name;
+        // 赋值最低价格
+        spu.price = Math.min(combinationPrice, spu.price);
+        // 赋值活动ID，为了点击跳转详情页
+        spu.activityId = activity.id;
+      }
     });
 
     // 只有双列布局时需要
@@ -280,18 +280,20 @@
 </script>
 
 <style lang="scss" scoped>
-	.goods-md-wrap {
+  .goods-md-wrap {
     width: 100%;
   }
 
   .goods-list-box {
     width: 50%;
     box-sizing: border-box;
+
     .left-list {
       &:nth-last-child(1) {
         margin-bottom: 0 !important;
       }
     }
+
     .right-list {
       &:nth-last-child(1) {
         margin-bottom: 0 !important;
@@ -323,4 +325,4 @@
       color: #fff;
     }
   }
-</style>
+</style>