Authored by 郭成尧

stamp

@@ -40,6 +40,30 @@ @@ -40,6 +40,30 @@
40 <li>可以与其他类型叠加使用,同店铺只能使用一张,不同店铺真的可 以叠加使用。</li> 40 <li>可以与其他类型叠加使用,同店铺只能使用一张,不同店铺真的可 以叠加使用。</li>
41 </ul> 41 </ul>
42 </section> 42 </section>
  43 + <section class="coupon-section">
  44 + <div class="coupon invalid-coupon">
  45 + <div class="coupon-left">
  46 + <p class="value">¥
  47 + <span>100</span>
  48 + </p>
  49 + <p class="threshold">满499可用</p>
  50 + </div>
  51 + <div class="coupon-right">
  52 + <p class="title">
  53 + <span>[店铺券]</span>Adidas Origins店铺使用</p>
  54 + <p class="time">2018.1.12-2018.5.20</p>
  55 + <p class="show-intro-btn">使用说明
  56 + <span class="iconfont icon-down show-intro-arrow"></span>
  57 + </p>
  58 + <span class="tip"></span>
  59 + </div>
  60 + <div class="stamp"></div>
  61 + </div>
  62 + <ul class="coupon-intro hide">
  63 + <li>全场通用,特例商品暂不支持使用优惠券</li>
  64 + <li>可以与其他类型叠加使用,同店铺只能使用一张,不同店铺真的可 以叠加使用。</li>
  65 + </ul>
  66 + </section>
43 </div> 67 </div>
44 <div class="no-conpon-now hide"> 68 <div class="no-conpon-now hide">
45 <div class="icon-not"></div> 69 <div class="icon-not"></div>
@@ -8,14 +8,12 @@ class ConponController extends Page { @@ -8,14 +8,12 @@ class ConponController extends Page {
8 filterBtn: $('.filter-btn'), 8 filterBtn: $('.filter-btn'),
9 filterItem: $('.filter-item'), 9 filterItem: $('.filter-item'),
10 showFilterBtn: $('.show-filter-btn'), 10 showFilterBtn: $('.show-filter-btn'),
11 - showIntroBtn: $('.show-intro-btn'),  
12 - showIntroIcon: $('.show-intro-arrow'),  
13 - couponIntro: $('.coupon-intro') 11 + couponSection: $('.coupon-section')
14 }; 12 };
15 13
16 this.view.filterBtn.on('click', this.tapChange.bind(this)); 14 this.view.filterBtn.on('click', this.tapChange.bind(this));
17 this.view.showFilterBtn.on('click', this.showFilter.bind(this)); 15 this.view.showFilterBtn.on('click', this.showFilter.bind(this));
18 - this.view.showIntroBtn.on('click', this.showIntro.bind(this)); 16 + this.view.couponSection.on('click', '.show-intro-btn', this.showIntro.bind(this));
19 } 17 }
20 18
21 /** 19 /**
@@ -48,13 +46,17 @@ class ConponController extends Page { @@ -48,13 +46,17 @@ class ConponController extends Page {
48 /** 46 /**
49 * 展示优惠券介绍 47 * 展示优惠券介绍
50 */ 48 */
51 - showIntro() {  
52 - if (this.view.couponIntro.hasClass('hide')) {  
53 - this.view.couponIntro.removeClass('hide');  
54 - this.view.showIntroIcon.removeClass('icon-down').addClass('icon-up'); 49 + showIntro(e) {
  50 + let delegateTarget = $(e.delegateTarget);
  51 + let couponIntro = delegateTarget.find('.coupon-intro');
  52 + let showIntroIcon = delegateTarget.find('.show-intro-icon');
  53 +
  54 + if (couponIntro.hasClass('hide')) {
  55 + couponIntro.removeClass('hide');
  56 + showIntroIcon.removeClass('icon-down').addClass('icon-up');
55 } else { 57 } else {
56 - this.view.couponIntro.addClass('hide');  
57 - this.view.showIntroIcon.removeClass('icon-up').addClass('icon-down'); 58 + couponIntro.addClass('hide');
  59 + showIntroIcon.removeClass('icon-up').addClass('icon-down');
58 } 60 }
59 } 61 }
60 } 62 }
@@ -83,6 +83,7 @@ body { @@ -83,6 +83,7 @@ body {
83 } 83 }
84 84
85 .coupon { 85 .coupon {
  86 + position: relative;
86 width: 710px; 87 width: 710px;
87 height: 200px; 88 height: 200px;
88 89
@@ -144,6 +145,27 @@ body { @@ -144,6 +145,27 @@ body {
144 right: 0; 145 right: 0;
145 } 146 }
146 } 147 }
  148 +
  149 + .stamp {
  150 + position: absolute;
  151 + width: 126px;
  152 + height: 114px;
  153 + right: 10px;
  154 + top: 50%;
  155 + transform: translateY(-50%);
  156 + background-image: resolve("home/coupon/timeout@2x.png");
  157 + background-size: 100% 100%;
  158 + }
  159 + }
  160 +
  161 + .invalid-coupon {
  162 + > .coupon-left > p {
  163 + color: #b0b0b0;
  164 + }
  165 +
  166 + > .coupon-right > .title {
  167 + color: #b0b0b0;
  168 + }
147 } 169 }
148 170
149 .coupon-intro { 171 .coupon-intro {