|
|
|
@ -6,51 +6,50 @@
|
|
|
|
* @Description: file content
|
|
|
|
* @Description: file content
|
|
|
|
-->
|
|
|
|
-->
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div class="sckill">
|
|
|
|
<div class="seckill">
|
|
|
|
|
|
|
|
<div v-show="isSticky" class="seckill-header-sticky">
|
|
|
|
|
|
|
|
<TabBar
|
|
|
|
|
|
|
|
v-model="query.activityTimeId"
|
|
|
|
|
|
|
|
:list="tabList"
|
|
|
|
|
|
|
|
@tab-click="getGoodsList"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!-- 秒杀时间段 -->
|
|
|
|
<!-- 秒杀时间段 -->
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
class="sckill-header"
|
|
|
|
class="seckill-header"
|
|
|
|
:style="{ backgroundImage: `url(${bkgSckill})` }"
|
|
|
|
:style="{ backgroundImage: `url(${bkgSckill})` }"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div class="sckill-header-tabbar flex">
|
|
|
|
<div class="seckill-header-tabbar">
|
|
|
|
<div
|
|
|
|
<TabBar
|
|
|
|
v-for="item in tabList"
|
|
|
|
v-model="query.activityTimeId"
|
|
|
|
:key="item.id"
|
|
|
|
:list="tabList"
|
|
|
|
@click="onTabSelect(item.id)"
|
|
|
|
@tab-click="getGoodsList"
|
|
|
|
class="sckill-header-tabbar__item flex flex-middle flex-center"
|
|
|
|
/>
|
|
|
|
:class="{
|
|
|
|
|
|
|
|
'sckill-header-tabbar__item--active':
|
|
|
|
|
|
|
|
item.id === query.activityTimeId,
|
|
|
|
|
|
|
|
}"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<strong class="header-tabbar-item__time">18:00</strong>
|
|
|
|
|
|
|
|
<div class="header-tabbar-item__tip">抢购中</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="sckill-bar flex flex-middle flex-center">
|
|
|
|
<div class="seckill-bar flex flex-middle flex-center">
|
|
|
|
<p>本场秒杀即将开抢，距开始还剩</p>
|
|
|
|
<p>{{ seckillTip }}</p>
|
|
|
|
<div class="sckill-bar-countdown flex flex-middle">
|
|
|
|
<div class="seckill-bar-countdown flex flex-middle">
|
|
|
|
<div class="sckill-bar-countdown__time">{{ countdown.hour }}</div>
|
|
|
|
<div class="seckill-bar-countdown__time">{{ countdown.hour }}</div>
|
|
|
|
<span class="sckill-bar-countdown--mark">:</span>
|
|
|
|
<span class="seckill-bar-countdown--mark">:</span>
|
|
|
|
<div class="sckill-bar-countdown__time">{{ countdown.minute }}</div>
|
|
|
|
<div class="seckill-bar-countdown__time">{{ countdown.minute }}</div>
|
|
|
|
<span class="sckill-bar-countdown--mark">:</span>
|
|
|
|
<span class="seckill-bar-countdown--mark">:</span>
|
|
|
|
<div class="sckill-bar-countdown__time">{{ countdown.second }}</div>
|
|
|
|
<div class="seckill-bar-countdown__time">{{ countdown.second }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 秒杀商品列表 -->
|
|
|
|
<!-- 秒杀商品列表 -->
|
|
|
|
<div v-loading="loading" class="sckill-products flex flex-wrap">
|
|
|
|
<div v-loading="loading" class="seckill-products flex flex-wrap">
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
v-for="item in goodsList"
|
|
|
|
v-for="item in goodsList"
|
|
|
|
:key="item.productId"
|
|
|
|
:key="item.productId"
|
|
|
|
@click="onJumpGoodsDetail(item.productId)"
|
|
|
|
@click="onJumpGoodsDetail(item.productId)"
|
|
|
|
class="sckill-products-wrap"
|
|
|
|
class="seckill-products-wrap"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<img
|
|
|
|
<img
|
|
|
|
:src="item.productMainPicture"
|
|
|
|
:src="item.productMainPicture"
|
|
|
|
class="sckill-products-wrap__cover"
|
|
|
|
class="seckill-products-wrap__cover"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<div class="sckill-products-wrap__content">
|
|
|
|
<div class="seckill-products-wrap__content">
|
|
|
|
<p class="products-wrap-content__title">{{ item.productName }}</p>
|
|
|
|
<p class="products-wrap-content__title">{{ item.productName }}</p>
|
|
|
|
<div class="products-wrap-content__price">
|
|
|
|
<div class="products-wrap-content__price">
|
|
|
|
<strong>￥{{ item.activityPrice }}</strong>
|
|
|
|
<strong>￥{{ item.activityPrice }}</strong>
|
|
|
|
@ -69,7 +68,7 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
|
|
<!-- 分页 -->
|
|
|
|
<div class="sckill-pagination flex flex-right">
|
|
|
|
<div class="seckill-pagination flex flex-right">
|
|
|
|
<el-pagination
|
|
|
|
<el-pagination
|
|
|
|
background
|
|
|
|
background
|
|
|
|
:current-page="currentPage"
|
|
|
|
:current-page="currentPage"
|
|
|
|
@ -86,21 +85,27 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import { ApiGetSeckillTimes, ApiGetSeckillGoods } from "@/plugins/api/seckill";
|
|
|
|
import { ApiGetSeckillTimes, ApiGetSeckillGoods } from "@/plugins/api/seckill";
|
|
|
|
|
|
|
|
import { FormatDate } from "@/plugins/utils";
|
|
|
|
|
|
|
|
import TabBar from "./module/TabBar.vue";
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: "Sckill",
|
|
|
|
name: "Sckill",
|
|
|
|
|
|
|
|
components: { TabBar },
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
bkgSckill: require("~/assets/img/sckill/bkg-large.png"),
|
|
|
|
bkgSckill: require("~/assets/img/sckill/bkg-large.png"),
|
|
|
|
tabList: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }], // 秒杀时间段
|
|
|
|
tabList: [], // 秒杀时间段
|
|
|
|
goodsList: [], // 商品列表
|
|
|
|
goodsList: [], // 商品列表
|
|
|
|
total: 0,
|
|
|
|
total: 0,
|
|
|
|
currentPage: 0,
|
|
|
|
currentPage: 0,
|
|
|
|
loading: false,
|
|
|
|
loading: false,
|
|
|
|
query: {
|
|
|
|
query: {
|
|
|
|
pageIndex: 1,
|
|
|
|
pageIndex: 1,
|
|
|
|
length: 12,
|
|
|
|
length: 16,
|
|
|
|
activityTimeId: 1,
|
|
|
|
activityTimeId: 1,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
ticking: false,
|
|
|
|
|
|
|
|
isSticky: false,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
computed: {
|
|
|
|
@ -111,16 +116,55 @@ export default {
|
|
|
|
second: "09",
|
|
|
|
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() {
|
|
|
|
created() {
|
|
|
|
this.getSeckillTimes();
|
|
|
|
this.getSeckillTimes();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
|
|
|
|
// 监听滚动事件
|
|
|
|
|
|
|
|
window.addEventListener("scroll", this.scrollEventMethod);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
destroyed() {
|
|
|
|
|
|
|
|
window.removeEventListener("scroll", this.scrollEventMethod);
|
|
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
scrollEventMethod() {
|
|
|
|
|
|
|
|
const that = this;
|
|
|
|
|
|
|
|
// 节流
|
|
|
|
|
|
|
|
if (!that.ticking) {
|
|
|
|
|
|
|
|
window.requestAnimationFrame(function () {
|
|
|
|
|
|
|
|
that.ticking = false;
|
|
|
|
|
|
|
|
that.isSticky = window.scrollY > 400;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
that.ticking = true;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
async getSeckillTimes() {
|
|
|
|
async getSeckillTimes() {
|
|
|
|
const { result } = await ApiGetSeckillTimes();
|
|
|
|
const { result } = await ApiGetSeckillTimes();
|
|
|
|
if (result && result.length > 0) {
|
|
|
|
if (result && result.length > 0) {
|
|
|
|
this.tabList = result;
|
|
|
|
this.tabList = result;
|
|
|
|
this.query.activityTimeId = result[0].id;
|
|
|
|
const inProgressItem = result.find((item) => item.isInProgress);
|
|
|
|
|
|
|
|
this.query.activityTimeId =
|
|
|
|
|
|
|
|
(inProgressItem && inProgressItem.id) || result[0].id;
|
|
|
|
this.getGoodsList();
|
|
|
|
this.getGoodsList();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
@ -144,72 +188,48 @@ export default {
|
|
|
|
this.query.pageIndex = page;
|
|
|
|
this.query.pageIndex = page;
|
|
|
|
this.getGoodsList();
|
|
|
|
this.getGoodsList();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
onTabSelect(id) {
|
|
|
|
handleTabSelect(id) {
|
|
|
|
this.query.activityTimeId = id;
|
|
|
|
this.query.activityTimeId = id;
|
|
|
|
Object.assign(this.query, {
|
|
|
|
Object.assign(this.query, {
|
|
|
|
pageIndex: 1,
|
|
|
|
pageIndex: 1,
|
|
|
|
length: 10,
|
|
|
|
length: 16,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.sckill {
|
|
|
|
.seckill {
|
|
|
|
background: #f8f8f8;
|
|
|
|
background: #f8f8f8;
|
|
|
|
padding-bottom: 42px;
|
|
|
|
padding-bottom: 42px;
|
|
|
|
.sckill-header {
|
|
|
|
.seckill-header-sticky {
|
|
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
|
|
transform: translate(-50%);
|
|
|
|
|
|
|
|
top: 50px;
|
|
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
|
|
@include layout-box;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.seckill-header {
|
|
|
|
position: relative;
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
height: 156px;
|
|
|
|
height: 156px;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
.sckill-header-tabbar {
|
|
|
|
.seckill-header-tabbar {
|
|
|
|
|
|
|
|
@include layout-box;
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
left: 50%;
|
|
|
|
left: 50%;
|
|
|
|
bottom: 0;
|
|
|
|
bottom: 0;
|
|
|
|
transform: translate(-50%);
|
|
|
|
transform: translate(-50%);
|
|
|
|
height: 60px;
|
|
|
|
|
|
|
|
border-radius: 4px 4px 0px 0px;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
.sckill-header-tabbar__item {
|
|
|
|
|
|
|
|
width: 240px;
|
|
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
|
|
|
color: #666666;
|
|
|
|
|
|
|
|
.header-tabbar-item__time {
|
|
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
|
|
margin-right: 22px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.header-tabbar-item__tip {
|
|
|
|
|
|
|
|
width: 69px;
|
|
|
|
|
|
|
|
height: 22px;
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
border: 1px solid #999999;
|
|
|
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
&--active {
|
|
|
|
|
|
|
|
background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
|
|
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
.header-tabbar-item__time {
|
|
|
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.header-tabbar-item__tip {
|
|
|
|
|
|
|
|
border-color: #ffffff;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.sckill-bar {
|
|
|
|
.seckill-bar {
|
|
|
|
height: 60px;
|
|
|
|
height: 60px;
|
|
|
|
line-height: 60px;
|
|
|
|
line-height: 60px;
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
font-size: 14px;
|
|
|
|
font-size: 14px;
|
|
|
|
color: #666666;
|
|
|
|
color: #666666;
|
|
|
|
.sckill-bar-countdown {
|
|
|
|
.seckill-bar-countdown {
|
|
|
|
margin-left: 25px;
|
|
|
|
margin-left: 25px;
|
|
|
|
font-weight: bold;
|
|
|
|
font-weight: bold;
|
|
|
|
&__time {
|
|
|
|
&__time {
|
|
|
|
@ -228,23 +248,24 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.sckill-products,
|
|
|
|
.seckill-products,
|
|
|
|
.sckill-pagination {
|
|
|
|
.seckill-pagination {
|
|
|
|
@include layout-box;
|
|
|
|
@include layout-box;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.sckill-products {
|
|
|
|
.seckill-products {
|
|
|
|
.sckill-products-wrap {
|
|
|
|
.seckill-products-wrap {
|
|
|
|
width: 24%;
|
|
|
|
width: 24%;
|
|
|
|
background: #ffffff;
|
|
|
|
background: #ffffff;
|
|
|
|
margin: 15px 0 60px 0;
|
|
|
|
margin: 15px 0 60px 0;
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
&:not(:nth-child(4n)) {
|
|
|
|
&:not(:nth-child(4n)) {
|
|
|
|
margin-right: calc(4% / 3);
|
|
|
|
margin-right: calc(4% / 3);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.sckill-products-wrap__cover {
|
|
|
|
.seckill-products-wrap__cover {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
height: 288px;
|
|
|
|
height: 288px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.sckill-products-wrap__content {
|
|
|
|
.seckill-products-wrap__content {
|
|
|
|
padding: 20px 16px;
|
|
|
|
padding: 20px 16px;
|
|
|
|
.products-wrap-content__title {
|
|
|
|
.products-wrap-content__title {
|
|
|
|
@include ellipsis;
|
|
|
|
@include ellipsis;
|
|
|
|
@ -287,7 +308,7 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.sckill-pagination {
|
|
|
|
.seckill-pagination {
|
|
|
|
margin-top: 60px;
|
|
|
|
margin-top: 60px;
|
|
|
|
/deep/.el-pagination {
|
|
|
|
/deep/.el-pagination {
|
|
|
|
.btn-prev,
|
|
|
|
.btn-prev,
|
|
|
|
|
肖广
3 years ago
