yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【代码优化】差满减活动时间外，from 岳琳红 26a18e7e9a

pull/102/MERGE
YunaiV 2024-09-16 08:15:54 +08:00
parent ba56d9843f
commit e93322959e
1 changed files with 123 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

212
pages/activity/seckill/list.vue
View File

@ -2,11 +2,21 @@
<template> <template>
<s-layout navbar="inner" :bgStyle="{ color: 'rgb(245,28,19)' }"> <s-layout navbar="inner" :bgStyle="{ color: 'rgb(245,28,19)' }">
<!--顶部背景图--> <!--顶部背景图-->
<view class="page-bg" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"></view> <view
class="page-bg"
:style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"
></view>
<!-- 时间段轮播图 --> <!-- 时间段轮播图 -->
<view class="header" v-if="activeTimeConfig?.sliderPicUrls?.length > 0"> <view class="header" v-if="activeTimeConfig?.sliderPicUrls?.length > 0">
<swiper indicator-dots="true" autoplay="true" :circular="true" interval="3000" duration="1500" <swiper
indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff"> indicator-dots="true"
autoplay="true"
:circular="true"
interval="3000"
duration="1500"
indicator-color="rgba(255,255,255,0.6)"
indicator-active-color="#fff"
>
<block v-for="(picUrl, index) in activeTimeConfig.sliderPicUrls" :key="index"> <block v-for="(picUrl, index) in activeTimeConfig.sliderPicUrls" :key="index">
<swiper-item class="borRadius14"> <swiper-item class="borRadius14">
<image :src="picUrl" class="slide-image borRadius14" lazy-load /> <image :src="picUrl" class="slide-image borRadius14" lazy-load />
@ -19,12 +29,24 @@
<!-- 左侧图标 --> <!-- 左侧图标 -->
<view class="time-icon"> <view class="time-icon">
<!-- TODO 芋艿：图片统一维护 --> <!-- TODO 芋艿：图片统一维护 -->
<image class="ss-w-100 ss-h-100" src="http://mall.yudao.iocoder.cn/static/images/priceTag.png" /> <image
class="ss-w-100 ss-h-100"
src="http://mall.yudao.iocoder.cn/static/images/priceTag.png"
/>
</view> </view>
<scroll-view class="time-list" :scroll-into-view="activeTimeElId" scroll-x scroll-with-animation> <scroll-view
<view v-for="(config, index) in timeConfigList" :key="index" class="time-list"
:class="['item', { active: activeTimeIndex === index}]" :id="`timeItem${index}`" :scroll-into-view="activeTimeElId"
@tap="handleChangeTimeConfig(index,config.id)"> scroll-x
scroll-with-animation
>
<view
v-for="(config, index) in timeConfigList"
:key="index"
:class="['item', { active: activeTimeIndex === index }]"
:id="`timeItem${index}`"
@tap="handleChangeTimeConfig(index, config.id)"
>
<!-- 活动起始时间 --> <!-- 活动起始时间 -->
<view class="time">{{ config.startTime }}</view> <view class="time">{{ config.startTime }}</view>
<!-- 活动状态 --> <!-- 活动状态 -->
@ -38,7 +60,10 @@
<!-- 活动倒计时 --> <!-- 活动倒计时 -->
<view class="content-header ss-flex-col ss-col-center ss-row-center"> <view class="content-header ss-flex-col ss-col-center ss-row-center">
<view class="content-header-box ss-flex ss-row-center"> <view class="content-header-box ss-flex ss-row-center">
<view class="countdown-box ss-flex" v-if="activeTimeConfig?.status === TimeStatusEnum.STARTED"> <view
class="countdown-box ss-flex"
v-if="activeTimeConfig?.status === TimeStatusEnum.STARTED"
>
<view class="countdown-title ss-m-r-12">距结束</view> <view class="countdown-title ss-m-r-12">距结束</view>
<view class="ss-flex countdown-time"> <view class="ss-flex countdown-time">
<view class="ss-flex countdown-h">{{ countDown.h }}</view> <view class="ss-flex countdown-h">{{ countDown.h }}</view>
@ -53,148 +78,157 @@
</view> </view>
<!-- 活动列表 --> <!-- 活动列表 -->
<scroll-view class="scroll-box" :style="{ height: pageHeight + 'rpx' }" scroll-y="true" <scroll-view
:scroll-with-animation="false" :enable-back-to-top="true"> class="scroll-box"
:style="{ height: pageHeight + 'rpx' }"
scroll-y="true"
:scroll-with-animation="false"
:enable-back-to-top="true"
>
<view class="goods-box ss-m-b-20" v-for="activity in activityList" :key="activity.id"> <view class="goods-box ss-m-b-20" v-for="activity in activityList" :key="activity.id">
<s-goods-column size="lg" :data="{ ...activity, price: activity.seckillPrice }" <s-goods-column
:goodsFields="goodsFields" :seckillTag="true"> size="lg"
:data="{ ...activity, price: activity.seckillPrice }"
:goodsFields="goodsFields"
:seckillTag="true"
>
<!-- 抢购进度 --> <!-- 抢购进度 -->
<template #activity> <template #activity>
<view class="limit">限量 <text class="ss-m-l-5">{{ activity.stock}} <view class="limit">
{{activity.unitName}}</text></view> 限量
<text class="ss-m-l-5">{{ activity.stock }} {{ activity.unitName }}</text>
</view>
<su-progress :percentage="activity.percent" strokeWidth="10" textInside isAnimate /> <su-progress :percentage="activity.percent" strokeWidth="10" textInside isAnimate />
</template> </template>
<!-- 抢购按钮 --> <!-- 抢购按钮 -->
<template #cart> <template #cart>
<button <button
:class="['ss-reset-button cart-btn', { disabled: activeTimeConfig?.status === TimeStatusEnum.END}]" :class="[
v-if="activeTimeConfig?.status === TimeStatusEnum.WAIT_START"> 'ss-reset-button cart-btn',
{ disabled: activeTimeConfig?.status === TimeStatusEnum.END },
]"
v-if="activeTimeConfig?.status === TimeStatusEnum.WAIT_START"
>
<span>未开始</span> <span>未开始</span>
</button> </button>
<button <button
:class="['ss-reset-button cart-btn', { disabled: activeTimeConfig?.status === TimeStatusEnum.END}]" :class="[
'ss-reset-button cart-btn',
{ disabled: activeTimeConfig?.status === TimeStatusEnum.END },
]"
@click="sheep.$router.go('/pages/goods/seckill', { id: activity.id })" @click="sheep.$router.go('/pages/goods/seckill', { id: activity.id })"
v-else-if='activeTimeConfig?.status === TimeStatusEnum.STARTED'> v-else-if="activeTimeConfig?.status === TimeStatusEnum.STARTED"
>
<span>马上抢</span> <span>马上抢</span>
</button> </button>
<button <button
:class="['ss-reset-button cart-btn', { disabled: activeTimeConfig?.status === TimeStatusEnum.END}]" :class="[
v-else> 'ss-reset-button cart-btn',
{ disabled: activeTimeConfig?.status === TimeStatusEnum.END },
]"
v-else
>
<span>已结束</span> <span>已结束</span>
</button> </button>
</template> </template>
</s-goods-column> </s-goods-column>
</view> </view>
<uni-load-more v-if="activityTotal > 0" :status="loadStatus" :content-text="{ <uni-load-more
v-if="activityTotal > 0"
:status="loadStatus"
:content-text="{
contentdown: '上拉加载更多', contentdown: '上拉加载更多',
}" @tap="loadMore" /> }"
@tap="loadMore"
/>
</scroll-view> </scroll-view>
</view> </view>
</s-layout> </s-layout>
</template> </template>
<script setup> <script setup>
import { import { reactive, computed, ref, nextTick } from 'vue';
reactive, import { onLoad, onReachBottom } from '@dcloudio/uni-app';
computed,
ref,
nextTick
} from 'vue';
import {
onLoad,
onReachBottom
} from '@dcloudio/uni-app';
import sheep from '@/sheep'; import sheep from '@/sheep';
import { import { useDurationTime } from '@/sheep/hooks/useGoods';
useDurationTime import SeckillApi from '@/sheep/api/promotion/seckill';
} from '@/sheep/hooks/useGoods'; import dayjs from 'dayjs';
import SeckillApi from "@/sheep/api/promotion/seckill"; import { TimeStatusEnum } from '@/sheep/util/const';
import dayjs from "dayjs";
import {
TimeStatusEnum
} from "@/sheep/util/const";
// 计算页面高度 // 计算页面高度
const { const { safeAreaInsets, safeArea } = sheep.$platform.device;
safeAreaInsets,
safeArea
} = sheep.$platform.device;
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2; const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const pageHeight = (safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350; const pageHeight =
(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
const headerBg = sheep.$url.css('/static/img/shop/goods/seckill-header.png'); const headerBg = sheep.$url.css('/static/img/shop/goods/seckill-header.png');
// 商品控件显示的字段（不显示库存、销量。改为显示自定义的进度条） // 商品控件显示的字段（不显示库存、销量。改为显示自定义的进度条）
const goodsFields = { const goodsFields = {
name: { name: {
show: true show: true,
}, },
introduction: { introduction: {
show: true show: true,
}, },
price: { price: {
show: true show: true,
}, },
marketPrice: { marketPrice: {
show: true show: true,
}, },
}; };
//#region 时间段 //#region 时间段
// 时间段列表 // 时间段列表
const timeConfigList = ref([]) const timeConfigList = ref([]);
// 查询时间段 // 查询时间段
const getSeckillConfigList = async () => { const getSeckillConfigList = async () => {
const { const { data } = await SeckillApi.getSeckillConfigList();
data
} = await SeckillApi.getSeckillConfigList()
const now = dayjs(); const now = dayjs();
const today = now.format('YYYY-MM-DD') const today = now.format('YYYY-MM-DD');
const select = ref([]) const select = ref([]);
// 判断时间段的状态 // 判断时间段的状态
data.forEach((config, index) => { data.forEach((config, index) => {
const startTime = dayjs(`${today} ${config.startTime}`) const startTime = dayjs(`${today} ${config.startTime}`);
const endTime = dayjs(`${today} ${config.endTime}`) const endTime = dayjs(`${today} ${config.endTime}`);
select.value[index] = config.id; select.value[index] = config.id;
if (now.isBefore(startTime)) { if (now.isBefore(startTime)) {
config.status = TimeStatusEnum.WAIT_START; config.status = TimeStatusEnum.WAIT_START;
// select.value[index] = config.id;
} else if (now.isAfter(endTime)) { } else if (now.isAfter(endTime)) {
config.status = TimeStatusEnum.END; config.status = TimeStatusEnum.END;
// select.value[index] = config.id;
} else { } else {
config.status = TimeStatusEnum.STARTED; config.status = TimeStatusEnum.STARTED;
// select.value[index] = config.id; activeTimeIndex.value = index;
activeTimeIndex.value = index
} }
}) });
timeConfigList.value = data timeConfigList.value = data;
// 默认选中进行中的活动 // 默认选中进行中的活动
handleChangeTimeConfig(activeTimeIndex.value, select.value[activeTimeIndex.value]); handleChangeTimeConfig(activeTimeIndex.value, select.value[activeTimeIndex.value]);
// 滚动到进行中的时间段 // 滚动到进行中的时间段
scrollToTimeConfig(activeTimeIndex.value) scrollToTimeConfig(activeTimeIndex.value);
} };
// 滚动到指定时间段 // 滚动到指定时间段
const activeTimeElId = ref('') // 当前选中的时间段的元素ID const activeTimeElId = ref(''); // 当前选中的时间段的元素ID
const scrollToTimeConfig = (index) => { const scrollToTimeConfig = (index) => {
nextTick(() => activeTimeElId.value = `timeItem${index}`) nextTick(() => (activeTimeElId.value = `timeItem${index}`));
} };
// 切换时间段 // 切换时间段
const activeTimeIndex = ref(0) // 当前选中的时间段的索引 const activeTimeIndex = ref(0); // 当前选中的时间段的索引
const activeTimeConfig = computed(() => timeConfigList.value[activeTimeIndex.value]) // 当前选中的时间段 const activeTimeConfig = computed(() => timeConfigList.value[activeTimeIndex.value]); // 当前选中的时间段
const handleChangeTimeConfig = (index, id) => { const handleChangeTimeConfig = (index, id) => {
activeTimeIndex.value = index activeTimeIndex.value = index;
// 查询活动列表 // 查询活动列表
activityPageParams.pageNo = 1 activityPageParams.pageNo = 1;
activityPageParams.configId = id; activityPageParams.configId = id;
activityList.value = [] activityList.value = [];
getActivityList(); getActivityList();
} };
// 倒计时 // 倒计时
const countDown = computed(() => { const countDown = computed(() => {
const endTime = activeTimeConfig.value?.endTime const endTime = activeTimeConfig.value?.endTime;
if (endTime) { if (endTime) {
return useDurationTime(`${dayjs().format('YYYY-MM-DD')} ${endTime}`); return useDurationTime(`${dayjs().format('YYYY-MM-DD')} ${endTime}`);
} }
@ -209,19 +243,19 @@
configId: 0, // 时间段 ID configId: 0, // 时间段 ID
pageNo: 1, // 页码 pageNo: 1, // 页码
pageSize: 5, // 每页数量 pageSize: 5, // 每页数量
}) });
const activityTotal = ref(0) // 活动总数 const activityTotal = ref(0); // 活动总数
const activityList = ref([]) // 活动列表 const activityList = ref([]); // 活动列表
const loadStatus = ref('') // 页面加载状态 const loadStatus = ref(''); // 页面加载状态
async function getActivityList() { async function getActivityList() {
loadStatus.value = 'loading'; loadStatus.value = 'loading';
const { const { data } = await SeckillApi.getSeckillActivityPage(activityPageParams);
data data.list.forEach((activity) => {
} = await SeckillApi.getSeckillActivityPage(activityPageParams)
data.list.forEach(activity => {
// 计算抢购进度 // 计算抢购进度
activity.percent = parseInt(100 * (activity.totalStock - activity.stock) / activity.totalStock); activity.percent = parseInt(
}) (100 * (activity.totalStock - activity.stock)) / activity.totalStock,
);
});
activityList.value = activityList.value.concat(...data.list); activityList.value = activityList.value.concat(...data.list);
activityTotal.value = data.total; activityTotal.value = data.total;
@ -231,7 +265,7 @@
// 加载更多 // 加载更多
function loadMore() { function loadMore() {
if (loadStatus.value !== 'noMore') { if (loadStatus.value !== 'noMore') {
activityPageParams.pageNo += 1 activityPageParams.pageNo += 1;
getActivityList(); getActivityList();
} }
} }
@ -242,7 +276,7 @@
// 页面初始化 // 页面初始化
onLoad(async () => { onLoad(async () => {
await getSeckillConfigList() await getSeckillConfigList();
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -424,4 +458,4 @@
} }
} }
} }
</style> </style>