fe / yohobuywap-node · Commits

Go to a project

Authored by 毕凯
Commit 795f313f187efa2afa87139eafb84318565f926f 2 parents f4922aa4 ca15952f

Merge branch 'feature/couponNew' into 'gray' 

Feature/coupon new



See merge request !1036
Inline Side-by-side
Showing 23 changed files with 196 additions and 65 deletions
... ... @@ -9,9 +9,9 @@ exports.index = (req, res, next) => {
module: 'activity',
page: 'coupon-list',
pageHeader: headerModel.setNav({
navTitle: '领券中心'
navTitle: '11.11 4000元优惠券 限量抢'
}),
title: '领券中心 | Yoho!Buy有货 | 潮流购物逛不停',
title: '11.11 4000元优惠券 限量抢',
width750: true,
localCss: true
};
... ...
... ... @@ -112,6 +112,7 @@ class CouponList extends global.yoho.BaseModel {
};
_.forEach(value.personalityShopCouponBos, (item) => {
item.useLimit = parseInt(item.useLimit, 10);
build.coupons.push(item);
});
resu.shopCoupons.push(build);
... ...
... ... @@ -4,30 +4,34 @@
{{> content}}
{{/ contentTop}}
</div>
<p class="big-title">全场券</p>
<div class="list-2">
<div class="list-item"></div>
<div class="list-item"></div>
<div class="list-item"></div>
<div class="list-item"></div>
<div class="list-item"></div>
<div class="list-item"></div>
</div>
<a class="get-all">点击一键领取全场券</a>
<div class="big-bg">
<a class="detail-btn"></a>
<p class="big-title first">¥3300 全场券</p>
<p class="s-title">【特例商品不可使用优惠券】</p>
<div class="list-2 get-all"></div>
<a class="get-all get-all-style"></a>
{{#if shopCoupons}}
<p class="big-title">超值品牌券</p>
<p class="big-title">¥700 超值品牌券</p>
<p class="s-title">【特例商品不可使用优惠券】</p>
{{/if}}
<div>
{{# shopCoupons}}
<div class="list-3">
<div class="list-3 clearfix">
{{# coupons}}
<div class="list-item">
<div class="amount" data-couponid="{{couponId}}">
￥{{couponAmount}}
<div class="limit">满￥{{useLimit}}使用</div>
<div class="limit">
{{#if useLimit}}
满￥{{useLimit}}使用
{{else}}
现金券
{{/if}}
</div>
</div>
<a href="//m.yohobuy.com/product/shop?shop_id={{shopsId}}&openby:yohobuy={'action':'go.shop','params':{'shop_template_type':'1','is_red_shop':'1','shop_id':'{{shopsId}}','shop_name':'{{shopName}}'}}">
<a href='//m.yohobuy.com/product/shop?shop_id={{shopsId}}&openby:yohobuy={"action":"go.shop","params":{"shop_template_type":"1","is_red_shop":"1","shop_id":"{{shopsId}}","shop_name":"{{shopName}}"}}'>
<div class="shop">
<div class="logo"{{#if shopLogo}} style="background-image:url({{image2 shopLogo w=105 h=42 q=60}})"{{/if}}></div>
<div class="logo"{{#if shopLogo}} style="background-image:url({{image2 shopLogo w=210 h=84 q=100}})"{{/if}}></div>
<div class="go">进入店铺</div>
</div>
</a>
... ... @@ -35,11 +39,24 @@
{{/ coupons}}
</div>
{{/ shopCoupons}}
</div>
<div class="resource-content">
{{# contentBottom}}
{{> content}}
{{/ contentBottom}}
</div>
</div>
<div class="dia-c dia-bg hide"></div>
<div class="dia-c dia hide"></div>
<div class="dia-c dia hide">
<div class="rule">
<div class="title">活动细则</div>
<p>1. 优惠券领取时间：11.1-11.10；</p>
<p>2. 优惠券使用时间：仅限11.11当天使用（特例商品不可使用优惠券）;</p>
<p>3. 4000元优惠券包括：3300元全场券及700元品牌券；</p>
<p>4. 700元超值品牌券是有货参考您的浏览、购物喜好，为您优选；</p>
<p>5. 领券过程中，如券未及时到账，请耐心等待；</p>
<p>6. 活动最终解释权归YOHO!BUY有货所有。</p>
<a>关闭</a>
</div>
</div>
</div>
\ No newline at end of file
... ...
import 'activity/coupon-list.page.css';
import $ from 'yoho-jquery';
import Page from 'yoho-page';
import 'common/share';
import 'activity/coupon-list/share';
class CouponList extends Page {
constructor() {
... ... @@ -11,7 +11,8 @@ class CouponList extends Page {
$receiveTarget: $('.list-item').find('.amount'),
$diaC: $('.dia-c'),
$dia: $('.dia'),
$getAll: $('.get-all')
$getAll: $('.get-all'),
$detailBtn: $('.detail-btn')
};
this.init();
... ... @@ -25,6 +26,11 @@ class CouponList extends Page {
this.selector.$receiveTarget.on('click', this.receive.bind(this));
this.selector.$getAll.on('click', this.receiveAll.bind(this));
this.selector.$diaC.on('click', this.hideDia.bind(this));
this.selector.$detailBtn.on('click', this.detailBtn.bind(this));
}
detailBtn() {
this.dia(0);
}
hideDia() {
... ...
import share from 'common/share';
share({
title: 'YOHO!BUY有货【11.11】4000元超值券即刻开抢！',
desc: '11.11先抢券，再购物！更超值',
link: location.href,
imgUrl: 'https://cdn.yoho.cn/couponlist/00D3E2B3962F038EB428F2C22166D0EC.jpg'
});
... ...
... ... @@ -29,76 +29,167 @@
margin-top: -183px;
margin-left: -280px;
.rule {
display: none;
padding: 20px 25px;
width: 650px;
height: auto;
background-color: #ff670d;
color: #fff;
border-bottom: solid 6px #ffde00;
.title {
font-size: 34px;
text-align: center;
}
p {
font-size: 19px;
line-height: 30px;
}
a {
width: 99px;
height: 43px;
font-size: 26px;
background-color: #000;
display: block;
color: #fff;
margin: 20px auto 0;
text-align: center;
line-height: 43px;
}
}
&.dia-0 {
margin-left: -325px;
margin-top: -177px;
height: auto;
.rule {
display: block;
}
}
&.dia-1 {
background-image: resolve("activity/coupon-list/dia-1.png");
background-image: resolve("activity/coupon-list/dia-1.jpg");
}
&.dia-2 {
background-image: resolve("activity/coupon-list/dia-2.png");
background-image: resolve("activity/coupon-list/dia-2.jpg");
}
&.dia-3 {
background-image: resolve("activity/coupon-list/dia-3.png");
background-image: resolve("activity/coupon-list/dia-3.jpg");
}
&.dia-4 {
background-image: resolve("activity/coupon-list/dia-4.png");
background-image: resolve("activity/coupon-list/dia-4.jpg");
}
}
.big-title {
font-size: 46px;
color: #f00;
text-align: center;
line-height: 105px;
margin-top: 40px;
.big-bg {
background-image: resolve("activity/coupon-list/big-bg.jpg");
background-size: 100% auto;
background-color: #ffe4ba;
padding-top: 25px;
position: relative;
}
.list-2 {
font-size: 0;
line-height: 0;
padding: 0 21px;
.list-item {
width: 338px;
height: 136px;
background-image: resolve("activity/coupon-list/coupon-2.jpg");
.detail-btn {
width: 161px;
height: 50px;
display: block;
position: absolute;
right: 21px;
top: 33px;
background-image: resolve("activity/coupon-list/detail.jpg");
background-size: 100% 100%;
display: inline-block;
margin-bottom: 22px;
}
&:nth-child(odd) {
margin-right: 32px;
.big-title {
display: block;
width: 336px;
height: 66px;
font-size: 37px;
color: #fff;
text-align: center;
line-height: 66px;
margin: 0 auto;
background-color: #ff3b1b;
border-bottom: solid 4px #ad270f;
&.first {
background-color: #ff561b;
border-color: #ffaf48;
width: 291px;
}
}
.s-title {
height: 47px;
font-size: 14px;
color: #ff3b1b;
text-align: center;
line-height: 37px;
}
.get-all {
width: 290px;
height: 58px;
line-height: 58px;
color: #fff;
background-color: #000;
.list-2 {
width: 708px;
height: 767px;
background-image: resolve("activity/coupon-list/coupons.png");
background-size: 100% 100%;
margin: 0 auto 36px;
}
.get-all-style {
width: 296px;
height: 65px;
display: block;
margin: 0 auto;
text-align: center;
margin-top: 4px;
margin: 0 auto 56px;
background-image: resolve("activity/coupon-list/get-all.png");
background-size: 100% 100%;
}
.list-3 {
font-size: 0;
line-height: 0;
padding: 0 14px;
margin-bottom: 25px;
margin-bottom: 30px;
&:nth-child(1) {
.list-item {
background-image: resolve("activity/coupon-list/type-1.jpg");
}
}
&:nth-child(2) {
.list-item {
background-image: resolve("activity/coupon-list/type-2.jpg");
}
}
&:nth-child(3) {
.list-item {
margin-right: 0;
margin-left: 19px;
background-image: resolve("activity/coupon-list/type-3.jpg");
float: right;
&:nth-child(3n) {
margin-left: 0;
}
}
}
.list-item {
width: 228px;
height: 187px;
background-image: resolve("activity/coupon-list/coupon-3.jpg");
height: 216px;
background-size: 100% 100%;
display: inline-block;
display: block;
margin-bottom: 22px;
margin-right: 19px;
float: left;
&:nth-child(3n) {
margin-right: 0;
... ... @@ -106,10 +197,10 @@
.amount {
width: 187px;
height: 76px;
line-height: 59px;
height: 89px;
line-height: 69px;
color: #fff;
font-size: 50px;
font-size: 51px;
text-align: center;
margin: 14px auto 0;
font-weight: bold;
... ... @@ -124,24 +215,32 @@
.shop {
width: 210px;
height: 42px;
margin: 20px auto 0;
margin: 11px auto 0;
div {
width: 105px;
height: 42px;
float: left;
}
.go {
background-color: #000;
background-color: #ff4107;
color: #fff;
font-size: 20px;
line-height: 42px;
line-height: 65px;
text-align: center;
width: 98px;
height: 65px;
border-bottom: solid 4px #bd4701;
margin-left: 7px;
}
.logo {
background-size: 100% 100%;
width: 103px;
height: 65px;
border-bottom: solid 4px #bd4701;
background-size: 100% auto;
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;
}
}
}
... ...