小程序?qū)崿F(xiàn)訂單倒計(jì)時(shí)功能
最近項(xiàng)目遇到了 一個(gè)小問題,當(dāng)訂單需要支付的時(shí)候,超過指定時(shí)間,自動(dòng)關(guān)閉這個(gè)訂單,未到達(dá)訂單結(jié)束時(shí)間時(shí),需要顯示訂單還有多久關(guān)閉, 如下圖:

寫出的這個(gè)方法支持多個(gè)對(duì)象,看到技術(shù)群有很多人問這個(gè)問題,而沒有人回答,決定把這個(gè)解決方案貢獻(xiàn)出來(不知道算不算好的解決方案)
我的解決方案是: 后臺(tái)給出訂單的結(jié)束時(shí)間,然后再去請(qǐng)求服務(wù)器當(dāng)前的時(shí)間,互相轉(zhuǎn)換成時(shí)間戳,然后相減 得出的結(jié)果是 xxx毫秒 然后 / 1000 就是真正的相差時(shí)間了。
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 // 請(qǐng)求到的數(shù)據(jù)
});
/**
* result.data.order 是 請(qǐng)求所有的訂單信息
* serviceTime 是封裝的請(qǐng)求服務(wù)器 時(shí)間
* 服務(wù)器的時(shí)間格式是 2018/08/01 17:35:08
*
* itemIndex 是防止列表 中的某一條數(shù)據(jù)已經(jīng)被購(gòu)買而導(dǎo)致修改數(shù)據(jù)時(shí)的錯(cuò)亂
*
*/
that.serviceTime(function (res) {
// 服務(wù)器的時(shí)間戳
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);// 待付款的訂單傳入這個(gè)方法內(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ù)器時(shí)間
that.resetState(res, result); // 設(shè)置未到結(jié)束時(shí)間訂單的狀態(tài)
});
}, 1000);
},
// 設(shè)置未結(jié)束訂單的狀態(tài)
/*
** res 請(qǐng)求獲取服務(wù)器的時(shí)間的結(jié)果集
** dataSourcesArray 是顯示頁面的訂單信息
*/
resetState: function(res, result) {
var nowTime = new Date(res.data.serviceTime).getTime();// 當(dāng)前時(shí)間的時(shí)間戳
for (let i = 0; i < result.data.order.length; i++) { // 循環(huán)添加 倒計(jì)時(shí)
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();
// 未來的時(shí)間減去現(xiàn)在的時(shí)間 ;
var resTime = (futureTime - nowTime) / 1000;
// 結(jié)束時(shí)間
var zero = futureTime - nowTime;
if (zero >= 0) { // 認(rèn)為還沒有到達(dá)結(jié)束的時(shí)間
var timeSeconds = timestampToTime(resTime);
this.setData({
[showTime]: timeSeconds
})
} else { // 結(jié)束的時(shí)間已經(jīng)到了
result.data.order.splice(i, 1); // 該訂單自動(dòng)結(jié)束時(shí)間 從這個(gè)列表中刪除 就不必老是循環(huán)他
this.setData({
[showTime]: "超過時(shí)間 訂單已經(jīng)關(guān)閉",
[status]: "訂單過期"
});
}
if(result.data.order.length == 0){// 如果沒有可支付訂單 則停止這個(gè)訂單
clearInterval(time);
}
}
},
// 請(qǐng)求到系統(tǒng)時(shí)間 調(diào)取成功之后執(zhí)行回調(diào)函數(shù)
serviceTime: function (fn){
wx.request({
url: 'https://www.xxx.cn/getTime', // 僅為示例,并非真實(shí)的接口地址
header: {
'content-type': 'application/json' // 默認(rèn)值
},
success(res) {
fn && fn(res);
}
})
}
})
// 時(shí)間轉(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)則會(huì)顯示倒計(jì)時(shí) -->
<view wx:for="{{dataSourcesArray}}" wx:for-item="item" wx:key="key">
<view wx:if="{{item.state == '待付款'}}" class="showTime">
<text class="title">剩余支付時(shí)間</text>
<text class="content">{{item["showTime"]}}</text>
</view>
</view>
最終效果圖 如下(支持多個(gè)列表):

(當(dāng)頁面離開時(shí),應(yīng)該清除這個(gè)定時(shí)器,頁面進(jìn)來時(shí)也要觸發(fā)?。?/p>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript的9個(gè)陷阱及評(píng)點(diǎn)分析
以下是JavaScript容易犯錯(cuò)的九個(gè)陷阱。雖然不是什么很高深的技術(shù)問題,但注意一下,會(huì)使您的編程輕松些,即所謂make life easier. 筆者對(duì)某些陷阱會(huì)混雜一些評(píng)點(diǎn)。2008-05-05
Javascript的表單與驗(yàn)證-非空驗(yàn)證
JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。本文給大家介紹javascript的表單與驗(yàn)證-非空驗(yàn)證,對(duì)javascript表單驗(yàn)證相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-03-03
javascript使用數(shù)組的push方法完成快速排序
排序的方法有很多,本節(jié)為大家介紹的是使用數(shù)組的push方法完成快速排序,當(dāng)然你也可以舉一反三2014-09-09
js中字符替換函數(shù)String.replace()使用技巧
js中字符替換函數(shù)String.replace()使用技巧,字符替換經(jīng)常用的到。2011-08-08
JS與jQuery實(shí)現(xiàn)子窗口獲取父窗口元素值的方法
這篇文章主要介紹了JS與jQuery實(shí)現(xiàn)子窗口獲取父窗口元素值的方法,涉及javascript與jQuery操作窗口元素的相關(guān)技巧,需要的朋友可以參考下2017-04-04
Bootstrap 模態(tài)框(Modal)帶參數(shù)傳值實(shí)例
模態(tài)框(Modal)是覆蓋在父窗體上的子窗體。下面通過本文給大家介紹Bootstrap 模態(tài)框(Modal)帶參數(shù)傳值實(shí)例代碼,需要的朋友參考下吧2017-08-08

