|
...
|
...
|
@@ -3,64 +3,77 @@ |
|
|
|
* @author: liangzhifeng<zhifeng.liang@yoho.cn>
|
|
|
|
* @date: 2015/10/23
|
|
|
|
*/
|
|
|
|
require('../../scss/channel/_brand.css');
|
|
|
|
|
|
|
|
var $ = require('yoho-jquery'),
|
|
|
|
Hammer = require('yoho-hammer'),
|
|
|
|
Hammer = require('../common/toy-hammer'),
|
|
|
|
Swiper = require('yoho-swiper'),
|
|
|
|
loading = require('../plugin/loading'),
|
|
|
|
lazyLoad = require('yoho-jquery-lazyload');
|
|
|
|
|
|
|
|
var ranToken = ' ??++ ';
|
|
|
|
var ranToken2 = ' ???--- ';
|
|
|
|
|
|
|
|
var swiper,
|
|
|
|
$fixTitleBar,
|
|
|
|
$brandList = $('.brand-list'),
|
|
|
|
var $brandList,
|
|
|
|
$newBrandWall,
|
|
|
|
$recommandBrandWall,
|
|
|
|
$icon = $('.search-icon'),
|
|
|
|
$genderItem = $('.genderNav li'),
|
|
|
|
$brandItem = $('.brandNav li'),
|
|
|
|
$newBrandWall = $('.new-brand-wall'),
|
|
|
|
$recommandBrandWall = $('.recommand-brand-wall'),
|
|
|
|
$searchAction = $('.search-action'),
|
|
|
|
$homebuttom = $('.homebuttom'),
|
|
|
|
$genderNav = $('.genderNav'),
|
|
|
|
$newSearch = $('.newbrand-search'),
|
|
|
|
$netHistory = $('.net-history'),
|
|
|
|
$navBtn = $('.nav-home'),
|
|
|
|
hotBrandsSwiper;
|
|
|
|
|
|
|
|
var searchH = $('.newbrand-search').outerHeight(),
|
|
|
|
headerH = $('.yoho-header').outerHeight(),
|
|
|
|
brandSwipe = parseInt(searchH) + parseInt(headerH) - 1,
|
|
|
|
minBrandListTop;
|
|
|
|
$searchResult = $('.search-result'),
|
|
|
|
$navBtn = $('.nav-home');
|
|
|
|
|
|
|
|
var brandsData,
|
|
|
|
$keyword = $('#keyword'),
|
|
|
|
clearTextHammer;
|
|
|
|
$keyword = $('#keyword');
|
|
|
|
|
|
|
|
var $history = $('.local-history');
|
|
|
|
var $searchPage = $('.search-brand-page');
|
|
|
|
var $historySearch = $('.history-search');
|
|
|
|
var $hotSearch = $('.hot-search');
|
|
|
|
|
|
|
|
var $clearHistory = $('#clear-history');
|
|
|
|
|
|
|
|
var chHammer;
|
|
|
|
var isSearchPage = $('.brand-search-page').length > 0;
|
|
|
|
|
|
|
|
require('../common');
|
|
|
|
require('../footer');
|
|
|
|
|
|
|
|
function getBrandList() {
|
|
|
|
var listHbs = require('channel/brandlist.hbs');
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
url: '/brands/getBrandList',
|
|
|
|
data: {
|
|
|
|
channel: window.queryString.channel
|
|
|
|
},
|
|
|
|
success: function(data) {
|
|
|
|
$('#placeholder-brandlist').replaceWith(listHbs(data));
|
|
|
|
|
|
|
|
lazyLoad($('img.lazy'));
|
|
|
|
|
|
|
|
// 改变背景色
|
|
|
|
changeBackground();
|
|
|
|
|
|
|
|
$brandList = $('.brand-list');
|
|
|
|
$newBrandWall = $('.new-brand-wall');
|
|
|
|
$recommandBrandWall = $('.recommand-brand-wall');
|
|
|
|
},
|
|
|
|
error: function() {
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function changeBackground() {
|
|
|
|
var $brandList = $('.brand-list').find('p');
|
|
|
|
var brandList = $('.brand-list').find('p');
|
|
|
|
|
|
|
|
$brandList.on('touchstart', function() {
|
|
|
|
$brandList.css('background', '#fff');
|
|
|
|
brandList.on('touchstart', function() {
|
|
|
|
brandList.css('background', '#fff');
|
|
|
|
$(this).css('background', '#eee');
|
|
|
|
}).on('touchend touchcancel', function() {
|
|
|
|
$(this).css('background', '#fff');
|
|
|
|
});
|
|
|
|
}
|
|
|
|
changeBackground();
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 增加单条记录
|
|
...
|
...
|
@@ -70,7 +83,7 @@ function addHistory(brandName) { |
|
|
|
type: 'POST',
|
|
|
|
url: '/brands/addBrandSearch',
|
|
|
|
data: 'brandName=' + encodeURIComponent(brandName),
|
|
|
|
success: function(data) {
|
|
|
|
success: function() {
|
|
|
|
},
|
|
|
|
error: function() {
|
|
|
|
}
|
|
...
|
...
|
@@ -91,15 +104,16 @@ function sequence(a, b) { |
|
|
|
function searchInput() {
|
|
|
|
if ($keyword.val().length) {
|
|
|
|
$icon.css('color', '#444');
|
|
|
|
$searchResult.css('margin-bottom', '6rem');
|
|
|
|
|
|
|
|
// $(this).closest('.search-box').css('width', '11.25rem');
|
|
|
|
$searchAction.show().find('.clear-text').show();
|
|
|
|
} else {
|
|
|
|
$icon.css('color', '#b2b2b2');
|
|
|
|
$searchResult.css('margin-bottom', '0');
|
|
|
|
|
|
|
|
// $(this).closest('.search-box').css('width', '12.5rem');
|
|
|
|
$searchAction.find('.clear-text').hide();
|
|
|
|
|
|
|
|
}
|
|
|
|
searchResult();
|
|
|
|
}
|
|
...
|
...
|
@@ -241,47 +255,20 @@ function searchResult() { |
|
|
|
}
|
|
|
|
|
|
|
|
// 插入 dom，绑定事件
|
|
|
|
$('.search-result').html(html);
|
|
|
|
$searchResult.html(html);
|
|
|
|
changeBackground();
|
|
|
|
bindWriteLocal($('.brand-list'), true);
|
|
|
|
}
|
|
|
|
|
|
|
|
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');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
(function() {
|
|
|
|
if ($('.banner-top').length > 0) {
|
|
|
|
$('.hot-brands').css('padding-top', '0');
|
|
|
|
if ($('.banner-top').length === 0) {
|
|
|
|
var h1 = $('.genderNav').height();
|
|
|
|
var h2 = $('.newbrand-search').height();
|
|
|
|
$('.hot-brands').css('padding-top', (h1 + h2) + 'px');
|
|
|
|
}
|
|
|
|
|
|
|
|
$('.hide-when-loading').show();
|
|
|
|
loading.hideLoadingMask();
|
|
|
|
|
|
|
|
// banner滑动
|
|
|
|
swiper = new Swiper('.swiper-container', {
|
|
|
|
new Swiper('.swiper-container', {
|
|
|
|
lazyLoading: true,
|
|
|
|
loop: true,
|
|
|
|
autoplay: 3000,
|
|
...
|
...
|
@@ -289,60 +276,67 @@ $navBtn.on('touchstart', function() { |
|
|
|
});
|
|
|
|
|
|
|
|
// 热门品牌滑动
|
|
|
|
hotBrandsSwiper = new Swiper('.brands-swiper', {
|
|
|
|
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();
|
|
|
|
$genderItem.on('touchstart', function() {
|
|
|
|
var index = $(this).data('id') + 1;
|
|
|
|
window.location.search = 'channel=' + index;
|
|
|
|
});
|
|
|
|
|
|
|
|
if ($brandList.eq(0).offset().top < minBrandListTop) {
|
|
|
|
$fixTitleBar.hide();
|
|
|
|
$brandItem.on('click', function() {
|
|
|
|
var index = $(this).data('id');
|
|
|
|
$('.brandNav ul .active').removeClass('active');
|
|
|
|
$(this).addClass('active');
|
|
|
|
if (index === 0) {
|
|
|
|
$recommandBrandWall.not('.hide').addClass('hide');
|
|
|
|
$newBrandWall.not('.hide').addClass('hide');
|
|
|
|
$brandList.removeClass('hide');
|
|
|
|
} else if (index === 1) {
|
|
|
|
$newBrandWall.removeClass('hide');
|
|
|
|
$brandList.not('.hide').addClass('hide');
|
|
|
|
$recommandBrandWall.not('.hide').addClass('hide');
|
|
|
|
} else {
|
|
|
|
$recommandBrandWall.removeClass('hide');
|
|
|
|
$brandList.not('.hide').addClass('hide');
|
|
|
|
$newBrandWall.not('.hide').addClass('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 (!isSearchPage) {
|
|
|
|
setTimeout(getBrandList, 50);
|
|
|
|
}
|
|
|
|
}());
|
|
|
|
|
|
|
|
// 搜索页面
|
|
|
|
if (isSearchPage) {
|
|
|
|
$('.yoho-header').css({
|
|
|
|
'z-index': 2,
|
|
|
|
position: 'fixed',
|
|
|
|
top: 0
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
if ($('.brand-index-page').length > 0) {
|
|
|
|
/**
|
|
|
|
* srcoll to load more
|
|
|
|
*/
|
|
|
|
$(window).scroll(function() {
|
|
|
|
window.requestAnimationFrame(scrollHandler);
|
|
|
|
$homebuttom.css('top', '45px');
|
|
|
|
$homebuttom.css('position', 'fixed');
|
|
|
|
$navBtn.on('touchstart', function() {
|
|
|
|
if ($homebuttom.hasClass('hide')) {
|
|
|
|
$searchResult.css('margin-top', '0px');
|
|
|
|
$newSearch.css('margin-top', '0px');
|
|
|
|
$searchPage.css('margin-top', '0px');
|
|
|
|
} else {
|
|
|
|
$searchResult.css('margin-top', '45px');
|
|
|
|
$newSearch.css('margin-top', '45px');
|
|
|
|
$searchPage.css('margin-top', '45px');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
bindWriteLocal($historySearch, false);
|
|
|
|
bindWriteLocal($hotSearch, false);
|
|
|
|
|
|
|
|
if ($('.history-search').length > 0) {
|
|
|
|
bindWriteLocal($('.history-search'), false);
|
|
|
|
}
|
|
|
|
|
|
|
|
if ($('.hot-search').length > 0) {
|
|
|
|
bindWriteLocal($('.hot-search'), false);
|
|
|
|
}
|
|
|
|
|
|
|
|
if ($('.brand-search-page').length > 0) {
|
|
|
|
brandsData = $.parseJSON($('#brands-data').html());
|
|
|
|
|
|
|
|
$keyword.on('input', function() {
|
|
...
|
...
|
@@ -354,86 +348,35 @@ if ($('.brand-search-page').length > 0) { |
|
|
|
$keyword.closest('.search-box').css('width', '13rem');
|
|
|
|
$searchAction.show().find('.clear-text').hide();
|
|
|
|
|
|
|
|
clearTextHammer = new Hammer($('.clear-text')[0]);
|
|
|
|
var clearTextHammer = new Hammer($('.clear-text')[0]);
|
|
|
|
clearTextHammer.on('tap', function(e) {
|
|
|
|
$('.search-result').html('');
|
|
|
|
$searchResult.html('');
|
|
|
|
$('#keyword').val('').trigger('input');
|
|
|
|
e.preventDefault();
|
|
|
|
e.srcEvent.preventDefault();
|
|
|
|
e.srcEvent.stopPropagation();
|
|
|
|
});
|
|
|
|
|
|
|
|
$('form.search-box').on('submit', function() {
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if ($genderItem.length > 0) {
|
|
|
|
$genderItem.on('touchstart', function() {
|
|
|
|
var index = $(this).data('id') + 1;
|
|
|
|
|
|
|
|
$('.genderNav ul .active').removeClass('active');
|
|
|
|
$(this).addClass('active');
|
|
|
|
$('.hide-when-loading').hide();
|
|
|
|
loading.showLoadingMask();
|
|
|
|
function reload() {
|
|
|
|
window.location.search = 'channel=' + index;
|
|
|
|
}
|
|
|
|
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) {
|
|
|
|
|
|
|
|
$recommandBrandWall.not('.hide').addClass('hide');
|
|
|
|
$newBrandWall.not('.hide').addClass('hide');
|
|
|
|
$brandList.removeClass('hide');
|
|
|
|
|
|
|
|
} else if (index === 1) {
|
|
|
|
|
|
|
|
$newBrandWall.removeClass('hide');
|
|
|
|
$brandList.not('.hide').addClass('hide');
|
|
|
|
$recommandBrandWall.not('.hide').addClass('hide');
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
$recommandBrandWall.removeClass('hide');
|
|
|
|
$brandList.not('.hide').addClass('hide');
|
|
|
|
$newBrandWall.not('.hide').addClass('hide');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 清除记录
|
|
|
|
*/
|
|
|
|
function removeHistory() {
|
|
|
|
// 初始化历史搜索的内容
|
|
|
|
if (isSearchPage) {
|
|
|
|
require('./brand-render')(function() {
|
|
|
|
// 清除记录
|
|
|
|
function removeHistory() {
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: '/brands/delBrandHistory',
|
|
|
|
data: '',
|
|
|
|
success: function(data) {
|
|
|
|
},
|
|
|
|
error: function() {
|
|
|
|
}
|
|
|
|
success: function() {},
|
|
|
|
error: function() {}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 初始化历史搜索的内容
|
|
|
|
require('./brand-render')(function() {
|
|
|
|
$netHistory = $('.net-history');
|
|
|
|
if ($('.brand-search-page').length > 0) {
|
|
|
|
chHammer = new Hammer($clearHistory[0]);
|
|
|
|
var chHammer = new Hammer($clearHistory[0]);
|
|
|
|
chHammer.on('tap', function() {
|
|
|
|
if (isLocalStorageSupported()) {
|
|
|
|
localStorage.removeItem('historys-brand');
|
|
...
|
...
|
@@ -450,7 +393,6 @@ require('./brand-render')(function() { |
|
|
|
});
|
|
|
|
|
|
|
|
// 搜索页面
|
|
|
|
|
|
|
|
(function() {
|
|
|
|
var html = '',
|
|
|
|
history,
|
|
...
|
...
|
@@ -465,7 +407,6 @@ require('./brand-render')(function() { |
|
|
|
netArr = [];
|
|
|
|
|
|
|
|
$netHistory.find('li').each(function() {
|
|
|
|
|
|
|
|
brand = $(this).find('a').attr('brandName');
|
|
|
|
time = $(this).find('a').attr('collectTime');
|
|
|
|
dict = {
|
|
...
|
...
|
@@ -568,9 +509,6 @@ require('./brand-render')(function() { |
|
|
|
} else {
|
|
|
|
$history.addClass('hide');
|
|
|
|
}
|
|
|
|
|
|
|
|
}());
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
} |
...
|
...
|
|
