中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

小程序實現訂單倒計時功能

發布時間:2020-09-12 01:58:54 來源:腳本之家 閱讀:217 作者:做一個快樂的肥仔 欄目:web開發

最近項目遇到了 一個小問題,當訂單需要支付的時候,超過指定時間,自動關閉這個訂單,未到達訂單結束時間時,需要顯示訂單還有多久關閉, 如下圖:

小程序實現訂單倒計時功能

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

我的解決方案是: 后臺給出訂單的結束時間,然后再去請求服務器當前的時間,互相轉換成時間戳,然后相減 得出的結果是 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 // 請求到的數據
  });
  /**
  * 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
}
 
// 添 0
function add(m) {
 return m < 10 ? '0' + m : m
}

wxml文件

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

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

小程序實現訂單倒計時功能

(當頁面離開時,應該清除這個定時器,頁面進來時也要觸發!)

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

福泉市| 唐海县| 克拉玛依市| 青田县| 来安县| 温州市| 探索| 县级市| 濮阳市| 卢湾区| 丁青县| 常宁市| 宜兰县| 宜春市| 甘孜县| 银川市| 昂仁县| 南和县| 淄博市| 扶沟县| 纳雍县| 雅江县| 浏阳市| 沁阳市| 山阴县| 武川县| 临洮县| 潞西市| 鹤山市| 苏尼特左旗| 富民县| 南靖县| 通道| 宁远县| 海原县| 饶平县| 德兴市| 大同县| 遂川县| 九龙县| 清水河县|