✨ 指定满减送的活动列表:100%
parent
eb9138a668
commit
b95e711f80
|
@ -1,11 +1,13 @@
|
||||||
|
<!-- 指定满减送的活动列表 -->
|
||||||
<template>
|
<template>
|
||||||
<s-layout class="activity-wrap" :title="state.activityInfo.title">
|
<s-layout class="activity-wrap" :title="state.activityInfo.title">
|
||||||
|
<!-- 活动信息 -->
|
||||||
<su-sticky bgColor="#fff">
|
<su-sticky bgColor="#fff">
|
||||||
<view class="ss-flex ss-col-top tip-box">
|
<view class="ss-flex ss-col-top tip-box">
|
||||||
<view class="type-text ss-flex ss-row-center">{{ state.activityInfo.type_text }}:</view>
|
<view class="type-text ss-flex ss-row-center">满减:</view>
|
||||||
<view class="ss-flex-1">
|
<view class="ss-flex-1">
|
||||||
<view class="tip-content" v-for="item in state.activityInfo.texts" :key="item">
|
<view class="tip-content" v-for="item in state.activityInfo.rules" :key="item">
|
||||||
{{ item }}
|
{{ formatRewardActivityRule(state.activityInfo, item) }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<image class="activity-left-image" src="/static/activity-left.png" />
|
<image class="activity-left-image" src="/static/activity-left.png" />
|
||||||
|
@ -13,6 +15,7 @@
|
||||||
</view>
|
</view>
|
||||||
</su-sticky>
|
</su-sticky>
|
||||||
|
|
||||||
|
<!-- 商品信息 -->
|
||||||
<view class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top">
|
<view class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top">
|
||||||
<view class="goods-list-box">
|
<view class="goods-list-box">
|
||||||
<view class="left-list" v-for="item in state.leftGoodsList" :key="item.id">
|
<view class="left-list" v-for="item in state.leftGoodsList" :key="item.id">
|
||||||
|
@ -39,7 +42,7 @@
|
||||||
@getHeight="mountMasonry($event, 'right')"
|
@getHeight="mountMasonry($event, 'right')"
|
||||||
>
|
>
|
||||||
<template v-slot:cart>
|
<template v-slot:cart>
|
||||||
<button class="ss-reset-button cart-btn"> </button>
|
<button class="ss-reset-button cart-btn" />
|
||||||
</template>
|
</template>
|
||||||
</s-goods-column>
|
</s-goods-column>
|
||||||
</view>
|
</view>
|
||||||
|
@ -52,7 +55,7 @@
|
||||||
:content-text="{
|
:content-text="{
|
||||||
contentdown: '上拉加载更多',
|
contentdown: '上拉加载更多',
|
||||||
}"
|
}"
|
||||||
@tap="loadmore"
|
@tap="loadMore"
|
||||||
/>
|
/>
|
||||||
</s-layout>
|
</s-layout>
|
||||||
</template>
|
</template>
|
||||||
|
@ -61,27 +64,32 @@
|
||||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||||
import sheep from '@/sheep';
|
import sheep from '@/sheep';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
|
import RewardActivityApi from '@/sheep/api/promotion/rewardActivity';
|
||||||
|
import { formatRewardActivityRule } from '@/sheep/hooks/useGoods';
|
||||||
|
import SpuApi from '@/sheep/api/product/spu';
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
|
activityId: 0, // 获得编号
|
||||||
|
activityInfo: {}, // 获得信息
|
||||||
|
|
||||||
pagination: {
|
pagination: {
|
||||||
data: [],
|
list: [],
|
||||||
current_page: 1,
|
|
||||||
total: 1,
|
total: 1,
|
||||||
last_page: 1,
|
pageNo: 1,
|
||||||
|
pageSize: 8,
|
||||||
},
|
},
|
||||||
loadStatus: '',
|
loadStatus: '',
|
||||||
leftGoodsList: [],
|
leftGoodsList: [],
|
||||||
rightGoodsList: [],
|
rightGoodsList: [],
|
||||||
activityId: 0,
|
|
||||||
activityInfo: {},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 加载瀑布流
|
// 加载瀑布流
|
||||||
let count = 0;
|
let count = 0;
|
||||||
let leftHeight = 0;
|
let leftHeight = 0;
|
||||||
let rightHeight = 0;
|
let rightHeight = 0;
|
||||||
|
|
||||||
function mountMasonry(height = 0, where = 'left') {
|
function mountMasonry(height = 0, where = 'left') {
|
||||||
if (!state.pagination.data[count]) return;
|
if (!state.pagination.list[count]) return;
|
||||||
|
|
||||||
if (where === 'left') {
|
if (where === 'left') {
|
||||||
leftHeight += height;
|
leftHeight += height;
|
||||||
|
@ -89,57 +97,64 @@
|
||||||
rightHeight += height;
|
rightHeight += height;
|
||||||
}
|
}
|
||||||
if (leftHeight <= rightHeight) {
|
if (leftHeight <= rightHeight) {
|
||||||
state.leftGoodsList.push(state.pagination.data[count]);
|
state.leftGoodsList.push(state.pagination.list[count]);
|
||||||
} else {
|
} else {
|
||||||
state.rightGoodsList.push(state.pagination.data[count]);
|
state.rightGoodsList.push(state.pagination.list[count]);
|
||||||
}
|
}
|
||||||
count++;
|
count++;
|
||||||
}
|
}
|
||||||
async function getList(activityId, page = 1, list_rows = 6) {
|
|
||||||
|
// 加载商品信息
|
||||||
|
async function getList() {
|
||||||
|
// 处理拓展参数
|
||||||
|
const params = {};
|
||||||
|
if (state.activityInfo.productScope === 2) {
|
||||||
|
params.ids = state.activityInfo.productSpuIds.join(',');
|
||||||
|
} else if (state.activityInfo.productScope === 3) {
|
||||||
|
params.categoryIds = state.activityInfo.productSpuIds.join(',');
|
||||||
|
}
|
||||||
|
// 请求数据
|
||||||
state.loadStatus = 'loading';
|
state.loadStatus = 'loading';
|
||||||
const res = await sheep.$api.goods.activityList({
|
const { code, data } = await SpuApi.getSpuPage({
|
||||||
list_rows,
|
pageNo: state.pagination.pageNo,
|
||||||
activity_id: activityId,
|
pageSize: state.pagination.pageSize,
|
||||||
page,
|
...params
|
||||||
});
|
});
|
||||||
if (res.error === 0) {
|
if (code !== 0) {
|
||||||
if (page >= 2) {
|
return;
|
||||||
let couponList = _.concat(state.pagination.data, res.data.data);
|
|
||||||
state.pagination = {
|
|
||||||
...res.data,
|
|
||||||
data: couponList,
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
state.pagination = res.data;
|
|
||||||
}
|
}
|
||||||
|
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||||
|
state.pagination.total = data.total;
|
||||||
|
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||||
mountMasonry();
|
mountMasonry();
|
||||||
if (state.pagination.current_page < state.pagination.last_page) {
|
|
||||||
state.loadStatus = 'more';
|
|
||||||
} else {
|
|
||||||
state.loadStatus = 'noMore';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 加载活动信息
|
||||||
async function getActivity(id) {
|
async function getActivity(id) {
|
||||||
const { error, data } = await sheep.$api.activity.activity(id);
|
const { code, data } = await RewardActivityApi.getRewardActivity(id);
|
||||||
if (error === 0) {
|
if (code === 0) {
|
||||||
state.activityInfo = data;
|
state.activityInfo = data;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 加载更多
|
// 加载更多
|
||||||
function loadmore() {
|
function loadMore() {
|
||||||
if (state.loadStatus !== 'noMore') {
|
if (state.loadStatus === 'noMore') {
|
||||||
getList(state.activityId, state.pagination.current_page + 1);
|
return;
|
||||||
}
|
}
|
||||||
|
state.pagination.pageNo++;
|
||||||
|
getList();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 上拉加载更多
|
// 上拉加载更多
|
||||||
onReachBottom(() => {
|
onReachBottom(() => {
|
||||||
loadmore();
|
loadMore();
|
||||||
});
|
});
|
||||||
onLoad((options) => {
|
|
||||||
|
onLoad(async (options) => {
|
||||||
state.activityId = options.activityId;
|
state.activityId = options.activityId;
|
||||||
getList(state.activityId);
|
await getActivity(state.activityId);
|
||||||
getActivity(state.activityId);
|
await getList(state.activityId);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -38,17 +38,6 @@ export default {
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
|
|
||||||
// 商品评价列表
|
|
||||||
comment: (id, params = {}) =>
|
|
||||||
request2({
|
|
||||||
url: 'product/comment/list?spuId=' + id,
|
|
||||||
method: 'GET',
|
|
||||||
params,
|
|
||||||
custom: {
|
|
||||||
showLoading: false,
|
|
||||||
showError: false,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
// 商品查询
|
// 商品查询
|
||||||
activity: (params = {}) =>
|
activity: (params = {}) =>
|
||||||
request({
|
request({
|
||||||
|
|
|
@ -0,0 +1,14 @@
|
||||||
|
import request from '@/sheep/request';
|
||||||
|
|
||||||
|
const RewardActivityApi = {
|
||||||
|
// 获得满减送活动
|
||||||
|
getRewardActivity: (id) => {
|
||||||
|
return request({
|
||||||
|
url: '/app-api/promotion/reward-activity/get',
|
||||||
|
method: 'GET',
|
||||||
|
params: { id },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RewardActivityApi;
|
|
@ -12,15 +12,9 @@
|
||||||
<view v-for="item in state.activityInfo" :key="item.id">
|
<view v-for="item in state.activityInfo" :key="item.id">
|
||||||
<view class="ss-flex ss-col-top ss-m-b-40" @tap="onGoodsList(item)">
|
<view class="ss-flex ss-col-top ss-m-b-40" @tap="onGoodsList(item)">
|
||||||
<view class="model-content-tag ss-flex ss-row-center">满减</view>
|
<view class="model-content-tag ss-flex ss-row-center">满减</view>
|
||||||
<!-- TODO 芋艿:先简单做;未来再搞成满 xxx 减 yyy 元 -->
|
|
||||||
<!-- <view class="ss-m-l-20 model-content-title ss-flex-1">-->
|
|
||||||
<!-- <view class="ss-m-b-24" v-for="text in item.texts" :key="text">-->
|
|
||||||
<!-- {{ text }}-->
|
|
||||||
<!-- </view>-->
|
|
||||||
<!-- </view>-->
|
|
||||||
<view class="ss-m-l-20 model-content-title ss-flex-1">
|
<view class="ss-m-l-20 model-content-title ss-flex-1">
|
||||||
<view class="ss-m-b-24">
|
<view class="ss-m-b-24" v-for="rule in state.activityMap[item.id]?.rules" :key="rule">
|
||||||
{{ item.name }}
|
{{ formatRewardActivityRule(state.activityMap[item.id], rule) }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<text class="cicon-forward" />
|
<text class="cicon-forward" />
|
||||||
|
@ -32,7 +26,10 @@
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import sheep from '@/sheep';
|
import sheep from '@/sheep';
|
||||||
import { computed, reactive } from 'vue';
|
import { computed, reactive, watch } from 'vue';
|
||||||
|
import RewardActivityApi from '@/sheep/api/promotion/rewardActivity';
|
||||||
|
import { formatRewardActivityRule } from '@/sheep/hooks/useGoods';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
modelValue: {
|
modelValue: {
|
||||||
type: Object,
|
type: Object,
|
||||||
|
@ -46,7 +43,26 @@
|
||||||
const emits = defineEmits(['close']);
|
const emits = defineEmits(['close']);
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
activityInfo: computed(() => props.modelValue),
|
activityInfo: computed(() => props.modelValue),
|
||||||
|
activityMap: {}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.show,
|
||||||
|
() => {
|
||||||
|
// 展示的情况下,加载每个活动的详细信息
|
||||||
|
if (props.show) {
|
||||||
|
state.activityInfo?.forEach(activity => {
|
||||||
|
RewardActivityApi.getRewardActivity(activity.id).then(res => {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.activityMap[activity.id] = res.data;
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
function onGoodsList(e) {
|
function onGoodsList(e) {
|
||||||
sheep.$router.go('/pages/activity/index', {
|
sheep.$router.go('/pages/activity/index', {
|
||||||
activityId: e.id,
|
activityId: e.id,
|
||||||
|
|
|
@ -368,3 +368,20 @@ export function convertProductPropertyList(skus) {
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化满减送活动的规则
|
||||||
|
*
|
||||||
|
* @param activity 活动信息
|
||||||
|
* @param rule 优惠规格
|
||||||
|
* @returns {string} 规格字符串
|
||||||
|
*/
|
||||||
|
export function formatRewardActivityRule(activity, rule) {
|
||||||
|
if (activity.conditionType === 10) {
|
||||||
|
return `满 ${fen2yuan(rule.limit)} 元减 ${fen2yuan(rule.discountPrice)} 元`;
|
||||||
|
}
|
||||||
|
if (activity.conditionType === 20) {
|
||||||
|
return `满 ${rule.limit} 件减 ${fen2yuan(rule.discountPrice)} 元`;
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
Loading…
Reference in New Issue