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


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 相关文章推荐
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
Angular表单验证实例详解
Oct 20 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
BootStrap 导航条实例代码
May 18 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
node的process以及child_process模块学习笔记
Mar 06 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
vue style width a href动态拼接问题的解决
Aug 07 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中创建图像并绘制文字的例子
2014/11/19 PHP
php实现的用户查询类实例
2015/06/18 PHP
js不是基础的基础
2006/12/24 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
JS随机密码生成算法
2019/09/23 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
Python中的CURL PycURL使用例子
2014/06/01 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
车贷收入证明范本
2014/01/09 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
污水处理保证书
2015/05/09 职场文书
2016年党建工作简报
2015/11/26 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
各种货币符号快捷输入
2022/02/17 杂记