Ⅰ、需要满足的基本需求

一.订单模块分为全部—待付款—待提货

1.效果图

小程序

二.全部订单列表中，只倒计时“待付款”状态的订单

1.目前实现的是将所有订单倒计时，待优化

三.待付款的订单，当倒计时结束时，置订单状态为“已过期”

1.目前是前端展示时，待付款状态需满足两点：订单状态为“待付款”，且倒计时>0;

2.已过期状态的来源有两种：本身状态为“已过期”+“已付款”状态但倒计时为0

Ⅱ、实现（简要版）

js

var all_timer; //全部订单的定时器var pay_timer; //待付款的定时器Page({  /**   * 页面的初始数据   */  data: {    headList: ['全部', '待付款', '待提货'],    tabnum: 0,    nt_show1: true,    nt_show2: true,    isall: true, //全部订单无数据    ispay: true, //待付款无数据    isbring: true, //待提货无数据    _offset1: 0, //从0开始    _offset2: 0, //从0开始    _offset3: 0, //从0开始    _limit: 7, //查7条数据     allList: [{        createtime: "2019-12-17 15:27:51.0",        exclostime: "2020-12-17 16:27:51",        goodsdesc: "农家土鸡蛋",        goodsname: "农家土鸡蛋",        id: "od191217636",        num: "1",        orgprice: "2000.00",      pictureurl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576582226487&di=4c8436594e96a02b48d6d73706d52695&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F10%2F24%2F014a98260eb4f6599775e39033e31893.jpg%2521%2Ffwfh%2F804x618%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue",        replacecash: "10",        state: "02",        tkamount: "500.00",        transamt: "1.00",        type: "3",        typeid: "tktg191212000"      },      {        createtime: "2019-12-17 14:16:56.0",        exclostime: "2020-12-17 15:16:56",        goodsdesc: "农家土鸡蛋",        goodsname: "农家土鸡蛋",        id: "od191217628",        num: "1",        orgprice: "2000.00",        pictureurl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576582226487&di=4c8436594e96a02b48d6d73706d52695&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F10%2F24%2F014a98260eb4f6599775e39033e31893.jpg%2521%2Ffwfh%2F804x618%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue",        replacecash: "10",        state: "02",        tkamount: "500.00",        transamt: "1.00",        type: "3",        typeid: "tktg191212000",      },      {        createtime: "2019-12-17 14:16:48.0",        exclostime: "2019-12-17 15:16:48",        goodsdesc: "农家土鸡蛋",        goodsname: "农家土鸡蛋",        id: "od191217627",        num: "1",        orgprice: "2000.00",        pictureurl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576582226487&di=4c8436594e96a02b48d6d73706d52695&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F10%2F24%2F014a98260eb4f6599775e39033e31893.jpg%2521%2Ffwfh%2F804x618%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue",        replacecash: "10",        state: "02",        tkamount: "500.00",        transamt: "1.00",        type: "3",        typeid: "tktg191212000",      },      {        createtime: "2019-12-17 14:16:42.0",        exclostime: "2020-12-17 15:16:42",        goodsdesc: "农家土鸡蛋",        goodsname: "农家土鸡蛋",        id: "od191217625",        num: "1",        orgprice: "2000.00",        pictureurl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576582226487&di=4c8436594e96a02b48d6d73706d52695&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F10%2F24%2F014a98260eb4f6599775e39033e31893.jpg%2521%2Ffwfh%2F804x618%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue",        replacecash: "10",        state: "02",        tkamount: "500.00",        transamt: "1.00",        type: "3",        typeid: "tktg191212000",      },    ],    payList: [{        createtime: "2019-12-17 15:27:51.0",        exclostime: "2020-12-17 16:27:51",        goodsdesc: "农家土鸡蛋",        goodsname: "农家土鸡蛋",        id: "od191217636",        num: "1",        orgprice: "2000.00",      pictureurl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576582226487&di=4c8436594e96a02b48d6d73706d52695&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F10%2F24%2F014a98260eb4f6599775e39033e31893.jpg%2521%2Ffwfh%2F804x618%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue",        replacecash: "10",        state: "02",        tkamount: "500.00",        transamt: "1.00",        type: "3",        typeid: "tktg191212000"      },      {        createtime: "2019-12-17 14:16:56.0",        exclostime: "2020-12-17 15:16:56",        goodsdesc: "农家土鸡蛋",        goodsname: "农家土鸡蛋",        id: "od191217628",        num: "1",        orgprice: "2000.00",        pictureurl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576582226487&di=4c8436594e96a02b48d6d73706d52695&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F10%2F24%2F014a98260eb4f6599775e39033e31893.jpg%2521%2Ffwfh%2F804x618%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue",        replacecash: "10",        state: "02",        tkamount: "500.00",        transamt: "1.00",        type: "3",        typeid: "tktg191212000"      },    ],    bringList: [{      createtime: "2019-12-16 20:45:19.0",      exclostime: "2020-12-16 21:45:19",      goodsdesc: "农家土鸡蛋",      goodsname: "农家土鸡蛋",      id: "od191216577",      num: "1",      orgprice: "2000.00",      pictureurl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576582226487&di=4c8436594e96a02b48d6d73706d52695&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F10%2F24%2F014a98260eb4f6599775e39033e31893.jpg%2521%2Ffwfh%2F804x618%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue",      replacecash: "10",      state: "03",      tkamount: "500.00",      transamt: "1.00",      type: "3",      typeid: "tktg191212000"    }, ],    countDownList: [],    actEndTimeList: [],    num: 0,    numm: 0,    nummm: 0,    //  是否展示暂未显示更多    show: false, // 全部    showw: false, // 待付款    showww: false, //待提货    // 是否允许刷新    isnothing: false, // 全部    isnothing1: false, // 待付款    isnothing3: false, // 待提货  },  time_format: function(param) {    return param.substring(0, 4) + '-' + param.substring(4, 6) + '-' + param.substring(6, 8) + ' ' + param.substring(8, 10) + ':' + param.substring(10, 12) + ':' + param.substring(12, 14)  },  onLoad: function(options) {    var ts = this;    if (options.tabnum) {      ts.setData({        tabnum: options.tabnum      })    }    ts.allListDraw();    ts.payListDraw();    // ts.bringListDraw();  },  onShow: function() {  },  changeTime: function(param, type) {    let endTimeList = [];    // 将活动的结束时间参数提成一个单独的数组，方便操作    // param.forEach(o => { endTimeList.push(o.exclostime) })    // this.setData({ actEndTimeList: endTimeList });    // 执行倒计时函数    this.countDown(param, type);  },  allListDraw() {    var ts = this;    all_timer && clearInterval(all_timer);    all_timer = setInterval(function() {      ts.changeTime(ts.data.allList, "0")    }, 1000);  },  // 待付款  payListDraw() {    var ts = this;    pay_timer && clearInterval(pay_timer);    pay_timer = setInterval(function() {      ts.changeTime(ts.data.payList, "1")    }, 1000);  },  timeFormat(param) { //小于10的格式化函数    return param < 10 ? '0' + param : param;  },  countDown(param, type) { //倒计时函数    // 获取当前时间，同时得到活动结束时间数组    let newTime = new Date().getTime();    let endTimeList = param;    let countDownArr = [];    // 对结束时间进行处理渲染到页面    endTimeList.forEach(o => {      let endTime = new Date(o.exclostime).getTime();      let obj = null;      // 如果活动未结束，对时间进行处理      if (endTime - newTime > 0) {        let time = (endTime - newTime) / 1000;        // 获取天、时、分、秒        let day = parseInt(time / (60 * 60 * 24));        let hou = parseInt(time % (60 * 60 * 24) / 3600);        let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);        let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);        o.day = this.timeFormat(day);        o.hou = this.timeFormat(hou);        o.min = this.timeFormat(min);        o.sec = this.timeFormat(sec);      } else { //活动已结束，全部设置为'00'        o.day = "00";        o.hou = "00";        o.min = "00";        o.sec = "00";      }    })    // 渲染，然后每隔一秒执行一次倒计时函数    if (type == "1") {      this.setData({        payList: endTimeList      })    } else if (type == "0") {      this.setData({        allList: endTimeList      })    }  },  onReady: function() {},  // 改变弹窗  changeindex(e) {    // console.log(e)    var ts = this;    var index = e.currentTarget.dataset.num;    this.setData({      tabnum: index    })    if (this.data.tabnum == 0) {      this.setData({        // allList: [],        num: 0,        show: false,        _offset1: 0,        isnothing: false,      })      ts.allListDraw();    } else if (this.data.tabnum == 1) {      this.setData({        // payList: [],        numm: 0,        showw: false,        _offset2: 0,        isnothing1: false,        nt_show1: false      })      ts.payListDraw();    } else if (this.data.tabnum == 2) {      this.setData({        // bringList: [],        nummm: 0,        showww: false,        _offset3: 0,        isnothing3: false,        nt_show2: false      })    }  },  // 全部-详情  allDesc(e) {    console.log(e)    let _orderId = e.currentTarget.dataset.orderid;    wx.navigateTo({      url: '../winrecorddetil/winrecorddetil?desc=' + _orderId,    })  },  // 待付款-详情  payDesc(e) {    let _orderId = e.currentTarget.dataset.orderid;    wx.navigateTo({      url: '../winrecorddetil/winrecorddetil?desc=' + _orderId,    })  },  // 待提货卡券-详情  bringDesc(e) {    let _orderId = e.currentTarget.dataset.orderid;    wx.navigateTo({      url: '../winrecorddetil/winrecorddetil?desc=' + _orderId,    })  },  // 买它  gotopaymoney(e) {    let orderid = e.currentTarget.dataset.orderid;       this.recharge(orderid)  },  // 去付款  recharge: function(orderid) { //充值        },  onHide: function() {},  onUnload: function() {},  onPullDownRefresh: function() {    var ts = this;    if (ts.data.tabnum == 0) {      ts.setData({        allList: [],        _offset1: 0,        num: 0,        show: false,        isnothing: false      })      ts.allListDraw();    } else if (ts.data.tabnum == 1) {      ts.setData({        payList: [],        _offset2: 0,        numm: 0,        showw: false,        isnothing1: false      })      ts.payListDraw();    } else if (ts.data.tabnum == 2) {      ts.setData({        bringList: [],        _offset3: 0,        nummm: 0,        showww: false,        isnothing3: false      })      // ts.bringListDraw();    }    wx.stopPullDownRefresh();  },  onShareAppMessage: function() {  }})

小程序