fe / YOHOBUYWAP · Commits

Go to a project

Authored by 阿达
Commit d80e3e3798307c07854913cd2dd5b8cb22cff96a 1 parent 5a46d025

brand 代码重新提交

Inline Side-by-side
Showing 2 changed files with 293 additions and 180 deletions
@@ -11,7 +11,7 @@ var $ = require('jquery'), @@ -11,7 +11,7 @@ var $ = require('jquery'),
11 lazyLoad = require('yoho.lazyload'); 11 lazyLoad = require('yoho.lazyload');
12 12
13 var ranToken = ' ??++ '; 13 var ranToken = ' ??++ ';
14 -var ranToken2 = ' ???+++ '; 14 +var ranToken2 = ' ???--- ';
15 15
16 var swiper, 16 var swiper,
17 $fixTitleBar, 17 $fixTitleBar,
@@ -25,6 +25,7 @@ var swiper, @@ -25,6 +25,7 @@ var swiper,
25 $homebuttom = $('.homebuttom'), 25 $homebuttom = $('.homebuttom'),
26 $genderNav = $('.genderNav'), 26 $genderNav = $('.genderNav'),
27 $newSearch = $('.newbrand-search'), 27 $newSearch = $('.newbrand-search'),
  28 + $netHistory = $('.net-history'),
28 $navBtn = $('.nav-home'), 29 $navBtn = $('.nav-home'),
29 hotBrandsSwiper; 30 hotBrandsSwiper;
30 31
@@ -37,7 +38,7 @@ var brandsData, @@ -37,7 +38,7 @@ var brandsData,
37 $keyword, 38 $keyword,
38 clearTextHammer; 39 clearTextHammer;
39 40
40 -var $history = $('.history'); 41 +var $history = $('.local-history');
41 var $searchPage = $('.search-brand-page'); 42 var $searchPage = $('.search-brand-page');
42 var $historySearch = $('.history-search'); 43 var $historySearch = $('.history-search');
43 var $hotSearch = $('.hot-search'); 44 var $hotSearch = $('.hot-search');
@@ -47,102 +48,126 @@ var $clearHistory = $('#clear-history'); @@ -47,102 +48,126 @@ var $clearHistory = $('#clear-history');
47 var chHammer; 48 var chHammer;
48 49
49 50
50 -loading.showLoadingMask(); 51 +function changeBackground() {
  52 + var $brandList = $('.brand-list').find('p');
51 53
52 -lazyLoad($('img.lazy'));  
53 -$('.yoho-header').css({  
54 - 'z-index': 2,  
55 - position: 'fixed',  
56 - top: 0  
57 -}); 54 + $brandList.on('touchstart', function() {
  55 + $brandList.css('background', '#fff');
  56 + $(this).css('background', '#eee');
  57 + }).on('touchend touchcancel', function() {
  58 + $(this).css('background', '#fff');
  59 + });
  60 +}
  61 +changeBackground();
58 62
59 -$homebuttom.css('top', '51px');  
60 -$homebuttom.css('position', 'fixed'); 63 +/**
  64 + * 增加单条记录
  65 + */
  66 +function addHistory(brandName) {
  67 + $.ajax({
  68 + type: 'GET',
  69 + url: '/brands/addBrandSearch',
  70 + data: 'brandName=' + brandName,
  71 + success: function(data) {
  72 + },
  73 + error: function() {
  74 + }
  75 + });
  76 +}
61 77
62 -$navBtn.on('touchstart', function() {  
63 - if ($homebuttom.hasClass('hide')) {  
64 - $genderNav.css('top', '54px');  
65 - $newSearch.css('margin-top', '0px');  
66 - $searchPage.css('margin-top', '0px');  
67 - $('.banner-top').css('margin-top', '0px'); 78 +//比较大小
  79 +function sequence(a, b) {
  80 + if (a.time > b.time) {
  81 + return 1;
  82 + } else if (a.time < b.time) {
  83 + return -1;
68 } else { 84 } else {
69 - $genderNav.css('top', '104px');  
70 - $newSearch.css('margin-top', '50px');  
71 - $searchPage.css('margin-top', '50px');  
72 - $('.banner-top').css('margin-top', '50px'); 85 + return 0;
73 } 86 }
74 -}); 87 +}
75 88
  89 +function searchInput() {
  90 + if ($keyword.val().length) {
  91 + $icon.css('color', '#444');
  92 +
  93 + // $(this).closest('.search-box').css('width', '11.25rem');
  94 + $searchAction.show().find('.clear-text').show();
  95 + } else {
  96 + $icon.css('color', '#b2b2b2');
  97 +
  98 + // $(this).closest('.search-box').css('width', '12.5rem');
  99 + $searchAction.find('.clear-text').hide();
76 100
77 -(function() {  
78 - if ($('.banner-top').length > 0) {  
79 - $('.hot-brands').css('padding-top', '0');  
80 } 101 }
  102 + searchResult();
  103 +}
81 104
82 - $('.hide-when-loading').show();  
83 - loading.hideLoadingMask(); 105 +//绑定提交前的存local操作
  106 +function bindWirteLocal($brandList, list) {
  107 + $brandList.on('click', 'p , li', function(e) {
  108 + var brandName, brandId, brandDomain, url;
  109 + var a = $(this).find('a');
  110 + var myDate = new Date();
  111 + var query = a.attr('brandName') + ranToken2 + myDate.getTime(),
  112 + historys;
84 113
85 - //banner滑动  
86 - swiper = new Swiper('.swiper-container', {  
87 - lazyLoading: true,  
88 - loop: true,  
89 - autoplay: 3000,  
90 - pagination: '.swiper-pagination .pagination-inner'  
91 - }); 114 + $keyword = $('#keyword');
92 115
93 - //热门品牌滑动  
94 - hotBrandsSwiper = new Swiper('.brands-swiper', {  
95 - grabCursor: true,  
96 - slidesPerView: 'auto',  
97 - wrapperClass: 'brands-list',  
98 - slideElement: 'li'  
99 - });  
100 -})(); 116 + brandName = a.attr('brandName');
101 117
102 -$fixTitleBar = $('<div class="title-bar fixed-title-bar"><h2></h2></div>');  
103 -$fixTitleBar.css({  
104 - position: 'fixed',  
105 - top: brandSwipe  
106 -}).hide();  
107 -minBrandListTop = brandSwipe + $('.hot-brands').outerHeight() + $('.banner-top').outerHeight();  
108 -$brandList.last().append($fixTitleBar); 118 + brandId = a.attr('brandId');
109 119
110 -function scrollHandler() {  
111 - var scrTop = $(window).scrollTop(); 120 + brandDomain = a.attr('brandDomain');
112 121
113 - if ($brandList.eq(0).offset().top < minBrandListTop) {  
114 - $fixTitleBar.hide();  
115 - } 122 + url = a.attr('href');
116 123
117 - $brandList.each(function() {  
118 - var offTop = $(this).offset().top - brandSwipe; 124 + e.preventDefault();
119 125
120 - if (scrTop >= offTop) {  
121 - $fixTitleBar.css({  
122 - display: 'block'  
123 - }).find('h2').html($(this).find('.title-bar').text()); 126 + if ($netHistory.length > 0) {
  127 + addHistory(brandName);
  128 +
  129 + if (list) {
  130 + location.href = url;
  131 + return;
  132 + }
  133 +
  134 + $keyword.val(brandName);
  135 + searchInput();
  136 + return;
124 } 137 }
125 138
126 - });  
127 -} 139 + if (localStorage) {
128 140
129 -//srcoll to load more  
130 -$(window).scroll(function() {  
131 - window.requestAnimationFrame(scrollHandler);  
132 -}); 141 + historys = localStorage.getItem('historys-brand');
133 142
  143 + historys = historys ? historys : '';
134 144
135 -function changeBackground() {  
136 - var $brandList = $('.brand-list').find('p'); 145 + if (historys.indexOf(ranToken + query + ranToken) > -1) {
137 146
138 - $brandList.on('touchstart', function() {  
139 - $brandList.css('background', '#fff');  
140 - $(this).css('background', '#eee');  
141 - }).on('touchend touchcancel', function() {  
142 - $(this).css('background', '#fff'); 147 +
  148 + $keyword.val(brandName);
  149 + searchInput();
  150 + return;
  151 + }
  152 +
  153 + if (historys === '') {
  154 + query = ranToken + query;
  155 + }
  156 +
  157 + historys += query + ranToken;
  158 +
  159 + localStorage.setItem('historys-brand', historys);
  160 + }
  161 +
  162 + if (list) {
  163 + location.href = url;
  164 + return;
  165 + }
  166 +
  167 + $keyword.val(brandName);
  168 + searchInput();
143 }); 169 });
144 } 170 }
145 -changeBackground();  
146 171
147 function searchResult() { 172 function searchResult() {
148 var keyword = ($keyword.val() + '').toLowerCase(); 173 var keyword = ($keyword.val() + '').toLowerCase();
@@ -202,15 +227,108 @@ function searchResult() { @@ -202,15 +227,108 @@ function searchResult() {
202 // 插入 dom，绑定事件 227 // 插入 dom，绑定事件
203 $('.search-result').html(html); 228 $('.search-result').html(html);
204 changeBackground(); 229 changeBackground();
205 - bindWirteLocal($('.brand-list')); 230 + bindWirteLocal($('.brand-list'), true);
  231 +}
  232 +
  233 +if ($('.brand-index-page').length > 0) {
  234 + loading.showLoadingMask();
206 } 235 }
207 236
  237 +
  238 +lazyLoad($('img.lazy'));
  239 +$('.yoho-header').css({
  240 + 'z-index': 2,
  241 + position: 'fixed',
  242 + top: 0
  243 +});
  244 +
  245 +$homebuttom.css('top', '47px');
  246 +$homebuttom.css('position', 'fixed');
  247 +
  248 +$navBtn.on('touchstart', function() {
  249 + if ($homebuttom.hasClass('hide')) {
  250 + $genderNav.css('top', '47px');
  251 + $newSearch.css('margin-top', '0px');
  252 + $searchPage.css('margin-top', '0px');
  253 + $('.banner-top').css('margin-top', '0px');
  254 + } else {
  255 + $genderNav.css('top', '97px');
  256 + $newSearch.css('margin-top', '47px');
  257 + $searchPage.css('margin-top', '47px');
  258 + $('.banner-top').css('margin-top', '47px');
  259 + }
  260 +});
  261 +
  262 +if ($('.brand-index-page').length > 0) {
  263 + (function() {
  264 + if ($('.banner-top').length > 0) {
  265 + $('.hot-brands').css('padding-top', '0');
  266 + }
  267 +
  268 + $('.hide-when-loading').show();
  269 + loading.hideLoadingMask();
  270 +
  271 + //banner滑动
  272 + swiper = new Swiper('.swiper-container', {
  273 + lazyLoading: true,
  274 + loop: true,
  275 + autoplay: 3000,
  276 + pagination: '.swiper-pagination .pagination-inner'
  277 + });
  278 +
  279 + //热门品牌滑动
  280 + hotBrandsSwiper = new Swiper('.brands-swiper', {
  281 + grabCursor: true,
  282 + slidesPerView: 'auto',
  283 + wrapperClass: 'brands-list',
  284 + slideElement: 'li'
  285 + });
  286 + })();
  287 +}
  288 +
  289 +$fixTitleBar = $('<div class="title-bar fixed-title-bar"><h2></h2></div>');
  290 +$fixTitleBar.css({
  291 + position: 'fixed',
  292 + top: brandSwipe
  293 +}).hide();
  294 +minBrandListTop = brandSwipe + $('.hot-brands').outerHeight() + $('.banner-top').outerHeight();
  295 +$brandList.last().append($fixTitleBar);
  296 +
  297 +function scrollHandler() {
  298 + var scrTop = $(window).scrollTop();
  299 +
  300 + //if ($brandList.eq(0).offset().top < minBrandListTop) {
  301 + // $fixTitleBar.hide();
  302 + //}
  303 +
  304 + $brandList.each(function() {
  305 + var offTop = $(this).offset().top - brandSwipe;
  306 +
  307 + if (scrTop >= offTop) {
  308 + $fixTitleBar.css({
  309 + display: 'block'
  310 + }).find('h2').html($(this).find('.title-bar').text());
  311 + }
  312 +
  313 + });
  314 +}
  315 +
  316 +if ($('.brand-index-page').length > 0) {
  317 + /**
  318 + * srcoll to load more
  319 + */
  320 + $(window).scroll(function() {
  321 + window.requestAnimationFrame(scrollHandler);
  322 + });
  323 +}
  324 +
  325 +
208 if ($('.history-search').length > 0) { 326 if ($('.history-search').length > 0) {
209 - bindWirteLocal($('.history-search')); 327 + bindWirteLocal($('.history-search'), false);
210 } 328 }
211 329
212 if ($('.hot-search').length > 0) { 330 if ($('.hot-search').length > 0) {
213 - bindWirteLocal($('.hot-search')); 331 + bindWirteLocal($('.hot-search'), false);
214 } 332 }
215 333
216 if ($('.brand-search-page').length > 0) { 334 if ($('.brand-search-page').length > 0) {
@@ -241,22 +359,6 @@ if ($('.brand-search-page').length > 0) { @@ -241,22 +359,6 @@ if ($('.brand-search-page').length > 0) {
241 359
242 } 360 }
243 361
244 -function searchInput() {  
245 - if ($keyword.val().length) {  
246 - $icon.css('color', '#444');  
247 -  
248 - // $(this).closest('.search-box').css('width', '11.25rem');  
249 - $searchAction.show().find('.clear-text').show();  
250 - } else {  
251 - $icon.css('color', '#b2b2b2');  
252 -  
253 - // $(this).closest('.search-box').css('width', '12.5rem');  
254 - $searchAction.find('.clear-text').hide();  
255 -  
256 - }  
257 - searchResult();  
258 -}  
259 -  
260 if ($genderItem.length > 0) { 362 if ($genderItem.length > 0) {
261 $genderItem.on('touchstart', function() { 363 $genderItem.on('touchstart', function() {
262 var index = $(this).data('id') + 1; 364 var index = $(this).data('id') + 1;
@@ -318,21 +420,6 @@ function removeHistory() { @@ -318,21 +420,6 @@ function removeHistory() {
318 }); 420 });
319 } 421 }
320 422
321 -/**  
322 - * 增加单条记录  
323 - */  
324 -function addHistory(brandName, brandId, brandDomain) {  
325 - $.ajax({  
326 - type: 'GET',  
327 - url: '/brands/addBrandSearch',  
328 - data: 'brandName=' + brandName + '&brandId=' + brandId + '&brandDomain=' + brandDomain,  
329 - success: function(data) {  
330 - },  
331 - error: function() {  
332 - }  
333 - });  
334 -}  
335 -  
336 //初始化历史搜索的内容 423 //初始化历史搜索的内容
337 424
338 if ($('.brand-search-page').length > 0) { 425 if ($('.brand-search-page').length > 0) {
@@ -359,14 +446,32 @@ if ($('.brand-search-page').length > 0) { @@ -359,14 +446,32 @@ if ($('.brand-search-page').length > 0) {
359 history, 446 history,
360 historys, i, 447 historys, i,
361 localHistory, 448 localHistory,
362 - brand,url; 449 + brand,data,
  450 + time,netArr,dict,dictc,localArr,
  451 + combinArr,key,date,temp;
  452 +
  453 + localArr = [];
  454 + combinArr = [];
  455 + netArr = [];
  456 +
  457 + $netHistory.find('li').each(function() {
  458 +
  459 + brand = $(this).find('a').attr('brandName');
  460 + time = $(this).find('a').attr('collectTime');
  461 + dict = {
  462 + brand: brand,
  463 + time: time
  464 + },dictc,dict;
  465 + netArr.push(dict);
  466 + });
  467 +
363 468
364 if (localStorage) { 469 if (localStorage) {
365 historys = localStorage.getItem('historys-brand'); 470 historys = localStorage.getItem('historys-brand');
366 471
367 if (historys && historys.length > 0) { 472 if (historys && historys.length > 0) {
368 historys = historys.split(ranToken); 473 historys = historys.split(ranToken);
369 - for (i = (historys.length >= 10) ? 10 : historys.length; i > 0; i--) { 474 + for (i = historys.length; i > 0; i--) {
370 history = historys[i - 1]; 475 history = historys[i - 1];
371 476
372 if (history === '') { 477 if (history === '') {
@@ -375,71 +480,83 @@ if ($('.brand-search-page').length > 0) { @@ -375,71 +480,83 @@ if ($('.brand-search-page').length > 0) {
375 localHistory = history.split(ranToken2); 480 localHistory = history.split(ranToken2);
376 481
377 brand = localHistory[0]; 482 brand = localHistory[0];
378 - url = localHistory[1]; 483 + time = localHistory[1];
379 484
380 - html += '<li><a href="' + url + '" brandName = "' + brand +  
381 - '">' + brand + '</li>';  
382 - $historySearch.removeClass('hide');  
383 - } 485 + dict = {
  486 + brand: brand,
  487 + time: time
  488 + };
384 489
385 - $history.html(html);  
386 - $clearHistory.removeClass('hide'); 490 + localArr.push(dict);
387 491
388 - $hotSearch.removeClass('hide');  
389 - window.rePosFooter(); 492 + }
390 } 493 }
391 } 494 }
392 - }());  
393 495
394 -} 496 + if (localArr.length === 0 && netArr.length === 0) {
  497 + $historySearch.addClass('hide');
  498 + return;
  499 + }
395 500
396 -//绑定提交前的存local操作  
397 -function bindWirteLocal($brandList) {  
398 - $brandList.on('click', 'p , li', function(e) {  
399 - $keyword = $('#keyword');  
400 - var brandName, brandId, brandDomain, url;  
401 - var a = $(this).find('a');  
402 - var query = a.attr('brandName') + ranToken2 + a.attr('href'),  
403 - historys;  
404 501
405 - brandName = a.attr('brandName'); 502 + date = {};
  503 + temp = {};
  504 + if (localArr.length > 0) {
  505 + for (dictc in localArr) {
  506 + if (localArr.hasOwnProperty(dictc)) {
  507 + temp = localArr[dictc];
  508 + if (!date[temp.brand] || date[temp.brand] < temp.time) {
  509 + date[temp.brand] = temp.time;
  510 + }
  511 + }
  512 + }
  513 + }
406 514
407 - brandId = a.attr('brandId'); 515 + if (netArr.length > 0) {
  516 + for (dict in netArr) {
  517 + if (netArr.hasOwnProperty(dict)) {
  518 + temp = netArr[dict];
  519 + if (!date[temp.brand] || date[temp.brand] < temp.time) {
  520 + date[temp.brand] = temp.time;
  521 + }
  522 + }
  523 + }
  524 + }
408 525
409 - brandDomain = a.attr('brandDomain'); 526 + data = {};
  527 + for (key in date) {
  528 + if (date.hasOwnProperty(key)) {
  529 + data = {
  530 + brand: key,
  531 + time: date[key]
  532 + };
  533 + combinArr.push(data);
  534 + }
  535 + }
410 536
411 - url = a.attr('href'); 537 + combinArr.sort(sequence);
412 538
413 - e.preventDefault(); 539 + if (combinArr.length > 0) {
  540 + for (i = combinArr.length - 1; i >= ((combinArr.length > 10) ? (combinArr.length - 10) : 0); i--) {
414 541
415 - if ($('.net-history').length > 0) {  
416 - addHistory(brandName, brandId, brandDomain);  
417 - $keyword.val(brandName);  
418 - searchInput();  
419 - return;  
420 - } 542 + brand = combinArr[i].brand;
  543 + time = combinArr[i].time;
421 544
422 - if (localStorage) {  
423 - historys = localStorage.getItem('historys-brand'); 545 + html += '<li><a brandName = "' + brand +
  546 + '">' + brand + '</li>';
  547 + $history.removeClass('hide');
424 548
425 - historys = historys ? historys : ''; 549 + $history.html(html);
  550 + $clearHistory.removeClass('hide');
426 551
427 - if (historys.indexOf(ranToken + query + ranToken) > -1) {  
428 - $keyword.val(brandName);  
429 - searchInput();  
430 - return;  
431 - } 552 + $hotSearch.removeClass('hide');
  553 + window.rePosFooter();
432 554
433 - if (historys === '') {  
434 - query = ranToken + query;  
435 } 555 }
436 -  
437 - historys += query + ranToken;  
438 -  
439 - localStorage.setItem('historys-brand', historys); 556 + } else {
  557 + $history.addClass('hide');
440 } 558 }
441 559
442 - $keyword.val(brandName);  
443 - searchInput();  
444 - });  
445 -}  
  560 + }());
  561 +
  562 +}
@@ -17,35 +17,31 @@ @@ -17,35 +17,31 @@
17 <div class="search-brand-page"> 17 <div class="search-brand-page">
18 <div class="search-items"> 18 <div class="search-items">
19 {{#if history}} 19 {{#if history}}
20 - <div class="net-history">  
21 - <div class="history-search net-search">  
22 - <h3><span class="iconfont">&#xe64a;</span>最近搜索  
23 - <button id="clear-history" class="clear-icon iconfont">&#xe64c;</button>  
24 - </h3>  
25 - <ul class="history clearfix">  
26 - {{# history}}  
27 - <li>  
28 - <a href="{{url}}" brandName="{{name}}" brandId="{{brandId}}" brandDomain="{{brandDomain}}">{{name}}</a>  
29 - </li>  
30 - {{/ history}}  
31 - </ul>  
32 - </div>  
33 - </div>  
34 - {{else}}  
35 - <div class="history-search local-search hide">  
36 - <h3><span class="iconfont">&#xe64a;</span>最近搜索  
37 - <button id="clear-history" class="clear-icon iconfont hide">&#xe64c;</button>  
38 - </h3>  
39 - <ul class="history clearfix">  
40 - </ul> 20 + <div class="net-history hide">
  21 + <div class="history-search net-search hide">
  22 + <ul class="history clearfix net">
  23 + {{# history}}
  24 + <li>
  25 + <a href="{{url}}" brandName="{{name}}" collectTime="{{searchTime}}">{{name}}</a>
  26 + </li>
  27 + {{/ history}}
  28 + </ul>
  29 + </div>
41 </div> 30 </div>
42 {{/if}} 31 {{/if}}
  32 + <div class="history-search local-search">
  33 + <h3><span class="iconfont">&#xe64a;</span>最近搜索
  34 + <button id="clear-history" class="clear-icon iconfont">&#xe64c;</button>
  35 + </h3>
  36 + <ul class="history clearfix local-history">
  37 + </ul>
  38 + </div>
43 <div class="hot-search"> 39 <div class="hot-search">
44 <h3><span class="iconfont">&#xe64b;</span>热门搜索</h3> 40 <h3><span class="iconfont">&#xe64b;</span>热门搜索</h3>
45 <ul class="hot clearfix"> 41 <ul class="hot clearfix">
46 {{# hot}} 42 {{# hot}}
47 <li> 43 <li>
48 - <a href="{{url}}" brandName="{{name}}" brandId="{{brandId}}" brandDomain="{{brandDomain}}">{{name}}</a> 44 + <a href="{{url}}" brandName="{{name}}"">{{name}}</a>
49 </li> 45 </li>
50 {{/ hot}} 46 {{/ hot}}
51 </ul> 47 </ul>