小程序 订单倒计时系列
最近项目遇到了 一个小问题, 当订单需要支付的时候 , 超过指定时间 自动关闭这个订单, 未到达订单结束时间时 , 需要显示订单还有多久关闭, 如下图:
写出的这个方法支持多个对象, 看到技术群有很多人问这个问题 而没有人回答 , 决定把这个解决方案贡献出来(不知道算不算好得解决方案)
我的解决方案是: 后台给出订单的结束时间 然后再去请求服务器当前的时间 互相转换成时间戳 然后相减 得出的结果是 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>
最终效果图 如下(支持多个列表):
(当页面离开时 应该清除这个定时器 页面进来时也要触发!)
QQ微信技术群: 561696357
小程序 订单倒计时系列相关推荐
- 微信小程序 订单倒计时
话不多少直接上代码 我的页面是有分页的 分页的数据 大家参考一下即可 我的数组是多个的 单个到倒计时大家调整一下数组即可 js const moment = require('../../utils/ ...
- 微信小程序订单倒计时
实现效果 实现关键: ***为每条数据计算倒计时 ***确保每次回调订单列表时先清除定时器,否则会出现重复数据的情况 1.获取当前手机系统 onLoad(options) {let platform; ...
- 支付宝小程序订单倒计时分秒
` data: { timeMin: 15, timeSec: 59 } // 倒计时timer() {let timer = setInterval(() => {if (this.data. ...
- 黯然微信小程序杂记(三):微信小程序实现倒计时功能 附讲解教学 附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能 附超详细注释 附源码 一.功能描述 二.界面展示 三.test.wxml代码 四.test.js代码(注释很详细 很易懂) CSDN私信我,有关微信 ...
- 微信小程序--订单查询页面
微信小程序–订单查询页面 包含功能点: 订单查询 结构:order.wxml <tabs tabList="{{tabList}}" binditemChange=" ...
- [转]微信小程序之购物车 —— 微信小程序实战商城系列(5)
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城 ...
- 每日三思:优化微信小程序中倒计时占内存较大(19-0612-1917)
小程序的倒计时存在暂用手机内存较大的问题,尤其是在列表中,如果每一项都有倒计时的话,一进页面就会卡死 解决思路 每次启用倒计时的时候,先清除倒计时,再启用(也就是一条腿走路,内存中只有当前的倒计时); ...
- 微信小程序动态倒计时
微信小程序之倒计时插件 wxTimer 1.在全局app.js引入 下载: wxTimer 然后把wxTimer文件放在js中 for (let i = 0; i < addEvaluate.l ...
- 微信小程序订单生成支付二维码接口 code
手机的小程序订单是直接拉起支付界面的,有些朋友需要生成支付二维码 这边就需要去调用微信的支付二维码接口了 需要的参数是 session_id, timeStamp, nonceStr, package ...
最新文章
- iOS隐藏导航栏的方法
- Python基础 2
- excel函数大全_让你的EXCEL工作效率翻倍的函数大全
- Oracle的SOME,ANY和ALL操作
- 模拟 CSU 1562 Fun House
- 使用Json.NET来序列化所需的数据
- python小程序:备份文件
- 史上最简单的SpringCloud教程 | 第十一篇: docker部署spring cloud项目
- 关于 SAP Spartacus OAuth 2.0 Resource Owner Password Flow 实现的一些讨论
- [SpringSecurity]web权限方案_用户授权_自定义403页面
- 诸如fluke等网络测试仪的工作原理简介
- docker搞个wordpress
- 构造函数能默认初始化其静态成员么?
- STM32学习——TIM基本定时器
- 李国庆俞渝撕破脸,当当喊话:冲动是魔鬼 冷静下来吧
- APP测试之使用ADB可能遇到的错误及解决办法
- Sublime Text 3 Plugin Better!
- 【PL/SQL】匿名块、存储过程、函数、触发器
- 大数据分析需注意哪些问题
- 多任务计时器anytime
热门文章
- Linux常用命令——rsync命令
- 微机原理和计算机组成原理一样吗_计算机组成原理(指令)
- 吉林大学算法设计与分析考前突击
- 浅析 - 高阶产品经理的方法论
- 模式窗口window.showModalDialog()的用法
- 日志组的状态:CURRENT、ACTIVE、INACTIVE
- XML 中的 ﹤![CDATA[ ]]>
- 区分map和fileter
- e575 viminfo 错误.
- 【从零开始学习 SystemVerilog】2.8、SystemVerilog 数据类型—— Unpacked Arrays(非压缩数组)