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


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 相关文章推荐
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 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脚本的10个技巧(3)
2006/10/09 PHP
PHP用mysql数据库存储session的代码
2010/03/05 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
新手入门常用代码集锦
2007/01/11 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
Python中base64与xml取值结合问题
2019/12/22 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
教师党员一句话承诺
2014/03/28 职场文书
材料员岗位职责
2015/02/10 职场文书
孔子观后感
2015/06/08 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers