這次碰到了一個(gè)項(xiàng)目需求,要做支付時(shí)限,并進(jìn)行倒計(jì)時(shí)展示.實(shí)現(xiàn)圖如下:
服務(wù)端給了支付的剩余時(shí)間remainTime,我根據(jù)remainTime進(jìn)行處理,做出這個(gè)效果,代碼如下:
.js:
Page({
data:{
// 剩余時(shí)間
? ? // 總時(shí)間
? ? remainTime:0,
? ? // 小時(shí)
? ? remainTimeHours:'',
? ? // 分鐘
? ? remainTimeMinutes:'',
? ? // 秒
? ? remainTimeSeconds:''
}
// 剩余時(shí)間(毫秒)處理轉(zhuǎn)換時(shí)間
? transformRemainTime:function(time = 0) {
? ? var sumSeconds = parseInt(time);
? ? var hours = parseInt(sumSeconds / 60 / 60); // 時(shí)
? ? hours = util.zeroFill(`${hours}`,2);
? ? var minutes = parseInt(sumSeconds / 60 % 60); // 分
? ? minutes = util.zeroFill(`${minutes}`, 2);
? ? var seconds = parseInt(sumSeconds % 60);
? ? seconds = util.zeroFill(`${seconds}`, 2);
? ? this.setData({
? ? ? remainTimeHours:hours,
? ? ? remainTimeMinutes:minutes,
? ? ? remainTimeSeconds:seconds
? ? })
? },
? // 開(kāi)始倒計(jì)時(shí)
? startCountdown: function () {
? ? var that = this
? ? var interval = setInterval(function () {
? ? ? var time = that.data.remainTime - 1;
? ? ? if (time > 0) {
? ? ? ? that.setData({
? ? ? ? ? remainTime: time
? ? ? ? });
? ? ? ? that.transformRemainTime(that.data.remainTime);
? ? ? } else {
? ? ? ? clearInterval(interval);
? ? ? ? if (that.data.send === 1) {
? ? ? ? ? that.fetchInteractionDetail(that.data.interactionId, that.data.send, that.data.wxOpenId);
? ? ? ? } else {
? ? ? ? ? that.fetchInteractionDetail(that.data.interactionId, that.data.send, app.globalData.openId);
? ? ? ? }
? ? ? }
? ? ? }
? ? ? , 1000);
? },
)}
.wxml:
<view class='pay-time'>
? ? ? ? ? <view class='time-title'>剩余支付時(shí)間:</view>
? ? ? ? ? <view class='time-content'>
? ? ? ? ? ? <text class='time-number'>{{remainTimeHours}}</text>
? ? ? ? ? ? <text class='time-symbol'>:</text>
? ? ? ? ? ? <text class='time-number'>{{remainTimeMinutes}}</text>
? ? ? ? ? ? <text class='time-symbol'>:</text>
? ? ? ? ? ? <text class='time-number'>{{remainTimeSeconds}}</text>
? ? ? ? ? </view>
? ? ? ? </view>
.wxss:
.pay-time {
? display: flex;
? align-items: center;
}
.time-title {
? font-size: 24rpx;
? color: #353535;
}
.time-content {
? margin-left: 13rpx;
? display: flex;
? align-items: center;
}
.time-number {
? border-radius: 10rpx;
? background-color: #5dbdff;
? color: #ffffff;
? font-size: 36rpx;
? height: 48rpx;
? line-height: 48rpx;
? min-width: 48rpx;
? padding: 5rpx;
? text-align: center;
}
.time-symbol {
? font-size: 36rpx;
? color: #353535;
? text-align: center;
? width: 24rpx;
? height: 48rpx;
? line-height: 48rpx;
}
注意:
我在使用如上方法時(shí),將服務(wù)端給的時(shí)間remainTime的單位從毫秒轉(zhuǎn)換成了秒.如果要參考我的實(shí)現(xiàn)方法去做的,請(qǐng)注意我的轉(zhuǎn)換沒(méi)有寫在里面.請(qǐng)自行在代碼中添加.
謝謝大家~
