|
@@ -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>
|