小程序 订单倒计时系列

 

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

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

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