初识小程序

订单过期定时器的实现

2020-10-14  本文已影响0人  洗耳恭听_kai

引言:订单列表中未支付的订单,需要设置一个过期时间,并显示倒计时

具体步骤:

小程序端

1、小程序中获取当前时间:Date.parse(new Date()),但是注意,需要除以1000,才能和php后端获取的过期时间戳相减计算出剩余时间
2、data中保存timer为定时器
3、页面渲染出来直接是遍历过后的left_time

data: {
    dzf_order_list: [],
    dzf_curpage: 0,
    timer: '',
  },
/**
   * 未支付订单倒计时
   */
  countDown:function(){
    var that = this;
    that.data.timer = setInterval(function () {
      var orders = that.data.dzf_order_list;
      console.log(orders)
      for (var i = 0; i < orders.length; i++) {
        var status = orders[i].order_state;
        if (status == 1) {
          //过期时间
          var stop_time = orders[i].end_time;
          //当前时间
          var timestamp = Date.parse(new Date());  
          timestamp = timestamp / 1000;
          //计算剩余时间差值
          var leftTime = stop_time - timestamp;
          if (leftTime > 0) {
            var h = Math.floor(leftTime / 3600);
            var m = Math.floor((leftTime / 60 % 60));
            var s = Math.floor((leftTime % 60));
            var left_time = h + " : " + m + " : " + s;
            orders[i].left_time = left_time;
          }else{
            //移除超时未支付的订单
            orders.splice(i, 1);
          }
        }
      }
      that.setData({
        dzf_order_list:orders
      });
    }, 1000);
  },
<view class="p" wx:if="{{order.order_state==1}}">付款还剩
     <text class="color_r">{{order.left_time}}</text>
</view>

后台

       if($list){
            foreach ($list as $key => $val){
                if($val['order_state'] == 1){
                    //过期时间
                    $order_time = time() - $val['order_time'];
                    $d = floor($order_time / (3600 * 24));
                    $end = $val['order_time'] + (3600 * 24);
                    $list[$key]['end_time'] = $end;
                    if($d > 1){
                        unset($list[$key]);
                    }
                }
                if($val['order_state'] == 8 || $val['order_state'] == 6){
                    unset($list[$key]);
                }
            }
        }
上一篇 下一篇

猜你喜欢

热点阅读