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


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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
javascript操作css属性
Dec 30 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 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中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
php实现快速排序法函数代码
2012/08/27 PHP
PHP Directory 函数的详解
2013/03/07 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
Python实现查找系统盘中需要找的字符
2015/07/14 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
物业公司采购员岗位职责
2013/12/31 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
索桥的故事教学反思
2014/02/06 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis