Authored by htoooth

add css

  1 +/**
  2 + * Created by TaoHuang on 2016/11/30.
  3 + */
  4 +
  5 +'use strict';
  6 +
  7 +const api = require('./detail-product-api');
  8 +
  9 +const type = {
  10 + package: 'package', // 套餐
  11 + bundle: 'bundle' // 量贩
  12 +};
  13 +
  14 +
  15 +const _getBundle = (data) => {
  16 +
  17 +};
  18 +
  19 +const getPackage = (data) => {
  20 +
  21 +};
  22 +
  23 +
  24 +module.exports = {
  25 +}
@@ -166,11 +166,17 @@ const _getVipDataByProductBaseInfo = (data, vipLevel, uid) => { @@ -166,11 +166,17 @@ const _getVipDataByProductBaseInfo = (data, vipLevel, uid) => {
166 vipData.normalUser = isNormalUser(); 166 vipData.normalUser = isNormalUser();
167 167
168 if (isVipUser()) { 168 if (isVipUser()) {
169 - vipData.prices = data.vip.map(value => ({  
170 - price: value.price,  
171 - name: value.caption,  
172 - cur: detailHelper.vipLevel(value.caption + '会员') === vipLevel  
173 - })); 169 + vipData.prices = {};
  170 + _.some(data.vip, (vip) => {
  171 + if (detailHelper.vipLevel(vip.caption + '会员') === vipLevel) {
  172 + vipData.prices = {
  173 + price: vip.price,
  174 + name: vip.caption,
  175 + vipLevel: vipLevel
  176 + };
  177 + return true;
  178 + }
  179 + });
174 } 180 }
175 181
176 vipData.vipSchedualUrl = helpers.urlFormat('/home/vip', { 182 vipData.vipSchedualUrl = helpers.urlFormat('/home/vip', {
@@ -194,13 +200,8 @@ const _getProductActivityBanner = (additionalData) => { @@ -194,13 +200,8 @@ const _getProductActivityBanner = (additionalData) => {
194 }; 200 };
195 }; 201 };
196 202
197 -const _getActivityDataByProductBaseInfo = (data, additionalData) => { 203 +const _getActivityDataByProductBaseInfo = (data) => {
198 let result = []; 204 let result = [];
199 - let activityBanner = _getProductActivityBanner(additionalData);  
200 -  
201 - if (!_.isEmpty(activityBanner)) {  
202 - result.push(activityBanner);  
203 - }  
204 205
205 _.get(data, 'data', []).forEach(value => { 206 _.get(data, 'data', []).forEach(value => {
206 result.push({ 207 result.push({
@@ -291,6 +292,8 @@ const _getSkuDataByProductBaseInfo = (data) => { @@ -291,6 +292,8 @@ const _getSkuDataByProductBaseInfo = (data) => {
291 return acc; 292 return acc;
292 } 293 }
293 294
  295 + console.log(cur);
  296 +
294 if (cur.images_list) { 297 if (cur.images_list) {
295 // 商品列表 298 // 商品列表
296 goodsGroup.productSkc = cur.product_skc; 299 goodsGroup.productSkc = cur.product_skc;
@@ -1174,7 +1177,7 @@ const _detailDataPkg = (origin, uid, vipLevel, cookies) => { @@ -1174,7 +1177,7 @@ const _detailDataPkg = (origin, uid, vipLevel, cookies) => {
1174 1177
1175 // 促销活动banner,虚拟商品无促销 1178 // 促销活动banner,虚拟商品无促销
1176 if (propOrigin('attribute') !== 3) { 1179 if (propOrigin('attribute') !== 3) {
1177 - result.activity = _getActivityDataByProductBaseInfo(promotionData, additionalData); 1180 + result.activity = _getActivityDataByProductBaseInfo(promotionData);
1178 } 1181 }
1179 1182
1180 // 优惠券 1183 // 优惠券
1 {{#if activity}} 1 {{#if activity}}
2 <ul class="activity"> 2 <ul class="activity">
  3 +
  4 + {{#if_cond activity.length '>=' 3}}
  5 + <div class="activity-title">展开全部促销</div>
  6 + <div class="activity-container"></div>
  7 + {{/if_cond}}
  8 +
3 {{#each activity}} 9 {{#each activity}}
4 - <li> 10 + <li class="activity-item {{#if_cond @index '>=' 3}}hide{{/if_cond}}">
5 {{#if activityImg}} 11 {{#if activityImg}}
6 <a class="img-link" href="{{url}}"> 12 <a class="img-link" href="{{url}}">
7 <img src="{{activityImg}}"> 13 <img src="{{activityImg}}">
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 {{#each colors}} 4 {{#each colors}}
5 <li class="{{#if focus}}focus{{/if}} {{#if disable}}disable{{/if}} pull-left" 5 <li class="{{#if focus}}focus{{/if}} {{#if disable}}disable{{/if}} pull-left"
6 title="{{title}}" data-color="{{name}}" data-total="{{total}}"> 6 title="{{title}}" data-color="{{name}}" data-total="{{total}}">
7 - <img src="{{src}}"> 7 + <img src="{{src}}"><span class="color-name">{{name}}</span>
8 </li> 8 </li>
9 {{/each}} 9 {{/each}}
10 </ul> 10 </ul>
  1 +<span class="minus-plus pull-left">
  2 + <i id="minus-num" class="minus dis iconfont">&#xe60b;</i>
  3 +</span>
1 <span id="num" class="num pull-left">1</span> 4 <span id="num" class="num pull-left">1</span>
2 <span class="minus-plus pull-left"> 5 <span class="minus-plus pull-left">
3 - <i id="plus-num" class="plus iconfont">&#xe607;</i>  
4 - <i id="minus-num" class="minus dis iconfont">&#xe60b;</i> 6 + <i id="plus-num" class="plus iconfont">&#xe607;</i>
5 </span> 7 </span>
@@ -27,28 +27,28 @@ @@ -27,28 +27,28 @@
27 27
28 {{# vipPrice}} 28 {{# vipPrice}}
29 <span class="vip-price"> 29 <span class="vip-price">
30 - {{#if unLogin}}  
31 - 登录后即可查看vip价格  
32 - <a class="login-url" href="{{unLogin}}">立即登录</a>  
33 - {{/if}} 30 + {{#if unLogin}}
  31 + 登录后即可查看vip价格
  32 + <a class="login-url" href="{{unLogin}}">立即登录</a>
  33 + {{/if}}
34 34
35 {{#if normalUser}} 35 {{#if normalUser}}
36 <span class="vip-price-item">您当前是普通会员,成为VIP享受更多优惠!</span> 36 <span class="vip-price-item">您当前是普通会员,成为VIP享受更多优惠!</span>
  37 + <a class="vip-schedual" href="{{vipSchedualUrl}}">查看我的VIP进度</a>
37 {{/if}} 38 {{/if}}
38 39
  40 + <div class="vip-level-1"></div>
  41 +
39 {{# prices}} 42 {{# prices}}
40 - <span class="vip-price-item{{#if cur}} cur{{/if}}">  
41 - {{name}}  
42 - <em>  
43 - {{price}}  
44 - </em>  
45 - </span> 43 + <span class="vip-level-{{vipLevel}}">
  44 + </span>
  45 + <em class="cur">
  46 + {{price}}
  47 + </em>
  48 +
46 {{/ prices}} 49 {{/ prices}}
47 50
48 - {{#unless unLogin}}  
49 - <a class="vip-schedual" href="{{vipSchedualUrl}}">查看我的VIP进度</a>  
50 - {{/unless}}  
51 - </span> 51 + </span>
52 {{/ vipPrice}} 52 {{/ vipPrice}}
53 53
54 {{#if presalePrice}} 54 {{#if presalePrice}}
1 1
2 <div class="chose-size row clearfix"> 2 <div class="chose-size row clearfix">
3 - <span class="title pull-left">  
4 -&nbsp;&nbsp;码:  
5 - </span> 3 + <span class="title pull-left">&nbsp;&nbsp;码: </span>
6 4
7 <div id="sizes" class="size-wrapper pull-left"> 5 <div id="sizes" class="size-wrapper pull-left">
8 {{#each colors}} 6 {{#each colors}}
9 <ul class="size{{#unless focus}} hide{{/unless}}"> 7 <ul class="size{{#unless focus}} hide{{/unless}}">
10 {{#each size}} 8 {{#each size}}
11 <li {{#unless num}}class="disable"{{/unless}} data-sku="{{sku}}" 9 <li {{#unless num}}class="disable"{{/unless}} data-sku="{{sku}}"
12 - data-num="{{num}}" data-name="{{name}}">{{name}}</li> 10 + data-num="{{num}}" data-name="{{name}}" data-title="{{title}}">{{name}}</li>
13 {{/each}} 11 {{/each}}
14 12
15 {{#unless virtualGoods}} 13 {{#unless virtualGoods}}
16 <span class="size-ruler"></span> 14 <span class="size-ruler"></span>
17 {{/unless}} 15 {{/unless}}
18 16
19 - <span class="size-warn warn-tip hide">  
20 - <i class="iconfont">&#xe61f;</i>  
21 - 请选择尺码  
22 - </span> 17 + <span class="size-warn warn-tip hide"> <i class="iconfont">&#xe61f;</i> 请选择尺码 </span>
23 </ul> 18 </ul>
24 {{/each}} 19 {{/each}}
25 20
@@ -221,6 +221,7 @@ @@ -221,6 +221,7 @@
221 .login-url, 221 .login-url,
222 .cur { 222 .cur {
223 color: #f02200; 223 color: #f02200;
  224 + font-weight: bold;
224 } 225 }
225 226
226 .vip-price-item { 227 .vip-price-item {
@@ -232,6 +233,38 @@ @@ -232,6 +233,38 @@
232 text-decoration: underline; 233 text-decoration: underline;
233 margin-left: 5px; 234 margin-left: 5px;
234 } 235 }
  236 +
  237 + //普通会员
  238 + .vip-level-0 {
  239 + display: inline-block;
  240 + width: 22px;
  241 + height: 22px;
  242 + background-color: red;
  243 + }
  244 +
  245 + // 银卡会员
  246 + .vip-level-1 {
  247 + display: inline-block;
  248 + width: 22px;
  249 + height: 22px;
  250 + background-color: red;
  251 + }
  252 +
  253 + // 金卡会员
  254 + .vip-level-2 {
  255 + display: inline-block;
  256 + width: 22px;
  257 + height: 22px;
  258 + background-color: red;
  259 + }
  260 +
  261 + // 白金会员
  262 + .vip-level-3 {
  263 + display: inline-block;
  264 + width: 22px;
  265 + height: 22px;
  266 + background-color: red;
  267 + }
235 } 268 }
236 269
237 .students-price { 270 .students-price {
@@ -258,10 +291,24 @@ @@ -258,10 +291,24 @@
258 291
259 .activity { 292 .activity {
260 margin-top: 12px; 293 margin-top: 12px;
  294 + position: relative;
  295 + width: 100%;
261 296
262 li { 297 li {
263 line-height: 20px; 298 line-height: 20px;
264 } 299 }
  300 +
  301 + .activity-title {
  302 + height: 22px;
  303 + position: absolute;
  304 + right: 0;
  305 + top: 0;
  306 + background-color: red;
  307 + }
  308 +
  309 + .activity-container {
  310 + position: absolute;
  311 + }
265 } 312 }
266 313
267 .small-coupon-list { 314 .small-coupon-list {
@@ -347,6 +394,8 @@ @@ -347,6 +394,8 @@
347 394
348 .row { 395 .row {
349 margin-top: 10px; 396 margin-top: 10px;
  397 +
  398 + border-bottom: 1px solid #eaeceb;
350 } 399 }
351 400
352 .trade-content { 401 .trade-content {
@@ -363,20 +412,26 @@ @@ -363,20 +412,26 @@
363 } 412 }
364 413
365 img { 414 img {
366 - display: block;  
367 - height: 36px;  
368 - width: 36px;  
369 - border: 2px solid #fff;  
370 - }  
371 -  
372 - .focus img {  
373 - border-color: #222; 415 + float: left;
  416 + display: inline-block;
  417 + height: 34px;
  418 + width: 34px;
374 } 419 }
375 420
376 li { 421 li {
377 margin-right: 5px; 422 margin-right: 5px;
378 - margin-bottom: 5px;  
379 cursor: pointer; 423 cursor: pointer;
  424 + border: 2px solid black;
  425 + height: 34px;
  426 + }
  427 +
  428 + .color-name {
  429 + float:left;
  430 + height: 34px;
  431 + line-height: 34px;
  432 + text-align: center;
  433 + margin-left: 5px;
  434 + margin-right: 5px;
380 } 435 }
381 } 436 }
382 437
@@ -391,8 +446,8 @@ @@ -391,8 +446,8 @@
391 li { 446 li {
392 float: left; 447 float: left;
393 display: block; 448 display: block;
394 - height: 22px;  
395 - line-height: 22px; 449 + height: 24px;
  450 + line-height: 24px;
396 margin-right: 5px; 451 margin-right: 5px;
397 margin-bottom: 5px; 452 margin-bottom: 5px;
398 padding: 0 5px; 453 padding: 0 5px;
@@ -450,32 +505,34 @@ @@ -450,32 +505,34 @@
450 505
451 .num { 506 .num {
452 display: block; 507 display: block;
453 - width: 38px;  
454 - height: 23px;  
455 - line-height: 23px; 508 + width: 50px;
  509 + height: 25px;
  510 + line-height: 25px;
456 text-align: center; 511 text-align: center;
457 - border: 1px solid #eaeceb;  
458 - color: #333; 512 + border: 1px solid black;
  513 + color: black;
459 font-size: 12px; 514 font-size: 12px;
460 - background: #ebebe4; 515 + margin-left: 5px;
  516 + margin-right: 5px;
461 } 517 }
462 518
463 .minus-plus { 519 .minus-plus {
464 display: block; 520 display: block;
465 - width: 14px;  
466 - height: 23px;  
467 - border: 1px solid #eaeceb;  
468 - border-left: none; 521 + width: 25px;
  522 + height: 25px;
  523 + border: 1px solid #b0b0b0;
469 text-align: center; 524 text-align: center;
470 cursor: pointer; 525 cursor: pointer;
  526 + background-color: #e0e0e0;
471 527
472 i { 528 i {
473 display: block; 529 display: block;
474 - width: 13px;  
475 - height: 11px; 530 + width: 25px;
  531 + height: 25px;
476 line-height: 8px; 532 line-height: 8px;
477 font-size: 12px; 533 font-size: 12px;
478 -moz-user-select: none; 534 -moz-user-select: none;
  535 + color: black;
479 } 536 }
480 537
481 .dis { 538 .dis {
@@ -513,6 +570,7 @@ @@ -513,6 +570,7 @@
513 570
514 .num-wraper { 571 .num-wraper {
515 position: relative; 572 position: relative;
  573 + border-bottom: 1px solid #eaeceb;
516 } 574 }
517 575
518 $arrowTop: 40px; 576 $arrowTop: 40px;