小程序?qū)崿F(xiàn)訂單倒計時功能

更新時間：2019年04月23日 16:17:51 作者：做一個快樂的肥仔

這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)訂單倒計時功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近項目遇到了一個小問題，當(dāng)訂單需要支付的時候，超過指定時間，自動關(guān)閉這個訂單，未到達訂單結(jié)束時間時，需要顯示訂單還有多久關(guān)閉, 如下圖：

寫出的這個方法支持多個對象，看到技術(shù)群有很多人問這個問題，而沒有人回答，決定把這個解決方案貢獻出來（不知道算不算好的解決方案）

我的解決方案是: 后臺給出訂單的結(jié)束時間，然后再去請求服務(wù)器當(dāng)前的時間，互相轉(zhuǎn)換成時間戳，然后相減得出的結(jié)果是 xxx毫秒然后 / 1000 就是真正的相差時間了。

JS文件

page({
 data: {
 
 },
 onLoad: function(){
 var that = this; // this 的指向性問題 需要在function 外保存
 wx.request({
  url: 'xxx',
  data: {xxx},
  success: function(result){
  that.setData({
   dataSourcesArray: result.data.order // 請求到的數(shù)據(jù)
  });
  /**
  * result.data.order 是 請求所有的訂單信息
  * serviceTime 是封裝的請求服務(wù)器 時間
  * 服務(wù)器的時間格式是 2018/08/01 17:35:08
  *
  * itemIndex 是防止列表 中的某一條數(shù)據(jù)已經(jīng)被購買而導(dǎo)致修改數(shù)據(jù)時的錯亂
  *
  */
  that.serviceTime(function (res) {
   // 服務(wù)器的時間戳
   var nowYear = res.data.serviceTime.split(' ')[0];
   var nowTime = new Date(res.data.serviceTime).getTime();
   // 這里傳入只有未結(jié)束的訂單
   var orderDetail = [];
   for (var i = 0; i < result.data.order.length; i++) { 
   // 如果訂單未過期狀態(tà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);// 待付款的訂單傳入這個方法內(nèi)
  });
  }
 })
 },
 /*
 * 這里應(yīng)該不要用setInterval 應(yīng)該用 setTimeout 的 避免造成 網(wǎng)絡(luò)阻塞
 */
 operation: function(result) { // 接收到?jīng)]有結(jié)束的訂單信息
 var that = this;
 time = setInterval(function () { // 循環(huán)執(zhí)行
  that.serviceTime(function(res) {// 獲取服務(wù)器時間
  that.resetState(res, result); // 設(shè)置未到結(jié)束時間訂單的狀態(tài)
  });
 }, 1000);
 },
 // 設(shè)置未結(jié)束訂單的狀態(tài)
 /*
 ** res 請求獲取服務(wù)器的時間的結(jié)果集
 ** dataSourcesArray 是顯示頁面的訂單信息
 */
 resetState: function(res, result) {
 var nowTime = new Date(res.data.serviceTime).getTime();// 當(dāng)前時間的時間戳
 
 for (let i = 0; i < result.data.order.length; i++) { // 循環(huán)添加 倒計時
  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();
  // 未來的時間減去現(xiàn)在的時間 ;
  var resTime = (futureTime - nowTime) / 1000;
  // 結(jié)束時間
  var zero = futureTime - nowTime;
  if (zero >= 0) { // 認(rèn)為還沒有到達結(jié)束的時間
  var timeSeconds = timestampToTime(resTime);
  this.setData({
   [showTime]: timeSeconds
  })
  } else { // 結(jié)束的時間已經(jīng)到了
  result.data.order.splice(i, 1); // 該訂單自動結(jié)束時間 從這個列表中刪除 就不必老是循環(huán)他
  this.setData({
   [showTime]: "超過時間 訂單已經(jīng)關(guān)閉",
   [status]: "訂單過期"
  });
  }
 
  if(result.data.order.length == 0){// 如果沒有可支付訂單 則停止這個訂單
  clearInterval(time);
  }
 }
 },
 // 請求到系統(tǒng)時間 調(diào)取成功之后執(zhí)行回調(diào)函數(shù)
 serviceTime: function (fn){
 wx.request({
  url: 'https://www.xxx.cn/getTime', // 僅為示例，并非真實的接口地址
  header: {
  'content-type': 'application/json' // 默認(rèn)值
  },
  success(res) {
  fn && fn(res);
  }
 })
 }
})
 
// 時間轉(zhuǎn)換
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
}
 
// 添 0
function add(m) {
 return m < 10 ? '0' + m : m
}

wxml文件

<!-- 如果是待付款狀態(tài)則會顯示倒計時 -->
<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>

最終效果圖如下(支持多個列表)：