You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
351 lines
8.8 KiB
351 lines
8.8 KiB
<!--
|
|
* @Author: ch
|
|
* @Date: 2022-05-04 17:25:41
|
|
* @LastEditors: ch
|
|
* @LastEditTime: 2022-05-04 17:26:08
|
|
* @Description: file content
|
|
-->
|
|
<template>
|
|
<div class="seckill">
|
|
<div v-show="isSticky" class="seckill-header-sticky">
|
|
<TabBar
|
|
v-model="query.activityTimeId"
|
|
:list="tabList"
|
|
@tab-click="getGoodsList"
|
|
/>
|
|
</div>
|
|
<!-- 秒杀时间段 -->
|
|
<div
|
|
class="seckill-header"
|
|
:style="{ backgroundImage: `url(${bkgSckill})` }"
|
|
>
|
|
<div class="seckill-header-tabbar">
|
|
<TabBar
|
|
v-model="query.activityTimeId"
|
|
:list="tabList"
|
|
@tab-click="getGoodsList"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="seckill-bar flex flex-middle flex-center">
|
|
<p>{{ seckillTip }}</p>
|
|
<div class="seckill-bar-countdown flex flex-middle">
|
|
<div class="seckill-bar-countdown__time">{{ countdown.hour }}</div>
|
|
<span class="seckill-bar-countdown--mark">:</span>
|
|
<div class="seckill-bar-countdown__time">{{ countdown.minute }}</div>
|
|
<span class="seckill-bar-countdown--mark">:</span>
|
|
<div class="seckill-bar-countdown__time">{{ countdown.second }}</div>
|
|
</div>
|
|
</div>
|
|
<!-- 秒杀商品列表 -->
|
|
<div v-loading="loading" class="seckill-products flex flex-wrap">
|
|
<div
|
|
v-for="item in goodsList"
|
|
:key="item.productId"
|
|
@click="onJumpGoodsDetail(item.productId)"
|
|
class="seckill-products-wrap"
|
|
>
|
|
<img
|
|
:src="item.productMainPicture"
|
|
class="seckill-products-wrap__cover"
|
|
/>
|
|
<div class="seckill-products-wrap__content">
|
|
<p class="products-wrap-content__title">{{ item.productName }}</p>
|
|
<div class="products-wrap-content__price">
|
|
<strong>￥{{ item.activityPrice }}</strong>
|
|
<del>￥{{ item.originalPrice }}</del>
|
|
</div>
|
|
<div
|
|
class="products-wrap-content__footer flex flex-middle flex-between"
|
|
>
|
|
<div class="wrap-content-footer__stock">
|
|
<el-progress :percentage="40" :show-text="false"></el-progress>
|
|
<p>仅剩{{ item.stock }}件</p>
|
|
</div>
|
|
<div class="wrap-content-footer__btn">立即抢购</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 分页 -->
|
|
<div class="seckill-pagination flex flex-right">
|
|
<el-pagination
|
|
background
|
|
:current-page="currentPage"
|
|
:page-size="query.length"
|
|
layout="prev, pager, next, jumper"
|
|
:total="total"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
>
|
|
</el-pagination>
|
|
<el-button class="btn-confirm">确定</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { ApiGetSeckillTimes, ApiGetSeckillGoods } from "@/plugins/api/seckill";
|
|
import { FormatDate } from "@/plugins/utils";
|
|
import TabBar from "./module/TabBar.vue";
|
|
|
|
export default {
|
|
name: "Sckill",
|
|
components: { TabBar },
|
|
data() {
|
|
return {
|
|
bkgSckill: require("~/assets/img/sckill/bkg-large.png"),
|
|
tabList: [], // 秒杀时间段
|
|
goodsList: [], // 商品列表
|
|
total: 0,
|
|
currentPage: 0,
|
|
loading: false,
|
|
query: {
|
|
pageIndex: 1,
|
|
length: 16,
|
|
activityTimeId: 1,
|
|
},
|
|
ticking: false,
|
|
isSticky: false,
|
|
};
|
|
},
|
|
computed: {
|
|
countdown() {
|
|
return {
|
|
hour: "01",
|
|
minute: "32",
|
|
second: "09",
|
|
};
|
|
},
|
|
|
|
// 当前选中时间段
|
|
currentTabItem() {
|
|
const tabItem = this.tabList.find(
|
|
(item) => item.id === this.query.activityTimeId
|
|
);
|
|
return tabItem || null;
|
|
},
|
|
|
|
// 当前时间段秒杀文案
|
|
seckillTip() {
|
|
if (this.currentTabItem) {
|
|
return this.currentTabItem.isInProgress
|
|
? "本场正在秒杀中，好物转瞬即逝，不要错过哦~距结束仅剩"
|
|
: "本场秒杀即将开抢，距开始还剩";
|
|
}
|
|
return "";
|
|
},
|
|
},
|
|
|
|
created() {
|
|
this.getSeckillTimes();
|
|
},
|
|
mounted() {
|
|
// 监听滚动事件
|
|
window.addEventListener("scroll", this.scrollEventMethod);
|
|
},
|
|
destroyed() {
|
|
window.removeEventListener("scroll", this.scrollEventMethod);
|
|
},
|
|
methods: {
|
|
scrollEventMethod() {
|
|
const that = this;
|
|
// 节流
|
|
if (!that.ticking) {
|
|
window.requestAnimationFrame(function () {
|
|
that.ticking = false;
|
|
that.isSticky = window.scrollY > 400;
|
|
});
|
|
that.ticking = true;
|
|
}
|
|
},
|
|
async getSeckillTimes() {
|
|
const { result } = await ApiGetSeckillTimes();
|
|
if (result && result.length > 0) {
|
|
this.tabList = result;
|
|
const inProgressItem = result.find((item) => item.isInProgress);
|
|
this.query.activityTimeId =
|
|
(inProgressItem && inProgressItem.id) || result[0].id;
|
|
this.getGoodsList();
|
|
}
|
|
},
|
|
async getGoodsList() {
|
|
this.loading = true;
|
|
const { result } = await ApiGetSeckillGoods({ ...this.query });
|
|
this.loading = false;
|
|
if (result) {
|
|
this.total = result.total;
|
|
this.goodsList = result.records;
|
|
}
|
|
},
|
|
onJumpGoodsDetail(id) {
|
|
this.$router.push(`/goods/detail/${id}`);
|
|
},
|
|
handleSizeChange(size) {
|
|
this.query.length = size;
|
|
this.getGoodsList();
|
|
},
|
|
handleCurrentChange(page) {
|
|
this.query.pageIndex = page;
|
|
this.getGoodsList();
|
|
},
|
|
handleTabSelect(id) {
|
|
this.query.activityTimeId = id;
|
|
Object.assign(this.query, {
|
|
pageIndex: 1,
|
|
length: 16,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.seckill {
|
|
background: #f8f8f8;
|
|
padding-bottom: 42px;
|
|
.seckill-header-sticky {
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
top: 50px;
|
|
z-index: 1;
|
|
@include layout-box;
|
|
}
|
|
.seckill-header {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 156px;
|
|
background-size: 100% 100%;
|
|
.seckill-header-tabbar {
|
|
@include layout-box;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translate(-50%);
|
|
}
|
|
}
|
|
.seckill-bar {
|
|
height: 60px;
|
|
line-height: 60px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: #666666;
|
|
.seckill-bar-countdown {
|
|
margin-left: 25px;
|
|
font-weight: bold;
|
|
&__time {
|
|
width: 22px;
|
|
height: 22px;
|
|
line-height: 22px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
background: #2f3430;
|
|
}
|
|
&--mark {
|
|
display: block;
|
|
margin: 0 7px;
|
|
color: #2f3430;
|
|
}
|
|
}
|
|
}
|
|
.seckill-products,
|
|
.seckill-pagination {
|
|
@include layout-box;
|
|
}
|
|
.seckill-products {
|
|
.seckill-products-wrap {
|
|
width: 24%;
|
|
background: #ffffff;
|
|
margin: 15px 0 60px 0;
|
|
cursor: pointer;
|
|
&:not(:nth-child(4n)) {
|
|
margin-right: calc(4% / 3);
|
|
}
|
|
.seckill-products-wrap__cover {
|
|
width: 100%;
|
|
height: 288px;
|
|
}
|
|
.seckill-products-wrap__content {
|
|
padding: 20px 16px;
|
|
.products-wrap-content__title {
|
|
@include ellipsis;
|
|
color: #333333;
|
|
font-size: 16px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.products-wrap-content__price {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
margin-bottom: 7px;
|
|
strong {
|
|
font-size: 18px;
|
|
color: #ff512b;
|
|
margin-right: 14px;
|
|
}
|
|
}
|
|
.products-wrap-content__footer {
|
|
.wrap-content-footer__stock {
|
|
font-size: 12px;
|
|
color: #666666;
|
|
/deep/.el-progress {
|
|
width: 100px;
|
|
height: 6px;
|
|
background: #dddddd;
|
|
border-radius: 4px;
|
|
margin-bottom: 8px;
|
|
}
|
|
}
|
|
.wrap-content-footer__btn {
|
|
width: 100px;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
text-align: center;
|
|
background: #ff512b;
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.seckill-pagination {
|
|
margin-top: 60px;
|
|
/deep/.el-pagination {
|
|
.btn-prev,
|
|
.btn-next {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: #ffffff;
|
|
border-radius: 2px;
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
}
|
|
.el-pagination__jump {
|
|
color: #333333;
|
|
}
|
|
.el-pager {
|
|
.number {
|
|
width: 32px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
font-size: 14px;
|
|
background: #ffffff;
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
border-radius: 2px;
|
|
}
|
|
.active {
|
|
color: #ffffff;
|
|
background: #ff512b;
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
.btn-confirm {
|
|
width: 81px;
|
|
height: 32px;
|
|
border-radius: 2px;
|
|
margin-left: 14px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|