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'),
lazyLoad = require('yoho.lazyload');
var ranToken = ' ??++ ';
var ranToken2 = ' ???+++ ';
var ranToken2 = ' ???--- ';
var swiper,
$fixTitleBar,
... ... @@ -25,6 +25,7 @@ var swiper,
$homebuttom = $('.homebuttom'),
$genderNav = $('.genderNav'),
$newSearch = $('.newbrand-search'),
$netHistory = $('.net-history'),
$navBtn = $('.nav-home'),
hotBrandsSwiper;
... ... @@ -37,7 +38,7 @@ var brandsData,
$keyword,
clearTextHammer;
var $history = $('.history');
var $history = $('.local-history');
var $searchPage = $('.search-brand-page');
var $historySearch = $('.history-search');
var $hotSearch = $('.hot-search');
... ... @@ -47,102 +48,126 @@ var $clearHistory = $('#clear-history');
var chHammer;
loading.showLoadingMask();
function changeBackground() {
var $brandList = $('.brand-list').find('p');
lazyLoad($('img.lazy'));
$('.yoho-header').css({
'z-index': 2,
position: 'fixed',
top: 0
});
$brandList.on('touchstart', function() {
$brandList.css('background', '#fff');
$(this).css('background', '#eee');
}).on('touchend touchcancel', function() {
$(this).css('background', '#fff');
});
}
changeBackground();
$homebuttom.css('top', '51px');
$homebuttom.css('position', 'fixed');
/**
* 增加单条记录
*/
function addHistory(brandName) {
$.ajax({
type: 'GET',
url: '/brands/addBrandSearch',
data: 'brandName=' + brandName,
success: function(data) {
},
error: function() {
}
});
}
$navBtn.on('touchstart', function() {
if ($homebuttom.hasClass('hide')) {
$genderNav.css('top', '54px');
$newSearch.css('margin-top', '0px');
$searchPage.css('margin-top', '0px');
$('.banner-top').css('margin-top', '0px');
//比较大小
function sequence(a, b) {
if (a.time > b.time) {
return 1;
} else if (a.time < b.time) {
return -1;
} else {
$genderNav.css('top', '104px');
$newSearch.css('margin-top', '50px');
$searchPage.css('margin-top', '50px');
$('.banner-top').css('margin-top', '50px');
return 0;
}
});
}
function searchInput() {
if ($keyword.val().length) {
$icon.css('color', '#444');
// $(this).closest('.search-box').css('width', '11.25rem');
$searchAction.show().find('.clear-text').show();
} else {
$icon.css('color', '#b2b2b2');
// $(this).closest('.search-box').css('width', '12.5rem');
$searchAction.find('.clear-text').hide();
(function() {
if ($('.banner-top').length > 0) {
$('.hot-brands').css('padding-top', '0');
}
searchResult();
}
$('.hide-when-loading').show();
loading.hideLoadingMask();
//绑定提交前的存local操作
function bindWirteLocal($brandList, list) {
$brandList.on('click', 'p , li', function(e) {
var brandName, brandId, brandDomain, url;
var a = $(this).find('a');
var myDate = new Date();
var query = a.attr('brandName') + ranToken2 + myDate.getTime(),
historys;
//banner滑动
swiper = new Swiper('.swiper-container', {
lazyLoading: true,
loop: true,
autoplay: 3000,
pagination: '.swiper-pagination .pagination-inner'
});
$keyword = $('#keyword');
//热门品牌滑动
hotBrandsSwiper = new Swiper('.brands-swiper', {
grabCursor: true,
slidesPerView: 'auto',
wrapperClass: 'brands-list',
slideElement: 'li'
});
})();
brandName = a.attr('brandName');
$fixTitleBar = $('<div class="title-bar fixed-title-bar"><h2></h2></div>');
$fixTitleBar.css({
position: 'fixed',
top: brandSwipe
}).hide();
minBrandListTop = brandSwipe + $('.hot-brands').outerHeight() + $('.banner-top').outerHeight();
$brandList.last().append($fixTitleBar);
brandId = a.attr('brandId');
function scrollHandler() {
var scrTop = $(window).scrollTop();
brandDomain = a.attr('brandDomain');
if ($brandList.eq(0).offset().top < minBrandListTop) {
$fixTitleBar.hide();
}
url = a.attr('href');
$brandList.each(function() {
var offTop = $(this).offset().top - brandSwipe;
e.preventDefault();
if (scrTop >= offTop) {
$fixTitleBar.css({
display: 'block'
}).find('h2').html($(this).find('.title-bar').text());
if ($netHistory.length > 0) {
addHistory(brandName);
if (list) {
location.href = url;
return;
}
$keyword.val(brandName);
searchInput();
return;
}
});
}
if (localStorage) {
//srcoll to load more
$(window).scroll(function() {
window.requestAnimationFrame(scrollHandler);
});
historys = localStorage.getItem('historys-brand');
historys = historys ? historys : '';
function changeBackground() {
var $brandList = $('.brand-list').find('p');
if (historys.indexOf(ranToken + query + ranToken) > -1) {
$brandList.on('touchstart', function() {
$brandList.css('background', '#fff');
$(this).css('background', '#eee');
}).on('touchend touchcancel', function() {
$(this).css('background', '#fff');
$keyword.val(brandName);
searchInput();
return;
}
if (historys === '') {
query = ranToken + query;
}
historys += query + ranToken;
localStorage.setItem('historys-brand', historys);
}
if (list) {
location.href = url;
return;
}
$keyword.val(brandName);
searchInput();
});
}
changeBackground();
function searchResult() {
var keyword = ($keyword.val() + '').toLowerCase();
... ... @@ -202,15 +227,108 @@ function searchResult() {
// 插入 dom，绑定事件
$('.search-result').html(html);
changeBackground();
bindWirteLocal($('.brand-list'));
bindWirteLocal($('.brand-list'), true);
}
if ($('.brand-index-page').length > 0) {
loading.showLoadingMask();
}
lazyLoad($('img.lazy'));
$('.yoho-header').css({
'z-index': 2,
position: 'fixed',
top: 0
});
$homebuttom.css('top', '47px');
$homebuttom.css('position', 'fixed');
$navBtn.on('touchstart', function() {
if ($homebuttom.hasClass('hide')) {
$genderNav.css('top', '47px');
$newSearch.css('margin-top', '0px');
$searchPage.css('margin-top', '0px');
$('.banner-top').css('margin-top', '0px');
} else {
$genderNav.css('top', '97px');
$newSearch.css('margin-top', '47px');
$searchPage.css('margin-top', '47px');
$('.banner-top').css('margin-top', '47px');
}
});
if ($('.brand-index-page').length > 0) {
(function() {
if ($('.banner-top').length > 0) {
$('.hot-brands').css('padding-top', '0');
}
$('.hide-when-loading').show();
loading.hideLoadingMask();
//banner滑动
swiper = new Swiper('.swiper-container', {
lazyLoading: true,
loop: true,
autoplay: 3000,
pagination: '.swiper-pagination .pagination-inner'
});
//热门品牌滑动
hotBrandsSwiper = new Swiper('.brands-swiper', {
grabCursor: true,
slidesPerView: 'auto',
wrapperClass: 'brands-list',
slideElement: 'li'
});
})();
}
$fixTitleBar = $('<div class="title-bar fixed-title-bar"><h2></h2></div>');
$fixTitleBar.css({
position: 'fixed',
top: brandSwipe
}).hide();
minBrandListTop = brandSwipe + $('.hot-brands').outerHeight() + $('.banner-top').outerHeight();
$brandList.last().append($fixTitleBar);
function scrollHandler() {
var scrTop = $(window).scrollTop();
//if ($brandList.eq(0).offset().top < minBrandListTop) {
// $fixTitleBar.hide();
//}
$brandList.each(function() {
var offTop = $(this).offset().top - brandSwipe;
if (scrTop >= offTop) {
$fixTitleBar.css({
display: 'block'
}).find('h2').html($(this).find('.title-bar').text());
}
});
}
if ($('.brand-index-page').length > 0) {
/**
* srcoll to load more
*/
$(window).scroll(function() {
window.requestAnimationFrame(scrollHandler);
});
}
if ($('.history-search').length > 0) {
bindWirteLocal($('.history-search'));
bindWirteLocal($('.history-search'), false);
}
if ($('.hot-search').length > 0) {
bindWirteLocal($('.hot-search'));
bindWirteLocal($('.hot-search'), false);
}
if ($('.brand-search-page').length > 0) {
... ... @@ -241,22 +359,6 @@ if ($('.brand-search-page').length > 0) {
}
function searchInput() {
if ($keyword.val().length) {
$icon.css('color', '#444');
// $(this).closest('.search-box').css('width', '11.25rem');
$searchAction.show().find('.clear-text').show();
} else {
$icon.css('color', '#b2b2b2');
// $(this).closest('.search-box').css('width', '12.5rem');
$searchAction.find('.clear-text').hide();
}
searchResult();
}
if ($genderItem.length > 0) {
$genderItem.on('touchstart', function() {
var index = $(this).data('id') + 1;
... ... @@ -318,21 +420,6 @@ function removeHistory() {
});
}
/**
* 增加单条记录
*/
function addHistory(brandName, brandId, brandDomain) {
$.ajax({
type: 'GET',
url: '/brands/addBrandSearch',
data: 'brandName=' + brandName + '&brandId=' + brandId + '&brandDomain=' + brandDomain,
success: function(data) {
},
error: function() {
}
});
}
//初始化历史搜索的内容
if ($('.brand-search-page').length > 0) {
... ... @@ -359,14 +446,32 @@ if ($('.brand-search-page').length > 0) {
history,
historys, i,
localHistory,
brand,url;
brand,data,
time,netArr,dict,dictc,localArr,
combinArr,key,date,temp;
localArr = [];
combinArr = [];
netArr = [];
$netHistory.find('li').each(function() {
brand = $(this).find('a').attr('brandName');
time = $(this).find('a').attr('collectTime');
dict = {
brand: brand,
time: time
},dictc,dict;
netArr.push(dict);
});
if (localStorage) {
historys = localStorage.getItem('historys-brand');
if (historys && historys.length > 0) {
historys = historys.split(ranToken);
for (i = (historys.length >= 10) ? 10 : historys.length; i > 0; i--) {
for (i = historys.length; i > 0; i--) {
history = historys[i - 1];
if (history === '') {
... ... @@ -375,71 +480,83 @@ if ($('.brand-search-page').length > 0) {
localHistory = history.split(ranToken2);
brand = localHistory[0];
url = localHistory[1];
time = localHistory[1];
html += '<li><a href="' + url + '" brandName = "' + brand +
'">' + brand + '</li>';
$historySearch.removeClass('hide');
}
dict = {
brand: brand,
time: time
};
$history.html(html);
$clearHistory.removeClass('hide');
localArr.push(dict);
$hotSearch.removeClass('hide');
window.rePosFooter();
}
}
}
}());
}
if (localArr.length === 0 && netArr.length === 0) {
$historySearch.addClass('hide');
return;
}
//绑定提交前的存local操作
function bindWirteLocal($brandList) {
$brandList.on('click', 'p , li', function(e) {
$keyword = $('#keyword');
var brandName, brandId, brandDomain, url;
var a = $(this).find('a');
var query = a.attr('brandName') + ranToken2 + a.attr('href'),
historys;
brandName = a.attr('brandName');
date = {};
temp = {};
if (localArr.length > 0) {
for (dictc in localArr) {
if (localArr.hasOwnProperty(dictc)) {
temp = localArr[dictc];
if (!date[temp.brand] || date[temp.brand] < temp.time) {
date[temp.brand] = temp.time;
}
}
}
}
brandId = a.attr('brandId');
if (netArr.length > 0) {
for (dict in netArr) {
if (netArr.hasOwnProperty(dict)) {
temp = netArr[dict];
if (!date[temp.brand] || date[temp.brand] < temp.time) {
date[temp.brand] = temp.time;
}
}
}
}
brandDomain = a.attr('brandDomain');
data = {};
for (key in date) {
if (date.hasOwnProperty(key)) {
data = {
brand: key,
time: date[key]
};
combinArr.push(data);
}
}
url = a.attr('href');
combinArr.sort(sequence);
e.preventDefault();
if (combinArr.length > 0) {
for (i = combinArr.length - 1; i >= ((combinArr.length > 10) ? (combinArr.length - 10) : 0); i--) {
if ($('.net-history').length > 0) {
addHistory(brandName, brandId, brandDomain);
$keyword.val(brandName);
searchInput();
return;
}
brand = combinArr[i].brand;
time = combinArr[i].time;
if (localStorage) {
historys = localStorage.getItem('historys-brand');
html += '<li><a brandName = "' + brand +
'">' + brand + '</li>';
$history.removeClass('hide');
historys = historys ? historys : '';
$history.html(html);
$clearHistory.removeClass('hide');
if (historys.indexOf(ranToken + query + ranToken) > -1) {
$keyword.val(brandName);
searchInput();
return;
}
$hotSearch.removeClass('hide');
window.rePosFooter();
if (historys === '') {
query = ranToken + query;
}
historys += query + ranToken;
localStorage.setItem('historys-brand', historys);
} else {
$history.addClass('hide');
}
$keyword.val(brandName);
searchInput();
});
}
\ No newline at end of file
}());
}
... ...
... ... @@ -17,35 +17,31 @@
<div class="search-brand-page">
<div class="search-items">
{{#if history}}
<div class="net-history">
<div class="history-search net-search">
<h3><span class="iconfont">&#xe64a;</span>最近搜索
<button id="clear-history" class="clear-icon iconfont">&#xe64c;</button>
</h3>
<ul class="history clearfix">
{{# history}}
<li>
<a href="{{url}}" brandName="{{name}}" brandId="{{brandId}}" brandDomain="{{brandDomain}}">{{name}}</a>
</li>
{{/ history}}
</ul>
</div>
</div>
{{else}}
<div class="history-search local-search hide">
<h3><span class="iconfont">&#xe64a;</span>最近搜索
<button id="clear-history" class="clear-icon iconfont hide">&#xe64c;</button>
</h3>
<ul class="history clearfix">
</ul>
<div class="net-history hide">
<div class="history-search net-search hide">
<ul class="history clearfix net">
{{# history}}
<li>
<a href="{{url}}" brandName="{{name}}" collectTime="{{searchTime}}">{{name}}</a>
</li>
{{/ history}}
</ul>
</div>
</div>
{{/if}}
<div class="history-search local-search">
<h3><span class="iconfont">&#xe64a;</span>最近搜索
<button id="clear-history" class="clear-icon iconfont">&#xe64c;</button>
</h3>
<ul class="history clearfix local-history">
</ul>
</div>
<div class="hot-search">
<h3><span class="iconfont">&#xe64b;</span>热门搜索</h3>
<ul class="hot clearfix">
{{# hot}}
<li>
<a href="{{url}}" brandName="{{name}}" brandId="{{brandId}}" brandDomain="{{brandDomain}}">{{name}}</a>
<a href="{{url}}" brandName="{{name}}"">{{name}}</a>
</li>
{{/ hot}}
</ul>
... ...