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


Posted in Javascript onApril 23, 2019

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

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

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

我的解决方案是: 后台给出订单的结束时间,然后再去请求服务器当前的时间,互相转换成时间戳,然后相减 得出的结果是 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文件

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype 中文参数乱码解决方案
Nov 09 Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
浅析javascript的return语句
Dec 15 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 #Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 #Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 #Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 #Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 #Javascript
Vue infinite update loop的问题解决
Apr 23 #Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 #Javascript
You might like
php中hashtable实现示例分享
2014/02/13 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
JS的数组迭代方法
2015/02/05 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
Python模块相关知识点小结
2020/03/09 Python
python实现用户名密码校验
2020/03/18 Python
django实现后台显示媒体文件
2020/04/07 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
python中封包建立过程实例
2021/02/18 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
Overload和Override的区别
2012/09/02 面试题
关于使用Redisson订阅数问题
2022/01/18 Redis
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android