Showing
3 changed files
with
100 additions
and
0 deletions
@@ -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"></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}}"> |
-
Please register or login to post a comment