推荐设备MORE

图标设计网站

图标设计网站

行业知识

小程序常见技能问题_小程序完成订单倒计时功用

日期:2021-01-07
我要分享
小程序实现订单倒计时功能       这篇文章主要为大家详细介绍了小程序实现订单倒计时功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

我的解决方案是: 后台给出订单的结束时间,然后再去请求服务器当前的时间,互相转换成时间戳,然后相减 得出的结果是 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 
 * 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: '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 == '待付款'}}" 
 text 剩余支付时间 /text 
 text {{item["showTime"]}} /text 
 /view 
 /view 

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

(当页面离开时,应该清除这个定时器,页面进来时也要触发!)

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