sytle-adjust-add-tab

@@ -276,7 +276,7 @@ exports.selectCoupon = (req, res) => {
         title: '选择优惠券',
         selectCouponPage: true,
         pageHeader: headerData,
-        pageFooter: true,
+        pageFooter: false,
         localCss: true
     });
 };

@@ -10,19 +10,22 @@
         <div class="coupon-tab">
             <ul class="tab-navs" data-sticky>
                 <li class="tab-nav pull-left active">
-                    <span data-target="#red-index" data-trigger="tab" data-funHome>可用优惠券</span>
+                    <span data-target="#couponAvailable" data-trigger="tab" data-funHome>可用优惠券</span>
                 </li>
                 <em class="pull-left">|</em>
                 <li class="tab-nav pull-left">
-                    <span data-target="#all-goods" data-trigger="tab" data-funGetNewGoods>不可用优惠券</span>
+                    <span data-target="#couponUnavailable" data-trigger="tab" data-funGetNewGoods>不可用优惠券</span>
                 </li>
             </ul>
         </div>
     </div>
-    <div class="coupon-wrap">
-        <div id="coupon-list" class="coupon-list"></div>
-        <div class="not-avaliable-coupon-line hide">不可使用的优惠券</div>
-        <div id="coupon-list-not" class="coupon-list"></div>
+    <div class="tab-panels coupon-wrap">
+        <div id="couponAvailable" class="coupon-list active"></div>
+        <div id="couponUnavailable" class="coupon-list"></div>
+    </div>
+    <div class="use-coupon-btn-group">
+        <button class="pull-left use">使用</button>
+        <button class="pull-right not-use">不使用</button>
     </div>
 </div>
 <script id="tmpl-no-coupon" type="text/tmpl">
@@ -33,7 +36,3 @@
     </div>
 </div>
 </script>
-
-<div class="use-coupon-btn-group">
-
-</div>

@@ -4,5 +4,5 @@
  * @Last Modified by:   Targaryen
  */
 $('.select-coupon-page').css('min-height', function() {
-    return $(window).height();
+    return $(window).height() - $('#yoho-header').height();
 });

@@ -12,11 +12,13 @@ let $ = require('yoho-jquery'),
     conponNotAvaliableTmpl = require('cart/select-coupon/coupon-not-avaliable.hbs'),
     orderInfo = require('./order-info').orderInfo;
 
+require('plugin/tab');
+
 let isGetData;
 
 let $newCoupon = $('#new-coupon'),
     linkUrl = document.referrer,
-    $couponList = $('#coupon-list');
+    $couponList = $('#couponAvailable');
 
 let winH = $(window).height();
 
@@ -164,7 +166,7 @@ function getCouponHandle(allCoupons) {
     if (notAvailableCoupons.length) {
         $('.not-avaliable-coupon-line').show();
     }
-    $('#coupon-list-not').append(conponNotAvaliableTmpl({
+    $('#couponUnavailable').append(conponNotAvaliableTmpl({
         notAvailableCoupons: notAvailableCoupons
     }));
     window.rePosFooter();

+$couponRadius: 8px;
+$rosyPink: #f06a6b;
+$backgroudColor: #f2f2f2;
+$fontColor: #444;
+$fontGrayLight: #b0b0b0;
+$fontSizeSmall: 16px;
+
 @define-extend line {
     content: "";
     position: absolute;
@@ -12,13 +19,6 @@
     padding-right: 30px;
 }
 
-$couponRadius: 8px;
-$rosyPink: #f06a6b;
-$backgroudColor: #f2f2f2;
-$fontColor: #444;
-$fontGrayLight: #b0b0b0;
-$fontSizeSmall: 16px;
-
 .select-coupon-page {
     background-color: $backgroudColor;
     margin-top: 40px;
@@ -63,14 +63,13 @@ $fontSizeSmall: 16px;
     }
 
     .coupon-tab {
-        @extend page-padding;
-
         height: 60px;
         line-height: 60px;
         margin-top: 30px;
+        border-top: 1px solid $fontGrayLight;
 
         li {
-            width: 285px;
+            width: 315px;
             text-align: center;
             color: $fontGrayLight;
 
@@ -86,6 +85,8 @@ $fontSizeSmall: 16px;
     }
 
     .coupon-list {
+        display: none;
+
         .coupon {
             border-radius: $couponRadius;
             background-color: #fff;
@@ -141,4 +142,36 @@ $fontSizeSmall: 16px;
             }
         }
     }
+
+    .active {
+        display: block;
+    }
+
+    .use-coupon-btn-group {
+        @extend page-padding;
+
+        width: 100%;
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        z-index: 2;
+        background-color: #fff;
+        padding-top: 20px;
+        padding-bottom: 20px;
+
+        button {
+            color: #fff;
+            width: 270px;
+            height: 70px;
+            border-radius: $couponRadius;
+
+            &.use {
+                background-color: $fontColor;
+            }
+
+            &.not-use {
+                background-color: $fontGrayLight;
+            }
+        }
+    }
 }

 @import "./select-coupon";
-@import "home/coupons";