stamp

@@ -23,22 +23,46 @@
     </div>
     </div>
     <div class="coupon-list">
     <div class="coupon-list">
         <section class="coupon-section">
         <section class="coupon-section">
-        <div class="coupon">
-            <div class="coupon-left">
-                <p class="value">¥<span>100</span></p>
-                <p class="threshold">满499可用</p>
+            <div class="coupon">
+                <div class="coupon-left">
+                    <p class="value">¥<span>100</span></p>
+                    <p class="threshold">满499可用</p>
+                </div>
+                <div class="coupon-right">
+                    <p class="title"><span>[店铺券]</span>Adidas Origins店铺使用</p>
+                    <p class="time">2018.1.12-2018.5.20</p>
+                    <p class="show-intro-btn">使用说明<span class="iconfont icon-down show-intro-arrow"></span><button class="use-now">立即使用</button></p>
+                    <span class="tip"></span>
+                </div>
             </div>
             </div>
-            <div class="coupon-right">
-                <p class="title"><span>[店铺券]</span>Adidas Origins店铺使用</p>
-                <p class="time">2018.1.12-2018.5.20</p>
-                <p class="show-intro-btn">使用说明<span class="iconfont icon-down show-intro-arrow"></span><button class="use-now">立即使用</button></p>
-                <span class="tip"></span>
+            <ul class="coupon-intro hide">
+                <li>全场通用，特例商品暂不支持使用优惠券</li>
+                <li>可以与其他类型叠加使用，同店铺只能使用一张，不同店铺真的可 以叠加使用。</li>
+            </ul>
+        </section>
+        <section class="coupon-section">
+            <div class="coupon invalid-coupon">
+                <div class="coupon-left">
+                    <p class="value">¥
+                        <span>100</span>
+                    </p>
+                    <p class="threshold">满499可用</p>
+                </div>
+                <div class="coupon-right">
+                    <p class="title">
+                        <span>[店铺券]</span>Adidas Origins店铺使用</p>
+                    <p class="time">2018.1.12-2018.5.20</p>
+                    <p class="show-intro-btn">使用说明
+                        <span class="iconfont icon-down show-intro-arrow"></span>
+                    </p>
+                    <span class="tip"></span>
+                </div>
+                <div class="stamp"></div>
             </div>
             </div>
-        </div>
-        <ul class="coupon-intro hide">
-            <li>全场通用，特例商品暂不支持使用优惠券</li>
-            <li>可以与其他类型叠加使用，同店铺只能使用一张，不同店铺真的可 以叠加使用。</li>
-        </ul>
+            <ul class="coupon-intro hide">
+                <li>全场通用，特例商品暂不支持使用优惠券</li>
+                <li>可以与其他类型叠加使用，同店铺只能使用一张，不同店铺真的可 以叠加使用。</li>
+            </ul>
         </section>
         </section>
     </div>
     </div>
     <div class="no-conpon-now hide">
     <div class="no-conpon-now hide">

@@ -8,14 +8,12 @@ class ConponController extends Page {
             filterBtn: $('.filter-btn'),
             filterBtn: $('.filter-btn'),
             filterItem: $('.filter-item'),
             filterItem: $('.filter-item'),
             showFilterBtn: $('.show-filter-btn'),
             showFilterBtn: $('.show-filter-btn'),
-            showIntroBtn: $('.show-intro-btn'),
-            showIntroIcon: $('.show-intro-arrow'),
-            couponIntro: $('.coupon-intro')
+            couponSection: $('.coupon-section')
         };
         };
 
 
         this.view.filterBtn.on('click', this.tapChange.bind(this));
         this.view.filterBtn.on('click', this.tapChange.bind(this));
         this.view.showFilterBtn.on('click', this.showFilter.bind(this));
         this.view.showFilterBtn.on('click', this.showFilter.bind(this));
-        this.view.showIntroBtn.on('click', this.showIntro.bind(this));
+        this.view.couponSection.on('click', '.show-intro-btn', this.showIntro.bind(this));
     }
     }
 
 
     /**
     /**
@@ -48,13 +46,17 @@ class ConponController extends Page {
     /**
     /**
      * 展示优惠券介绍
      * 展示优惠券介绍
      */
      */
-    showIntro() {
-        if (this.view.couponIntro.hasClass('hide')) {
-            this.view.couponIntro.removeClass('hide');
-            this.view.showIntroIcon.removeClass('icon-down').addClass('icon-up');
+    showIntro(e) {
+        let delegateTarget = $(e.delegateTarget);
+        let couponIntro = delegateTarget.find('.coupon-intro');
+        let showIntroIcon = delegateTarget.find('.show-intro-icon');
+
+        if (couponIntro.hasClass('hide')) {
+            couponIntro.removeClass('hide');
+            showIntroIcon.removeClass('icon-down').addClass('icon-up');
         } else {
         } else {
-            this.view.couponIntro.addClass('hide');
-            this.view.showIntroIcon.removeClass('icon-up').addClass('icon-down');
+            couponIntro.addClass('hide');
+            showIntroIcon.removeClass('icon-up').addClass('icon-down');
         }
         }
     }
     }
 }
 }

@@ -83,6 +83,7 @@ body {
         }
         }
 
 
         .coupon {
         .coupon {
+            position: relative;
             width: 710px;
             width: 710px;
             height: 200px;
             height: 200px;
 
 
@@ -144,6 +145,27 @@ body {
                     right: 0;
                     right: 0;
                 }
                 }
             }
             }
+
+            .stamp {
+                position: absolute;
+                width: 126px;
+                height: 114px;
+                right: 10px;
+                top: 50%;
+                transform: translateY(-50%);
+                background-image: resolve("home/coupon/timeout@2x.png");
+                background-size: 100% 100%;
+            }
+        }
+
+        .invalid-coupon {
+            > .coupon-left > p {
+                color: #b0b0b0;
+            }
+
+            > .coupon-right > .title {
+                color: #b0b0b0;
+            }
         }
         }
 
 
         .coupon-intro {
         .coupon-intro {