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

pull/20/head
owen 2023-12-01 21:00:39 +08:00
parent cfc04d9c82
commit 8755d64683
4 changed files with 98 additions and 31 deletions

View File

@ -0,0 +1,67 @@
import request2 from "@/sheep/request2";
// 拼团 API
const CombinationApi = {
// 获得拼团活动列表
getCombinationActivityList: (count) => {
return request2({
url: "promotion/combination-activity/list",
method: 'GET',
params: {count}
});
},
// 获得拼团活动分页
getCombinationActivityPage: (params) => {
return request2({
url: "promotion/combination-activity/page",
method: 'GET',
params
});
},
// 获得拼团活动明细
getCombinationActivity: (id) => {
return request2({
url: "promotion/combination-activity/get-detail",
method: 'GET',
params: {
id
}
});
},
// 获得最近 n 条拼团记录(团长发起的)
getHeadCombinationRecordList: (activityId, status, count) => {
return request2({
url: "promotion/combination-record/get-head-list",
method: 'GET',
params: {
activityId,
status,
count
}
});
},
// 获得拼团记录明细
getCombinationRecordDetail: (id) => {
return request2({
url: "promotion/combination-record/get-detail",
method: 'GET',
params: {
id
}
});
},
// 获得拼团记录的概要信息
getCombinationRecordSummary: () => {
return request2({
url: "promotion/combination-record/get-summary",
method: 'GET',
});
}
}
export default CombinationApi

View File

@ -32,7 +32,7 @@
<s-goods-shelves v-if="type === 'ProductList'" :data="data" :styles="styles" /> <s-goods-shelves v-if="type === 'ProductList'" :data="data" :styles="styles" />
<!-- 营销组件拼团 --> <!-- 营销组件拼团 -->
<s-groupon-block v-if="type === 'groupon'" :data="data" :styles="styles" /> <s-groupon-block v-if="type === 'PromotionCombination'" :data="data" :styles="styles" />
<!-- 营销组件秒杀 --> <!-- 营销组件秒杀 -->
<s-seckill-block v-if="type === 'PromotionSeckill'" :data="data" :styles="styles" /> <s-seckill-block v-if="type === 'PromotionSeckill'" :data="data" :styles="styles" />
<!-- 营销组件积分商城模式不一样无法适配 --> <!-- 营销组件积分商城模式不一样无法适配 -->

View File

@ -2,13 +2,13 @@
<template> <template>
<view> <view>
<view <view
v-if="mode === 1" v-if="layoutType === 'threeCol'"
class="goods-sm-box ss-flex ss-flex-wrap" class="goods-sm-box ss-flex ss-flex-wrap"
:style="[{ margin: '-' + data.space + 'rpx' }]" :style="[{ margin: '-' + data.space + 'rpx' }]"
> >
<view <view
v-for="item in goodsList" v-for="product in productList"
:key="item.id" :key="product.id"
class="goods-card-box" class="goods-card-box"
:style="[ :style="[
{ {
@ -19,15 +19,15 @@
<s-goods-column <s-goods-column
class="goods-card" class="goods-card"
size="sm" size="sm"
:goodsFields="goodsFields" :goodsFields="data.fields"
:tagStyle="tagStyle" :tagStyle="tagStyle"
:data="item" :data="product"
:titleColor="goodsFields.title?.color" :titleColor="data.fields.name?.color"
:topRadius="data.borderRadiusTop" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" :bottomRadius="data.borderRadiusBottom"
@click=" @click="
sheep.$router.go('/pages/goods/groupon', { sheep.$router.go('/pages/goods/groupon', {
id: item.id, id: product.id,
activity_id: props.data.activityId, activity_id: props.data.activityId,
}) })
" "
@ -35,33 +35,33 @@
</view> </view>
</view> </view>
<!-- 样式2 一行一个 图片左 文案右 --> <!-- 样式2 一行一个 图片左 文案右 -->
<view class="goods-box" v-if="mode == 2"> <view class="goods-box" v-if="layoutType === 'oneCol'">
<view <view
class="goods-list" class="goods-list"
v-for="(item, index) in goodsList" v-for="(product, index) in productList"
:key="index" :key="index"
:style="[{ marginBottom: space + 'px' }]" :style="[{ marginBottom: space + 'px' }]"
> >
<s-goods-column <s-goods-column
class="goods-card" class="goods-card"
size="lg" size="lg"
:includes="goodsFields" :goodsFields="data.fields"
:tagStyle="tagStyle" :tagStyle="tagStyle"
:data="item" :data="product"
:titleColor="goodsFields.title?.color" :titleColor="data.fields.name?.color"
:subTitleColor="goodsFields.subtitle.color" :subTitleColor="data.fields.introduction?.color"
:topRadius="data.borderRadiusTop" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" :bottomRadius="data.borderRadiusBottom"
@click=" @click="
sheep.$router.go('/pages/goods/groupon', { sheep.$router.go('/pages/goods/groupon', {
id: item.id, id: product.id,
activity_id: props.data.activityId, activity_id: props.data.activityId,
}) })
" "
> >
<template v-slot:cart> <template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]"> <button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ buyNowStyle.mode === 1 ? buyNowStyle.text : '' }} {{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
</button> </button>
</template> </template>
</s-goods-column> </s-goods-column>
@ -73,13 +73,11 @@
<script setup> <script setup>
/** /**
* 拼团 * 拼团
*
* @property {Array} list - 商品列表
*
*
*/ */
import { computed, onMounted, ref } from 'vue'; import { computed, onMounted, ref } from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import SpuApi from "@/sheep/api/product/spu";
import CombinationApi from "@/sheep/api/promotion/combination";
// //
const props = defineProps({ const props = defineProps({
@ -93,32 +91,34 @@
}, },
}); });
let { mode, tagStyle, buyNowStyle, goodsFields, space } = props.data; let { layoutType, tagStyle, btnBuy, space } = props.data;
let { marginLeft, marginRight } = props.styles; let { marginLeft, marginRight } = props.styles;
// //
const buyStyle = computed(() => { const buyStyle = computed(() => {
let buyNowStyle = props.data.buyNowStyle; let btnBuy = props.data.btnBuy;
if (buyNowStyle.mode == 1) { if (btnBuy?.type === 'text') {
return { 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 { return {
width: '54rpx', width: '54rpx',
height: '54rpx', height: '54rpx',
background: `url(${sheep.$url.cdn(buyNowStyle.src)}) no-repeat`, background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
backgroundSize: '100% 100%', backgroundSize: '100% 100%',
}; };
} }
}); });
const goodsList = ref([]); const productList = ref([]);
onMounted(async () => { onMounted(async () => {
let { data } = await sheep.$api.goods.activity({ activity_id: props.data.activityId }); // todo@owen Yudao
goodsList.value = data; const { data: activity } = await CombinationApi.getCombinationActivity(props.data.activityId);
const { data: spu } = await SpuApi.getSpuDetail(activity.spuId)
productList.value = [spu];
}); });
</script> </script>

View File

@ -100,12 +100,12 @@
// //
const buyStyle = computed(() => { const buyStyle = computed(() => {
let btnBuy = props.data.btnBuy; let btnBuy = props.data.btnBuy;
if (btnBuy.type === 'text') { if (btnBuy?.type === 'text') {
return { return {
background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`, background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
}; };
} }
if (btnBuy.type === 'img') { if (btnBuy?.type === 'img') {
return { return {
width: '54rpx', width: '54rpx',
height: '54rpx', height: '54rpx',