msb-mca
/
shop-pc
2.1k
2
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 秒杀活动倒计时

Browse Source
merge-requests/26/head
xiaoguang 2 years ago
parent f3d14a0e4d
commit 1dadcc18e4
5 changed files with 135 additions and 53 deletions
Show Stats Download Patch File Download Diff File

8
constants/index.js
Unescape View File

@ -25,4 +25,10 @@ const CATEGROY_LEVEL = {
TWO: 2, TWO: 2,
}; };
export { TOKEN_KEY, ORDER_STATUS, SEX_TYPE, CATEGROY_LEVEL }; // 秒杀活动状态
const SECKILL_STATUS = {
NOT_START: 1, // 未开始
GOING: 2, // 进行中
};
export { TOKEN_KEY, ORDER_STATUS, SEX_TYPE, CATEGROY_LEVEL, SECKILL_STATUS };

25
pages/index/index.vue
Unescape View File

@ -9,24 +9,41 @@
<div class="home"> <div class="home">
<Banner /> <Banner />
<div class="home-wrap"> <div class="home-wrap">
<Seckil v-if="seckillData.activityTimeVO" :data="seckillData" /> <Seckil
v-if="seckillData.activityTimeVO"
:data="seckillData"
:current="currentTime"
@refresh="handleSeckillRefresh"
/>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { ApiGetHomeSeckill } from "@/plugins/api/seckill"; import { ApiGetHomeSeckill, ApiGetCurrentTime } from "@/plugins/api/seckill";
import Banner from "./module/Banner.vue"; import Banner from "./module/Banner.vue";
import Seckil from "./module/Seckill.vue"; import Seckil from "./module/Seckill.vue";
export default { export default {
components: { Banner, Seckil }, components: { Banner, Seckil },
async asyncData() { async asyncData() {
// 获取秒杀数据 // 获取秒杀数据
const { result } = await ApiGetHomeSeckill(); const { result: seckillData } = await ApiGetHomeSeckill();
// 获取服务器当前时间
const { result: currentTime } = await ApiGetCurrentTime();
return { return {
seckillData: result, currentTime,
seckillData,
}; };
}, },
methods: {
// 刷新秒杀活动状态
async handleSeckillRefresh() {
const { result: seckillData } = await ApiGetHomeSeckill();
const { result: currentTime } = await ApiGetCurrentTime();
this.seckillData = seckillData;
this.currentTime = currentTime;
},
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

49
pages/index/module/Seckill.vue
Unescape View File

@ -66,7 +66,6 @@
</template> </template>
<script> <script>
import _ from "lodash"; import _ from "lodash";
import { FormatDate } from "@/plugins/utils";
const CAROUSEL_COUNT = 5; // 走马灯每页展示商品数 const CAROUSEL_COUNT = 5; // 走马灯每页展示商品数
@ -77,6 +76,10 @@ export default {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
current: {
type: Number,
default: 0,
},
}, },
data() { data() {
return { return {
@ -93,15 +96,13 @@ export default {
immediate: true, immediate: true,
handler(val) { handler(val) {
const { const {
currentTime,
activityProductListVO: products, activityProductListVO: products,
activityTimeVO: { activityEndTime, activityStartTime }, activityTimeVO: { activityStartTime, activityEndTime },
} = val; } = val;
if (products && products.length > 0) { if (products && products.length > 0) {
this.getFormatData(products); this.setCarouselData(products);
} }
this.getSeckillData({ this.setTimerInterval({
currentTime,
startTime: activityStartTime, startTime: activityStartTime,
endTime: activityEndTime, endTime: activityEndTime,
}); });
@ -111,12 +112,14 @@ export default {
computed: { computed: {
// 秒杀活动倒计时 // 秒杀活动倒计时
countdown() { countdown() {
const date = FormatDate(this.seckillTime, "hh:mm:ss"); const data = parseInt(this.seckillTime / 1e3);
const [hour, minute, second] = date.split(":"); const hour = Math.floor(data / 60 / 60);
const minute = Math.floor((data / 60) % 60);
const second = Math.floor(data % 60);
return { return {
hour, hour: hour < 10 ? `0${hour}` : `${hour}`,
minute, minute: minute < 10 ? `0${minute}` : `${minute}`,
second, second: second < 10 ? `0${second}` : `${second}`,
}; };
}, },
}, },
@ -125,7 +128,7 @@ export default {
}, },
methods: { methods: {
// 走马灯商品列表，五个商品为一组 // 走马灯商品列表，五个商品为一组
getFormatData(list) { setCarouselData(list) {
const listCopy = _.cloneDeep(list); const listCopy = _.cloneDeep(list);
const part = Math.ceil(listCopy.length / CAROUSEL_COUNT); const part = Math.ceil(listCopy.length / CAROUSEL_COUNT);
if (part === 1) { if (part === 1) {
@ -137,28 +140,26 @@ export default {
this.goodsList.push(goodsListItem); this.goodsList.push(goodsListItem);
} }
}, },
// 获取秒杀时间数据
getSeckillData({ current, startTime, endTime }) { // 获取秒杀倒计时时间
current = new Date(current); setTimerInterval({ startTime, endTime }) {
startTime = new Date(startTime); startTime = new Date(startTime).getTime();
endTime = new Date(endTime); endTime = new Date(endTime).getTime();
if (current > startTime && current < endTime) { if (this.current > startTime && this.current < endTime) {
// 活动进行中 // 活动进行中
this.seckillText = "距结束"; this.seckillText = "距结束";
this.seckillTime = endTime - current; this.seckillTime = endTime - this.current;
} else { } else {
// 活动未开始 // 活动未开始
this.seckillText = "距开始"; this.seckillText = "距开始";
this.seckillTime = startTime - current; this.seckillTime = startTime - this.current;
} }
this.setCountDownInterval();
},
// 秒杀倒计时
setCountDownInterval() {
this.timeInterval = setInterval(() => { this.timeInterval = setInterval(() => {
if (this.seckillTime <= 0) { if (this.seckillTime <= 0) {
clearInterval(this.timeInterval); clearInterval(this.timeInterval);
this.$emit("refresh");
return;
} }
this.seckillTime -= 1000; this.seckillTime -= 1000;
}, 1e3); }, 1e3);

100
pages/seckill/index.vue
Unescape View File

@ -27,7 +27,11 @@
/> />
</div> </div>
</div> </div>
<div class="seckill-bar flex flex-middle flex-center"> <!-- 倒计时展示 -->
<div
v-if="tabList.length > 0"
class="seckill-bar flex flex-middle flex-center"
>
<p>{{ seckillTip }}</p> <p>{{ seckillTip }}</p>
<div class="seckill-bar-countdown flex flex-middle"> <div class="seckill-bar-countdown flex flex-middle">
<div class="seckill-bar-countdown__time">{{ countdown.hour }}</div> <div class="seckill-bar-countdown__time">{{ countdown.hour }}</div>
@ -84,8 +88,11 @@
</div> </div>
</template> </template>
<script> <script>
import { ApiGetSeckillTimes, ApiGetSeckillGoods } from "@/plugins/api/seckill"; import {
import { FormatDate } from "@/plugins/utils"; ApiGetSeckillTimes,
ApiGetSeckillGoods,
ApiGetCurrentTime,
} from "@/plugins/api/seckill";
import TabBar from "./module/TabBar.vue"; import TabBar from "./module/TabBar.vue";
export default { export default {
@ -102,37 +109,47 @@ export default {
query: { query: {
pageIndex: 1, pageIndex: 1,
length: 16, length: 16,
activityTimeId: 1, activityTimeId: 0,
}, },
ticking: false, ticking: false,
isSticky: false, isSticky: false,
currentTabItem: null, // 当前选中时间段
timeInterval: null, // 倒计时定时器
seckillTip: "", // 秒杀提示文案
seckillTime: 0, // 秒杀时间
}; };
}, },
computed: { computed: {
countdown() { countdown() {
const data = parseInt(this.seckillTime / 1e3);
const hour = Math.floor(data / 60 / 60);
const minute = Math.floor((data / 60) % 60);
const second = Math.floor(data % 60);
return { return {
hour: "01", hour: hour < 10 ? `0${hour}` : `${hour}`,
minute: "32", minute: minute < 10 ? `0${minute}` : `${minute}`,
second: "09", second: second < 10 ? `0${second}` : `${second}`,
}; };
}, },
},
// 当前选中时间段 watch: {
currentTabItem() { "query.activityTimeId": {
const tabItem = this.tabList.find( immediate: true,
(item) => item.id === this.query.activityTimeId handler(val) {
); if (val === 0) {
return tabItem || null; return;
}, }
clearImmediate(this.timeInterval);
// 当前时间段秒杀文案 const tabItem = this.tabList.find((item) => item.id === val);
seckillTip() { if (tabItem) {
if (this.currentTabItem) { this.currentTabItem = tabItem;
return this.currentTabItem.isInProgress const { activityStartTime, activityEndTime } = tabItem;
? "本场正在秒杀中，好物转瞬即逝，不要错过哦~距结束仅剩" this.setTimerInterval({
: "本场秒杀即将开抢，距开始还剩"; startTime: activityStartTime,
} endTime: activityEndTime,
return ""; });
}
},
}, },
}, },
@ -145,6 +162,7 @@ export default {
}, },
destroyed() { destroyed() {
window.removeEventListener("scroll", this.scrollEventMethod); window.removeEventListener("scroll", this.scrollEventMethod);
clearInterval(this.timeInterval);
}, },
methods: { methods: {
scrollEventMethod() { scrollEventMethod() {
@ -177,6 +195,39 @@ export default {
this.goodsList = result.records; this.goodsList = result.records;
} }
}, },
// 设置定时器
async setTimerInterval({ startTime, endTime }) {
// 获取服务器当前时间
const { result } = await ApiGetCurrentTime();
const current = result || Date.now();
startTime = new Date(startTime).getTime();
endTime = new Date(endTime).getTime();
if (current > endTime) {
// 秒杀结束
this.getSeckillTimes();
return;
}
if (startTime < current && endTime > current) {
// 秒杀进行中
this.seckillTime = endTime - current;
this.seckillTip = "本场正在秒杀中，好物转瞬即逝，不要错过哦~距结束仅剩";
} else {
// 秒杀未开始
this.seckillTime = startTime - current;
this.seckillTip = "本场秒杀即将开抢，距开始还剩";
}
this.timeInterval = setInterval(() => {
if (this.seckillTime <= 0) {
clearInterval(this.timeInterval);
this.getSeckillTimes();
return;
}
this.seckillTime -= 1e3;
}, 1e3);
},
onJumpGoodsDetail(id) { onJumpGoodsDetail(id) {
this.$router.push(`/goods/detail/${id}`); this.$router.push(`/goods/detail/${id}`);
}, },
@ -194,6 +245,7 @@ export default {
pageIndex: 1, pageIndex: 1,
length: 16, length: 16,
}); });
this.getGoodsList();
}, },
}, },
}; };

6
plugins/api/seckill.js
Unescape View File

@ -25,3 +25,9 @@ const BASE_URL = `${ENV.base_url}/mall/marketing`;
export const ApiGetSeckillGoods = (params) => export const ApiGetSeckillGoods = (params) =>
ToAsyncAwait(axios.get(`${BASE_URL}/app/activity/product`, { params })); ToAsyncAwait(axios.get(`${BASE_URL}/app/activity/product`, { params }));
/**
* 获取当前服务器时间
*/
export const ApiGetCurrentTime = () =>
ToAsyncAwait(axios.get(`${BASE_URL}/app/activity/timestamp`));

Write Preview
Loading…
Cancel
Save