html
<view class="count_down">
<text class="title">抢购进行中:</text>
<text class="count_down_time">
<text class="time">{{hou}}</text> : <text class="time">{{min}}</text> : <text class="time">{{sec}}</text>
</text>
</view>
<block wx:for="{{product_list}}" wx:key="id">
<block wx:if="{{item.left_stock > 0}}" wx:key="id">
<view class="product_list">
<view class="left">
<image class="product_img" src="{{item.title_img}}" />
</view>
<view class="right">
<view class="title">
{{item.title}}
</view>
<view class="spec">
<block wx:if="{{item.spec}}" wx:key="id">
规格：{{item.spec}}
</block>
</view>
<view class="process_box">
<progress class="process" percent="{{item.percent}}" backgroundColor="#E9455E" activeColor="#FFB7C2" font-size="20rpx" border-radius="12rpx" stroke-width="24rpx" />
<view class="process_text">
仅剩{{item.left_stock}}件
</view>
</view>
<view class="origin_price">￥{{item.origin_price}}</view>
<view class="price">￥{{item.price}}</view>
<view class="buy" data-seckill-product-id="{{item.seckill_product_id}}" bindtap="toSeckill">立即秒杀</view>
</view>
</view>
</block>
<block wx:else wx:key="id">
<view class="product_list_over">
<view class="left">
<image class="product_img" src="{{item.title_img}}" />
<image class="product_img_over" src="/images/seckill/over.png" />
</view>
<view class="right">
<view class="title">
{{item.title}}
</view>
<view class="spec">
<block wx:if="{{item.spec}}" wx:key="id">
规格：{{item.spec}}
</block>
</view>
<view class="process_box">
<progress class="process" percent="{{item.percent}}" backgroundColor="#E9455E" activeColor="#FFB7C2" font-size="20rpx" border-radius="12rpx" stroke-width="24rpx" />
<view class="process_text">
已经抢光
</view>
</view>
<view class="origin_price">￥{{item.origin_price}}</view>
<view class="price">￥{{item.price}}</view>
<view class="buy">已抢光</view>
</view>
</view>
</block>
</block>
scss
page {
background-color: #fff;
}
.count_down {
750rpx;
height: 90rpx;
background-color: #e9455e;
.title {
margin-left: 30rpx;
font-size: 26rpx;
font-weight: bold;
color: #fff;
line-height: 90rpx;
}
.count_down_time {
margin-top: 5rpx;
margin-left: 15rpx;
font-size: 26rpx;
font-weight: bold;
color: #fff;
.time {
color: #e9455e;
padding-left: 5rpx;
padding-right: 5rpx;
min- 40rpx;
border-radius: 5rpx;
height: 40rpx;
text-align: center;
line-height: 40rpx;
background-color: #fff;
display: inline-block;
}
}
}
.product_list {
750rpx;
padding-top: 30rpx;
padding-left: 30rpx;
padding-right: 30rpx;
display: flex;
.left {
.product_img {
border-radius: 10rpx;
260rpx;
height: 260rpx;
}
}
.right {
// background-color: green;
padding-left: 30rpx;
position: relative;
.title {
// height: 30rpx;
font-size: 28rpx;
font-weight: bold;
color: rgba(69, 69, 69, 1);
410rpx; /* 超出点点点，必须配合宽度使用 */
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}
.spec {
410rpx;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
font-size: 24rpx;
font-weight: bold;
color: rgba(233, 69, 94, 1);
margin-top: 25rpx;
}
.process_box {
250rpx;
height: 24rpx;
position: relative;
.process {
margin-top: 25rpx;
250rpx;
}
.process_text {
250rpx;
height: 24rpx;
line-height: 24rpx;
position: absolute;
text-align: center;
left: 0;
top: 0;
font-size: 20rpx;
font-weight: 500;
color: rgba(255, 255, 255, 1);
}
}
.origin_price {
margin-top: 25rpx;
font-size: 20rpx;
font-weight: 400;
text-decoration: line-through;
color: rgba(153, 153, 153, 1);
}
.price {
margin-top: 16rpx;
font-size: 32rpx;
font-weight: bold;
color: rgba(233, 69, 94, 1);
line-height: 32rpx;
}
.buy {
position: absolute;
text-align: center;
160rpx;
height: 60rpx;
font-size: 28rpx;
font-weight: 400;
line-height: 60rpx;
color: rgba(233, 69, 94, 1);
background:rgba(107,187,88,0);
border:2rpx solid rgba(233, 69, 94, 1);
border-radius:30rpx;
right: 0;
bottom: 10rpx;
}
}
}
.product_list_over {
@extend .product_list;
.left {
position: relative;
.product_img {
background:rgba(0,0,0,1);
opacity:0.4;
}
.product_img_over {
height: 174rpx;
174rpx;
position: absolute;
top:43rpx;
left:43rpx;
z-index: 9999;
}
}
.right {
.buy {
background-color: #999999;
font-size:28rpx;
font-weight:400;
color:rgba(255,255,255,1);
border: 0rpx;
}
}
}
js
import request from "../../../common/request";
import Storage from "../../../common/auth/Storage";
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
endTime: '', // 时间戳
},
// 倒计时
countDown: function () {
var that = this;
var nowTime = new Date().getTime();//现在时间（时间戳）
// var endTime = new Date(that.data.endTime).getTime();//结束时间（时间戳）
var endTime = that.data.endTime * 1000;//结束时间（时间戳）
var time = (endTime - nowTime) / 1000;//距离结束的毫秒数
// 获取天、时、分、秒
let day = parseInt(time / (60 * 60 * 24));
let hou = parseInt(time % (60 * 60 * 24) / 3600);
let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
// console.log(day + "," + hou + "," + min + "," + sec)
day = that.timeFormin(day),
hou = that.timeFormin(hou),
min = that.timeFormin(min),
sec = that.timeFormin(sec);
// 天，换成小时
hou = day * 24 + hou;
that.setData({
// day: that.timeFormat(day),
hou: that.timeFormat(hou),
min: that.timeFormat(min),
sec: that.timeFormat(sec)
})
// 每1000ms刷新一次
if (time > 0) {
that.setData({
countDown: true
})
setTimeout(this.countDown, 1000);
} else {
that.setData({
countDown: false
})
}
},
//小于10的格式化函数（2变成02）
timeFormat(param) {
return param < 10 ? '0' + param : param;
},
//小于0的格式化函数（不会出现负数）
timeFormin(param) {
return param < 0 ? 0 : param;
},
toSeckill: function({
currentTarget: {
dataset: { seckillProductId }
}
}) {
return wx.navigateTo({
url: "/pages/seckill/info/index?id=" + seckillProductId
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function ({ id }) {
this.openid = app.globalData.openid || Storage.get().openid;
request("getSeckillProductList", { seckill_id: id, openid: this.openid }).then(({ data }) => {
this.setData({
product_list: data.product_list,
endTime: data.end_time,
});
// 开启倒计时
var that = this;
that.countDown()
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})