1.

最近项目遇到了一个小问题,当订单需要支付的时候,超过指定时间自动关闭这个订单,未到达订单结束时间时,需要显示订单还有多久关闭,如下图：

2.

写出的这个方法支持多个对象,看到技术群有很多人问这个问题而没有人回答,决定把这个解决方案贡献出来(不知道算不算好得解决方案)

3.

我的解决方案是:后台给出订单的结束时间然后再去请求服务器当前的时间互相转换成时间戳然后相减得出的结果是xxx毫秒然后/1000就是真正的相差时间了

4.

JS文件

page({data:{},onLoad:function(){varthatthis;//this的指向性问题需要在function外保存wx.request({url:'xxx',data:{xxx},success:function(result){that.setData({dataSourcesArray:result.data.order//请求到的数据});/***result.data.order是请求所有的订单信息*serviceTime是封装的请求服务器时间*服务器的时间格式是2018/08/0117:35:08**itemIndex是防止列表中的某一条数据已经被购买而导致修改数据时的错乱**/that.serviceTime(function(res){//服务器的时间戳varnowYearres.data.serviceTime.split('')[0];varnowTimenewDate(res.data.serviceTime).getTime();//这里传入只有未结束的订单varorderDetail[];for(vari0;iresult.data.order.length;i++){//如果订单未过期状态if(result.data.order[i].state'待付款'){result.data.order[i].itemIndexi;orderDetail.push(result.data.order[i]);}}result.data.orderorderDetail;that.operation(result);//待付款的订单传入这个方法内});}})},/**这里应该不要用setInterval应该用setTimeout的避免造成网络阻塞*/operation:function(result){//接收到没有结束的订单信息varthatthis;timesetInterval(function(){//循环执行that.serviceTime(function(res){//获取服务器时间that.resetState(res,result);//设置未到结束时间订单的状态});},1000);},//设置未结束订单的状态/***res请求获取服务器的时间的结果集**dataSourcesArray是显示页面的订单信息*/resetState:function(res,result){varnowTimenewDate(res.data.serviceTime).getTime();//当前时间的时间戳for(leti0;iresult.data.order.length;i++){//循环添加倒计时varindexresult.data.order[i].itemIndex;varstatus"dataSourcesArray["+index+"]."+'state';varshowTime"dataSourcesArray["+index+"]."+'showTime';varfutureTimenewDate(result.data.order[i].expiryTime).getTime();//未来的时间减去现在的时间;varresTime(futureTime-nowTime)/1000;//结束时间varzerofutureTime-nowTime;if(zero0){//认为还没有到达结束的时间vartimeSecondstimestampToTime(resTime);this.setData({[showTime]:timeSeconds})}else{//结束的时间已经到了result.data.order.splice(i,1);//该订单自动结束时间从这个列表中删除就不必老是循环他this.setData({[showTime]:"超过时间订单已经关闭",[status]:"订单过期"});}if(result.data.order.length0){//如果没有可支付订单则停止这个订单clearInterval(time);}}},//请求到系统时间调取成功之后执行回调函数serviceTime:function(fn){wx.request({url:'https://www.xxx.cn/getTime',//仅为示例，并非真实的接口地址header:{'content-type':'application/json'//默认值},success(res){fnfn(res);}})}})//时间转换functiontimestampToTime(s){varhMath.floor(s/3600%24);varminMath.floor(s/60)%60;varsecs%60;hadd(h);minadd(min);secadd(sec);returnh+':'+min+':'+sec}//添0functionadd(m){returnm10?'0'+m:m}5.

wxml文件

!--如果是待付款状态则会显示倒计时--viewwx:for"{{dataSourcesArray}}"wx:for-item"item"wx:key"key"viewwx:if"{{item.state'待付款'}}"class"showTime"textclass"title"剩余支付时间/texttextclass"content"{{item["showTime"]}}/text/view/view6.

最终效果图如下(支持多个列表)：

(当页面离开时应该清除这个定时器页面进来时也要触发!)7.

QQ微信技术群:561696357