Merge branch 'develop' of git.dev.yoho.cn:web/yohobuy into develop

梁志锋
Commit 57639c0e5b0d38ae5fc2e72ac30a2ff40f53f6a0 2 parents b59f88bf 76479d7d
Showing 4 changed files with 159 additions and 67 deletions
static/js/category/brand.js
static/sass/category/_brand.scss
template/m.yohobuy.com/actions/category/brand/index.phtml
template/m.yohobuy.com/actions/category/brand/search.phtml
--- a/static/js/category/brand.js
View file @57639c0
+++ b/static/js/category/brand.js
View file @57639c0
@@ -14,12 +14,16 @@ var swiper,
 var searchH = $('.newbrand-search').outerHeight(),
     headerH = $('.yoho-header').outerHeight(),
-    brandSwipe = parseInt(searchH) + parseInt(headerH) - 1;
+    brandSwipe = parseInt(searchH) + parseInt(headerH) - 1,
+    searchArray = [];
 var brandsData,
     $keyword,
     searchBtnHammer,
-    clearTextHammer;
+    clearTextHammer,
+    removeHistory,
+    searchList,
+    yohoHistory;
 swiper = new Swiper('.swiper-container', {
     lazyLoading: true,
@@ -31,7 +35,8 @@ swiper = new Swiper('.swiper-container', {
 lazyLoad($('img.lazy'));
 $('.yoho-header').css({
     'z-index': 2,
-    position: 'fixed'
+    position: 'fixed',
+    top: 0
 });
 $(window).scroll(function() {
@@ -96,12 +101,15 @@ function searchResult() {
         brandHtml.push(k);
         brandHtml.push('</h2></div>');
         $.each(v, function(i, brand) {
+
             brandHtml.push('<p><a href="' + brand.url + '">' + brand.name);
+
+            // brandHtml.push('<p><span>' + brand.name);
             if (brand.isNew) {
-                brandHtml.push('<i class="icon-hot">Hot</i>');
+                brandHtml.push('<i class="icon-hot">HOT</i>');
             }
             if (brand.isHot) {
-                brandHtml.push('<i class="icon-new">New</i>');
+                brandHtml.push('<i class="icon-new">NEW</i>');
             }
             brandHtml.push('</a></p>');
         });
@@ -127,6 +135,20 @@ function searchResult() {
     if (Object.keys(result).length > 0) {
         rightBarBindClick();
     }
+    $('.search-result .brand-list p').each(function (index) {
+        searchList = new Hammer($('.search-result .brand-list p').eq(index)[0]);
+        searchList.on('tap', function() {
+            if (localStorage.getItem('yohoHistory')) {
+                yohoHistory = localStorage.getItem('yohoHistory');
+                searchArray.push(yohoHistory);
+            }
+            searchArray.push('{"searchName":"' +
+             $('.search-result .brand-list p').eq(index).find('a').html() +
+              '","searchHref":"' + $('.search-result .brand-list p')
+              .eq(index).find('a').attr('href') + '"}');
+            localStorage.setItem('yohoHistory', searchArray);
+        });
+    });
 }
 if ($('.brand-search-page').length) {
@@ -134,6 +156,7 @@ if ($('.brand-search-page').length) {
     $keyword = $('#keyword');
     $keyword.on('input', function() {
+        $('.history').css('display', 'none');
         if ($keyword.val().length) {
             searchResult();
             $(this).closest('.search-box').css('width', '11.25rem');
@@ -142,7 +165,7 @@ if ($('.brand-search-page').length) {
             $(this).closest('.search-box').css('width', '12.5rem');
             $('.search-action').hide();
         }
-    });
+    }).focus();
     searchBtnHammer = new Hammer($('.search-btn')[0]);
@@ -162,16 +185,20 @@ if ($('.brand-search-page').length) {
     $('form.search-box').on('submit', function() {
         return false;
     });
+    if (localStorage) {
-    // clearHistoryHammer = new Hammer($('#clear-text')[0]);
-    // clearHistoryHammer.on('tap', function() {
-
-    //     // setcookie('h_brands', '', {
-    //     //     expire: -1,
-    //     //     path: '/',
-    //     //     domain: '.m.yohobuy.com'
-    //     // });
-    //     $('#history-keyword').remove();
-    //     $(this).hide();
-    // });
+        yohoHistory = $.parseJSON('[' + localStorage.getItem('yohoHistory') + ']');
+        console.log(yohoHistory);
+        if (yohoHistory) {
+            $.each(yohoHistory, function(index, content) {
+                $('<a href="' + content.searchHref + '">' + content.searchName + '</a>').appendTo('.historyList');
+            });
+        }
+    }
+
+    removeHistory = new Hammer($('.removeHistory')[0]);
+    removeHistory.on('tap', function(e) {
+        $('.historyList').html(' ');
+        localStorage.clear();
+    });
 }
--- a/static/sass/category/_brand.scss
View file @57639c0
+++ b/static/sass/category/_brand.scss
View file @57639c0
 .brand-page {
-     
-     .newbrand-search {
+
+    .newbrand-search {
         width: 93.75%;
         height: 60rem / $pxConvertRem;
         padding: 14rem / $pxConvertRem 3.125%;
@@ -9,27 +9,28 @@
         top: 88rem / $pxConvertRem;
         position: fixed;
         z-index: 2;
+
         .search-box {
             position: relative;
-            width: 500rem / $pxConvertRem;//450
+            width: 500rem / $pxConvertRem; //450
             height: 60rem / $pxConvertRem;
             background-color: #FFF;
             border-radius: 30rem / $pxConvertRem;
             padding: 0 32rem / $pxConvertRem 0 52rem / $pxConvertRem;
- 
-             a {
-                 width: 100%;
-                 height: 60rem / $pxConvertRem;
-                 border: 0;
-                 display: block;
-                 span{
+            
+            a {
+                width: 100%;
+                height: 60rem / $pxConvertRem;
+                border: 0;
+                display: block;
+                span {
                     line-height: 60rem / $pxConvertRem;
                     color: #bdbdbd;
                     font-size: 1.2em;
                     padding-left: 18rem / $pxConvertRem;
-                 }      
-             }
-             
+                }
+            }
+
             .search-icon {
                 position: absolute;
                 font-size: 24rem / $pxConvertRem;
@@ -38,6 +39,7 @@
                 line-height: 60rem / $pxConvertRem;
                 color: #bdbdbd;
             }
+
             .search-input {
                 border: none;
                 width: 95%;
@@ -45,6 +47,7 @@
                 line-height: 1;
                 padding: 0 10rem / $pxConvertRem;
             }
+
             .search-action {
                 display: none;
                 position: absolute;
@@ -54,11 +57,11 @@
                 line-height: 60rem / $pxConvertRem;
                 color: #666;
             }
+
             .clear-text {
                 margin-right: 20rem / $pxConvertRem;
             }
         }
-
     }
     .banner-top {
@@ -67,14 +70,15 @@
     .hot-brand {
         margin: (30rem / $pxConvertRem) 0 0;
- 
+
         .hot-brand-list {
-            background: #fff;     
+            background: #fff;
+
             li {
                 float: left;
                 width: 158rem / $pxConvertRem;
                 height: 158rem / $pxConvertRem;
-            
+
                 .img-box {
                     display: table-cell;
                     vertical-align: middle;
@@ -91,11 +95,11 @@
         .title-bar {
             width: 100%;
             background: #eeeeee;
-     
             color: #999999;
             // font-weight: bold;
             position: relative;
-            h2 {       
+
+            h2 {
                 // width: 100%;
                 padding: 0 20rem / $pxConvertRem;
                 height: 50rem / $pxConvertRem;
@@ -105,11 +109,12 @@
                 background-color: #f4f4f4;
             }
         }
- 
+
         p {
             cursor: pointer;
             // height: 50rem / $pxConvertRem;
             padding: 0 20rem / $pxConvertRem;
+
             a {
                 display: block;
                 // padding-top: 10rem / $pxConvertRem;
@@ -117,7 +122,8 @@
                 line-height: 76rem / $pxConvertRem;
                 font-size: 28rem / $pxConvertRem;
                 border-bottom: 1px solid #f3f3f3;
-                border-top: 1px solid #f9f9f9;                    
+                border-top: 1px solid #f9f9f9;
+
                 i {
                     display: inline-block;
                     margin-top: -4rem / $pxConvertRem;
@@ -129,11 +135,14 @@
                     font-size: 18rem / $pxConvertRem;
                     line-height: 38rem / $pxConvertRem;
                     color: #fff;
-                    border-radius: 50rem / $pxConvertRem;;
+                    border-radius: 50rem / $pxConvertRem;
+                    ;
                 }
+
                 .icon-hot {
                     background: #ff0000;
                 }
+
                 .icon-new {
                     background: #86c048;
                 }
@@ -141,32 +150,82 @@
         }
     }
-       .right-bar {
-          
-            width: 60rem / $pxConvertRem;
-            height: 75%;
-            top: 20%;
-            overflow: auto;
-            position: fixed;
-            right: 2rem / $pxConvertRem;
-            border-radius: 12rem / $pxConvertRem;
-            background: rgba(0,0,0,.8);  
-            z-index: 2;      
-             b {
-                height: 36rem / $pxConvertRem;
-         
-                line-height: 36rem / $pxConvertRem;
-                text-align: center;
-                display: block;
-                color: #999999;
-                font-weight: bold;
-            }
-        }
-        
-        .con {       
-            padding-top: 10rem / $pxConvertRem;    
+    .right-bar {
+        width: 60rem / $pxConvertRem;
+        height: 75%;
+        top: 20%;
+        overflow: auto;
+        position: fixed;
+        right: 2rem / $pxConvertRem;
+        border-radius: 12rem / $pxConvertRem;
+        background: rgba(0, 0, 0, .8);
+        z-index: 2;
+
+        b {
+            height: 36rem / $pxConvertRem;
+            line-height: 36rem / $pxConvertRem;
+            text-align: center;
+            display: block;
+            color: #999999;
+            font-weight: bold;
         }
+    }
+    .right-bar::-webkit-scrollbar {
+        display: none;
+    }
+
+    .con {
+        padding-top: 10rem / $pxConvertRem;
+    }
+    
     .search-result {
         padding-top: 176rem / $pxConvertRem;
     }    
-}
+}
+
+.history{
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    top: 176rem / $pxConvertRem;
+     > h6{
+        width: 100%;
+        height: 88rem / $pxConvertRem;
+        line-height: 88rem / $pxConvertRem;
+        color: #999;
+        text-indent: .6rem;
+        font-size: 36em / $pxConvertRem;
+    }
+    .historyList{
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+        display: block;
+         > a{
+            width: auto;
+            height: 58rem / $pxConvertRem;
+            overflow: hidden;
+            line-height: 58rem / $pxConvertRem;
+            margin: 0 0 20rem / $pxConvertRem .6rem;
+            padding: 0 20rem / $pxConvertRem;
+            float: left;
+            background-color:#f8f8f8;
+            color: #444;
+         }
+    }
+     > span{
+        width: auto;
+        height: 68rem / $pxConvertRem;
+        overflow: hidden;
+        display: inline-block;
+        line-height: 68rem / $pxConvertRem;
+        border:1px solid #e6e6e6;
+        padding: 0 28rem / $pxConvertRem;
+        font-size: 48em / $pxConvertRem;
+        margin-left: .6rem;
+        color: #000;
+     }
+}
+
--- a/template/m.yohobuy.com/actions/category/brand/index.phtml
View file @57639c0
+++ b/template/m.yohobuy.com/actions/category/brand/index.phtml
View file @57639c0
@@ -39,10 +39,10 @@
         <p>
             <a href="{{url}}">{{name}}
                 {{# isHot}}
-                <i class="icon-hot">Hot</i>
+                <i class="icon-hot">HOT</i>
                 {{/ isHot}}
                 {{# isNew}}
-                <i class="icon-new">New</i>
+                <i class="icon-new">NEW</i>
                 {{/ isNew}}
             </a>
         </p>
--- a/template/m.yohobuy.com/actions/category/brand/search.phtml
View file @57639c0
+++ b/template/m.yohobuy.com/actions/category/brand/search.phtml
View file @57639c0
@@ -10,10 +10,16 @@
             </div>
         </form>
     </div>
-
+    <div class="history">
+        <h6>历史纪录</h6>
+        <div class="historyList">
+        </div>
+        <span class='removeHistory'>清空搜索历史</span>
+    </div>
     <div class="search-result">
     </div>
 </div>
+
 <script id="brands-data" type="text/tmpl">
     {{{brandList}}}
 </script>