营销:适配商城装修组件【秒杀】(待重写)

This commit is contained in:
owen
2023-12-01 20:24:54 +08:00
parent 343b1fd5f6
commit cfc04d9c82
8 changed files with 214 additions and 181 deletions
@@ -1,14 +1,15 @@
<!-- 装修组件 - 秒杀 -->
<template>
<view>
<!-- 样式一三列 - 上图下文 -->
<view
v-if="mode === 1"
v-if="layoutType === 'threeCol'"
class="goods-sm-box ss-flex ss-flex-wrap"
:style="[{ margin: '-' + data.space + 'rpx' }]"
>
<view
v-for="item in goodsList"
:key="item.id"
v-for="product in productList"
:key="product.id"
class="goods-card-box"
:style="[
{
@@ -19,49 +20,49 @@
<s-goods-column
class="goods-card"
size="sm"
:goodsFields="goodsFields"
:goodsFields="data.fields"
:tagStyle="tagStyle"
:data="item"
:titleColor="goodsFields.title?.color"
:data="product"
:titleColor="data.fields.name?.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@click="
sheep.$router.go('/pages/goods/seckill', {
id: item.id,
id: product.id,
activity_id: props.data.activityId,
})
"
></s-goods-column>
</view>
</view>
<!-- 样式2 -->
<view class="goods-box" v-if="mode == 2">
<!-- 样式一列 - 左图右文 -->
<view class="goods-box" v-if="layoutType === 'oneCol'">
<view
class="goods-list"
v-for="(item, index) in goodsList"
v-for="(product, index) in productList"
:key="index"
:style="[{ marginBottom: space + 'px' }]"
>
<s-goods-column
class="goods-card"
size="lg"
:includes="goodsFields"
:goodsFields="data.fields"
:tagStyle="tagStyle"
:data="item"
:titleColor="goodsFields.title?.color"
:subTitleColor="goodsFields.subtitle.color"
:data="product"
:titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction?.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@click="
sheep.$router.go('/pages/goods/seckill', {
id: item.id,
id: product.id,
activity_id: props.data.activityId,
})
"
>
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ buyNowStyle.mode === 1 ? buyNowStyle.text : '' }}
{{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
@@ -72,14 +73,14 @@
<script setup>
/**
* 秒杀
*
* @property {Array} list - 商品列表
*
* 秒杀商品列表
*
* @property {Array} list 商品列表
*/
import { computed, onMounted, ref } from 'vue';
import sheep from '@/sheep';
import SeckillApi from "@/sheep/api/promotion/seckill";
import SpuApi from "@/sheep/api/product/spu";
// 接收参数
const props = defineProps({
@@ -93,32 +94,35 @@
},
});
let { mode, tagStyle, buyNowStyle, goodsFields, space } = props.data;
let { layoutType, tagStyle, btnBuy, space } = props.data;
let { marginLeft, marginRight } = props.styles;
// 购买按钮样式
const buyStyle = computed(() => {
let buyNowStyle = props.data.buyNowStyle;
if (buyNowStyle.mode == 1) {
let btnBuy = props.data.btnBuy;
if (btnBuy.type === 'text') {
return {
background: `linear-gradient(to right, ${buyNowStyle.color1}, ${buyNowStyle.color2})`,
background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
};
}
if (buyNowStyle.mode == 2) {
if (btnBuy.type === 'img') {
return {
width: '54rpx',
height: '54rpx',
background: `url(${sheep.$url.cdn(buyNowStyle.src)}) no-repeat`,
background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
backgroundSize: '100% 100%',
};
}
});
const goodsList = ref([]);
// 商品列表
const productList = ref([]);
// 查询秒杀活动商品
onMounted(async () => {
let { data } = await sheep.$api.goods.activity({ activity_id: props.data.activityId });
goodsList.value = data;
// todo@owen 与Yudao结构不一致,待重构
const { data: activity } = await SeckillApi.getSeckillActivity(props.data.activityId);
const { data: spu } = await SpuApi.getSpuDetail(activity.spuId)
productList.value = [spu];
});
</script>