|
|
|
require('./break-code'); |
|
|
|
/**
|
|
|
|
* 断码区
|
|
|
|
* @author: wsl<shuiling.wang@yoho.cn>
|
|
|
|
* @date: 2016/5/20
|
|
|
|
*/
|
|
|
|
|
|
|
|
var $ = require('yoho-jquery'),
|
|
|
|
Swiper = require('yoho-swiper'),
|
|
|
|
ellipsis = require('yoho-mlellipsis'),
|
|
|
|
lazyLoad = require('yoho-jquery-lazyload'),
|
|
|
|
tip = require('../plugin/tip'),
|
|
|
|
filter = require('../plugin/filter'),
|
|
|
|
loading = require('../plugin/loading');
|
|
|
|
|
|
|
|
var $goodsContainer = $('#goods-container'),
|
|
|
|
$goodsChildren = $goodsContainer.children(),
|
|
|
|
$coatGc = $($goodsChildren.get(0)),
|
|
|
|
$trouserGc = $($goodsChildren.get(1)),
|
|
|
|
$shoesgc = $($goodsChildren.get(2)),
|
|
|
|
$othergc = $($goodsChildren.get(3));
|
|
|
|
|
|
|
|
var winH = $(window).height(),
|
|
|
|
noResult = '<p class="no-result">未找到相关搜索结果</p>';
|
|
|
|
|
|
|
|
// 默认筛选条件
|
|
|
|
var defaultOpt = require('../common/query-param');
|
|
|
|
|
|
|
|
var storeOpt = $.extend({}, defaultOpt);
|
|
|
|
|
|
|
|
var $listNav = $('#list-nav'),
|
|
|
|
$swiperSize = $('.swiper-size'),
|
|
|
|
|
|
|
|
// 导航数据信息
|
|
|
|
navInfo = {
|
|
|
|
coat: {
|
|
|
|
reload: true,
|
|
|
|
page: 0,
|
|
|
|
end: false,
|
|
|
|
saleType: 1
|
|
|
|
},
|
|
|
|
trouser: {
|
|
|
|
reload: true,
|
|
|
|
page: 0,
|
|
|
|
end: false,
|
|
|
|
saleType: 1
|
|
|
|
},
|
|
|
|
shoes: {
|
|
|
|
reload: true,
|
|
|
|
page: 0,
|
|
|
|
end: false,
|
|
|
|
saleType: 1
|
|
|
|
},
|
|
|
|
other: {
|
|
|
|
reload: true,
|
|
|
|
page: 0,
|
|
|
|
end: false,
|
|
|
|
saleType: 1
|
|
|
|
}
|
|
|
|
},
|
|
|
|
$pre = $listNav.find('.active'), // 纪录进入筛选前的active项，初始为选中项
|
|
|
|
searching;
|
|
|
|
|
|
|
|
var swipers = [],
|
|
|
|
goodsType = ['coat', 'trouser', 'shoes', 'other'];
|
|
|
|
|
|
|
|
require('../common/suspend-cart'); // 悬浮购物车
|
|
|
|
require('../common');
|
|
|
|
|
|
|
|
ellipsis.init();
|
|
|
|
|
|
|
|
lazyLoad($('img.lazy'));
|
|
|
|
|
|
|
|
if ($('.banner-swiper .swiper-slide').length > 1) {
|
|
|
|
new Swiper('.swiper-container', {
|
|
|
|
lazyLoading: true,
|
|
|
|
lazyLoadingInPrevNext: true,
|
|
|
|
loop: true,
|
|
|
|
autoplay: 3000,
|
|
|
|
autoplayDisableOnInteraction: true,
|
|
|
|
paginationClickable: true,
|
|
|
|
pagination: '.banner-top .pagination-inner'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
$.each($swiperSize, function(key) {
|
|
|
|
swipers[key] = new Swiper('#size-swiper-' + key, {
|
|
|
|
slidesPerView: 'auto'
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
$.each($listNav.find('li'), function(key, item) {
|
|
|
|
$(item).addClass(goodsType[key]);
|
|
|
|
});
|
|
|
|
|
|
|
|
// 判断导航类型
|
|
|
|
function judgeType(dom) {
|
|
|
|
var navType;
|
|
|
|
|
|
|
|
if (dom.hasClass('coat')) {
|
|
|
|
navType = 'coat';
|
|
|
|
} else if (dom.hasClass('trouser')) {
|
|
|
|
navType = 'trouser';
|
|
|
|
} else if (dom.hasClass('shoes')) {
|
|
|
|
navType = 'shoes';
|
|
|
|
} else {
|
|
|
|
navType = 'other';
|
|
|
|
}
|
|
|
|
|
|
|
|
return navType;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 筛选注册的回调，筛选子项点击后逻辑
|
|
|
|
* 需要执行search的场景：1.点选筛选项；2.relaod为true时切换导航；3.下拉加载
|
|
|
|
* @param opt {type, id}
|
|
|
|
*/
|
|
|
|
function search(opt) {
|
|
|
|
var setting = {},
|
|
|
|
ext = {},
|
|
|
|
att,
|
|
|
|
nav, navType,
|
|
|
|
page,
|
|
|
|
i;
|
|
|
|
|
|
|
|
delete defaultOpt.size;
|
|
|
|
|
|
|
|
if (searching) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if ($.type(opt) === 'object') {
|
|
|
|
opt = [opt];
|
|
|
|
}
|
|
|
|
|
|
|
|
if (opt) {
|
|
|
|
|
|
|
|
// 筛选项变更则重置reload为true
|
|
|
|
for (att in navInfo) {
|
|
|
|
if (navInfo.hasOwnProperty(att)) {
|
|
|
|
navInfo[att].reload = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
for (i = 0; i < opt.length; i++) {
|
|
|
|
switch (opt[i].type) {
|
|
|
|
case 'gender':
|
|
|
|
ext = {
|
|
|
|
gender: opt[i].id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'brand':
|
|
|
|
ext = {
|
|
|
|
brand: opt[i].id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'sort':
|
|
|
|
ext = {
|
|
|
|
sort: opt[i].id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'color':
|
|
|
|
ext = {
|
|
|
|
color: opt[i].id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'size':
|
|
|
|
ext = {
|
|
|
|
size: opt[i].id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'price':
|
|
|
|
ext = {
|
|
|
|
price: opt[i].id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'discount':
|
|
|
|
ext = {
|
|
|
|
discount: opt[i].id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'p_d':
|
|
|
|
ext = {
|
|
|
|
p_d: opt[i].id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$.extend(defaultOpt, ext); // 扩展筛选项
|
|
|
|
}
|
|
|
|
|
|
|
|
// 导航类别
|
|
|
|
navType = judgeType($pre);
|
|
|
|
|
|
|
|
nav = navInfo[navType];
|
|
|
|
page = nav.page + 1;
|
|
|
|
if (nav.reload) {
|
|
|
|
page = 1;
|
|
|
|
} else if (nav.end) {
|
|
|
|
|
|
|
|
// 不需要重新加载并且数据请求结束
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
$.extend(setting, defaultOpt, {
|
|
|
|
type: 'stock',
|
|
|
|
order: 0,
|
|
|
|
page: page
|
|
|
|
});
|
|
|
|
|
|
|
|
searching = true;
|
|
|
|
loading.showLoadingMask();
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: '/product/sale/search',
|
|
|
|
data: setting,
|
|
|
|
success: function(data) {
|
|
|
|
var $container,
|
|
|
|
num;
|
|
|
|
|
|
|
|
switch (navType) {
|
|
|
|
case 'coat':
|
|
|
|
$container = $coatGc;
|
|
|
|
break;
|
|
|
|
case 'trouser':
|
|
|
|
$container = $trouserGc;
|
|
|
|
break;
|
|
|
|
case 'shoes':
|
|
|
|
$container = $shoesgc;
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
$container = $othergc;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
if ($container.hasClass('hide')) {
|
|
|
|
$container.siblings().addClass('hide');
|
|
|
|
$container.removeClass('hide');
|
|
|
|
}
|
|
|
|
|
|
|
|
if (data === '') {
|
|
|
|
nav.end = true;
|
|
|
|
|
|
|
|
if (nav.reload) {
|
|
|
|
$container.html(noResult);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (nav.reload) {
|
|
|
|
$container.html(data);
|
|
|
|
lazyLoad($container.find('.lazy'));
|
|
|
|
} else {
|
|
|
|
num = $container.find('.good-info').length;
|
|
|
|
$container.append(data);
|
|
|
|
|
|
|
|
// lazy good-infos who append in
|
|
|
|
lazyLoad($container.find('.good-info:gt(' + (num - 1) + ') .lazy'));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
nav.reload = false;
|
|
|
|
nav.page = page;
|
|
|
|
|
|
|
|
searching = false;
|
|
|
|
loading.hideLoadingMask();
|
|
|
|
|
|
|
|
window.rePosFooter();
|
|
|
|
|
|
|
|
$('.good-detail-text .name').each(function() {
|
|
|
|
var $this = $(this),
|
|
|
|
$title = $this.find('a');
|
|
|
|
|
|
|
|
$title[0].mlellipsis(2);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
error: function() {
|
|
|
|
tip.show('网络断开连接了~');
|
|
|
|
searching = false;
|
|
|
|
loading.hideLoadingMask();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: '/product/sale/filter',
|
|
|
|
data: $.extend(defaultOpt, {
|
|
|
|
saleType: '1'
|
|
|
|
}),
|
|
|
|
success: function(data) {
|
|
|
|
$goodsContainer.append(data);
|
|
|
|
|
|
|
|
// 初始化filter&注册filter回调
|
|
|
|
filter.initFilter({
|
|
|
|
fCbFn: search,
|
|
|
|
hCbFn: function() {
|
|
|
|
|
|
|
|
// 切换active状态到$pre上
|
|
|
|
$pre.addClass('active');
|
|
|
|
$pre.siblings('.filter').removeClass('active');
|
|
|
|
|
|
|
|
$('#size-swiper-' + $pre.index()).show();
|
|
|
|
},
|
|
|
|
missStatus: true
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
lazyLoad($('.lazy'));
|
|
|
|
|
|
|
|
$listNav.bind('contextmenu', function() {
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
|
|
|
|
$listNav.on('touchend touchcancel', function(e) {
|
|
|
|
var $this = $(e.target).closest('li'),
|
|
|
|
nav, sortId, navType, $active;
|
|
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
if ($this.hasClass('filter')) {
|
|
|
|
|
|
|
|
// 筛选面板切换状态
|
|
|
|
if ($this.hasClass('active')) {
|
|
|
|
filter.hideFilter();
|
|
|
|
|
|
|
|
// 点击筛选钱的active项回复active
|
|
|
|
$pre.addClass('active');
|
|
|
|
$this.removeClass('active');
|
|
|
|
} else {
|
|
|
|
$pre = $this.siblings('.active');
|
|
|
|
$swiperSize.hide();
|
|
|
|
$pre.removeClass('active');
|
|
|
|
$this.addClass('active');
|
|
|
|
filter.showFilter();
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
|
|
|
|
// 导航类别
|
|
|
|
navType = judgeType($this);
|
|
|
|
|
|
|
|
nav = navInfo[navType];
|
|
|
|
|
|
|
|
if (!($this.hasClass('active'))) {
|
|
|
|
|
|
|
|
$active = $this.siblings('.active');
|
|
|
|
|
|
|
|
$pre = $this; // $pre为除筛选导航的其他导航项，若当前active的为筛选，则把$pre置为当前点击项
|
|
|
|
|
|
|
|
if ($active.hasClass('filter')) {
|
|
|
|
|
|
|
|
// 若之前active项为筛选，则隐藏筛选面板
|
|
|
|
filter.hideFilter();
|
|
|
|
} else {
|
|
|
|
|
|
|
|
// 切换container显示
|
|
|
|
$goodsContainer.children('.container:not(.hide)').addClass('hide');
|
|
|
|
|
|
|
|
switch (navType) {
|
|
|
|
case 'coat':
|
|
|
|
$coatGc.removeClass('hide');
|
|
|
|
break;
|
|
|
|
|
|
|
|
case 'trouser':
|
|
|
|
$trouserGc.removeClass('hide');
|
|
|
|
break;
|
|
|
|
|
|
|
|
case 'shoes':
|
|
|
|
$shoesgc.removeClass('hide');
|
|
|
|
break;
|
|
|
|
case 'other':
|
|
|
|
$othergc.removeClass('hide');
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 重置筛选项
|
|
|
|
filter.resetFilter();
|
|
|
|
defaultOpt = $.extend({}, storeOpt);
|
|
|
|
}
|
|
|
|
|
|
|
|
$active.removeClass('active');
|
|
|
|
$this.addClass('active');
|
|
|
|
sortId = $this.data('id');
|
|
|
|
$swiperSize.hide();
|
|
|
|
$('#size-swiper-' + $this.index()).show();
|
|
|
|
swipers[$this.index()].onResize();
|
|
|
|
}
|
|
|
|
|
|
|
|
if (nav.reload) {
|
|
|
|
search([{
|
|
|
|
type: 'sort',
|
|
|
|
id: sortId
|
|
|
|
}]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
e.stopPropagation();
|
|
|
|
});
|
|
|
|
|
|
|
|
$swiperSize.on('touchend touchcancel', function(e) {
|
|
|
|
var $this = $(e.target).closest('li'),
|
|
|
|
index = $this.parents('.swiper-size').index(),
|
|
|
|
$parentType = $listNav.find('li').eq(index),
|
|
|
|
nav, sortId, sizeId, navType, $active;
|
|
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
if (typeof $this === 'undefined' || $this.length === 0) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 导航类别
|
|
|
|
navType = judgeType($parentType);
|
|
|
|
|
|
|
|
nav = navInfo[navType];
|
|
|
|
|
|
|
|
if ($this.hasClass('active')) {
|
|
|
|
return;
|
|
|
|
} else {
|
|
|
|
nav.reload = true;
|
|
|
|
$active = $this.siblings('.active');
|
|
|
|
$pre = $parentType; // $pre为除筛选导航的其他导航项，若当前active的为筛选，则把$pre置为当前点击项
|
|
|
|
$active.removeClass('active');
|
|
|
|
$this.addClass('active');
|
|
|
|
sortId = $parentType.data('id');
|
|
|
|
sizeId = $this.data('id');
|
|
|
|
}
|
|
|
|
|
|
|
|
if (nav.reload) {
|
|
|
|
search([{
|
|
|
|
type: 'sort',
|
|
|
|
id: sortId
|
|
|
|
}, {
|
|
|
|
type: 'size',
|
|
|
|
id: sizeId
|
|
|
|
}]);
|
|
|
|
}
|
|
|
|
e.stopPropagation();
|
|
|
|
});
|
|
|
|
|
|
|
|
function scrollHandler() {
|
|
|
|
|
|
|
|
// 当scroll到1/4$goodsContainer高度后继续请求下一页数据
|
|
|
|
if ($(window).scrollTop() + winH >
|
|
|
|
$(document).height() - 0.25 * $goodsContainer.height() - 50) {
|
|
|
|
if (typeof $pre !== 'undefined') {
|
|
|
|
search();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// srcoll to load more
|
|
|
|
$(window).scroll(function() {
|
|
|
|
window.requestAnimationFrame(scrollHandler);
|
|
|
|
});
|
|
|
|
|
|
|
|
// 初始请求最新第一页数据
|
|
|
|
search([{
|
|
|
|
type: 'sort',
|
|
|
|
id: $('.coat').data('id')
|
|
|
|
}]);
|
|
|
|
|
|
|
|
$listNav.on('touchstart', 'li', function() {
|
|
|
|
$(this).addClass('bytouch');
|
|
|
|
}).on('touchend touchcancel', function() {
|
|
|
|
$listNav.find('li').removeClass('bytouch');
|
|
|
|
}); |
...
|
...
|
|
