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 215 additions and 84 deletions
@@ -9,9 +9,9 @@ exports.index = (req, res, next) => { @@ -9,9 +9,9 @@ exports.index = (req, res, next) => {
9 module: 'activity', 9 module: 'activity',
10 page: 'coupon-list', 10 page: 'coupon-list',
11 pageHeader: headerModel.setNav({ 11 pageHeader: headerModel.setNav({
12 - navTitle: '领券中心' 12 + navTitle: '11.11 4000元优惠券 限量抢'
13 }), 13 }),
14 - title: '领券中心 | Yoho!Buy有货 | 潮流购物逛不停', 14 + title: '11.11 4000元优惠券 限量抢',
15 width750: true, 15 width750: true,
16 localCss: true 16 localCss: true
17 }; 17 };
@@ -112,6 +112,7 @@ class CouponList extends global.yoho.BaseModel { @@ -112,6 +112,7 @@ class CouponList extends global.yoho.BaseModel {
112 }; 112 };
113 113
114 _.forEach(value.personalityShopCouponBos, (item) => { 114 _.forEach(value.personalityShopCouponBos, (item) => {
  115 + item.useLimit = parseInt(item.useLimit, 10);
115 build.coupons.push(item); 116 build.coupons.push(item);
116 }); 117 });
117 resu.shopCoupons.push(build); 118 resu.shopCoupons.push(build);
@@ -4,42 +4,59 @@ @@ -4,42 +4,59 @@
4 {{> content}} 4 {{> content}}
5 {{/ contentTop}} 5 {{/ contentTop}}
6 </div> 6 </div>
7 - <p class="big-title">全场券</p>  
8 - <div class="list-2">  
9 - <div class="list-item"></div>  
10 - <div class="list-item"></div>  
11 - <div class="list-item"></div>  
12 - <div class="list-item"></div>  
13 - <div class="list-item"></div>  
14 - <div class="list-item"></div>  
15 - </div>  
16 - <a class="get-all">点击一键领取全场券</a>  
17 - {{#if shopCoupons}}  
18 - <p class="big-title">超值品牌券</p>  
19 - {{/if}}  
20 - {{# shopCoupons}}  
21 - <div class="list-3">  
22 - {{# coupons}}  
23 - <div class="list-item">  
24 - <div class="amount" data-couponid="{{couponId}}">  
25 - ￥{{couponAmount}}  
26 - <div class="limit">满￥{{useLimit}}使用</div>  
27 - </div>  
28 - <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}}'}}">  
29 - <div class="shop">  
30 - <div class="logo"{{#if shopLogo}} style="background-image:url({{image2 shopLogo w=105 h=42 q=60}})"{{/if}}></div>  
31 - <div class="go">进入店铺</div> 7 + <div class="big-bg">
  8 + <a class="detail-btn"></a>
  9 + <p class="big-title first">¥3300 全场券</p>
  10 + <p class="s-title">【特例商品不可使用优惠券】</p>
  11 + <div class="list-2 get-all"></div>
  12 + <a class="get-all get-all-style"></a>
  13 + {{#if shopCoupons}}
  14 + <p class="big-title">¥700 超值品牌券</p>
  15 + <p class="s-title">【特例商品不可使用优惠券】</p>
  16 + {{/if}}
  17 + <div>
  18 + {{# shopCoupons}}
  19 + <div class="list-3 clearfix">
  20 + {{# coupons}}
  21 + <div class="list-item">
  22 + <div class="amount" data-couponid="{{couponId}}">
  23 + ￥{{couponAmount}}
  24 + <div class="limit">
  25 + {{#if useLimit}}
  26 + 满￥{{useLimit}}使用
  27 + {{else}}
  28 + 现金券
  29 + {{/if}}
  30 + </div>
  31 + </div>
  32 + <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}}"}}'>
  33 + <div class="shop">
  34 + <div class="logo"{{#if shopLogo}} style="background-image:url({{image2 shopLogo w=210 h=84 q=100}})"{{/if}}></div>
  35 + <div class="go">进入店铺</div>
  36 + </div>
  37 + </a>
32 </div> 38 </div>
33 - </a> 39 + {{/ coupons}}
  40 + </div>
  41 + {{/ shopCoupons}}
  42 + </div>
  43 + <div class="resource-content">
  44 + {{# contentBottom}}
  45 + {{> content}}
  46 + {{/ contentBottom}}
34 </div> 47 </div>
35 - {{/ coupons}}  
36 - </div>  
37 - {{/ shopCoupons}}  
38 - <div class="resource-content">  
39 - {{# contentBottom}}  
40 - {{> content}}  
41 - {{/ contentBottom}}  
42 </div> 48 </div>
43 <div class="dia-c dia-bg hide"></div> 49 <div class="dia-c dia-bg hide"></div>
44 - <div class="dia-c dia hide"></div> 50 + <div class="dia-c dia hide">
  51 + <div class="rule">
  52 + <div class="title">活动细则</div>
  53 + <p>1. 优惠券领取时间：11.1-11.10；</p>
  54 + <p>2. 优惠券使用时间：仅限11.11当天使用（特例商品不可使用优惠券）;</p>
  55 + <p>3. 4000元优惠券包括：3300元全场券及700元品牌券；</p>
  56 + <p>4. 700元超值品牌券是有货参考您的浏览、购物喜好，为您优选；</p>
  57 + <p>5. 领券过程中，如券未及时到账，请耐心等待；</p>
  58 + <p>6. 活动最终解释权归YOHO!BUY有货所有。</p>
  59 + <a>关闭</a>
  60 + </div>
  61 + </div>
45 </div> 62 </div>
1 import 'activity/coupon-list.page.css'; 1 import 'activity/coupon-list.page.css';
2 import $ from 'yoho-jquery'; 2 import $ from 'yoho-jquery';
3 import Page from 'yoho-page'; 3 import Page from 'yoho-page';
4 -import 'common/share'; 4 +import 'activity/coupon-list/share';
5 5
6 class CouponList extends Page { 6 class CouponList extends Page {
7 constructor() { 7 constructor() {
@@ -11,7 +11,8 @@ class CouponList extends Page { @@ -11,7 +11,8 @@ class CouponList extends Page {
11 $receiveTarget: $('.list-item').find('.amount'), 11 $receiveTarget: $('.list-item').find('.amount'),
12 $diaC: $('.dia-c'), 12 $diaC: $('.dia-c'),
13 $dia: $('.dia'), 13 $dia: $('.dia'),
14 - $getAll: $('.get-all') 14 + $getAll: $('.get-all'),
  15 + $detailBtn: $('.detail-btn')
15 }; 16 };
16 17
17 this.init(); 18 this.init();
@@ -25,6 +26,11 @@ class CouponList extends Page { @@ -25,6 +26,11 @@ class CouponList extends Page {
25 this.selector.$receiveTarget.on('click', this.receive.bind(this)); 26 this.selector.$receiveTarget.on('click', this.receive.bind(this));
26 this.selector.$getAll.on('click', this.receiveAll.bind(this)); 27 this.selector.$getAll.on('click', this.receiveAll.bind(this));
27 this.selector.$diaC.on('click', this.hideDia.bind(this)); 28 this.selector.$diaC.on('click', this.hideDia.bind(this));
  29 + this.selector.$detailBtn.on('click', this.detailBtn.bind(this));
  30 + }
  31 +
  32 + detailBtn() {
  33 + this.dia(0);
28 } 34 }
29 35
30 hideDia() { 36 hideDia() {
  1 +import share from 'common/share';
  2 +
  3 +share({
  4 + title: 'YOHO!BUY有货【11.11】4000元超值券即刻开抢！',
  5 + desc: '11.11先抢券，再购物！更超值',
  6 + link: location.href,
  7 + imgUrl: 'https://cdn.yoho.cn/couponlist/00D3E2B3962F038EB428F2C22166D0EC.jpg'
  8 +});
@@ -29,76 +29,167 @@ @@ -29,76 +29,167 @@
29 margin-top: -183px; 29 margin-top: -183px;
30 margin-left: -280px; 30 margin-left: -280px;
31 31
  32 + .rule {
  33 + display: none;
  34 + padding: 20px 25px;
  35 + width: 650px;
  36 + height: auto;
  37 + background-color: #ff670d;
  38 + color: #fff;
  39 + border-bottom: solid 6px #ffde00;
  40 +
  41 + .title {
  42 + font-size: 34px;
  43 + text-align: center;
  44 + }
  45 +
  46 + p {
  47 + font-size: 19px;
  48 + line-height: 30px;
  49 + }
  50 +
  51 + a {
  52 + width: 99px;
  53 + height: 43px;
  54 + font-size: 26px;
  55 + background-color: #000;
  56 + display: block;
  57 + color: #fff;
  58 + margin: 20px auto 0;
  59 + text-align: center;
  60 + line-height: 43px;
  61 + }
  62 + }
  63 +
  64 + &.dia-0 {
  65 + margin-left: -325px;
  66 + margin-top: -177px;
  67 + height: auto;
  68 +
  69 + .rule {
  70 + display: block;
  71 + }
  72 + }
  73 +
32 &.dia-1 { 74 &.dia-1 {
33 - background-image: resolve("activity/coupon-list/dia-1.png"); 75 + background-image: resolve("activity/coupon-list/dia-1.jpg");
34 } 76 }
35 77
36 &.dia-2 { 78 &.dia-2 {
37 - background-image: resolve("activity/coupon-list/dia-2.png"); 79 + background-image: resolve("activity/coupon-list/dia-2.jpg");
38 } 80 }
39 81
40 &.dia-3 { 82 &.dia-3 {
41 - background-image: resolve("activity/coupon-list/dia-3.png"); 83 + background-image: resolve("activity/coupon-list/dia-3.jpg");
42 } 84 }
43 85
44 &.dia-4 { 86 &.dia-4 {
45 - background-image: resolve("activity/coupon-list/dia-4.png"); 87 + background-image: resolve("activity/coupon-list/dia-4.jpg");
46 } 88 }
47 } 89 }
48 90
49 - .big-title {  
50 - font-size: 46px;  
51 - color: #f00;  
52 - text-align: center;  
53 - line-height: 105px;  
54 - margin-top: 40px; 91 + .big-bg {
  92 + background-image: resolve("activity/coupon-list/big-bg.jpg");
  93 + background-size: 100% auto;
  94 + background-color: #ffe4ba;
  95 + padding-top: 25px;
  96 + position: relative;
55 } 97 }
56 98
57 - .list-2 {  
58 - font-size: 0;  
59 - line-height: 0;  
60 - padding: 0 21px; 99 + .detail-btn {
  100 + width: 161px;
  101 + height: 50px;
  102 + display: block;
  103 + position: absolute;
  104 + right: 21px;
  105 + top: 33px;
  106 + background-image: resolve("activity/coupon-list/detail.jpg");
  107 + background-size: 100% 100%;
  108 + }
61 109
62 - .list-item {  
63 - width: 338px;  
64 - height: 136px;  
65 - background-image: resolve("activity/coupon-list/coupon-2.jpg");  
66 - background-size: 100% 100%;  
67 - display: inline-block;  
68 - margin-bottom: 22px; 110 + .big-title {
  111 + display: block;
  112 + width: 336px;
  113 + height: 66px;
  114 + font-size: 37px;
  115 + color: #fff;
  116 + text-align: center;
  117 + line-height: 66px;
  118 + margin: 0 auto;
  119 + background-color: #ff3b1b;
  120 + border-bottom: solid 4px #ad270f;
69 121
70 - &:nth-child(odd) {  
71 - margin-right: 32px;  
72 - } 122 + &.first {
  123 + background-color: #ff561b;
  124 + border-color: #ffaf48;
  125 + width: 291px;
73 } 126 }
74 } 127 }
75 128
76 - .get-all {  
77 - width: 290px;  
78 - height: 58px;  
79 - line-height: 58px;  
80 - color: #fff;  
81 - background-color: #000;  
82 - display: block;  
83 - margin: 0 auto; 129 + .s-title {
  130 + height: 47px;
  131 + font-size: 14px;
  132 + color: #ff3b1b;
84 text-align: center; 133 text-align: center;
85 - margin-top: 4px; 134 + line-height: 37px;
  135 + }
  136 +
  137 + .list-2 {
  138 + width: 708px;
  139 + height: 767px;
  140 + background-image: resolve("activity/coupon-list/coupons.png");
  141 + background-size: 100% 100%;
  142 + margin: 0 auto 36px;
  143 + }
  144 +
  145 + .get-all-style {
  146 + width: 296px;
  147 + height: 65px;
  148 + display: block;
  149 + margin: 0 auto 56px;
  150 + background-image: resolve("activity/coupon-list/get-all.png");
  151 + background-size: 100% 100%;
86 } 152 }
87 153
88 .list-3 { 154 .list-3 {
89 font-size: 0; 155 font-size: 0;
90 line-height: 0; 156 line-height: 0;
91 padding: 0 14px; 157 padding: 0 14px;
92 - margin-bottom: 25px; 158 + margin-bottom: 30px;
  159 +
  160 + &:nth-child(1) {
  161 + .list-item {
  162 + background-image: resolve("activity/coupon-list/type-1.jpg");
  163 + }
  164 + }
  165 +
  166 + &:nth-child(2) {
  167 + .list-item {
  168 + background-image: resolve("activity/coupon-list/type-2.jpg");
  169 + }
  170 + }
  171 +
  172 + &:nth-child(3) {
  173 + .list-item {
  174 + margin-right: 0;
  175 + margin-left: 19px;
  176 + background-image: resolve("activity/coupon-list/type-3.jpg");
  177 + float: right;
  178 +
  179 + &:nth-child(3n) {
  180 + margin-left: 0;
  181 + }
  182 + }
  183 + }
93 184
94 .list-item { 185 .list-item {
95 width: 228px; 186 width: 228px;
96 - height: 187px;  
97 - background-image: resolve("activity/coupon-list/coupon-3.jpg"); 187 + height: 216px;
98 background-size: 100% 100%; 188 background-size: 100% 100%;
99 - display: inline-block; 189 + display: block;
100 margin-bottom: 22px; 190 margin-bottom: 22px;
101 margin-right: 19px; 191 margin-right: 19px;
  192 + float: left;
102 193
103 &:nth-child(3n) { 194 &:nth-child(3n) {
104 margin-right: 0; 195 margin-right: 0;
@@ -106,10 +197,10 @@ @@ -106,10 +197,10 @@
106 197
107 .amount { 198 .amount {
108 width: 187px; 199 width: 187px;
109 - height: 76px;  
110 - line-height: 59px; 200 + height: 89px;
  201 + line-height: 69px;
111 color: #fff; 202 color: #fff;
112 - font-size: 50px; 203 + font-size: 51px;
113 text-align: center; 204 text-align: center;
114 margin: 14px auto 0; 205 margin: 14px auto 0;
115 font-weight: bold; 206 font-weight: bold;
@@ -124,24 +215,32 @@ @@ -124,24 +215,32 @@
124 .shop { 215 .shop {
125 width: 210px; 216 width: 210px;
126 height: 42px; 217 height: 42px;
127 - margin: 20px auto 0; 218 + margin: 11px auto 0;
128 219
129 div { 220 div {
130 - width: 105px;  
131 - height: 42px;  
132 float: left; 221 float: left;
133 } 222 }
134 223
135 .go { 224 .go {
136 - background-color: #000; 225 + background-color: #ff4107;
137 color: #fff; 226 color: #fff;
138 font-size: 20px; 227 font-size: 20px;
139 - line-height: 42px; 228 + line-height: 65px;
140 text-align: center; 229 text-align: center;
  230 + width: 98px;
  231 + height: 65px;
  232 + border-bottom: solid 4px #bd4701;
  233 + margin-left: 7px;
141 } 234 }
142 235
143 .logo { 236 .logo {
144 - background-size: 100% 100%; 237 + width: 103px;
  238 + height: 65px;
  239 + border-bottom: solid 4px #bd4701;
  240 + background-size: 100% auto;
  241 + background-position: center center;
  242 + background-repeat: no-repeat;
  243 + background-color: #fff;
145 } 244 }
146 } 245 }
147 } 246 }