Authored by Lynnic

添加折叠框

@@ -13,9 +13,9 @@ var goodsSwiper, @@ -13,9 +13,9 @@ var goodsSwiper,
13 // winH = $(window).height(), 13 // winH = $(window).height(),
14 sizeSwiper, 14 sizeSwiper,
15 refSwiper, 15 refSwiper,
  16 + commentsNum,
16 handleHelper; 17 handleHelper;
17 18
18 -  
19 lazyLoad($('img.lazy')); 19 lazyLoad($('img.lazy'));
20 20
21 goodsSwiper = new Swiper('.banner-swiper', { 21 goodsSwiper = new Swiper('.banner-swiper', {
@@ -28,22 +28,54 @@ goodsSwiper = new Swiper('.banner-swiper', { @@ -28,22 +28,54 @@ goodsSwiper = new Swiper('.banner-swiper', {
28 prevButton: '.swiper-button-prev' 28 prevButton: '.swiper-button-prev'
29 }); 29 });
30 30
  31 +//初始化tab
  32 +(function() {
  33 + commentsNum = $('#nav-tab .comments-num').html()-0;
  34 + var consultsNum = $('#nav-tab .consults-num').html()-0;
31 35
32 -$('#nav-tab li').on('click', function() {  
33 - var index = $(this).index(); 36 + $('#nav-tab li').each(function() {
  37 + $(this).removeClass('focus');
  38 + });
34 39
  40 + $('#feedback-content .content').each(function() {
  41 + $(this).addClass('hide');
  42 + });
  43 + if(0!=commentsNum) {
  44 + $('#nav-tab .comment-nav').addClass('focus');
  45 + $('#feedback-content .comment-content').removeClass('hide');
  46 +
  47 + }else if(0!=consultsNum) {
  48 + $('#nav-tab .consult-nav').addClass('focus');
  49 + $('#feedback-content .consult-content').removeClass('hide');
  50 + }
  51 +})();
35 52
36 - if (!$(this).hasClass('focus')) { 53 +$('#nav-tab li').on('click', function() {
  54 + var index = $(this).index();
37 55
38 - $('#nav-tab li').each(function() {  
39 - $(this).removeClass('focus');  
40 - });  
41 - $('#feedback-content .content').each(function() {  
42 - $(this).addClass('hide');  
43 - }); 56 + if($(this).hasClass('comment-nav')&&0==commentsNum) {
  57 + alert('暂无商品评价');
  58 + }else{
  59 + if (!$(this).hasClass('focus')) {
  60 +
  61 + $('#nav-tab li').each(function() {
  62 + $(this).removeClass('focus');
  63 + });
  64 + $('#feedback-content .content').each(function() {
  65 + $(this).addClass('hide');
  66 + });
  67 +
  68 + $(this).addClass('focus');
  69 + $('#feedback-content .content:eq(' + index + ')').removeClass('hide');
  70 + }
  71 + }
  72 +});
44 73
45 - $(this).addClass('focus');  
46 - $('#feedback-content .content:eq(' + index + ')').removeClass('hide'); 74 +$('.goodsDiscount .dropdown').on('click',function() {
  75 + if($('.goodsDiscount .discount-folder').is(':hidden')) {
  76 + $('.goodsDiscount .discount-folder').slideDown();
  77 + }else{
  78 + $('.goodsDiscount .discount-folder').slideUp();
47 } 79 }
48 }); 80 });
49 81
@@ -225,15 +225,15 @@ overflow: hidden; @@ -225,15 +225,15 @@ overflow: hidden;
225 } 225 }
226 } 226 }
227 .goodsDiscount{ 227 .goodsDiscount{
228 - min-height: pxToRem(88px);  
229 - padding-left:pxToRem(28px);  
230 - padding-right:pxToRem(28px); 228 +
231 font-size: pxToRem(28px); 229 font-size: pxToRem(28px);
232 color: $mainFontC; 230 color: $mainFontC;
233 - line-height: pxToRem(88px);  
234 -  
235 border-bottom: 1px solid $borderC; 231 border-bottom: 1px solid $borderC;
236 - 232 + h1{
  233 + padding : pxToRem(30px) pxToRem(28px);
  234 + line-height: pxToRem(36px);
  235 + // line-height: pxToRem(88px);
  236 + }
237 .iconfont{ 237 .iconfont{
238 display: inline-block; 238 display: inline-block;
239 width: pxToRem(35px); 239 width: pxToRem(35px);
@@ -242,6 +242,13 @@ overflow: hidden; @@ -242,6 +242,13 @@ overflow: hidden;
242 color:#e0e0e0; 242 color:#e0e0e0;
243 // padding-left:pxToRem(50px); 243 // padding-left:pxToRem(50px);
244 } 244 }
  245 + .discount-folder{
  246 + .folder-item{
  247 + border-top: 1px solid $borderC;
  248 + }
  249 + display: none;
  250 + }
  251 +
245 } 252 }
246 .goodsSubtitle, 253 .goodsSubtitle,
247 .goodsDiscount{ 254 .goodsDiscount{
@@ -511,6 +518,8 @@ overflow: hidden; @@ -511,6 +518,8 @@ overflow: hidden;
511 518
512 .detail-swiper{ 519 .detail-swiper{
513 .swiper-wrapper{ 520 .swiper-wrapper{
  521 + height: pxToRem(200px);
  522 + overflow: hidden;
514 .swiper-slide{ 523 .swiper-slide{
515 width: pxToRem(114px); 524 width: pxToRem(114px);
516 div{ 525 div{
@@ -527,7 +536,6 @@ overflow: hidden; @@ -527,7 +536,6 @@ overflow: hidden;
527 } 536 }
528 537
529 #reference-swiper-container{ 538 #reference-swiper-container{
530 -  
531 .first-group{ 539 .first-group{
532 width: pxToRem(70px); 540 width: pxToRem(70px);
533 margin-top: pxToRem(66px); 541 margin-top: pxToRem(66px);
@@ -43,7 +43,15 @@ @@ -43,7 +43,15 @@
43 43
44 {{#goodsDiscount}} 44 {{#goodsDiscount}}
45 <div class="goodsDiscount"> 45 <div class="goodsDiscount">
46 - <h1>{{.}}<span class="iconfont">&#xe609;</span></h1> 46 + {{#each list}}
  47 + {{#if @first}}
  48 + <h1>{{this}}<span class="iconfont dropdown">&#xe609;</span></h1>
  49 + <div class="discount-folder">
  50 + {{else}}
  51 + <h1 class="folder-item">{{this}}</h1>
  52 + {{/if}}
  53 + {{/list}}
  54 + </div>
47 </div> 55 </div>
48 {{/goodsDiscount}} 56 {{/goodsDiscount}}
49 57
@@ -57,8 +65,8 @@ @@ -57,8 +65,8 @@
57 {{else}} 65 {{else}}
58 66
59 <ul id="nav-tab" class="nav-tab clearfix"> 67 <ul id="nav-tab" class="nav-tab clearfix">
60 - <li class="comment-nav focus">{{commentName}}({{commentsNum}})</li>  
61 - <li class="consult-nav">{{consultName}}({{consultsNum}})</li> 68 + <li class="comment-nav">{{commentName}}(<span class="comments-num">{{commentsNum}}</span>)</li>
  69 + <li class="consult-nav">{{consultName}}(<span class="consults-num">{{consultsNum}}</span>)</li>
62 </ul> 70 </ul>
63 <div id="feedback-content" > 71 <div id="feedback-content" >
64 72
@@ -189,7 +197,7 @@ @@ -189,7 +197,7 @@
189 <div class="swiper-container detail-swiper" id="size-swiper-container"> 197 <div class="swiper-container detail-swiper" id="size-swiper-container">
190 <div class="swiper-wrapper"> 198 <div class="swiper-wrapper">
191 {{#list}} 199 {{#list}}
192 - <div class="swiper-slide blue-slide" > 200 + <div class="swiper-slide " >
193 <div class="size-name cell">{{name}}</div> 201 <div class="size-name cell">{{name}}</div>
194 <div class="size-m cell">{{sizem}}</div> 202 <div class="size-m cell">{{sizem}}</div>
195 <div class="size-xl cell">{{sizexl}}</div> 203 <div class="size-xl cell">{{sizexl}}</div>
@@ -68,10 +68,18 @@ SHOE BQT KEN BLOCK', @@ -68,10 +68,18 @@ SHOE BQT KEN BLOCK',
68 ) 68 )
69 ) 69 )
70 ), 70 ),
71 - 'goodsDiscount'=>'【summer final sale】满¥499立享6.8折', 71 + 'goodsDiscount'=>array(
  72 + 'list'=>array(
  73 + '【summer final sale】满¥499立享6.8折',
  74 + '【BACK TO SCHOOL】满¥499赠送Paul
  75 + Franke帽子一个,多买多送!',
  76 + '【BACK TO SCHOOL】满¥499赠送Paul
  77 + Franke帽子一个,多买多送!'
  78 + )
  79 + ),
72 'feedbacks'=>array( 80 'feedbacks'=>array(
73 'commentsNum'=>0, 81 'commentsNum'=>0,
74 - 'consultsNum'=>0, 82 + 'consultsNum'=>1,
75 'nodata' =>0, 83 'nodata' =>0,
76 'commentName'=>'商品评价', 84 'commentName'=>'商品评价',
77 'consultName' =>'购买咨询', 85 'consultName' =>'购买咨询',