重慶分公司
小程序實現訂單倒計時功能
最近項目遇到了 一個小問題，當訂單需要支付的時候，超過指定時間，自動關閉這個訂單，未到達訂單結束時間時，需要顯示訂單還有多久關閉, 如下圖：
成都創新互聯專注于雁山網站建設服務及定制，我們擁有豐富的企業做網站經驗。 熱誠為您提供雁山營銷型網站建設，雁山網站制作、雁山網頁設計、雁山網站官網定制、微信小程序開發服務，打造雁山網絡公司原創品牌,更為您提供雁山網站排名全網營銷落地服務。
寫出的這個方法支持多個對象，看到技術群有很多人問這個問題，而沒有人回答，決定把這個解決方案貢獻出來（不知道算不算好的解決方案）
我的解決方案是: 后臺給出訂單的結束時間，然后再去請求服務器當前的時間，互相轉換成時間戳，然后相減 得出的結果是 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文件
剩余支付時間 {{item["showTime"]}}
最終效果圖 如下(支持多個列表)：
（當頁面離開時，應該清除這個定時器，頁面進來時也要觸發！）
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創新互聯。
文章標題：小程序實現訂單倒計時功能
分享網址：http://www.xueling.net.cn/article/jiiocc.html