fe / yohobuywap-node · Commits

Go to a project

Authored by 毕凯
Commit 83daf70accdbd08ee0f824a544699cce5fb3406b 2 parents 1b79a9ca 59993907

Merge branch 'feature/guangDetail' into 'release/6.1' 

Feature/guang detail



See merge request !884
Inline Side-by-side
Showing 5 changed files with 132 additions and 27 deletions
@@ -113,9 +113,8 @@ @@ -113,9 +113,8 @@
113 <span class="iconfont">&#xe604;</span> 113 <span class="iconfont">&#xe604;</span>
114 </a> 114 </a>
115 {{/if}} 115 {{/if}}
116 -  
117 {{#if relatedReco}} 116 {{#if relatedReco}}
118 - <div class="post-block related-reco clearfix"> 117 + <div class="post-block related-reco clearfix{{#if relatedReco.changeDisplayType}} change-display{{/if}}">
119 <div class="related-reco-block related-reco-hide"> 118 <div class="related-reco-block related-reco-hide">
120 {{#each relatedReco.goods}} 119 {{#each relatedReco.goods}}
121 {{> detail/related-reco isApp=../relatedReco/isApp}} 120 {{> detail/related-reco isApp=../relatedReco/isApp}}
@@ -123,7 +122,7 @@ @@ -123,7 +122,7 @@
123 </div> 122 </div>
124 {{#if relatedReco.moreNum}} 123 {{#if relatedReco.moreNum}}
125 <div class="related-reco-more"> 124 <div class="related-reco-more">
126 - <span>展开剩余{{relatedReco.moreNum}}个商品</span> 125 + 展开剩余{{relatedReco.moreNum}}个商品<span class="iconfont">&#xe609;</span>
127 </div> 126 </div>
128 {{/if}} 127 {{/if}}
129 </div> 128 </div>
@@ -18,6 +18,8 @@ @@ -18,6 +18,8 @@
18 <span class="iconfont plus">&#xe624;</span> 18 <span class="iconfont plus">&#xe624;</span>
19 </span> 19 </span>
20 </p> 20 </p>
  21 + {{else}}
  22 + <a class="go-detail" href="{{url}}">查看详情&nbsp;<span class="iconfont">&#xe604;</span></a>
21 {{/unlessor}} 23 {{/unlessor}}
22 </div> 24 </div>
23 </div> 25 </div>
@@ -125,6 +125,7 @@ $relatedRecoMore.on('touchstart', function(e) { @@ -125,6 +125,7 @@ $relatedRecoMore.on('touchstart', function(e) {
125 } else { 125 } else {
126 $relatedRecoBlock.addClass('related-reco-hide'); 126 $relatedRecoBlock.addClass('related-reco-hide');
127 } 127 }
  128 + return false;
128 }); 129 });
129 130
130 // 微信导航 131 // 微信导航
@@ -340,8 +340,9 @@ $focus-size: 42px; @@ -340,8 +340,9 @@ $focus-size: 42px;
340 background: #fff; 340 background: #fff;
341 341
342 .one-good { 342 .one-good {
343 - padding: 20px 0;  
344 - border-top: 1px solid #e0e0e0; 343 + background-color: #f0f0f0;
  344 + margin-bottom: 10px;
  345 + border: solid 1px #e0e0e0;
345 346
346 .thumb { 347 .thumb {
347 float: left; 348 float: left;
@@ -352,17 +353,13 @@ $focus-size: 42px; @@ -352,17 +353,13 @@ $focus-size: 42px;
352 } 353 }
353 354
354 .content-container { 355 .content-container {
355 - width: 398px; 356 + width: 404px;
356 float: left; 357 float: left;
357 font-size: 22px; 358 font-size: 22px;
358 margin-left: 20px; 359 margin-left: 20px;
359 -  
360 - .reco-name {  
361 - margin-top: 35px;  
362 - overflow: hidden;  
363 - text-overflow: ellipsis;  
364 - white-space: nowrap;  
365 - } 360 + padding-right: 30px;
  361 + height: 206px;
  362 + position: relative;
366 363
367 span { 364 span {
368 display: inline-block; 365 display: inline-block;
@@ -370,12 +367,41 @@ $focus-size: 42px; @@ -370,12 +367,41 @@ $focus-size: 42px;
370 } 367 }
371 368
372 .price { 369 .price {
373 - line-height: 65px; 370 + line-height: 53px;
  371 + }
  372 +
  373 + .go-detail {
  374 + color: #444;
  375 + position: absolute;
  376 + bottom: 20px;
  377 + right: 30px;
  378 + }
  379 +
  380 + .iconfont {
  381 + font-size: 12px;
  382 + }
  383 + }
  384 +
  385 + .reco-name {
  386 + margin-top: 35px;
  387 + overflow: hidden;
  388 + text-overflow: ellipsis;
  389 + white-space: normal;
  390 + height: 60px;
  391 +
  392 + span {
  393 + line-height: 30px;
  394 + height: 60px;
  395 + overflow: hidden;
  396 + text-overflow: ellipsis;
  397 + display: -webkit-box;
  398 + -webkit-line-clamp: 2;
  399 + -webkit-box-orient: vertical;
374 } 400 }
375 } 401 }
376 402
377 .sale-price { 403 .sale-price {
378 - color: #d62927; 404 + color: #d0021b;
379 line-height: 1.5; 405 line-height: 1.5;
380 } 406 }
381 407
@@ -391,12 +417,20 @@ $focus-size: 42px; @@ -391,12 +417,20 @@ $focus-size: 42px;
391 } 417 }
392 418
393 .check-detail { 419 .check-detail {
394 - display: inline-block;  
395 - background-color: #f0f0f0;  
396 - color: #444; 420 + display: block;
  421 + background-color: #444;
  422 + color: #fff;
397 border-radius: 20px; 423 border-radius: 20px;
  424 + height: 40px !important;
  425 + line-height: 40px !important;
  426 + text-align: center;
398 float: right; 427 float: right;
399 - padding: 10px 20px; 428 + width: 70px;
  429 + font-size: 28px;
  430 +
  431 + span {
  432 + vertical-align: middle;
  433 + }
400 } 434 }
401 435
402 .check-detail > .plus { 436 .check-detail > .plus {
@@ -406,7 +440,7 @@ $focus-size: 42px; @@ -406,7 +440,7 @@ $focus-size: 42px;
406 } 440 }
407 441
408 .related-reco-hide { 442 .related-reco-hide {
409 - max-height: 490px; 443 + max-height: 430px;
410 overflow: hidden; 444 overflow: hidden;
411 } 445 }
412 446
@@ -415,16 +449,16 @@ $focus-size: 42px; @@ -415,16 +449,16 @@ $focus-size: 42px;
415 } 449 }
416 450
417 .related-reco > .related-reco-more { 451 .related-reco > .related-reco-more {
418 - width: 230px; 452 + display: block;
  453 + width: 250px;
419 height: 40px; 454 height: 40px;
420 - margin-bottom: 50px; 455 + line-height: 40px;
  456 + margin: 20px auto 50px;
421 text-align: center; 457 text-align: center;
422 font-size: 22px; 458 font-size: 22px;
423 color: #fff; 459 color: #fff;
424 - margin-left: auto;  
425 - margin-right: auto;  
426 - background-color: #444;  
427 - padding: 6px 20px; 460 + background-color: #b0b0b0;
  461 + padding-left: 15px;
428 } 462 }
429 463
430 .link-block { 464 .link-block {
@@ -756,6 +790,67 @@ $focus-size: 42px; @@ -756,6 +790,67 @@ $focus-size: 42px;
756 video { 790 video {
757 width: 100%; 791 width: 100%;
758 } 792 }
  793 +
  794 + .related-reco.change-display {
  795 + .one-good {
  796 + width: 275px;
  797 + float: left;
  798 + margin-right: 30px;
  799 + margin-bottom: 25px;
  800 +
  801 + .thumb {
  802 + width: 275px;
  803 + height: 365px;
  804 + }
  805 +
  806 + &:nth-child(even) {
  807 + margin-right: 0;
  808 + }
  809 +
  810 + .content-container {
  811 + position: relative;
  812 + width: 275px;
  813 + margin-left: 0;
  814 + height: 130px;
  815 + padding: 0 15px;
  816 +
  817 + .price {
  818 + height: 50px;
  819 + }
  820 + }
  821 +
  822 + .reco-name {
  823 + margin-top: 20px;
  824 + height: 60px;
  825 + white-space: normal;
  826 +
  827 + span {
  828 + line-height: 30px;
  829 + height: 60px;
  830 + overflow: hidden;
  831 + text-overflow: ellipsis;
  832 + display: -webkit-box;
  833 + -webkit-line-clamp: 2;
  834 + -webkit-box-orient: vertical;
  835 + }
  836 + }
  837 +
  838 + .content-container > p {
  839 + position: absolute;
  840 + right: 15px;
  841 + bottom: 10px;
  842 + }
  843 + }
  844 +
  845 + .related-reco-more {
  846 + display: none;
  847 + }
  848 +
  849 + .related-reco-hide {
  850 + max-height: auto;
  851 + overflow: visible;
  852 + }
  853 + }
759 } 854 }
760 855
761 .guang-detail-page.menu-open { 856 .guang-detail-page.menu-open {
@@ -344,6 +344,13 @@ const processArticleDetail = (articleContent, isApp, gender, isWeixin, isqq, isW @@ -344,6 +344,13 @@ const processArticleDetail = (articleContent, isApp, gender, isWeixin, isqq, isW
344 } 344 }
345 } 345 }
346 346
  347 + // 改变关联商品显示形式，false:默认单列多行，true:改成俩列多行
  348 + let changeDisplayType = false;
  349 +
  350 + if (_.get(value, 'goods.display_template')) {
  351 + changeDisplayType = _.get(value, 'goods.display_template', '1') === '2';
  352 + }
  353 +
347 // 相关商品 354 // 相关商品
348 if (_.get(value, 'goods.data', false) || 355 if (_.get(value, 'goods.data', false) ||
349 _.get(value, 'goods.dataGlobal', false) || 356 _.get(value, 'goods.dataGlobal', false) ||
@@ -372,7 +379,8 @@ const processArticleDetail = (articleContent, isApp, gender, isWeixin, isqq, isW @@ -372,7 +379,8 @@ const processArticleDetail = (articleContent, isApp, gender, isWeixin, isqq, isW
372 finalDetail.push({ 379 finalDetail.push({
373 relatedReco: { 380 relatedReco: {
374 isApp: isApp, 381 isApp: isApp,
375 - goods: goodsData 382 + goods: goodsData,
  383 + changeDisplayType: changeDisplayType
376 } 384 }
377 }); 385 });
378 } 386 }