【功能完善】商品详情,增加满减送提示

This commit is contained in:
YunaiV
2024-09-16 18:15:13 +08:00
parent b741a1d148
commit 9df0194aeb
8 changed files with 612 additions and 366 deletions
+53 -57
View File
@@ -7,7 +7,7 @@
<view class="type-text ss-flex ss-row-center">满减</view>
<view class="ss-flex-1">
<view class="tip-content" v-for="item in state.activityInfo.rules" :key="item">
{{ formatRewardActivityRule(state.activityInfo, item) }}
{{ item.description }}
</view>
</view>
<image class="activity-left-image" src="/static/activity-left.png" />
@@ -19,9 +19,13 @@
<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="left-list" v-for="item in state.leftGoodsList" :key="item.id">
<s-goods-column class="goods-md-box" size="md" :data="item"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
@getHeight="mountMasonry($event, 'left')">
<s-goods-column
class="goods-md-box"
size="md"
:data="item"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
@getHeight="mountMasonry($event, 'left')"
>
<template v-slot:cart>
<button class="ss-reset-button cart-btn"> </button>
</template>
@@ -30,9 +34,13 @@
</view>
<view class="goods-list-box">
<view class="right-list" v-for="item in state.rightGoodsList" :key="item.id">
<s-goods-column class="goods-md-box" size="md" :data="item"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
@getHeight="mountMasonry($event, 'right')">
<s-goods-column
class="goods-md-box"
size="md"
:data="item"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
@getHeight="mountMasonry($event, 'right')"
>
<template v-slot:cart>
<button class="ss-reset-button cart-btn" />
</template>
@@ -41,27 +49,22 @@
</view>
</view>
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
<uni-load-more
v-if="state.pagination.total > 0"
:status="state.loadStatus"
:content-text="{
contentdown: '上拉加载更多',
}" @tap="loadMore" />
}"
@tap="loadMore"
/>
</s-layout>
</template>
<script setup>
import {
reactive,
toRaw,
ref
} from 'vue';
import {
onLoad,
onReachBottom
} from '@dcloudio/uni-app';
import { reactive, toRaw, ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import _ from 'lodash-es';
import RewardActivityApi from '@/sheep/api/promotion/rewardActivity';
import {
formatRewardActivityRule
} from '@/sheep/hooks/useGoods';
import SpuApi from '@/sheep/api/product/spu';
const state = reactive({
@@ -104,35 +107,31 @@
async function getList() {
// state.loadStatus = 'loading';
// 处理拓展参数
const params = {}
const params = {};
if (state.activityInfo.productScope === 2) {
// const params = toRaw(state.activityInfo.productScopeValues)
// 请求数据
const {
code,
data
} = await SpuApi.getSpuListByIds(state.activityInfo.productScopeValues.join(','));
const { code, data } = await SpuApi.getSpuListByIds(
state.activityInfo.productScopeValues.join(','),
);
if (code !== 0) {
return;
}
// 使用 map 提取每个对象的 id 属性
const ids = data.map(item => item.id);
const ids = data.map((item) => item.id);
// 使用 join 方法将 id 数组连接成一个用逗号分隔的字符串
const idsString = ids.join(',');
// 获取结算信息
settleData.value = await getSettlementByIds(idsString)
settleData.value = await getSettlementByIds(idsString);
// 处理获得的数据
const ms = enrichDataWithSkus(data, settleData.value)
const ms = enrichDataWithSkus(data, settleData.value);
state.pagination.list = ms;
// state.pagination.total = data.total;
// state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
} else if (state.activityInfo.productScope === 3) {
params.categoryIds = state.activityInfo.productScopeValues.join(',');
state.loadStatus = 'loading';
const {
code,
data
} = await SpuApi.getSpuPage({
const { code, data } = await SpuApi.getSpuPage({
pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize,
...params,
@@ -141,22 +140,19 @@
return;
}
// 使用 map 提取每个对象的 id 属性
const ids = data.list.map(item => item.id);
const ids = data.list.map((item) => item.id);
// 使用 join 方法将 id 数组连接成一个用逗号分隔的字符串
const idsString = ids.join(',');
// 获取结算信息
settleData.value = await getSettlementByIds(idsString)
settleData.value = await getSettlementByIds(idsString);
// 处理获得的数据
const ms = enrichDataWithSkus(data.list, settleData.value)
const ms = enrichDataWithSkus(data.list, settleData.value);
state.pagination.list = _.concat(state.pagination.list, ms);
state.pagination.total = data.total;
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
} else {
state.loadStatus = 'loading';
const {
code,
data
} = await SpuApi.getSpuPage({
const { code, data } = await SpuApi.getSpuPage({
pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize,
});
@@ -164,13 +160,13 @@
return;
}
// 使用 map 提取每个对象的 id 属性
const ids = data.list.map(item => item.id);
const ids = data.list.map((item) => item.id);
// 使用 join 方法将 id 数组连接成一个用逗号分隔的字符串
const idsString = ids.join(',');
// 获取结算信息
settleData.value = await getSettlementByIds(idsString)
settleData.value = await getSettlementByIds(idsString);
// 处理获得的数据
const ms = enrichDataWithSkus(data.list, settleData.value)
const ms = enrichDataWithSkus(data.list, settleData.value);
state.pagination.list = _.concat(state.pagination.list, ms);
state.pagination.total = data.total;
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
@@ -178,22 +174,25 @@
mountMasonry();
}
//获取结算信息
const settleData = ref()
const settleData = ref();
async function getSettlementByIds(ids) {
const {
data
} = await SpuApi.getSettlementProduct(ids);
const { data } = await SpuApi.getSettlementProduct(ids);
return data;
}
//计算展示价格的函数
function enrichDataWithSkus(data, array) {
// 创建一个映射,以 id 为键,存储 data 数组中的对象
const dataMap = new Map(data.map(item => [item.id, {
...item
}]));
const dataMap = new Map(
data.map((item) => [
item.id,
{
...item,
},
]),
);
// 遍历 array 数组
array.forEach(item => {
array.forEach((item) => {
// 初始化 discountPrice 和 vipPrice 为 null
let discountPrice = null;
let vipPrice = null;
@@ -201,7 +200,7 @@
let foundType6 = false;
// 遍历 skus 数组,寻找 type 为 4 和 6 的首个条目
item.skus.forEach(sku => {
item.skus.forEach((sku) => {
if (!foundType4 && sku.type === 4) {
discountPrice = sku.price;
foundType4 = true;
@@ -230,10 +229,7 @@
}
// 加载活动信息
async function getActivity(id) {
const {
code,
data
} = await RewardActivityApi.getRewardActivity(id);
const { code, data } = await RewardActivityApi.getRewardActivity(id);
if (code === 0) {
state.activityInfo = data;
}
@@ -312,4 +308,4 @@
line-height: 42rpx;
}
}
</style>
</style>