style: 优化秒杀页面显示效果
paulGao
parent
163f9f26c2
commit
0cc27f4e60
|
|
@ -6,14 +6,23 @@
|
|||
<div class="promotion-decorate">限时秒杀</div>
|
||||
<ul class="time-line">
|
||||
<template v-for="(time, index) in list">
|
||||
<li v-if="index < 5" @click="currIndex = index" :key="index" :class="{'currTimeline': currIndex === index}">
|
||||
<div>{{time.timeLine+':00'}}</div>
|
||||
<li
|
||||
v-if="index < 5"
|
||||
@click="currIndex = index"
|
||||
:key="index"
|
||||
:class="{ currTimeline: currIndex === index }"
|
||||
>
|
||||
<div>{{ time.timeLine + ":00" }}</div>
|
||||
<div v-if="currIndex === index">
|
||||
<p>{{nowHour >= time.timeLine ? '秒杀中' : '即将开始'}}</p>
|
||||
<p>{{nowHour >= time.timeLine ? '距结束' : '距开始'}} {{currTime}}</p>
|
||||
<p>{{ nowHour >= time.timeLine ? "秒杀中" : "即将开始" }}</p>
|
||||
<p>
|
||||
{{ nowHour >= time.timeLine ? "距结束" : "距开始" }} {{
|
||||
currTime
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<div v-else class="not-curr">
|
||||
{{nowHour >= time.timeLine ? '秒杀中' : '即将开始'}}
|
||||
{{ nowHour >= time.timeLine ? "秒杀中" : "即将开始" }}
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
|
@ -23,29 +32,63 @@
|
|||
<empty v-if="goodsList.length === 0" />
|
||||
<div
|
||||
v-else
|
||||
class="goods-show-info"
|
||||
class="goods-show-info1"
|
||||
v-for="(item, index) in goodsList"
|
||||
:key="index"
|
||||
@click="goGoodsDetail(item.skuId, item.goodsId)"
|
||||
>
|
||||
<div class="goods-show-img">
|
||||
<img width="220" height="220" :src="item.goodsImage" />
|
||||
<img width="200" height="200" :src="item.goodsImage" />
|
||||
</div>
|
||||
<div class="goods-show-price">
|
||||
<span>
|
||||
<span class="seckill-price text-danger">{{
|
||||
item.price | unitPrice("￥")
|
||||
}}</span>
|
||||
<span style="color:#999;text-decoration:line-through;">{{item.originalPrice | unitPrice('￥')}}</span>
|
||||
<span style="color: #999; text-decoration: line-through">{{
|
||||
item.originalPrice | unitPrice("￥")
|
||||
}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="goods-show-detail">
|
||||
<span>{{ item.goodsName }}</span>
|
||||
</div>
|
||||
<div v-if="item.quantity" class="goods-seckill-btn" :class="{'goods-seckill-btn-gray' : nowHour < list[currIndex].timeLine}">{{nowHour >= list[currIndex].timeLine ? '立即抢购' : '即将开始'}}</div>
|
||||
<div v-else-if="!item.quantity || item.quantity <= item.salesNum" class="goods-seckill-btn goods-seckill-btn-gray">已售罄</div>
|
||||
<div class="goods-show-num">
|
||||
已售<Progress style="width:110px" class="ml_10" :percent="item.quantity ? Math.ceil(item.salesNum/(item.quantity+item.salesNum)*100) : 100" />
|
||||
<div
|
||||
class="goods-seckill-btn"
|
||||
:class="{
|
||||
'goods-seckill-btn-gray': nowHour < list[currIndex].timeLine,
|
||||
}"
|
||||
>
|
||||
{{ nowHour >= list[currIndex].timeLine ? "立即抢购" : "即将开始" }}
|
||||
</div>
|
||||
<div
|
||||
v-if="nowHour >= list[currIndex].timeLine"
|
||||
class="goods-seckill-btn goods-seckill-btn-gray"
|
||||
>
|
||||
已售罄
|
||||
</div>
|
||||
<div v-if="nowHour >= list[currIndex].timeLine" class="goods-show-num1">
|
||||
<span
|
||||
>已售{{
|
||||
(item.quantity && item.quantity > 0
|
||||
? Math.ceil(
|
||||
(item.salesNum / (item.quantity + item.salesNum)) * 100
|
||||
)
|
||||
: 100) + "%"
|
||||
}}</span
|
||||
><Progress
|
||||
hide-info
|
||||
stroke-color="#df0021"
|
||||
style="width: 110px"
|
||||
class="ml_10"
|
||||
:percent="
|
||||
item.quantity && item.quantity > 0
|
||||
? Math.ceil(
|
||||
(item.salesNum / (item.quantity + item.salesNum)) * 100
|
||||
)
|
||||
: 100
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="goods-show-seller">
|
||||
<span>{{ item.storeName }}</span>
|
||||
|
|
@ -56,9 +99,9 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {seckillByDay} from '@/api/promotion'
|
||||
import { seckillByDay } from "@/api/promotion";
|
||||
export default {
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
list: [], // 秒杀时段列表
|
||||
goodsList: [], // 商品列表
|
||||
|
|
@ -66,22 +109,22 @@ export default {
|
|||
currIndex: 0, // 当前时间段的下标
|
||||
currTime: 0, // 当前显示的倒计时
|
||||
diffSeconds: 0, // 倒计时时间戳
|
||||
nowHour: new Date().getHours() // 当前小时数
|
||||
}
|
||||
nowHour: new Date().getHours(), // 当前小时数
|
||||
};
|
||||
},
|
||||
beforeDestroy () {
|
||||
beforeDestroy() {
|
||||
// 销毁前清除定时器
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
watch: {
|
||||
currIndex (val) {
|
||||
clearInterval(this.interval)
|
||||
this.interval = null
|
||||
this.nowHour = new Date().getHours()
|
||||
this.countDown(val)
|
||||
this.goodsList = this.list[val].seckillGoodsList
|
||||
currIndex(val) {
|
||||
clearInterval(this.interval);
|
||||
this.interval = null;
|
||||
this.nowHour = new Date().getHours();
|
||||
this.countDown(val);
|
||||
this.goodsList = this.list[val].seckillGoodsList;
|
||||
},
|
||||
diffSeconds (val) {
|
||||
diffSeconds(val) {
|
||||
const hours = Math.floor(val / 3600);
|
||||
// 当前秒数 / 60，向下取整
|
||||
// 获取到所有分钟数 3600 / 60 = 60分钟
|
||||
|
|
@ -89,66 +132,72 @@ export default {
|
|||
const minutes = Math.floor(val / 60) % 60;
|
||||
// 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
|
||||
const seconds = val % 60;
|
||||
this.currTime = filteTime(hours) + ':' + filteTime(minutes) + ':' + filteTime(seconds)
|
||||
this.currTime =
|
||||
filteTime(hours) + ":" + filteTime(minutes) + ":" + filteTime(seconds);
|
||||
if (val <= 0) {
|
||||
clearInterval(this.interval)
|
||||
this.interval = null
|
||||
clearInterval(this.interval);
|
||||
this.interval = null;
|
||||
}
|
||||
function filteTime (time) {
|
||||
function filteTime(time) {
|
||||
if (time < 10) {
|
||||
return '0' + time
|
||||
return "0" + time;
|
||||
} else {
|
||||
return time
|
||||
return time;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getListByDay () { // 当天秒杀活动
|
||||
seckillByDay().then(res => {
|
||||
getListByDay() {
|
||||
// 当天秒杀活动
|
||||
seckillByDay().then((res) => {
|
||||
if (res.success) {
|
||||
this.list = res.result
|
||||
this.goodsList = this.list[0].seckillGoodsList
|
||||
this.countDown(this.currIndex)
|
||||
this.list = res.result;
|
||||
this.goodsList = this.list[0].seckillGoodsList;
|
||||
this.countDown(this.currIndex);
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
goGoodsDetail (skuId, goodsId) {
|
||||
goGoodsDetail(skuId, goodsId) {
|
||||
// 跳转商品详情
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: { skuId, goodsId }
|
||||
path: "/goodsDetail",
|
||||
query: { skuId, goodsId },
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
window.open(routeUrl.href, "_blank");
|
||||
},
|
||||
countDown (currIndex) { // 倒计时
|
||||
countDown(currIndex) {
|
||||
// 倒计时
|
||||
// 0点时间戳
|
||||
let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
|
||||
let currTime = new Date().getTime()
|
||||
let currTime = new Date().getTime();
|
||||
let actTime = 0;
|
||||
let nowHour = new Date().getHours(); // 当前小时数
|
||||
if (this.list[currIndex].timeLine > nowHour) { // 活动未开始
|
||||
actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000
|
||||
} else if (this.list[currIndex].timeLine <= nowHour) { // 活动进行中
|
||||
if (currIndex === this.list.length - 1) { // 如果是最后一个活动，直到24点结束
|
||||
actTime = zeroTime + 24 * 3600 * 1000
|
||||
if (this.list[currIndex].timeLine > nowHour) {
|
||||
// 活动未开始
|
||||
actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000;
|
||||
} else if (this.list[currIndex].timeLine <= nowHour) {
|
||||
// 活动进行中
|
||||
if (currIndex === this.list.length - 1) {
|
||||
// 如果是最后一个活动，直到24点结束
|
||||
actTime = zeroTime + 24 * 3600 * 1000;
|
||||
} else {
|
||||
actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000
|
||||
actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000;
|
||||
}
|
||||
}
|
||||
this.diffSeconds = Math.floor((actTime - currTime) / 1000)
|
||||
this.diffSeconds = Math.floor((actTime - currTime) / 1000);
|
||||
this.interval = setInterval(() => {
|
||||
this.diffSeconds--
|
||||
}, 1000)
|
||||
}
|
||||
this.diffSeconds--;
|
||||
}, 1000);
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.getListByDay()
|
||||
}
|
||||
}
|
||||
mounted() {
|
||||
this.getListByDay();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '../../assets/styles/goodsList.scss';
|
||||
@import "../../assets/styles/goodsList.scss";
|
||||
.goods-seckill-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
@ -164,16 +213,17 @@ export default {
|
|||
.goods-seckill-btn-gray {
|
||||
background-color: #666;
|
||||
}
|
||||
.promotion-decorate::before,.promotion-decorate::after{
|
||||
background-image: url('/src/assets/images/sprite@2x.png');
|
||||
.promotion-decorate::before,
|
||||
.promotion-decorate::after {
|
||||
background-image: url("/src/assets/images/sprite@2x.png");
|
||||
}
|
||||
.time-line{
|
||||
.time-line {
|
||||
width: 1200px;
|
||||
height: 60px;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
li{
|
||||
li {
|
||||
padding: 0 30px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
|
@ -181,7 +231,7 @@ export default {
|
|||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover{
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.not-curr {
|
||||
|
|
@ -193,16 +243,37 @@ export default {
|
|||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.currTimeline{
|
||||
.currTimeline {
|
||||
background-color: $theme_color;
|
||||
color: #fff;
|
||||
>div:nth-child(1) {
|
||||
> div:nth-child(1) {
|
||||
font-size: 20px;
|
||||
}
|
||||
>div:nth-child(2) {
|
||||
> div:nth-child(2) {
|
||||
font-size: 14px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-show-info1 {
|
||||
width: 275px;
|
||||
padding: 6px;
|
||||
margin: 10px 0px;
|
||||
margin-left: 5px;
|
||||
position: relative;
|
||||
border: 1px solid #fff;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
}
|
||||
.goods-show-info1:hover {
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0px 0px 15px #ccc;
|
||||
}
|
||||
.goods-show-img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.ivu-progress-success .ivu-progress-bg {
|
||||
background-color: #111fff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue