【金秋打卡】第5天 全新升级，基于Vue3新标准，打造后台综合解决方案 第五讲

课程名称： 全新升级，基于Vue3新标准，打造后台综合解决方案

课程章节： 后台项目前端综合解决方案之通用功能开发

主讲老师： 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;
}