Merge remote-tracking branch 'origin/feature/tab' into release/6.4

@@ -280,11 +280,12 @@ module.exports = class extends global.yoho.BaseModel {
 
     _getGuangArticles(skn) {  //eslint-disable-line
         return this.guangService.getArticleList(
-            3, null, null, null, _.random(1, 700), null, null, 10, null, null
+            3, null, null, null, _.random(1, 700), null, null, 4, null, null
         ).then(result => {
             return _.get(result, 'msgs', []).map((article) => ({
                 url: article.url,
-                name: article.title
+                name: article.title,
+                img: article.img.replace(/\?.*$/g, '?imageView2/1/w/{width}/h/{height}/q/90')
             }));
         });
     }

@@ -42,8 +42,6 @@
 
             {{> product/after-service}}
 
-            {{> product/recommend-keywords}}
-
             {{> product/recommend-receiveview}}
 
         </div>

@@ -116,9 +116,7 @@
                 </div>
             {{/ pageIntro}}
 
-            {{> product/recommend-keywords goodsInfo=@root.recommendKeywordsInfo}}
-
-            {{> product/latest-walk}}
+            {{> product/latest-walk goodsInfo=@root.recommendKeywordsInfo}}
 
             {{# @root.pageFooterSeo}}
                 <div class="page-footer-seo">

 {{#unless @root.pc.product.removeRecentView}}
     <div class="lazy-load-object">
-                    <textarea class="datalazyload" style="visibility: hidden;">
-                        <script>
-                            fetchRecommend();
-                        </script>
-                    </textarea>
+        <textarea class="datalazyload" style="visibility: hidden;">
+            <script>
+                fetchRecommend();
+            </script>
+        </textarea>
     </div>
 
-    <div class="bottom-tab">
+    <div class="bottom-tab bottom-recommend-tab">
         <p>
-            <span class="bottom-title bottom-cur">店铺推荐</span>
-            <span class="bottom-title">最近浏览</span>
-                        <span class="bottom-title change">换一批
-                            <span class="iconfont change-icon">&#xe6d3;</span>
-                        </span>
+            <span class="bottom-title shop bottom-cur">店铺推荐</span>
+            <span class="bottom-title browse">最近浏览</span>
+            <span class="bottom-title new">新品推荐</span>
+            <span class="bottom-title about">相关推荐</span>
+            <span class="bottom-title change">换一批
+                <span class="iconfont change-icon">&#xe6d3;</span>
+            </span>
         </p>
     </div>
 
     <div class="individual-comment info-block info-bottom">
         {{#if latestWalk}}
-            <div class="latest-walk">
+            <div class="latest-walk browse">
                 <input id="latest-walk-count" type="hidden" value="{{latestWalk}}">
                 <div id="latest-walk-goods" class="goods clearfix"></div>
                 {{> product/latest-walk-tpl}}
             </div>
         {{/if}}
         {{#if goodsInfo.shopRecommend}}
-            <div id="recommend-shop">
+            <div id="recommend-shop" class="shop">
                 <div class="recommend-content clearfix">
                     <div class="recommend-slider">
                         <ul class=" img-list" id="recommend-content">
@@ -54,5 +56,43 @@
                 </div>
             </div>
         {{/if}}
+
+        {{# goodsInfo}}
+            {{#if recommendKeywords}}
+                <div class="recommend-keywords about">
+                    <p>
+                        {{# recommendKeywords}}
+                            <a href="{{url}}" title="{{keyword}}" target="_blank" class="keyword">{{keyword}}</a>
+                        {{/ recommendKeywords}}
+                    </p>
+                </div>
+            {{/if}}
+
+            {{#if recommendNewProducts}}
+                <div class="recommend-keywords new">
+                    <p>
+                        {{# recommendNewProducts}}
+                            <a href="{{url}}" title="{{name}}" target="_blank" class="keyword">{{name}}</a>
+                        {{/ recommendNewProducts}}
+                    </p>
+                </div>
+            {{/if}}
+        {{/ goodsInfo}}
     </div>
+
+    {{#if goodsInfo.recommendArticles}}
+        <div class="recommend-article">
+            <h3>潮流资讯</h3>
+            <ul>
+                {{# goodsInfo.recommendArticles}}
+                    <li>
+                        <a href="{{url}}" title="{{name}}" target="_blank">
+                            <img class="lazy" src="{{image2 img w=280 h=186}}">
+                            <p>{{name}}</p>
+                        </a>
+                    </li>
+                {{/ goodsInfo.recommendArticles}}
+            </ul>
+        </div>
+    {{/if}}
 {{/unless}}

@@ -153,7 +153,7 @@ module.exports = {
     sessionMemcachedPrefix: 'yohobuy_session:',
     redis: {
         connect: {
-            host: '127.0.0.1',
+            host: '192.168.102.49',
             port: '6379',
             retry_strategy(options) {
                 if (options.error && options.error.code === 'ECONNREFUSED') {

 {{#unless @root.pc.product.removeRecentView}}
-    {{#if latestWalk}}
-        <input id="latest-walk-count" type="hidden" value="{{latestWalk}}">
-        <div class="latest-walk">
-            <h2>最近浏览的商品</h2>
-            <div id="latest-walk-goods" class="goods clearfix"></div>
-        </div>
+    <div class="bottom-tab">
+        <span class="bottom-cur">最近预览</span>
+        {{#if goodsInfo.recommendKeywords}}
+            <span class="about">相关推荐</span>
+        {{/if}}
+    </div>
+    <div class="bottom-tab-cont">
+        {{#if latestWalk}}
+            <div class="latest-walk-area">
+                <input id="latest-walk-count" type="hidden" value="{{latestWalk}}">
+                <div class="latest-walk">
+                    <div id="latest-walk-goods" class="goods clearfix"></div>
+                    {{#unless latestWalk}}
+                        <p class="null-data">
+                            无最近浏览的商品
+                        </p>
+                    {{/unless}}
+                </div>
 
-        {{> product/latest-walk-tpl}}
+                {{> product/latest-walk-tpl}}
 
-        <div class="lazy-load-object">
-         <textarea class="latest-walk-datalazyload" style="visibility: hidden;">
-            <script> fetchLatestWalk(); </script>
-         </textarea>
-        </div>
-    {{/if}}
+                <div class="lazy-load-object">
+                    <textarea class="latest-walk-datalazyload" style="visibility: hidden;">
+                        <script> fetchLatestWalk(); </script>
+                    </textarea>
+                </div>
+            </div>
+        {{/if}}
+
+        {{#if goodsInfo.recommendKeywords}}
+            <div class="recommend-keywords about">
+                <p>
+                    {{# goodsInfo.recommendKeywords}}
+                        <a href="{{url}}" title="{{keyword}}" target="_blank" class="keyword">{{keyword}}</a>
+                    {{/ goodsInfo.recommendKeywords}}
+                </p>
+            </div>
+        {{/if}}
+    </div>
 {{/unless}}

@@ -1553,22 +1553,41 @@ function initPageYas() {
 function loadRecommend() {
 
     var imgItem = $('.recommend-slider .img-item'),
-        $bottomTitle = $('.bottom-tab .bottom-title');
-
-    if (imgItem.length !== 0) {
+        $bottomTitle = $('.bottom-recommend-tab .bottom-title'),
+        curStatus = {
+            shop: imgItem.length > 0,
+            browse: $('#latest-walk-count').val() > 0,
+            new: $('.individual-comment .new a').length > 0,
+            about: $('.individual-comment .about a').length > 0
+        },
+        firstShow = 0;
+
+    $.each(curStatus, function(key, item) {
+        if (item) {
+            if (firstShow === 0) {
+                $bottomTitle.filter('.' + key).addClass('bottom-cur');
+                $bottomTitle.filter('.' + key).siblings().removeClass('bottom-cur');
+                $('.individual-comment').find('.' + key).show().siblings().hide();
+
+                if (key === 'shop') {
+                    $('.recommend-slider .img-item .goods-id').each(function() {
+                        $goodsIdArr.push($(this).html());
+                    });
+                } else if (key === 'browse') {
+                    fetchLatestWalk();  // eslint-disable-line
+                }
+            }
 
-        $('.recommend-slider .img-item .goods-id').each(function() {
-            $goodsIdArr.push($(this).html());
-        });
-    } else {
-        $bottomTitle.eq(0).removeClass('bottom-cur').addClass('hide');
-        $bottomTitle.eq(1).addClass('bottom-cur');
-        $bottomTitle.filter('.change').addClass('hide');
+            firstShow++;
+        } else {
+            $bottomTitle.filter('.' + key).hide();
 
-        $('#recommend-shop').remove();
-        $('.individual-comment .latest-walk').show();
-        fetchLatestWalk();  // eslint-disable-line
-    }
+            if (key === 'shop') {
+                $('#recommend-shop').remove();
+                $bottomTitle.filter('.change').addClass('hide');
+            }
+        }
+    });
 
     // 页面加载完，埋点
     initPageYas();
@@ -1852,10 +1871,7 @@ $('.package-box').on('click', '#buy-detail', function() {
 // 店铺推荐和最近浏览
 $('.bottom-tab').on('click', '.bottom-title', function() {
     var $this = $(this),
-        index = $this.index();
-
-    var $latestWalk = $('.individual-comment .latest-walk'),
-        $recommendComment = $('.individual-comment #recommend-shop');
+        keywords = $this.attr('class').replace('bottom-title ', '');
 
     if ($this.hasClass('change')) {
         return;
@@ -1868,21 +1884,19 @@ $('.bottom-tab').on('click', '.bottom-title', function() {
     $this.addClass('bottom-cur');
     $this.siblings('.bottom-cur').removeClass('bottom-cur');
 
-    if (index === 0) {
-        // 店铺推荐
-        $recommendComment.slideDown(SLIDETIME);
-        $latestWalk.slideUp(SLIDETIME);
+    $('.individual-comment').find('.' + keywords).slideDown(SLIDETIME).siblings().slideUp(SLIDETIME);
 
+    if (keywords === 'shop') {
+        // 店铺推荐
         $(this).siblings('.change').removeClass('hide');
     } else {
-        // 最近游览
-        window.fetchLatestWalk();  // eslint-disable-line
-        $recommendComment.slideUp(SLIDETIME);
-        $latestWalk.slideDown(SLIDETIME);
-
         $(this).siblings('.change').addClass('hide');
     }
 
+    if (keywords === 'browse') {
+        // 最近游览
+        window.fetchLatestWalk();  // eslint-disable-line
+    }
 });
 
 $('.recommend-content').find('.iconfont').mouseenter(function() {
@@ -2026,5 +2040,3 @@ yasAtBottom.yasBottom();
 
 // 统计代码
 require('./detail/stat')();
-
-

@@ -92,7 +92,6 @@ $(function() {
 
         // 关键词搜索结果页展示时
     yas.givePoint(opt, loadYas);
-
 });
 
 // 点击搜索列表商品

@@ -89,6 +89,21 @@ $(function() {
 
     // 品友
     window.addPyEvent('viewSearch', qs.query || '');
+
+
+    // 相关推荐|最近浏览 tab 切换
+    $('.bottom-tab span').on('click', function() {
+        if ($(this).hasClass('bottom-cur')) {
+            return;
+        }
+
+        $(this).addClass('bottom-cur').siblings().removeClass('bottom-cur');
+        $('.bottom-tab-cont').children().eq($(this).index()).slideDown().siblings().slideUp();
+    });
+
+    if ($('.bottom-tab-cont .recommend-keywords a').length === 0) {
+        $('.bottom-tab .about').hide();
+    }
 });
 
 // 点击搜索列表商品

@@ -1816,9 +1816,7 @@
     }
 
     .recommend-keywords {
-        margin-top: 30px;
-        margin-bottom: 20px;
-        border: 1px #e0e0e0 solid;
+        height: 410px;
 
         h3 {
             height: 46px;
@@ -1830,13 +1828,11 @@
         }
 
         p {
-            padding: 10px;
-
             .keyword {
                 display: inline-block;
-                margin: 5px 15px;
+                margin: 20px 25px 0 0;
                 font-size: 12px;
-                width: 150px;
+                width: 202px;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -1854,6 +1850,53 @@
         }
     }
 
+    .recommend-article {
+        width: 100%;
+        height: 330px;
+
+        h3 {
+            font-size: 15px;
+            padding: 8px 0;
+            text-align: left;
+            font-weight: bold;
+            border-bottom: 1px solid #e0e0e0;
+        }
+
+        ul {
+            width: 1150px;
+        }
+
+        li:nth-child(4n) {
+            margin-right: 0;
+        }
+
+        li {
+            width: 280px;
+            float: left;
+            margin-right: 10px;
+
+            img {
+                width: 280px;
+                height: 186px;
+                display: block;
+                text-align: center;
+                margin: 10px 0;
+            }
+
+            p {
+                width: 239px;
+                margin: 0 auto;
+                text-align: center;
+                font-size: 14px;
+                line-height: 20px;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+        }
+    }
+
     .support-salereturned-service {
         $service: product/service.png;
 
@@ -1881,6 +1924,10 @@
         background: resolve($service);
     }
 
+    .recommend-keywords {
+        display: none;
+    }
+
     .latest-walk {
         overflow: inherit;
         border-top: none;

@@ -49,6 +49,62 @@
     }
 }
 
+.product-list-page {
+    .bottom-tab {
+        width: 100%;
+        border-bottom: 2px solid #eaeceb;
+
+        span {
+            font-size: 15px;
+            display: inline-block;
+            padding-bottom: 12px;
+            margin: 10px 45px -2px 0;
+            font-weight: bold;
+            cursor: pointer;
+        }
+
+        .bottom-cur {
+            border-bottom: 2px solid #000;
+        }
+    }
+
+    .recommend-keywords {
+        height: 301px;
+        margin: 0;
+        display: none;
+        border: none;
+
+        p {
+            padding: 0;
+
+            .keyword {
+                display: inline-block;
+                margin: 20px 20px 0 0;
+                font-size: 12px;
+                width: 202px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+
+    .latest-walk-area {
+        .latest-walk {
+            border-top: none;
+        }
+
+        .null-data {
+            height: 301px;
+            margin: 30px 0;
+            line-height: 301px;
+            font-size: 15px;
+            font-weight: bold;
+            text-align: center;
+        }
+    }
+}
+
 .min-screen .latest-walk {
     .goods {
         width: 820px;