fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit 124f97d5d281baca9ad93d309565362e3615ae37 1 parent bc46a4d9

stamp

Inline Side-by-side
Showing 4 changed files with 72 additions and 24 deletions
... ... @@ -23,22 +23,46 @@
</div>
<div class="coupon-list">
<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 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>
<ul class="coupon-intro hide">
<li>全场通用，特例商品暂不支持使用优惠券</li>
<li>可以与其他类型叠加使用，同店铺只能使用一张，不同店铺真的可 以叠加使用。</li>
</ul>
<ul class="coupon-intro hide">
<li>全场通用，特例商品暂不支持使用优惠券</li>
<li>可以与其他类型叠加使用，同店铺只能使用一张，不同店铺真的可 以叠加使用。</li>
</ul>
</section>
</div>
<div class="no-conpon-now hide">
... ...
... ... @@ -8,14 +8,12 @@ class ConponController extends Page {
filterBtn: $('.filter-btn'),
filterItem: $('.filter-item'),
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.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 {
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 {
position: relative;
width: 710px;
height: 200px;
... ... @@ -144,6 +145,27 @@ body {
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 {
... ...