最近項(xiàng)目遇到了 一個(gè)小問題,當(dāng)訂單需要支付的時(shí)候,超過指定時(shí)間,自動(dòng)關(guān)閉這個(gè)訂單,未到達(dá)訂單結(jié)束時(shí)間時(shí),需要顯示訂單還有多久關(guān)閉, 如下圖:
成都創(chuàng)新互聯(lián)專注于雁山網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供雁山營銷型網(wǎng)站建設(shè),雁山網(wǎng)站制作、雁山網(wǎng)頁設(shè)計(jì)、雁山網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù),打造雁山網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供雁山網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
寫出的這個(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)被購買而導(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ā)!)
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站題目:小程序?qū)崿F(xiàn)訂單倒計(jì)時(shí)功能
網(wǎng)站URL:http://www.ekvhdxd.cn/article22/jiiocc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站營銷
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)