您的位置：首页 > 移动开发 > 微信开发

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

2019-04-24 07:01 686 查看

最近项目遇到了一个小问题，当订单需要支付的时候，超过指定时间，自动关闭这个订单，未到达订单结束时间时，需要显示订单还有多久关闭, 如下图：

写出的这个方法支持多个对象，看到技术群有很多人问这个问题，而没有人回答，决定把这个解决方案贡献出来（不知道算不算好的解决方案）

我的解决方案是: 后台给出订单的结束时间，然后再去请求服务器当前的时间，互相转换成时间戳，然后相减得出的结果是 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>

最终效果图如下(支持多个列表)：

（当页面离开时，应该清除这个定时器，页面进来时也要触发！）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航