微信小程序-支付倒计时的实现

这次碰到了一个项目需求,要做支付时限,并进行倒计时展示.实现图如下:

剩余支付倒计时

服务端给了支付的剩余时间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的单位从毫秒转换成了秒.如果要参考我的实现方法去做的,请注意我的转换没有写在里面.请自行在代码中添加.

谢谢大家~