商品详情:接入营销活动 API

pull/26/head^2
YunaiV 2023-12-10 19:52:54 +08:00
parent 6326cf80c5
commit 3d4f7e9a09
3 changed files with 58 additions and 29 deletions

View File

@ -1,52 +1,57 @@
<template> <template>
<su-fixed bottom placeholder :val="44"> <su-fixed bottom placeholder :val="44">
<view> <view>
<view v-for="activity in data.activities" :key="activity.id"> <view v-for="activity in props.activityList" :key="activity.id">
<!-- TODO 芋艿拼团 -->
<view <view
class="activity-box ss-p-x-38 ss-flex ss-row-between ss-col-center" class="activity-box ss-p-x-38 ss-flex ss-row-between ss-col-center"
:class="activity.type == 'seckill' ? 'seckill-box' : 'groupon-box'" :class="activity.type === 1 ? 'seckill-box' : 'groupon-box'"
> >
<view class="activity-title ss-flex"> <view class="activity-title ss-flex">
<view class="ss-m-r-16"> <view class="ss-m-r-16">
<image <image
v-if="activity.type === 1"
:src="sheep.$url.static('/static/img/shop/goods/seckill-icon.png')" :src="sheep.$url.static('/static/img/shop/goods/seckill-icon.png')"
v-if="activity.type == 'seckill'"
class="activity-icon" class="activity-icon"
></image> />
<!-- TODO 芋艿拼团 -->
<image <image
v-else-if="activity.type === 3"
:src="sheep.$url.static('/static/img/shop/goods/groupon-icon.png')" :src="sheep.$url.static('/static/img/shop/goods/groupon-icon.png')"
class="activity-icon" class="activity-icon"
v-else />
></image>
</view> </view>
<view>该商品正在参与{{ activity.type_text }}活动</view> <view>该商品正在参与{{ activity.name }}活动</view>
</view> </view>
<button class="ss-reset-button activity-go" @tap="onActivity(activity)"> GO </button> <button class="ss-reset-button activity-go" @tap="onActivity(activity)"> GO </button>
</view> </view>
<!-- <button @tap="onActivity(activity)">{{ activity.title }} {{ activity.type_text }}</button> -->
</view> </view>
</view> </view>
</su-fixed> </su-fixed>
</template> </template>
<script setup> <script setup>
import { ref, reactive } from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
// TODO
const seckillBg = sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png'); const seckillBg = sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png');
const grouponBg = sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png'); const grouponBg = sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png');
const props = defineProps({ const props = defineProps({
data: { activityList: {
type: Object, type: Array,
default() {}, default() {
}, return [];
}
}
}); });
function onActivity(activity) { function onActivity(activity) {
let type = activity.type; const type = activity.type;
if (type === 'groupon_ladder') type = 'groupon'; const typePath = type === 1 ? 'seckill' :
sheep.$router.go(`/pages/goods/${type}`, { type === 2 ? 'TODO 拼团' : 'groupon';
id: props.data.id, sheep.$router.go(`/pages/goods/${typePath}`, {
id: activity.spuId,
activity_id: activity.id, activity_id: activity.id,
}); });
} }

View File

@ -30,9 +30,9 @@
{{ formatSales('exact', state.goodsInfo.salesCount) }} {{ formatSales('exact', state.goodsInfo.salesCount) }}
</view> </view>
</view> </view>
<!-- TODO 芋艿promos 未写 -->
<view class="discounts-box ss-flex ss-row-between ss-m-b-28"> <view class="discounts-box ss-flex ss-row-between ss-m-b-28">
<div class="tag-content"> <!-- 满减送/限时折扣活动的提示 TODO 芋艿promos 未写 -->
<div class="tag-content">
<view class="tag-box ss-flex"> <view class="tag-box ss-flex">
<view class="tag ss-m-r-10" v-for="promos in state.goodsInfo.promos" :key="promos.id" @tap="onActivity"> <view class="tag ss-m-r-10" v-for="promos in state.goodsInfo.promos" :key="promos.id" @tap="onActivity">
{{ promos.title }} {{ promos.title }}
@ -40,7 +40,7 @@
</view> </view>
</div> </div>
<!-- TODO 芋艿couponInfo 优惠劵 --> <!-- 优惠劵 -->
<view class="get-coupon-box ss-flex ss-col-center ss-m-l-20" @tap="state.showModel = true" <view class="get-coupon-box ss-flex ss-col-center ss-m-l-20" @tap="state.showModel = true"
v-if="state.couponInfo.length"> v-if="state.couponInfo.length">
<view class="discounts-title ss-m-r-8">领券</view> <view class="discounts-title ss-m-r-8">领券</view>
@ -70,8 +70,8 @@
<!-- 详情 --> <!-- 详情 -->
<detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" /> <detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
<!-- TODO 芋艿活动跳转 --> <!-- 活动跳转拼团/秒杀/砍价活动 -->
<detail-activity-tip v-if="state.goodsInfo.activities" :data="state.goodsInfo" /> <detail-activity-tip v-if="state.activityList.length > 0" :activity-list="state.activityList" />
<!-- 详情 tabbar --> <!-- 详情 tabbar -->
<detail-tabbar v-model="state.goodsInfo"> <detail-tabbar v-model="state.goodsInfo">
@ -92,7 +92,7 @@
<s-coupon-get v-model="state.couponInfo" :show="state.showModel" @close="state.showModel = false" <s-coupon-get v-model="state.couponInfo" :show="state.showModel" @close="state.showModel = false"
@get="onGet" /> @get="onGet" />
<!-- TODO 芋艿待接入 --> <!-- 满减送/限时折扣活动弹窗 -->
<s-activity-pop v-model="state.activityInfo" :show="state.showActivityModel" <s-activity-pop v-model="state.activityInfo" :show="state.showActivityModel"
@close="state.showActivityModel = false" /> @close="state.showActivityModel = false" />
</block> </block>
@ -105,6 +105,7 @@
import { onLoad, onPageScroll } from '@dcloudio/uni-app'; import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import sheep from '@/sheep'; import sheep from '@/sheep';
import CouponApi from '@/sheep/api/promotion/coupon'; import CouponApi from '@/sheep/api/promotion/coupon';
import ActivityApi from '@/sheep/api/promotion/activity';
import { formatSales, formatGoodsSwiper, fen2yuan, } from '@/sheep/hooks/useGoods'; import { formatSales, formatGoodsSwiper, fen2yuan, } from '@/sheep/hooks/useGoods';
import detailNavbar from './components/detail/detail-navbar.vue'; import detailNavbar from './components/detail/detail-navbar.vue';
import detailCellSku from './components/detail/detail-cell-sku.vue'; import detailCellSku from './components/detail/detail-cell-sku.vue';
@ -115,9 +116,7 @@
import detailCommentCard from './components/detail/detail-comment-card.vue'; import detailCommentCard from './components/detail/detail-comment-card.vue';
import detailContentCard from './components/detail/detail-content-card.vue'; import detailContentCard from './components/detail/detail-content-card.vue';
import detailActivityTip from './components/detail/detail-activity-tip.vue'; import detailActivityTip from './components/detail/detail-activity-tip.vue';
import { import { isEmpty } from 'lodash';
isEmpty
} from 'lodash';
onPageScroll(() => {}); onPageScroll(() => {});
@ -129,11 +128,12 @@
selectedSku: {}, // SKU selectedSku: {}, // SKU
showModel: false, // Coupon showModel: false, // Coupon
couponInfo: [], // Coupon couponInfo: [], // Coupon
showActivityModel: false, showActivityModel: false, // / Activity
activityInfo: [], activityInfo: [], // / Activity
activityList: [], // // Activity
}); });
// TODO //
function onSkuChange(e) { function onSkuChange(e) {
state.selectedSku = e; state.selectedSku = e;
} }
@ -225,6 +225,14 @@
} }
state.couponInfo = res.data; state.couponInfo = res.data;
}); });
// 3.
ActivityApi.getActivityListBySpuId(state.goodsId).then((res) => {
if (res.code !== 0) {
return;
}
state.activityList = res.data;
});
}); });
</script> </script>

View File

@ -0,0 +1,16 @@
import request2 from '@/sheep/request2';
const ActivityApi = {
// 获得单个商品,近期参与的每个活动
getActivityListBySpuId: (spuId) => {
return request2({
url: '/app-api/promotion/activity/list-by-spu-id',
method: 'GET',
params: {
spuId,
},
});
},
};
export default ActivityApi;