Authored by 阿达

订单列表增加倒计时

@@ -34,6 +34,67 @@ var orderHammer, @@ -34,6 +34,67 @@ var orderHammer,
34 $reaMask = $('.reason-mask'), 34 $reaMask = $('.reason-mask'),
35 reasonSwiper; 35 reasonSwiper;
36 36
  37 +// 减少计时
  38 +function downCount(item) {
  39 + var hoursItem = item.find('.hours');
  40 +
  41 + var difference = hoursItem.text(),// difference of dates
  42 + interval;
  43 + /**
  44 + * Main downCount function that calculates everything
  45 + */
  46 + function countdown() {
  47 +
  48 + // basic math variables
  49 + var _second = 1000,
  50 + _minute = _second * 60,
  51 + _hour = _minute * 60,
  52 + _day = _hour * 24,
  53 + days,
  54 + hours,
  55 + minutes,
  56 + seconds;
  57 +
  58 + // calculate dates
  59 + days = Math.floor(difference / _day),
  60 + hours = Math.floor((difference % _day) / _hour),
  61 + minutes = Math.floor((difference % _hour) / _minute),
  62 + seconds = Math.floor((difference % _minute) / _second);
  63 +
  64 + // fix dates so that it will show two digets
  65 + days = (String(days).length >= 2) ? days : '0' + days;
  66 + hours = (String(hours).length >= 2) ? hours : '0' + hours;
  67 + minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
  68 + seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;
  69 +
  70 + // set to DOM
  71 + item.removeClass('hide');
  72 + hoursItem.text('剩余' + hours + ':' + minutes + ':' + seconds);
  73 +
  74 + difference -= 1000;
  75 +
  76 + if (difference < 0) {
  77 + clearInterval(interval);// stop timer
  78 + return;
  79 + }
  80 + }
  81 + if (difference !== '' && difference > 0) {
  82 + interval = setInterval(countdown, 1000);// start
  83 + }
  84 +}
  85 +
  86 +// 初始化时间
  87 +function setTime() {
  88 +
  89 + $('.orders').each(function() {
  90 + var item = $(this).find('.count-down');
  91 +
  92 + if (!$(this).hasClass('hide')) {
  93 + downCount(item);
  94 + }
  95 + });
  96 +}
  97 +
37 //加载订单 98 //加载订单
38 function getOrders(option) { 99 function getOrders(option) {
39 var opt = { 100 var opt = {
@@ -82,6 +143,7 @@ function getOrders(option) { @@ -82,6 +143,7 @@ function getOrders(option) {
82 143
83 inAjax = false; 144 inAjax = false;
84 show && loading.hideLoadingMask(); 145 show && loading.hideLoadingMask();
  146 + setTime();
85 } 147 }
86 }); 148 });
87 } 149 }
@@ -121,6 +121,36 @@ @@ -121,6 +121,36 @@
121 border: none; 121 border: none;
122 margin-left: 20px; 122 margin-left: 20px;
123 } 123 }
  124 +
  125 + .count-down {
  126 + list-style: none;
  127 + padding: 0;
  128 + display: inline-block;
  129 + text-align: right;
  130 + font-size: 24px;
  131 + color:#b0b0b0;
  132 + float:left;
  133 + margin-left: 30px;
  134 + margin-top: 20px;
  135 +
  136 + .count-down-icon {
  137 + margin-top: -8px;
  138 + font-size: 30px;
  139 + }
  140 +
  141 + &.hide {
  142 + display: none;
  143 + }
  144 +
  145 + li {
  146 + display: inline-block;
  147 + }
  148 +
  149 + li span {
  150 + font-size: 24px;
  151 + line-height: 24px;
  152 + }
  153 + }
124 } 154 }
125 } 155 }
126 156
@@ -26,6 +26,14 @@ @@ -26,6 +26,14 @@
26 26
27 {{#if unpaid}} 27 {{#if unpaid}}
28 <div class="order-opt"> 28 <div class="order-opt">
  29 + <ul class="count-down">
  30 + <li>
  31 + <span class="iconfont count-down-icon">&#xe64a;</span>
  32 + </li>
  33 + <li>
  34 + <span class="hours">{{leftTime}}</span>
  35 + </li>
  36 + </ul>
29 <span class="btn cancel">取消订单</span> 37 <span class="btn cancel">取消订单</span>
30 {{#if payUrl}} 38 {{#if payUrl}}
31 <a class="locHref" href="{{payUrl}}"> 39 <a class="locHref" href="{{payUrl}}">