课程章节： 后台项目前端综合解决方案之通用功能开发
主讲老师： Sunday
课程内容：
今天学习的内容包括：
开发后台项目前端
课程收获：
5.1 心得：
// pages/auction/auction.js
Page({
/**
* 页面的初始数据
*/
data: {
timer: "",
clock: "",
hours: "",
minutes: "",
seconds: "",
milliSeconds: "",
isOver: false,
isCancel: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
var maxtime =216234481;
that.setData({
clock: maxtime
})
that.countDown();
},
countDown: function () {
var that = this;
var countDownNum = that.data.clock; //获取倒计时初始值
//如果将定时器设置在外面，那么用户就看不到countDownNum的数值动态变化，所以要把定时器存进data里面
that.data.timer = setInterval(function () { //这里把setInterval赋值给变量名为timer的变量
//在倒计时还未到0时，这中间可以做其他的事情，按项目需求来
if (that.data.isOver || that.data.isCancel) {
that.setData({
hours: '00',
minutes: '00',
seconds: '00',
milliSeconds: '00'
}),
//关闭计时器
clearInterval(that.data.timer);
} else if (countDownNum == 0) {
that.setData({
isOver: true,
}),
clearInterval(that.data.timer);
} else {
//countDownNum递减实现同步
countDownNum -= 10;
var second = that.zeroFill(Math.floor((countDownNum % (1000 * 60)) / 1000));
var hour = that.zeroFill(parseInt((countDownNum % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
var minute = that.zeroFill(parseInt((countDownNum % (1000 * 60 * 60)) / (1000 * 60)));
var milliSecond = that.zeroFill(Math.floor((countDownNum % 1000) / 10));
that.setData({
hours: hour,
minutes: minute,
seconds: second,
milliSeconds: milliSecond
})
}
}, 10)
},
// 位数不足补零
zeroFill: function (num) {
return num < 10 ? "0" + num : num
},
//取消趣拍
cancelAuction: function () {
var that=this;
that.setData({
isCancel: true
}),
wx.showToast({
title: '取消成功',
icon: 'succes',
duration: 1000,
mask:true
})
setTimeout(function(){
wx.navigateTo({
url: '../index/index'
})
},500)
},
//结束趣拍
overAuction: function () {
var that = this;
that.setData({
isOver: true
})
},
//去支付
goToPay: function () {
wx.navigateTo({
url: '../payment/payment'
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
/* pages/auction/auction.wxss */
.title {
font-size: 44rpx;
color: #FB8227;
font-weight: bold;
text-align: center;
margin: 47rpx 0 34rpx 0;
}
.count_down {
display: flex;
line-height: 1;
margin-bottom: 70rpx;
text-align: center;
justify-content: center;
}
.time {
display: flex;
justify-content: center;
align-items: center;
width: 88rpx;
height: 88rpx;
background: rgba(253, 160, 90, 0.1);
border: 4rpx solid #FB8227;
border-radius: 12rpx;
font-size: 44rpx;
color: #FB8227;
margin: 0 32rpx;
}
.time_title {
margin-top: 12rpx;
font-size: 26rpx;
color: #C4C4C4;
}
.notice {
font-size: 30rpx;
font-weight: bold;
text-align: center;
color: #2E2E2E;
margin-bottom: 22rpx;
}
.product {
font-size: 26rpx;
text-align: center;
color: #C4C4C4;
margin-bottom: 70rpx;
}
.auction_title {
font-size: 26rpx;
text-align: center;
color: #2E2E2E;
margin-bottom: 28rpx;
}
.table {
display: flex;
justify-content: space-between;
margin: 0 113rpx;
line-height: 1;
font-size: 26rpx;
color: #C4C4C4;
position: relative;
}
.line {
width: 686rpx;
height: 2rpx;
background: #EDEDED;
position: absolute;
top: 56rpx;
left: 50%;
transform: translate(-50%, 0);
}
.header {
color: #2E2E2E;
margin-bottom: 80rpx;
}
.column {
display: flex;
flex-direction: column;
align-items: center;
}
.now_price {
font-size: 44rpx;
color: #FB8227;
margin-bottom: 30rpx;
height: 44rpx;
}
.now_num,
.now_total {
font-size: 32rpx;
color: #2E2E2E;
margin-bottom: 30rpx;
height: 44rpx;
}
.block {
margin-bottom: 30rpx;
}
.bottom {
display: flex;
position: fixed;
bottom: 108rpx;
left: 50%;
transform: translate(-50%, 0%);
}
.bottom view {
display: flex;
align-items: center;
justify-content: center;
width: 320rpx;
height: 78rpx;
border-radius: 8rpx;
font-size: 30rpx;
line-height: 1;
}
.cancel {
background: #EDEDED;
color: #2E2E2E;
}
.over {
background: #FB8227;
color: #FFFEFE;
margin-left: 46rpx;
}
.finally {
text-align: center;
line-height: 1;
font-size: 26rpx;
color: #2E2E2E;
}
.finally_price {
font-size: 96rpx;
font-weight: bold;
color: #FB8227;
margin-bottom: 30rpx;
}
随时随地看视频
