订单列表倒计时

订单列表倒计时

参考链接

1. 未支付订单倒计时

Page({
  /**
   * 页面的初始数据
   */
  data: {
    listData: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let list = [
      {
        id: 1,
        memberNickname: '列表1',
        remainTime: 86400000,
        status:0
      },
      {
        id: 2,
        memberNickname: '列表2',
        remainTime: 3226000,
        status: 0
      },
      {
        id: 3,
        memberNickname: '列表3',
        remainTime: 3600,
        status: 0
      }
    ];
    this.setData({
      listData: list
    });
    this.setCountDown();
  },

  /**
   * 倒计时
   */
  setCountDown: function () {
    let time = 100;
    var that = this;
    let { listData } = this.data; 
    for (var i = 0; i < listData.length; i++){
      if (listData[i].remainTime <= 0){
        console.log("倒计时结束" + listData[i].memberNickname);
           listData.splice(i, 1);
          continue;
        }
        if(listData[i].status == 0){
          let formatTime = this.getFormat(listData[i].remainTime);
          listData[i].remainTime -= time;
          listData[i].countDown = `${formatTime.hh}:${formatTime.mm}:${formatTime.ss}`; 
        }
    }
    this.setData({
      listData: listData
    });
    setTimeout(this.setCountDown, time);
  },

  /**
   * 格式化时间
   */
  getFormat: function (msec) {
    let ss = parseInt(msec / 1000); let ms = parseInt(msec % 1000); let mm = 0; let hh = 0; if (ss > 60) {
      mm = parseInt(ss / 60);
      ss = parseInt(ss % 60); if (mm > 60) {
        hh = parseInt(mm / 60);
        mm = parseInt(mm % 60);
      }
    }
    ss = ss > 9 ? ss : `0${ss}`;
    mm = mm > 9 ? mm : `0${mm}`;
    hh = hh > 9 ? hh : `0${hh}`; return { ms, ss, mm, hh };
  }
})

1. wxml

<view>
    <view class="flex_l_r_c" wx:for="{{listData}}" wx:key="id">
        <view>{{item.memberNickname}}</view>
        <view>{{item.countDown}}</view>
    </view></view>