Merge branch 'feature/branchOptmztn' of http://git.dev.yoho.cn/web/yohobuywap into branchOptmztn

@@ -17,6 +17,8 @@ var swiper,
     $genderItem = $('.genderNav li'),
     $searchAction = $('.search-action'),
     hotBrandsSwiper;
+    $brandItem = $('.brandNav li'),
+    $brandWall = $('.branding-wall');
 
 var searchH = $('.newbrand-search').outerHeight(),
     headerH = $('.yoho-header').outerHeight(),
@@ -156,6 +158,8 @@ function searchResult() {
     // 插入 dom，绑定事件
     $('.search-result').html(html);
     changeBackground();
+    var $brandList = $('.brand-list');
+    writeSearch.bindWirteLocal($brandList);
 }
 
 if ($('.brand-search-page').length) {
@@ -210,3 +214,82 @@ if ($genderItem.length > 0) {
         setTimeout(reload.bind(this), 100);
     });
 }
+
+if ($brandItem.length > 0 ) {
+    $brandItem.on('click', function() {
+        var index = $(this).data('id');
+
+        $('.brandNav ul .active').removeClass('active');
+        $(this).addClass('active');
+
+
+        if (index === 0){
+            $brandWall.not('.hide').addClass('hide');
+            $brandList.removeClass('hide');
+        }else {
+            $brandList.not('.hide').addClass('hide');
+            $brandWall.eq(index).removeClass('hide');
+        }
+
+    });
+}
+
+//我添加的
+var $ = require('jquery'),
+    security = require('../plugin/security'),
+    Hammer = require('yoho.hammer');
+
+var $history = $('.history');
+var $historySearch = $('.history-search');
+
+var $clearHistory = $('#clear-history');
+
+var $form = $('#search-form');
+
+var writeSearch = require('./write-search');
+
+var ranToken = writeSearch.getRanToken();
+
+var chHammer, cHammer;
+
+chHammer = new Hammer($clearHistory[0]);
+chHammer.on('tap', function() {
+    localStorage.removeItem('historys-brand');
+
+    $history.html('');
+    $historySearch.hide();
+    $clearHistory.hide();
+
+    window.rePosFooter();
+});
+
+//初始化历史搜索的内容
+(function() {
+    var html = '',
+        history,
+        historys, i;
+
+    if (localStorage) {
+        historys = localStorage.getItem('historys-brand');
+
+        if (historys && historys.length > 0) {
+            historys = historys.split(ranToken);
+            for (i = historys.length; i > 0; i--) {
+                history = historys[i - 1];
+
+                if (history === '') {
+                    continue;
+                }
+
+                html += '<li><a href="/?query=' + history + '">' + history + '</li>';
+            }
+
+            $history.html(html);
+            $clearHistory.removeClass('hide');
+            $historySearch.removeClass('hide');
+            window.rePosFooter();
+        }
+    }
+}());
+
+//writeSearch.bindWirteLocal($form);
\ No newline at end of file

+/**
+ * 将搜索结果存localStorage
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/29
+ */
+
+var ranToken = ' ??++ ';
+var $ = require('jquery');
+
+//获取分隔符
+function getRanToken() {
+    return ranToken;
+}
+
+//绑定提交前的存local操作
+function bindWirteLocal($brandList) {
+    $brandList.on('click','p', function(e) {
+
+        e.preventDefault();
+
+        var brandName = $(this).find('a').html();
+        var query = brandName,
+            historys;
+
+        if (localStorage) {
+            historys = localStorage.getItem('historys-brands');
+
+
+
+            historys = historys ? historys : '';
+
+            if (historys.indexOf(ranToken + query + ranToken) > -1) {
+                return;
+            }
+
+            if (historys === '') {
+                query = ranToken + query;
+            }
+
+            historys += query + ranToken;
+
+            localStorage.setItem('historys-brands', historys);
+        }
+        //location.herf($(this).find('a').herf.tostring());
+    });
+}
+
+//本地存储点击前的标签
+function storeLocal($brandName,$brandUrl) {
+
+    var query = $brandName,
+        historys;
+    //var brandName = $brandName;
+    //var brandUrl = $brandUrl;
+    //var query;
+
+    if (localStorage) {
+        historys = localStorage.getItem('historys-brand');
+
+        historys = historys ? historys : '';
+
+        if (historys.indexOf(ranToken + query + ranToken) > -1) {
+            return;
+        }
+
+        if (historys === '') {
+            query = ranToken + query;
+        }
+
+
+        historys += query + ranToken;
+
+        localStorage.setItem('historys-brand', historys);
+    }
+}
+
+exports.getRanToken = getRanToken;
+
+exports.bindWirteLocal = bindWirteLocal;
+
+exports.storeLocal = storeLocal;
\ No newline at end of file

@@ -65,6 +65,68 @@
             }
         }
     }
+
+    .brandNav {
+        display: block;
+        width: 100%;
+        height: 80px;
+        line-height: 80px;
+        overflow: hidden;
+        color: #aeaeae;
+        z-index: 3;
+        border-top: 30px solid #f4f4f4;
+        background-color: #fff;
+
+        ul{
+            width: 100%;
+            height: 90%;
+            overflow: hidden;
+            li{
+                width: 25%;
+                height: 100%;
+                overflow: hidden;
+                float: left;
+                text-align: center;
+                position: relative;
+                font-size: 28px;
+                i{
+                    width: 100%;
+                    height: 40%;
+                    overflow: hidden;
+                    display: block;
+                }
+                span:not(.split-border){
+                    width: 100%;
+                    height: auto;
+                    overflow: hidden;
+                    display: block;
+                }
+
+                .split-border {
+                    display: inline-block;
+                    width: 2px;
+                    height: 1rem;
+                    background-color: #e1e1e1;
+                    position: absolute;
+                    top: 30%;
+                    right: 0;
+                }
+            }
+
+            li:last-child {
+            .split-border {
+                display: none;
+            }
+        }
+
+        li.active {
+            color: #444;
+        }
+        }
+    }
+
+
+
     .newbrand-search {
         width: 93.75%;
         height: 60px;
@@ -133,6 +195,45 @@
             .clear-text {
                 margin-right: 20px;
             }
+
+        }
+    }
+
+    .search-items {
+        padding: 40px 20px;
+
+        h3 {
+            font-size: 24px;
+            margin-bottom: 20px;
+        }
+
+        li {
+            float: left;
+            margin-right: 20px;
+            margin-bottom: 20px;
+            max-width: 100%;
+            overflow: hidden;
+        }
+
+        a {
+            display: block;
+            height: 68px;
+            line-height: 68px;
+            padding: 0 20px;
+            font-size: 28px;
+            background: #f8f8f8;
+            color: #000;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .clear-history {
+            height: 64px;
+            line-height: 64px;
+            border: 1px solid #e6e6e6;
+            background: #fff;
+            font-size: 28px;
         }
     }
 
@@ -143,7 +244,7 @@
 
     .hot-brands {
         padding-top: 178px;
-
+        border-top: 30px solid #f4f4f4;
         .floor-header {
             padding: 0;
         }

@@ -30,29 +30,50 @@
 
             {{! 热门品牌可滑动}}
             {{# hotBrandsScroll}}
-                {{> home/hot_brands_swipe}}
+                    {{> home/hot_brands_swipe}}
             {{/ hotBrandsScroll}}
         {{/ topData}}
 
-        {{# brandList}}
-        <div class="brand-list bar-{{@index}}">
-            <div class="title-bar">
-                <h2 style="position: static;">{{title}}</h2>
-            </div>
-            {{# list}}
-            <p>
-                <a href="{{url}}">{{name}}
-                    {{# isHot}}
-                    <i class="icon-hot">HOT</i>
-                    {{/ isHot}}
-                    {{# isNew}}
-                    <i class="icon-new">NEW</i>
-                    {{/ isNew}}
-                </a>
-            </p>
-            {{/ list}}
+        <div class="brandNav">
+            <ul>
+                {{# channels}}
+                    <li {{#if active}}class="active"{{/if}} data-id="{{@index}}">
+                        <span>{{name}}</span>
+                        <span class="split-border"></span>
+                    </li>
+                {{/channels}}
+            </ul>
         </div>
-        {{/ brandList}}
+        <div class="second-level-brand">
+            {{# brandList}}
+            <div class="brand-list bar-{{@index}}">
+                <div class="title-bar">
+                    <h2 style="position: static;">{{title}}</h2>
+                </div>
+                {{# list}}
+                <p>
+                    <a href="{{url}}">{{name}}
+                        {{# isHot}}
+                        <i class="icon-hot">HOT</i>
+                        {{/ isHot}}
+                        {{# isNew}}
+                        <i class="icon-new">NEW</i>
+                        {{/ isNew}}
+                    </a>
+                </p>
+                {{/ list}}
+            </div>
+            {{/ brandList}}
+
+            {{# brandWall}}
+                <div class="branding-wall bar-{{@index}}">
+                    <a href="{{url}}">
+                        <img class="lazy" data-original="{{img}}"></img>
+                        <div class="brand-name">{{brandName}}</div>>
+                    </a>
+                </div>
+            {{/ brandWall}}
+        </div>>
     </div>
 
 

@@ -14,6 +14,24 @@
     </div>
 </div>
 
+<div class="search-items">
+    <div class="hot-search">
+        <h3>热门搜索</h3>
+        <ul class="hot clearfix">
+            {{# hot}}
+                <li>
+                    <a href={{url}}>{{name}}</a>
+                </li>
+            {{/ hot}}
+        </ul>
+    </div>
+    <div class="history-search">
+        <h3>历史搜索</h3>
+        <ul class="history clearfix"></ul>
+    </div>
+    <button id="clear-history" class="clear-history hide">清空搜索历史</button>
+</div>
+
 <script id="brands-data" type="text/tmpl">
     {{{brandList}}}
 </script>