小程序实现订单倒计时功能

page({ data: {  }, onLoad: function(){ var that = this; // this 的指向性问题 需要在function 外保存 wx.request({  url: 'xxx',  data: {xxx},  success: function(result){  that.setData({   dataSourcesArray: result.data.order // 请求到的数据  });  /**  * result.data.order 是 请求所有的订单信息  * serviceTime 是封装的请求服务器 时间  * 服务器的时间格式是 2018/08/01 17:35:08  *  * itemIndex 是防止列表 中的某一条数据已经被购买而导致修改数据时的错乱  *  */  that.serviceTime(function (res) {   // 服务器的时间戳   var nowYear = res.data.serviceTime.split(' ')[0];   var nowTime = new Date(res.data.serviceTime).getTime();   // 这里传入只有未结束的订单   var orderDetail = [];   for (var i = 0; i < result.data.order.length; i++) {    // 如果订单未过期状态   if (result.data.order[i].state == '待付款') {    result.data.order[i].itemIndex = i;     orderDetail.push(result.data.order[i]);   }   }   result.data.order = orderDetail;   that.operation(result);// 待付款的订单传入这个方法内  });  } }) }, /* * 这里应该不要用setInterval 应该用 setTimeout 的 避免造成 网络阻塞 */ operation: function(result) { // 接收到没有结束的订单信息 var that = this; time = setInterval(function () { // 循环执行  that.serviceTime(function(res) {// 获取服务器时间  that.resetState(res, result); // 设置未到结束时间订单的状态  }); }, 1000); }, // 设置未结束订单的状态 /* ** res 请求获取服务器的时间的结果集 ** dataSourcesArray 是显示页面的订单信息 */ resetState: function(res, result) { var nowTime = new Date(res.data.serviceTime).getTime();// 当前时间的时间戳  for (let i = 0; i < result.data.order.length; i++) { // 循环添加 倒计时  var index = result.data.order[i].itemIndex;  var status = "dataSourcesArray[" + index + "]." + 'state';  var showTime = "dataSourcesArray[" + index + "]." + 'showTime';  var futureTime = new Date(result.data.order[i].expiryTime).getTime();  // 未来的时间减去现在的时间 ;  var resTime = (futureTime - nowTime) / 1000;  // 结束时间  var zero = futureTime - nowTime;  if (zero >= 0) { // 认为还没有到达结束的时间  var timeSeconds = timestampToTime(resTime);  this.setData({   [showTime]: timeSeconds  })  } else { // 结束的时间已经到了  result.data.order.splice(i, 1); // 该订单自动结束时间 从这个列表中删除 就不必老是循环他  this.setData({   [showTime]: "超过时间 订单已经关闭",   [status]: "订单过期"  });  }   if(result.data.order.length == 0){// 如果没有可支付订单 则停止这个订单  clearInterval(time);  } } }, // 请求到系统时间 调取成功之后执行回调函数 serviceTime: function (fn){ wx.request({  url: 'https://www.xxx.cn/getTime', // 仅为示例，并非真实的接口地址  header: {  'content-type': 'application/json' // 默认值  },  success(res) {  fn && fn(res);  } }) }}) // 时间转换function timestampToTime(s) { var h = Math.floor(s / 3600 % 24); var min = Math.floor(s / 60) % 60; var sec = s % 60; h = add(h); min = add(min); sec = add(sec); return h + ':' + min + ':' + sec} // 添 0function add(m) { return m < 10 ? '0' + m : m}

<!-- 如果是待付款状态则会显示倒计时 --><view wx:for="{{dataSourcesArray}}" wx:for-item="item" wx:key="key"> <view wx:if="{{item.state == '待付款'}}" class="showTime"> <text class="title">剩余支付时间</text> <text class="content">{{item["showTime"]}}</text> </view></view>