Merge branch 'feature/branchOptmztn' of http://git.dev.yoho.cn/web/yohobuywap into branchOptmztn
Showing
5 changed files
with
324 additions
and
20 deletions
| @@ -17,6 +17,8 @@ var swiper, | @@ -17,6 +17,8 @@ var swiper, | ||
| 17 | $genderItem = $('.genderNav li'), | 17 | $genderItem = $('.genderNav li'), |
| 18 | $searchAction = $('.search-action'), | 18 | $searchAction = $('.search-action'), |
| 19 | hotBrandsSwiper; | 19 | hotBrandsSwiper; |
| 20 | + $brandItem = $('.brandNav li'), | ||
| 21 | + $brandWall = $('.branding-wall'); | ||
| 20 | 22 | ||
| 21 | var searchH = $('.newbrand-search').outerHeight(), | 23 | var searchH = $('.newbrand-search').outerHeight(), |
| 22 | headerH = $('.yoho-header').outerHeight(), | 24 | headerH = $('.yoho-header').outerHeight(), |
| @@ -156,6 +158,8 @@ function searchResult() { | @@ -156,6 +158,8 @@ function searchResult() { | ||
| 156 | // 插入 dom，绑定事件 | 158 | // 插入 dom，绑定事件 |
| 157 | $('.search-result').html(html); | 159 | $('.search-result').html(html); |
| 158 | changeBackground(); | 160 | changeBackground(); |
| 161 | + var $brandList = $('.brand-list'); | ||
| 162 | + writeSearch.bindWirteLocal($brandList); | ||
| 159 | } | 163 | } |
| 160 | 164 | ||
| 161 | if ($('.brand-search-page').length) { | 165 | if ($('.brand-search-page').length) { |
| @@ -210,3 +214,82 @@ if ($genderItem.length > 0) { | @@ -210,3 +214,82 @@ if ($genderItem.length > 0) { | ||
| 210 | setTimeout(reload.bind(this), 100); | 214 | setTimeout(reload.bind(this), 100); |
| 211 | }); | 215 | }); |
| 212 | } | 216 | } |
| 217 | + | ||
| 218 | +if ($brandItem.length > 0 ) { | ||
| 219 | + $brandItem.on('click', function() { | ||
| 220 | + var index = $(this).data('id'); | ||
| 221 | + | ||
| 222 | + $('.brandNav ul .active').removeClass('active'); | ||
| 223 | + $(this).addClass('active'); | ||
| 224 | + | ||
| 225 | + | ||
| 226 | + if (index === 0){ | ||
| 227 | + $brandWall.not('.hide').addClass('hide'); | ||
| 228 | + $brandList.removeClass('hide'); | ||
| 229 | + }else { | ||
| 230 | + $brandList.not('.hide').addClass('hide'); | ||
| 231 | + $brandWall.eq(index).removeClass('hide'); | ||
| 232 | + } | ||
| 233 | + | ||
| 234 | + }); | ||
| 235 | +} | ||
| 236 | + | ||
| 237 | +//我添加的 | ||
| 238 | +var $ = require('jquery'), | ||
| 239 | + security = require('../plugin/security'), | ||
| 240 | + Hammer = require('yoho.hammer'); | ||
| 241 | + | ||
| 242 | +var $history = $('.history'); | ||
| 243 | +var $historySearch = $('.history-search'); | ||
| 244 | + | ||
| 245 | +var $clearHistory = $('#clear-history'); | ||
| 246 | + | ||
| 247 | +var $form = $('#search-form'); | ||
| 248 | + | ||
| 249 | +var writeSearch = require('./write-search'); | ||
| 250 | + | ||
| 251 | +var ranToken = writeSearch.getRanToken(); | ||
| 252 | + | ||
| 253 | +var chHammer, cHammer; | ||
| 254 | + | ||
| 255 | +chHammer = new Hammer($clearHistory[0]); | ||
| 256 | +chHammer.on('tap', function() { | ||
| 257 | + localStorage.removeItem('historys-brand'); | ||
| 258 | + | ||
| 259 | + $history.html(''); | ||
| 260 | + $historySearch.hide(); | ||
| 261 | + $clearHistory.hide(); | ||
| 262 | + | ||
| 263 | + window.rePosFooter(); | ||
| 264 | +}); | ||
| 265 | + | ||
| 266 | +//初始化历史搜索的内容 | ||
| 267 | +(function() { | ||
| 268 | + var html = '', | ||
| 269 | + history, | ||
| 270 | + historys, i; | ||
| 271 | + | ||
| 272 | + if (localStorage) { | ||
| 273 | + historys = localStorage.getItem('historys-brand'); | ||
| 274 | + | ||
| 275 | + if (historys && historys.length > 0) { | ||
| 276 | + historys = historys.split(ranToken); | ||
| 277 | + for (i = historys.length; i > 0; i--) { | ||
| 278 | + history = historys[i - 1]; | ||
| 279 | + | ||
| 280 | + if (history === '') { | ||
| 281 | + continue; | ||
| 282 | + } | ||
| 283 | + | ||
| 284 | + html += '<li><a href="/?query=' + history + '">' + history + '</li>'; | ||
| 285 | + } | ||
| 286 | + | ||
| 287 | + $history.html(html); | ||
| 288 | + $clearHistory.removeClass('hide'); | ||
| 289 | + $historySearch.removeClass('hide'); | ||
| 290 | + window.rePosFooter(); | ||
| 291 | + } | ||
| 292 | + } | ||
| 293 | +}()); | ||
| 294 | + | ||
| 295 | +//writeSearch.bindWirteLocal($form); |
static/js/category/write-search.js
0 → 100644
| 1 | +/** | ||
| 2 | + * 将搜索结果存localStorage | ||
| 3 | + * @author: xuqi<qi.xu@yoho.cn> | ||
| 4 | + * @date: 2015/10/29 | ||
| 5 | + */ | ||
| 6 | + | ||
| 7 | +var ranToken = ' ??++ '; | ||
| 8 | +var $ = require('jquery'); | ||
| 9 | + | ||
| 10 | +//获取分隔符 | ||
| 11 | +function getRanToken() { | ||
| 12 | + return ranToken; | ||
| 13 | +} | ||
| 14 | + | ||
| 15 | +//绑定提交前的存local操作 | ||
| 16 | +function bindWirteLocal($brandList) { | ||
| 17 | + $brandList.on('click','p', function(e) { | ||
| 18 | + | ||
| 19 | + e.preventDefault(); | ||
| 20 | + | ||
| 21 | + var brandName = $(this).find('a').html(); | ||
| 22 | + var query = brandName, | ||
| 23 | + historys; | ||
| 24 | + | ||
| 25 | + if (localStorage) { | ||
| 26 | + historys = localStorage.getItem('historys-brands'); | ||
| 27 | + | ||
| 28 | + | ||
| 29 | + | ||
| 30 | + historys = historys ? historys : ''; | ||
| 31 | + | ||
| 32 | + if (historys.indexOf(ranToken + query + ranToken) > -1) { | ||
| 33 | + return; | ||
| 34 | + } | ||
| 35 | + | ||
| 36 | + if (historys === '') { | ||
| 37 | + query = ranToken + query; | ||
| 38 | + } | ||
| 39 | + | ||
| 40 | + historys += query + ranToken; | ||
| 41 | + | ||
| 42 | + localStorage.setItem('historys-brands', historys); | ||
| 43 | + } | ||
| 44 | + //location.herf($(this).find('a').herf.tostring()); | ||
| 45 | + }); | ||
| 46 | +} | ||
| 47 | + | ||
| 48 | +//本地存储点击前的标签 | ||
| 49 | +function storeLocal($brandName,$brandUrl) { | ||
| 50 | + | ||
| 51 | + var query = $brandName, | ||
| 52 | + historys; | ||
| 53 | + //var brandName = $brandName; | ||
| 54 | + //var brandUrl = $brandUrl; | ||
| 55 | + //var query; | ||
| 56 | + | ||
| 57 | + if (localStorage) { | ||
| 58 | + historys = localStorage.getItem('historys-brand'); | ||
| 59 | + | ||
| 60 | + historys = historys ? historys : ''; | ||
| 61 | + | ||
| 62 | + if (historys.indexOf(ranToken + query + ranToken) > -1) { | ||
| 63 | + return; | ||
| 64 | + } | ||
| 65 | + | ||
| 66 | + if (historys === '') { | ||
| 67 | + query = ranToken + query; | ||
| 68 | + } | ||
| 69 | + | ||
| 70 | + | ||
| 71 | + historys += query + ranToken; | ||
| 72 | + | ||
| 73 | + localStorage.setItem('historys-brand', historys); | ||
| 74 | + } | ||
| 75 | +} | ||
| 76 | + | ||
| 77 | +exports.getRanToken = getRanToken; | ||
| 78 | + | ||
| 79 | +exports.bindWirteLocal = bindWirteLocal; | ||
| 80 | + | ||
| 81 | +exports.storeLocal = storeLocal; |
| @@ -65,6 +65,68 @@ | @@ -65,6 +65,68 @@ | ||
| 65 | } | 65 | } |
| 66 | } | 66 | } |
| 67 | } | 67 | } |
| 68 | + | ||
| 69 | + .brandNav { | ||
| 70 | + display: block; | ||
| 71 | + width: 100%; | ||
| 72 | + height: 80px; | ||
| 73 | + line-height: 80px; | ||
| 74 | + overflow: hidden; | ||
| 75 | + color: #aeaeae; | ||
| 76 | + z-index: 3; | ||
| 77 | + border-top: 30px solid #f4f4f4; | ||
| 78 | + background-color: #fff; | ||
| 79 | + | ||
| 80 | + ul{ | ||
| 81 | + width: 100%; | ||
| 82 | + height: 90%; | ||
| 83 | + overflow: hidden; | ||
| 84 | + li{ | ||
| 85 | + width: 25%; | ||
| 86 | + height: 100%; | ||
| 87 | + overflow: hidden; | ||
| 88 | + float: left; | ||
| 89 | + text-align: center; | ||
| 90 | + position: relative; | ||
| 91 | + font-size: 28px; | ||
| 92 | + i{ | ||
| 93 | + width: 100%; | ||
| 94 | + height: 40%; | ||
| 95 | + overflow: hidden; | ||
| 96 | + display: block; | ||
| 97 | + } | ||
| 98 | + span:not(.split-border){ | ||
| 99 | + width: 100%; | ||
| 100 | + height: auto; | ||
| 101 | + overflow: hidden; | ||
| 102 | + display: block; | ||
| 103 | + } | ||
| 104 | + | ||
| 105 | + .split-border { | ||
| 106 | + display: inline-block; | ||
| 107 | + width: 2px; | ||
| 108 | + height: 1rem; | ||
| 109 | + background-color: #e1e1e1; | ||
| 110 | + position: absolute; | ||
| 111 | + top: 30%; | ||
| 112 | + right: 0; | ||
| 113 | + } | ||
| 114 | + } | ||
| 115 | + | ||
| 116 | + li:last-child { | ||
| 117 | + .split-border { | ||
| 118 | + display: none; | ||
| 119 | + } | ||
| 120 | + } | ||
| 121 | + | ||
| 122 | + li.active { | ||
| 123 | + color: #444; | ||
| 124 | + } | ||
| 125 | + } | ||
| 126 | + } | ||
| 127 | + | ||
| 128 | + | ||
| 129 | + | ||
| 68 | .newbrand-search { | 130 | .newbrand-search { |
| 69 | width: 93.75%; | 131 | width: 93.75%; |
| 70 | height: 60px; | 132 | height: 60px; |
| @@ -133,6 +195,45 @@ | @@ -133,6 +195,45 @@ | ||
| 133 | .clear-text { | 195 | .clear-text { |
| 134 | margin-right: 20px; | 196 | margin-right: 20px; |
| 135 | } | 197 | } |
| 198 | + | ||
| 199 | + } | ||
| 200 | + } | ||
| 201 | + | ||
| 202 | + .search-items { | ||
| 203 | + padding: 40px 20px; | ||
| 204 | + | ||
| 205 | + h3 { | ||
| 206 | + font-size: 24px; | ||
| 207 | + margin-bottom: 20px; | ||
| 208 | + } | ||
| 209 | + | ||
| 210 | + li { | ||
| 211 | + float: left; | ||
| 212 | + margin-right: 20px; | ||
| 213 | + margin-bottom: 20px; | ||
| 214 | + max-width: 100%; | ||
| 215 | + overflow: hidden; | ||
| 216 | + } | ||
| 217 | + | ||
| 218 | + a { | ||
| 219 | + display: block; | ||
| 220 | + height: 68px; | ||
| 221 | + line-height: 68px; | ||
| 222 | + padding: 0 20px; | ||
| 223 | + font-size: 28px; | ||
| 224 | + background: #f8f8f8; | ||
| 225 | + color: #000; | ||
| 226 | + overflow: hidden; | ||
| 227 | + text-overflow: ellipsis; | ||
| 228 | + white-space: nowrap; | ||
| 229 | + } | ||
| 230 | + | ||
| 231 | + .clear-history { | ||
| 232 | + height: 64px; | ||
| 233 | + line-height: 64px; | ||
| 234 | + border: 1px solid #e6e6e6; | ||
| 235 | + background: #fff; | ||
| 236 | + font-size: 28px; | ||
| 136 | } | 237 | } |
| 137 | } | 238 | } |
| 138 | 239 | ||
| @@ -143,7 +244,7 @@ | @@ -143,7 +244,7 @@ | ||
| 143 | 244 | ||
| 144 | .hot-brands { | 245 | .hot-brands { |
| 145 | padding-top: 178px; | 246 | padding-top: 178px; |
| 146 | - | 247 | + border-top: 30px solid #f4f4f4; |
| 147 | .floor-header { | 248 | .floor-header { |
| 148 | padding: 0; | 249 | padding: 0; |
| 149 | } | 250 | } |
| @@ -30,29 +30,50 @@ | @@ -30,29 +30,50 @@ | ||
| 30 | 30 | ||
| 31 | {{! 热门品牌可滑动}} | 31 | {{! 热门品牌可滑动}} |
| 32 | {{# hotBrandsScroll}} | 32 | {{# hotBrandsScroll}} |
| 33 | - {{> home/hot_brands_swipe}} | 33 | + {{> home/hot_brands_swipe}} |
| 34 | {{/ hotBrandsScroll}} | 34 | {{/ hotBrandsScroll}} |
| 35 | {{/ topData}} | 35 | {{/ topData}} |
| 36 | 36 | ||
| 37 | - {{# brandList}} | ||
| 38 | - <div class="brand-list bar-{{@index}}"> | ||
| 39 | - <div class="title-bar"> | ||
| 40 | - <h2 style="position: static;">{{title}}</h2> | ||
| 41 | - </div> | ||
| 42 | - {{# list}} | ||
| 43 | - <p> | ||
| 44 | - <a href="{{url}}">{{name}} | ||
| 45 | - {{# isHot}} | ||
| 46 | - <i class="icon-hot">HOT</i> | ||
| 47 | - {{/ isHot}} | ||
| 48 | - {{# isNew}} | ||
| 49 | - <i class="icon-new">NEW</i> | ||
| 50 | - {{/ isNew}} | ||
| 51 | - </a> | ||
| 52 | - </p> | ||
| 53 | - {{/ list}} | 37 | + <div class="brandNav"> |
| 38 | + <ul> | ||
| 39 | + {{# channels}} | ||
| 40 | + <li {{#if active}}class="active"{{/if}} data-id="{{@index}}"> | ||
| 41 | + <span>{{name}}</span> | ||
| 42 | + <span class="split-border"></span> | ||
| 43 | + </li> | ||
| 44 | + {{/channels}} | ||
| 45 | + </ul> | ||
| 54 | </div> | 46 | </div> |
| 55 | - {{/ brandList}} | 47 | + <div class="second-level-brand"> |
| 48 | + {{# brandList}} | ||
| 49 | + <div class="brand-list bar-{{@index}}"> | ||
| 50 | + <div class="title-bar"> | ||
| 51 | + <h2 style="position: static;">{{title}}</h2> | ||
| 52 | + </div> | ||
| 53 | + {{# list}} | ||
| 54 | + <p> | ||
| 55 | + <a href="{{url}}">{{name}} | ||
| 56 | + {{# isHot}} | ||
| 57 | + <i class="icon-hot">HOT</i> | ||
| 58 | + {{/ isHot}} | ||
| 59 | + {{# isNew}} | ||
| 60 | + <i class="icon-new">NEW</i> | ||
| 61 | + {{/ isNew}} | ||
| 62 | + </a> | ||
| 63 | + </p> | ||
| 64 | + {{/ list}} | ||
| 65 | + </div> | ||
| 66 | + {{/ brandList}} | ||
| 67 | + | ||
| 68 | + {{# brandWall}} | ||
| 69 | + <div class="branding-wall bar-{{@index}}"> | ||
| 70 | + <a href="{{url}}"> | ||
| 71 | + <img class="lazy" data-original="{{img}}"></img> | ||
| 72 | + <div class="brand-name">{{brandName}}</div>> | ||
| 73 | + </a> | ||
| 74 | + </div> | ||
| 75 | + {{/ brandWall}} | ||
| 76 | + </div>> | ||
| 56 | </div> | 77 | </div> |
| 57 | 78 | ||
| 58 | 79 |
| @@ -14,6 +14,24 @@ | @@ -14,6 +14,24 @@ | ||
| 14 | </div> | 14 | </div> |
| 15 | </div> | 15 | </div> |
| 16 | 16 | ||
| 17 | +<div class="search-items"> | ||
| 18 | + <div class="hot-search"> | ||
| 19 | + <h3>热门搜索</h3> | ||
| 20 | + <ul class="hot clearfix"> | ||
| 21 | + {{# hot}} | ||
| 22 | + <li> | ||
| 23 | + <a href={{url}}>{{name}}</a> | ||
| 24 | + </li> | ||
| 25 | + {{/ hot}} | ||
| 26 | + </ul> | ||
| 27 | + </div> | ||
| 28 | + <div class="history-search"> | ||
| 29 | + <h3>历史搜索</h3> | ||
| 30 | + <ul class="history clearfix"></ul> | ||
| 31 | + </div> | ||
| 32 | + <button id="clear-history" class="clear-history hide">清空搜索历史</button> | ||
| 33 | +</div> | ||
| 34 | + | ||
| 17 | <script id="brands-data" type="text/tmpl"> | 35 | <script id="brands-data" type="text/tmpl"> |
| 18 | {{{brandList}}} | 36 | {{{brandList}}} |
| 19 | </script> | 37 | </script> |
-
Please register or login to post a comment