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 {
width: 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-width: 40rpx;
border-radius: 5rpx;
height: 40rpx;
text-align: center;
line-height: 40rpx;
background-color: #fff;
display: inline-block;
}
}
}
.product_list {
width: 750rpx;
padding-top: 30rpx;
padding-left: 30rpx;
padding-right: 30rpx;
display: flex;
.left {
.product_img {
border-radius: 10rpx;
width: 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);
width: 410rpx; /* 超出點點點，必須配合寬度使用 */
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}
.spec {
width: 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 {
width: 250rpx;
height: 24rpx;
position: relative;
.process {
margin-top: 25rpx;
width: 250rpx;
}
.process_text {
width: 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;
width: 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;
width: 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 () {
}
})