388 lines
9.4 KiB
Vue
388 lines
9.4 KiB
Vue
<template>
|
|
<view class="sale">
|
|
<view class="sale-head">
|
|
<image src="@/pages/promotion/static/head-sample.png"></image>
|
|
</view>
|
|
<scroll-view scroll-x>
|
|
<view class="index-navs">
|
|
<view class="index-nav-v">
|
|
<view class="index-nav" :class="{ 'index-nav-active': nav == index }" @click="clickNavigateTime(index)"
|
|
v-for="(item, index) in timeLine" :key="index">
|
|
{{ item.timeLine }}:00
|
|
<view class="index-nav-desc">{{ index === 0 && item.distanceStartTime === 0 ? '抢购中' : '即将开始' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="trailer" v-if="timeLine[nav] && times">
|
|
{{ timeLine[nav].distanceStartTime === 0 ? (onlyOne ? '距结束' : '距下一轮') : '距开始' }}
|
|
{{ times.hours == '00' ? '0' : times.hours }}小时{{ times.minutes }}分{{ times.seconds }}秒
|
|
</view>
|
|
</scroll-view>
|
|
<view class="sale-items" v-if="goodsList.length > 0">
|
|
<view class="sale-item" v-for="(item,index) in goodsList" :key="index">
|
|
<view class="sale-item-img">
|
|
<image :src="item.goodsImage" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="sale-item-content">
|
|
<view class="sale-item-title">
|
|
{{ item.goodsName }}
|
|
<view class="sale-item-title-desc"></view>
|
|
</view>
|
|
<view class="sale-item-price">
|
|
<text class="sale-item-price-now">¥{{ item.price | unitPrice}}</text>
|
|
<text class="sale-item-price-origin"> ¥{{ item.originalPrice | unitPrice }}</text>
|
|
</view>
|
|
<view class="sale-item-surplus">
|
|
仅剩{{ item.quantity - item.salesNum }}件
|
|
<view class="sale-item-surplus-text"
|
|
:style="{ width: (item.quantity / (item.quantity - item.salesNum)) * 100 + '%' }">
|
|
</view>
|
|
</view>
|
|
<view class="sale-item-btn" @click="navigateToGoodsDetail(item)">
|
|
{{ timeLine[nav].distanceStartTime === 0 ? (item.salesNum === item.quantity ? '已售空' : '购买') : '即将开始' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<view class="nodata">
|
|
<image style="height: 240rpx;width: 320rpx;" src="/static/nodata.png" alt="" />
|
|
<div>暂无商品</div>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getSeckillTimeLine, getSeckillTimeGoods } from "@/api/promotions.js";
|
|
import Foundation from "@/utils/Foundation.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
nav: 0, //默认选择第一个时间
|
|
timeLine: "", //获取几个点活动
|
|
resTime: 0, //当前时间
|
|
time: 0, //距离下一个活动的时间值
|
|
times: {}, //时间集合
|
|
onlyOne: "", //是否最后一个商品
|
|
goodsList: [], //商品集合
|
|
params: {
|
|
pageNumber: 1,
|
|
pageSize: 10,
|
|
},
|
|
};
|
|
},
|
|
|
|
/**
|
|
* 显示时间活动
|
|
*/
|
|
async onShow() {
|
|
await this.getTimeLine();
|
|
if (!this.timeLine) {
|
|
await uni.showToast({
|
|
icon: "none",
|
|
duration: 2000,
|
|
title: "今天没有活动，明天再来吧",
|
|
});
|
|
}
|
|
this._setTimeInterval = setInterval(() => {
|
|
if (this.time <= 0) {
|
|
clearInterval(this._setTimeInterval);
|
|
this.getGoodsList();
|
|
this.getTimeLine();
|
|
} else {
|
|
this.times = Foundation.countTimeDown(this.time);
|
|
this.time--;
|
|
}
|
|
}, 1000);
|
|
},
|
|
|
|
onUnload() {
|
|
this._setTimeInterval && clearInterval(this._setTimeInterval);
|
|
},
|
|
methods: {
|
|
/**
|
|
* 获取时间线商品
|
|
*/
|
|
async getTimeLine() {
|
|
let res = await getSeckillTimeLine();
|
|
if (res.data.success && res.data.result.length > 0) {
|
|
let timeLine = res.data.result.sort(
|
|
(x, y) => Number(x.timeLine) - Number(y.timeLine)
|
|
);
|
|
this.timeLine = timeLine.slice(0, 5);
|
|
this.resTime = parseInt(new Date().getTime() / 1000);
|
|
this.onlyOne = res.data.result.length === 1;
|
|
this.diffTime = parseInt(new Date().getTime() / 1000) - this.resTime;
|
|
|
|
this.time =
|
|
this.timeLine[this.nav].distanceStartTime ||
|
|
(this.timeLine[this.nav + 1] &&
|
|
this.timeLine[this.nav + 1].distanceStartTime) ||
|
|
Foundation.theNextDayTime() - this.diffTime;
|
|
this.times = Foundation.countTimeDown(this.time);
|
|
|
|
this.getGoodsList();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 获取商品集合
|
|
*/
|
|
async getGoodsList() {
|
|
this.params.timeLine = this.timeLine[this.nav].timeLine;
|
|
let res = await getSeckillTimeGoods(this.params.timeLine);
|
|
if (res.data.success && res.data.result.length != 0) {
|
|
this.goodsList = res.data.result;
|
|
} else {
|
|
this.goodsList = [];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 跳转到商品详情
|
|
*/
|
|
navigateToGoodsDetail(item) {
|
|
if (
|
|
item.sold_num === item.quantity ||
|
|
this.timeLine[this.nav].distanceStartTime !== 0
|
|
) {
|
|
return;
|
|
} else {
|
|
uni.navigateTo({
|
|
url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 单击导航时间
|
|
*/
|
|
clickNavigateTime(type) {
|
|
this.nav = type;
|
|
this.goodsList = [];
|
|
this.diffTime = parseInt(new Date().getTime() / 1000) - this.resTime;
|
|
this.time =
|
|
this.timeLine[this.nav].distanceStartTime ||
|
|
(this.timeLine[this.nav + 1] &&
|
|
this.timeLine[this.nav + 1].distanceStartTime) ||
|
|
Foundation.theNextDayTime() - this.diffTime;
|
|
|
|
this.times = Foundation.countTimeDown(this.time);
|
|
this.getGoodsList();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.sale {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
.nodata {
|
|
flex-direction: column;
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 40rpx;
|
|
|
|
> div {
|
|
font-size: 24rpx;
|
|
margin-top: 20rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.sale-head {
|
|
image {
|
|
width: 100%;
|
|
height: 280rpx;
|
|
}
|
|
}
|
|
|
|
.sale-items {
|
|
padding-top: 20rpx;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sale-item {
|
|
width: 710rpx;
|
|
height: 226rpx;
|
|
padding-left: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
border-radius: 12rpx;
|
|
background-color: #fff;
|
|
position: relative;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.sale-item-img {
|
|
margin-right: 20rpx;
|
|
image {
|
|
width: 186rpx;
|
|
height: 186rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.sale-item-content {
|
|
line-height: 2em;
|
|
}
|
|
|
|
.sale-item-title {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
line-height: 1.5;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.sale-item-title-desc {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.sale-item-price {
|
|
font-size: 22rpx;
|
|
color: 999;
|
|
}
|
|
|
|
.sale-item-price-now {
|
|
font-size: 40rpx;
|
|
color: #ff5a10;
|
|
margin: 0 10rpx;
|
|
}
|
|
|
|
.sale-item-price-origin {
|
|
font-size: 20rpx;
|
|
color: #999;
|
|
|
|
-webkit-text-decoration-line: line-through;
|
|
text-decoration-line: line-through;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.sale-item-surplus {
|
|
border: 2rpx solid rgb(34, 178, 140);
|
|
border-radius: 12px;
|
|
width: 166rpx;
|
|
color: rgb(31, 177, 138);
|
|
font-size: 20rpx;
|
|
position: relative;
|
|
text-align: center;
|
|
z-index: 2;
|
|
height: 32rpx;
|
|
line-height: 28rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sale-item-surplus-text {
|
|
width: 166rpx;
|
|
background: rgb(234, 247, 245);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
height: 100%;
|
|
}
|
|
|
|
.sale-item-btn {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
bottom: 20rpx;
|
|
padding: 0 20rpx;
|
|
height: 60rpx;
|
|
background-color: #1abc9c;
|
|
border-radius: 10rpx;
|
|
font-size: 25rpx;
|
|
color: #fff;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.trailer {
|
|
height: 100rpx;
|
|
background: #ffffff;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 22rpx;
|
|
color: #666666;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
|
|
.index-navs {
|
|
background-color: #f7f7f7;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.index-nav-v {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.index-nav {
|
|
font-size: 28rpx;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 150rpx;
|
|
flex-direction: column;
|
|
color: #bababa;
|
|
height: 115rpx;
|
|
line-height: 1em;
|
|
position: relative;
|
|
|
|
&-active {
|
|
background-image: url(/static/seckill/active.png);
|
|
background-size: 100% 115rpx;
|
|
background-repeat: no-repeat;
|
|
color: #ffffff;
|
|
position: relative;
|
|
z-index: 30;
|
|
|
|
.index-nav-desc {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.index-nav-desc {
|
|
margin-top: 8rpx;
|
|
font-size: 22rpx;
|
|
color: #bababa;
|
|
}
|
|
</style>
|