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


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将相对地址转换为绝对地址示例代码
Jul 19 Javascript
js Date概念详细介绍
Nov 22 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
浅析JS异步加载进度条
May 05 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
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中的print_r 与 var_dump 输出数组
2016/06/13 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
定义select的边框颜色
2008/04/28 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
python备份文件的脚本
2008/08/11 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
关于numpy数组轴的使用详解
2019/12/05 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
会计专业大学生职业生涯规划书
2014/02/11 职场文书
绿色小区申报材料
2014/08/22 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
安全月宣传标语
2014/10/07 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
起诉书范文
2015/05/20 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
图书借阅制度范本
2015/08/06 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
Python标准库pathlib操作目录和文件
2021/11/20 Python
Pandas-DataFrame知识点汇总
2022/03/16 Python