WeChat Mini Program Order Countdown

achieve effect

 Realize the key:

*** Calculate the countdown for each piece of data

*** Make sure to clear the timer every time you call back the order list, otherwise there will be duplicate data

1. Obtain the current mobile phone system

onLoad(options) {
    let platform;
    wx.getSystemInfo({
      success: function (res) {
        platform = res.platform
      }
    });
    this.platform = platform
}


onUnload: function () {
    clearInterval(this.data.timer);
    this.data.timer = null
},

onHide() {
   clearInterval(this.data.timer);
   this.data.timer = null
},

2. Processing order list data

 getMyOrder(status) {
   let par = {}  //获取订单所需参数
    myOrderList(par).then(res => {
      wx.hideLoading()
      let orderList = this.data.orderList //订单列表数据
      if (res.data.content.length > 0) {
        orderList = orderList.concat(res.data.content)
        for (let i = 0; i < orderList.length; i++) {
            let inDate = orderList[i].deliveryTime; //入住时间
            let inNum = orderList[i].list[0].refundedNum; //入住天数
            if (platform == 'ios') {
              inDate = inDate.replace(/-/g, '/')
            }
            let outDate = utils.getAddDateTime(inDate, 0, 0, inNum)
            inDate = utils.getAddDateTime(inDate)
            orderList[i].inInfo = inDate.substring(0, 10) + ' 至 ' + outDate.substring(0, 10) + ' 共' + inNum + '晚'
            // orderList[i].countdown = this.countDown(orderList[i].updatedTime,orderList)
          }
        this.setData({
          orderList: orderList,
          pages: res.data.totalPages
        })
        if (status != '30') {  //用来判断当前查询状态，如果是全部订单或者待付款订单，进行倒计时处理，否则清除倒计时（可结合上边图片来看，根据自己接口数据对应的状态进行修改即可）
          this.countDown(res.data.content)
        } else {
          // 清除以后需要重新赋值
          this.setData({
            orderList: orderList,
            pages: res.data.totalPages
          })
          clearInterval(this.data.timer);
        }

      } else {
        // clearInterval(this.data.timer);
      }
    })
  },

3. Process the countdown corresponding to each piece of data

 // 订单列表实现倒计时
  countDown: function () {
    let that = this,
      orderList = this.data.orderList
    // let num = 0;
    clearInterval(this.data.timer)
    that.data.timer = setInterval(function () {
      for (let i = 0; i < orderList.length; i++) {
        let orderStatus = orderList[i].orderStatus;
        if (orderStatus == '10') {  //如果此条数据是待支付的，则计算倒计时
          let createdTime = orderList[i].createdTime
          if (that.platform == 'ios') {
            createdTime = createdTime.replace(/-/g, '/')
          }
          // 30分钟-半小时
          let tmp = 30 //自定义倒计时--时间
          let lastTime = new Date(new Date(createdTime).getTime() + (1 / 60) * tmp * 3600 * 1000)
          let nowTime = new Date()
          let flag = that.compareDate(lastTime, nowTime)
          if (flag > 0) {
            // console.log(createdTime,moment(lastTime).format('YYYY-MM-DD HH:mm:ss'))
            orderList[i].countdown = moment(flag).format('mm分钟ss秒')
          } else {
            delete orderList[i].countdown
            // 30分钟后自动取消未付款的点单--不确定需要需要这个操作
            // that.cancelOrderF(orderList[i])
          }
        }
      }
      that.setData({
        orderList
      })
      // num++
    }, 1000)
  },

4. Calculate the time difference

 compareDate(date1, date2) {
    let tmp1 = date1.getTime();
    let tmp2 = date2.getTime();
    return tmp1 - tmp2
  },

=====Auxiliary====utils

//日期计算
function getAddDateTime(date, addYear = 0, addMonth = 0, addDay = 0, addHour = 0, addMinute = 0, addSecond = 0) {
    var timestamp = Date.parse(date);
    var newTimestamp = timestamp + addDay * 24 * 60 * 60 * 1000;
    newTimestamp = newTimestamp + addHour * 60 * 60 * 1000;
    newTimestamp = newTimestamp + addMinute * 60 * 1000;
    newTimestamp = newTimestamp + addSecond * 1000;

    let newDate = new Date(newTimestamp);
    const year = newDate.getFullYear() + addYear;
    const month = newDate.getMonth() + addMonth + 1;
    const day = newDate.getDate();
    const hour = newDate.getHours();
    const minute = newDate.getMinutes();
    const second = newDate.getSeconds();

    return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':');
}
module.exports = { getAddDateTime }