✨ 商品详情:接入营销活动 API
parent
6326cf80c5
commit
3d4f7e9a09
|
@ -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,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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;
|
Loading…
Reference in New Issue