DDR爱好者之家 Design By 杰米
最近项目遇到了 一个小问题,当订单需要支付的时候,超过指定时间,自动关闭这个订单,未到达订单结束时间时,需要显示订单还有多久关闭, 如下图:
写出的这个方法支持多个对象,看到技术群有很多人问这个问题,而没有人回答,决定把这个解决方案贡献出来(不知道算不算好的解决方案)
我的解决方案是: 后台给出订单的结束时间,然后再去请求服务器当前的时间,互相转换成时间戳,然后相减 得出的结果是 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 "htmlcode"><!-- 如果是待付款状态则会显示倒计时 --> <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>最终效果图 如下(支持多个列表):
(当页面离开时,应该清除这个定时器,页面进来时也要触发!)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]