小程序、uniapp实现订单列表倒计时功能

小程序、uniapp实现订单列表倒计时功能

主要实现思路：借助于定时器一直计时。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[],
    //分页属性
    page: 1,
    pageSize: 10,
    loadend:false,
    loading:false,
    loadTitle:'加载更多',
    timer: '',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },
  //切换tab
  changeTabs(e) {
    clearInterval(this.data.timer)
    var index=e.currentTarget.dataset.index;
    this.setData({
      tabsIndex: index,
      loadend: false,
      page: 1,
      timer: '',   //这个是关键的，切换的时候关闭定时器，否则也面会出现一闪一闪的
      list: []
    })
    this.getList()
  },
  //获取订单列表
  getList() {
    var that = this;
    // status:0是全部,1是待寄出,2待确认,3已完成,4退回

    if (that.data.loadend) return;
    if (that.data.loading) return;
    // if (isPage === true) that.setData({ list: [] });
    that.setData({ loading: true, loadTitle: '' });
    var data={
      status: that.data.tabsIndex,
      page: this.data.page,
    }
    post(urlList.list,'POST',data).then(res => {
      var result = res.data;
      if(result) { //有数据
        //对图片进行整合
        for(let i in result) {
          if(result[i].images){
            result[i].images = result[i].images.split(",");
          }
        }
        console.log(result)

        var list = that.SplitArray(result, that.data.list);
        //计算页数
        var total_page=Number(res.data.length)/Number(that.data.pageSize);
        console.log(total_page)
        if(parseFloat(total_page)===parseInt(total_page)) {
          //证明是整数
          console.log('是整数')
        }else { //不是整数，页数加一
          console.log('不是整数')
          total_page=parseInt(total_page)+1;
        }
        var loadend = that.data.page >= total_page;
        that.setData({
          loadend: loadend,
          loading: false,
          loadTitle: loadend ? '已全部加载' : '加载更多',
          list: list,
          page: that.data.page + 1,
        });
        that.countDown()   //在此处执行倒计时方法
      } else {  //无数据
        that.setData({
          list: [],
          page: 1,
        })
      } 
      
    })
  },
  /*
  * 合并数组
  */
 SplitArray: function (list, sp) {
  if (typeof list != 'object') return [];
  if (sp === undefined) sp = [];
  for (var i = 0; i < list.length; i++) {
    sp.push(list[i]);
  }
  return sp;
 },
    /**
   * 未支付订单倒计时
   */
  countDown:function(){
    var that = this;
    var orders = that.data.list;
    var num=0;
    that.data.timer = setInterval(function() {
        for (var i = 0; i < orders.length; i++) {
            var status=orders[i].status;
            if(status == 1) {  
            //此处的orders[i].residue_time是后端直接返回的剩余秒数，所以需要这样使用
              var create_time = orders[i].residue_time - num;   
              if(create_time == 0) {
                orders[i].left_time = '00:00:00';
                clearInterval(that.data.timer)
              }else {
                orders[i].left_time = that.timestampToTime(create_time);
              }
              
            }
        }
        that.setData({
          list:orders
        });
        num++
      },1000)
  },
  timestampToTime(s) {
    var h = Math.floor(s / 3600 % 24)
    var min = Math.floor(s / 60) % 60
    var sec = s % 60
    h = this.add(h)
    min = this.add(min)
    sec = this.add(sec)
    return h + ':' + min + ':' + sec
  },
  add(m) {
    return m < 10 ? '0' + m : m
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    clearInterval(this.data.timer);
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    clearInterval(this.data.timer)
    this.setData({
      loadend: false,
      page: 1,
      timer: '',
      list: []
    })
    this.getList( )
    this.getUser()
    wx.stopPullDownRefresh()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.getList()
  },

})