小程序实现订单倒计时功能

最近，项目遇到了一个小问题。当订单需要支付时，会在指定时间后自动关闭。当没有达到订单结束时间时，需要显示关闭订单需要多长时间，如下图所示：

编写的方法支持多个对象。看到技术组很多人问这个问题，但是没有人回答，他们决定贡献这个解决方案(不知道是不是好的解决方案)

我的解决方案是在：的后台给出订单的结束时间，然后请求服务器的当前时间，转换成时间戳，再减去得到xxx毫秒，那么/1000就是真正的时间差。

JS文件

页面({ data : } }，onLoad:函数(){ var即=this//这个的指向性问题需要在功能外保存wx.request({ url: 'xxx '，data: {xxx}，success:函数（结果){那个。setdata({ datasources数组：结果。数据。订单/请求到的数据});/** * result.data.order是请求所有的订单信息*服务时间是封装的请求服务器时间* 服务器的时间格式是2018/08/01 17:35:08 * *项目索引是防止列表中的某一条数据已经被购买而导致修改数据时的错乱* */that.serviceTime(函数(res) { //服务器的时间戳var now year=RES . data。服务时间。split(')[0]；var nowTime=新日期(res.data.serviceTime).getTime()；//这里传入只有未结束的订单var订单明细=[]；for(var I=0；我结果。数据。顺序。长度；i ) { //如果订单未过期状态if (result.data.order[i]).状态=='待付款){ result.data.order[i].项目索引=I；订单详情。推送(结果。数据。顺序[I])；} }结果。数据。订单=订单明细；操作（结果);//待付款的订单传入这个方法内});} }) }, /* * 这里应该不要用setInterval应该用定时器的避免造成网络阻塞*/operation:函数（结果){ //接收到没有结束的订单信息变量=这个；time=setInterval(function () { //循环执行that.serviceTime(函数(res) {//获取服务器时间that.resetState(res，result)；//设置未到结束时间订单的状态});}, 1000);}, //设置未结束订单的状态/* ** res请求获取服务器的时间的结果集**数据源数组是显示页面的订单信息*/resetState:函数(res，result){ var now time=new Date(RES . data。服务时间).getTime()；//当前时间的时间戳用于(设I=0；我结果。数据。顺序。长度；i ) { //循环添加倒计时var index=result.data.order[i].itemIndexvar状态='数据源数组['索引']'状态；var show time='数据源数组[' index ']' show time '；var futureTime=新日期(result.data.order[i]).过期时间).getTime()；//未来的时间减去现在的时间；var resTime=(futureTime-now time)/1000；//结束时间定义变量零=futureTime-现在时间；如果(零=0) { //认为还没有到达结束的时间var time seconds=timestampetime(resTime)；这个。setdata({[show time]:次秒})} else {//结束的时间已经到了result.data.order.splice(i，1)；//该订单自动结束时间从这个列表中删除就不必老是循环他this.setData({ [showTime]: '超过时间订单已经关闭，[状态]: '订单过期' });} if(结果。数据。秩序。长度==0){//如果没有可支付订单则停止这个订单clearInterval(时间);} } }, //请求到系统时间调取成功之后执行回调函数serviceTime:函数(fn){ wx。请求({ URL : ' https://www。XXX。cn/getTime '，//仅为示例，并非真实的接口地址标头： { ' content-type ' : ' application/JSON '//默认值},成功(RES){ fn fn(RES)；} }) }}) //时间转换函数timestampetime { var h=math。地板(s/3600% 24)；var min=数学。楼层(s/60)60%；var sec=s % 60h=add(h)；min=add(min)；sec=add(秒);返回h ': '分钟' : '秒} //添0函数添加(m) {返回m 10？0' m : m}wxml文件

！-如果是待付款状态则会显示倒计时-view wx : for=' { { data sources Array } } ' wx : for-item=' item ' wx : key=' key ' view wx : if=' { { item。状态=='待付款} } ' class=' showTime ' text class=' title '剩余支付时间/text text class=' content ' { item[' show time ']} }/text/view/view最终效果图如下（支持多个列表):

（当页面离开时，应该清除这个定时器，页面进来时也要触发！)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。