添加付款时间倒计时

public/css/order.css

@@ -275,4 +275,23 @@ input[type="color"],
 .customArea {
 .customArea {
   float: left;
   float: left;
   display: none;
   display: none;
+}
+
+/* 付款时间 */
+.checked_section {
+  position: relative;
+  height: 60px;
+}
+.checked_left {
+  position: absolute;
+  left: 0;
+}
+.checked_right {
+  position: absolute;
+  right: 0;
+  line-height: 60px;
+}
+.count_time {
+  color: red;
+  font-size: 20px;
 }
 }
\ No newline at end of file

resources/views/detail/changeOrder.blade.php

@@ -175,21 +175,25 @@
         @endif 
         @endif 
 
 
         @if ($order_info['status'] == 2)
         @if ($order_info['status'] == 2)
-            <p>交易状态：&nbsp;审核通过，请联系客户及时付款！</p>
-
-            @if ($order_info['adjust_count'] < 2)
-                <a class="btn btn-default" href="{{URL('adjustPrice', ['order_id'=>$order_info['order_id']])}}">再次调价</a><span class="warn-tip">每笔订单仅有一次“再次调价”机会</span>
-            @endif
+        <div class="checked_section">
+            <div class="checked_left">
+                <p>交易状态：&nbsp;审核通过，请联系客户及时付款！订单付款时间截止至：{{date('Y-m-d H:i:s', $order_info['pay_time'])}}</p>
+
+                @if ($order_info['adjust_count'] < 2)
+                    <a class="btn btn-default" href="{{URL('adjustPrice', ['order_id'=>$order_info['order_id']])}}">再次调价</a><span class="warn-tip">每笔订单仅有一次“再次调价”机会</span>
+                @endif
+            </div> 
             
             
-            <div>
-                <p>订单付款时间截止至：{{date('Y-m-d h:i:s', $order_info['pay_time'])}}</p>
-                <p>剩余时间：
-                {{floor(($order_info['pay_time'] - time()) / 86400) }}天
-                {{floor(($order_info['pay_time'] - time()) % 86400 / 3600) }}小时
-                {{floor(($order_info['pay_time'] - time()) % 3600 / 60) }}分
-                {{floor(($order_info['pay_time'] - time()) % 60) }}秒</p>
+            <div class="checked_right">
+                <p>
+                    <span class="error">剩余付款时间：</span>
+                    <span class="count_time count_day"></span>天
+                    <span class="count_time count_hour"></span>时
+                    <span class="count_time count_min"></span>分
+                    <span class="count_time count_sec"></span>秒
+                </p>
             </div>
             </div>
-
+        </div>
         @endif
         @endif
 
 
         @if ($order_info['status'] == -1)
         @if ($order_info['status'] == -1)
@@ -206,5 +210,43 @@
 <script>
 <script>
     var order_amount = "{{$order_info['order_amount']}}"; 
     var order_amount = "{{$order_info['order_amount']}}"; 
     var currency = "{{$order_info['currency']}}"; 
     var currency = "{{$order_info['currency']}}"; 
-    var order_pay_type = "{{$order_info['order_pay_type']}}"; 
+    var order_pay_type = "{{$order_info['order_pay_type']}}";
+
+    var rest_time = "{{$order_info['pay_time'] - time()}}";
+
+    countDown(rest_time);
+
+    // 倒计时
+    function countDown(times){
+        var timer=null;
+        timer = setInterval(function(){
+            var day=0,
+                hour=0,
+                minute=0,
+                second=0;//时间默认值
+
+            if (times > 0) {
+                day = Math.floor(times / (60 * 60 * 24));
+                hour = Math.floor(times / (60 * 60)) - (day * 24);
+                minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60);
+                second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
+            }
+
+            if (day <= 9) day = '0' + day;
+            if (hour <= 9) hour = '0' + hour;
+            if (minute <= 9) minute = '0' + minute;
+            if (second <= 9) second = '0' + second;
+
+            $('.count_day').text(day);
+            $('.count_hour').text(hour);
+            $('.count_min').text(minute);
+            $('.count_sec').text(second);
+           
+            times--;
+        }, 1000);
+
+        if (times <= 0 ) {
+            clearInterval(timer);
+        }
+    } 
 </script>
 </script>
\ No newline at end of file