show-filter

 <div class="select-coupons-page">
     <div class="filter-box">
-        <span class="valid">可用(99+)<span class="iconfont">&#xe609;</span></span>
-        <span class="invalid">不可用(99+)</span>
+        <span class="valid">
+            <span class="filter-btn active">可用(99+)</span>
+            <span class="show-filter-btn iconfont">&#xe609;</span>
+        </span>
+        <span class="invalid">
+            <span class="filter-btn">不可用(99+)</span>
+        </span>
+    </div>
+    <div class="filter-item hide">
+        <button>全部</button>
+        <button>店铺券</button>
+        <button>活动券</button>
+        <button>运费券</button>
     </div>
     <div class="exchange-box">
         <input type="text" placeholder="请输入优惠券码">

@@ -2,7 +2,7 @@
     <div class="filter-box">
         <span class="no-used">
             <span class="filter-btn active">未使用(99+)</span>
-            <span class="show-filter iconfont">&#xe609;</span>
+            <span class="show-filter-btn iconfont">&#xe609;</span>
         </span>
         <span class="used">
             <span class="filter-btn">已使用（8）</span>

@@ -9,11 +9,14 @@ class SelectCouponController extends Page {
             coupon: $('.coupon'),
             checkbox: $('.checkbox'),
             tipBox: $('.tip-box'),
-            tipClose: $('.tip-close')
+            tipClose: $('.tip-close'),
+            showFilterBtn: $('.show-filter-btn'),
+            filterItem: $('.filter-item'),
         };
 
         this.view.coupon.on('click', '.checkbox', this.check.bind(this));
         this.view.tipClose.on('click', this.closeTip.bind(this));
+        this.view.showFilterBtn.on('click', this.showFilter.bind(this));
     }
 
     /**
@@ -35,6 +38,17 @@ class SelectCouponController extends Page {
     closeTip() {
         this.view.tipBox.hide();
     }
+
+    /**
+     * 展示筛选器
+     */
+    showFilter() {
+        if (this.view.filterItem.hasClass('hide')) {
+            this.view.filterItem.removeClass('hide');
+        } else {
+            this.view.filterItem.addClass('hide');
+        }
+    }
 }
 
 export default SelectCouponController;

@@ -7,13 +7,13 @@ class ConponController extends Page {
         this.view = {
             filterBtn: $('.filter-btn'),
             filterItem: $('.filter-item'),
-            showFilter: $('.show-filter'),
+            showFilterBtn: $('.show-filter-btn'),
             showIntroBtn: $('.show-intro-btn'),
             couponIntro: $('.coupon-intro')
         };
 
         this.view.filterBtn.on('click', this.tapChange.bind(this));
-        this.view.showFilter.on('click', this.showFilter.bind(this));
+        this.view.showFilterBtn.on('click', this.showFilter.bind(this));
         this.view.showIntroBtn.on('click', this.showIntro.bind(this));
     }
 

@@ -11,16 +11,40 @@ body {
         background-color: #fff;
         position: relative;
 
-        span {
+        .valid,
+        .invalid {
             flex: 1;
             line-height: 60px;
             text-align: center;
-            border-right: 1px solid #e0e0e0;
             color: #b0b0b0;
         }
 
-        span:last-child {
-            border: none;
+        .valid {
+            border-right: 1px solid #e0e0e0;
+        }
+
+        .show-filter-btn,
+        .active {
+            color: #444;
+        }
+    }
+
+    .filter-item {
+        display: flex;
+        width: 100%;
+        height: 130px;
+        justify-content: space-around;
+        align-items: center;
+        background-color: #fff;
+
+        button {
+            width: 150px;
+            height: 70px;
+            background-color: #fff;
+            color: #444;
+            font-size: 28px;
+            border: 1px solid #e0e0e0;
+            border-radius: 4px;
         }
     }
 
@@ -129,4 +153,8 @@ body {
             }
         }
     }
+
+    .hide {
+        display: none;
+    }
 }