1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

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

       更新时间£º2019年04月23日 16:17:52   作者£º做一个快乐的?#39318;?   我要评论

      这篇文章主要为大家详细介绍了小程序实现订单倒计时功能£¬具有一定的参?#25216;?#20540;£¬感兴趣的小伙伴们可以参?#23478;?#19979;

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

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

      我的解决方案是: 后台给出订单的结束时间£¬然后再去请求服务器当前的时间£¬互相转换成时间戳£¬然后相减 得出的结果是 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 是?#20048;?#21015;表 中的某一条数据已经?#36824;?#20080;而导致修改数据时的错乱
        *
        */
        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' // 默?#29616;?
        },
        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>

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

      £¨当页面离开时£¬应?#20204;?#38500;这个定时器£¬页面进来时也要触发£¡£©

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

      相关文章

      最新评论

      3dÊÔ»úºÅÖвÊÍø

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>