微信小程序-支付倒计时的实现
这次碰到了一个项目需求,要做支付时限,并进行倒计时展示.实现图如下:
剩余支付倒计时
服务端给了支付的剩余时间remainTime,我根据remainTime进行处理,做出这个效果,代码如下:
.js:
Page({
data:{
// 剩余时间
// 总时间
remainTime:0,
// 小时
remainTimeHours:'',
// 分钟
remainTimeMinutes:'',
// 秒
remainTimeSeconds:''
}
// 剩余时间(毫秒)处理转换时间
transformRemainTime:function(time = 0) {
var sumSeconds = parseInt(time);
var hours = parseInt(sumSeconds / 60 / 60); // 时
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
})
},
// 开始倒计时
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'>剩余支付时间:</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;
}
注意:
我在使用如上方法时,将服务端给的时间remainTime的单位从毫秒转换成了秒.如果要参考我的实现方法去做的,请注意我的转换没有写在里面.请自行在代码中添加.
谢谢大家~
