添加折叠框

Lynnic
Commit a09ca06257966742f99ee0ae0f6f593b1ba745ce 1 parent 5626f9e5
Showing 4 changed files with 71 additions and 15 deletions
static/js/product/detail/detail.js
static/sass/product/_detail.scss
template/m.yohobuy.com/actions/product/detail/index.phtml
yohobuy/m.yohobuy.com/application/modules/Product/controllers/Detail.php
--- a/static/js/product/detail/detail.js
View file @a09ca06
+++ b/static/js/product/detail/detail.js
View file @a09ca06
@@ -13,9 +13,9 @@ var goodsSwiper,
     // winH = $(window).height(),
     sizeSwiper,
     refSwiper,
+    commentsNum,
     handleHelper;
-
 lazyLoad($('img.lazy'));
 goodsSwiper = new Swiper('.banner-swiper', {
@@ -28,11 +28,34 @@ goodsSwiper = new Swiper('.banner-swiper', {
     prevButton: '.swiper-button-prev'
 });
+//初始化tab
+(function() {
+    commentsNum = $('#nav-tab .comments-num').html()-0;
+    var consultsNum = $('#nav-tab .consults-num').html()-0;
+
+    $('#nav-tab li').each(function() {
+        $(this).removeClass('focus');
+        });
+
+    $('#feedback-content .content').each(function() {
+            $(this).addClass('hide');
+    });
+    if(0!=commentsNum) {
+        $('#nav-tab .comment-nav').addClass('focus');
+        $('#feedback-content .comment-content').removeClass('hide');
+
+    }else if(0!=consultsNum) {
+        $('#nav-tab .consult-nav').addClass('focus');
+        $('#feedback-content .consult-content').removeClass('hide');
+    }
+})();
 $('#nav-tab li').on('click', function() {
     var index = $(this).index();
-
+    if($(this).hasClass('comment-nav')&&0==commentsNum) {
+        alert('暂无商品评价');
+    }else{
         if (!$(this).hasClass('focus')) {
             $('#nav-tab li').each(function() {
@@ -45,6 +68,15 @@ $('#nav-tab li').on('click', function() {
             $(this).addClass('focus');
             $('#feedback-content .content:eq(' + index + ')').removeClass('hide');
         }                             
+    }
+});
+
+$('.goodsDiscount .dropdown').on('click',function() {
+    if($('.goodsDiscount .discount-folder').is(':hidden')) {
+        $('.goodsDiscount .discount-folder').slideDown();
+    }else{
+        $('.goodsDiscount .discount-folder').slideUp();
+    }
 });
 sizeSwiper = new Swiper('#size-swiper-container',{
--- a/static/sass/product/_detail.scss
View file @a09ca06
+++ b/static/sass/product/_detail.scss
View file @a09ca06
@@ -225,15 +225,15 @@ overflow: hidden;
     }
 }
 .goodsDiscount{
-    min-height: pxToRem(88px);
-    padding-left:pxToRem(28px);
-    padding-right:pxToRem(28px);
+   
     font-size: pxToRem(28px);
     color: $mainFontC;
-    line-height: pxToRem(88px);
-
     border-bottom: 1px solid $borderC;
-
+    h1{
+        padding : pxToRem(30px) pxToRem(28px);
+        line-height: pxToRem(36px);
+        // line-height: pxToRem(88px);
+    }
     .iconfont{
         display: inline-block;
         width: pxToRem(35px);
@@ -242,6 +242,13 @@ overflow: hidden;
         color:#e0e0e0;
         // padding-left:pxToRem(50px);
     }
+    .discount-folder{
+        .folder-item{
+            border-top: 1px solid $borderC;
+        }
+        display: none;
+    }
+    
 }
 .goodsSubtitle,
 .goodsDiscount{
@@ -511,6 +518,8 @@ overflow: hidden;
     .detail-swiper{
         .swiper-wrapper{
+            height: pxToRem(200px);
+            overflow: hidden;
             .swiper-slide{
                 width: pxToRem(114px);
                 div{
@@ -527,7 +536,6 @@ overflow: hidden;
     }
     #reference-swiper-container{
-
         .first-group{
             width: pxToRem(70px);
             margin-top: pxToRem(66px);
--- a/template/m.yohobuy.com/actions/product/detail/index.phtml
View file @a09ca06
+++ b/template/m.yohobuy.com/actions/product/detail/index.phtml
View file @a09ca06
@@ -43,7 +43,15 @@
 {{#goodsDiscount}}
 <div class="goodsDiscount">
-    <h1>{{.}}<span class="iconfont">&#xe609;</span></h1>
+    {{#each list}}
+        {{#if @first}}
+            <h1>{{this}}<span class="iconfont dropdown">&#xe609;</span></h1>
+            <div class="discount-folder">
+            {{else}}
+            <h1 class="folder-item">{{this}}</h1>
+        {{/if}}
+    {{/list}}
+    </div>
 </div>
 {{/goodsDiscount}}
@@ -57,8 +65,8 @@
         {{else}}
     <ul id="nav-tab" class="nav-tab clearfix">
-        <li class="comment-nav focus">{{commentName}}({{commentsNum}})</li>
-        <li class="consult-nav">{{consultName}}({{consultsNum}})</li>
+        <li class="comment-nav">{{commentName}}(<span class="comments-num">{{commentsNum}}</span>)</li>
+        <li class="consult-nav">{{consultName}}(<span class="consults-num">{{consultsNum}}</span>)</li>
     </ul>
     <div id="feedback-content" >
@@ -189,7 +197,7 @@
   <div class="swiper-container detail-swiper" id="size-swiper-container">
     <div class="swiper-wrapper">
         {{#list}}
-        <div class="swiper-slide blue-slide" >
+        <div class="swiper-slide " >
             <div class="size-name cell">{{name}}</div>
             <div class="size-m cell">{{sizem}}</div>
             <div class="size-xl cell">{{sizexl}}</div>
--- a/yohobuy/m.yohobuy.com/application/modules/Product/controllers/Detail.php
View file @a09ca06
+++ b/yohobuy/m.yohobuy.com/application/modules/Product/controllers/Detail.php
View file @a09ca06
@@ -68,10 +68,18 @@ SHOE BQT KEN BLOCK',
                     )
                 )
             ),
-            'goodsDiscount'=>'【summer final sale】满¥499立享6.8折',
+            'goodsDiscount'=>array(
+                    'list'=>array(
+                           '【summer final sale】满¥499立享6.8折',
+                           '【BACK TO SCHOOL】满￥499赠送Paul 
+  Franke帽子一个，多买多送！',
+                            '【BACK TO SCHOOL】满￥499赠送Paul 
+  Franke帽子一个，多买多送！'
+                        )
+                ),
             'feedbacks'=>array(
                 'commentsNum'=>0,
-                'consultsNum'=>0,
+                'consultsNum'=>1,
                 'nodata' =>0,
                 'commentName'=>'商品评价',
                 'consultName' =>'购买咨询',