|
|
|
/**
|
|
|
|
* 商品筛选逻辑
|
|
|
|
* @author: xuqi<qi.xu@yoho.cn>
|
|
|
|
* @date: 2015/12/4
|
|
|
|
*/
|
|
|
|
|
|
|
|
var $ = require('yoho-jquery'),
|
|
|
|
Handlebars = require('yoho-handlebars');
|
|
|
|
|
|
|
|
var checkUnicode = {
|
|
|
|
unchecked: '',
|
|
|
|
checked: ''
|
|
|
|
},
|
|
|
|
moreUnicode = {
|
|
|
|
up: '',
|
|
|
|
down: ''
|
|
|
|
};
|
|
|
|
|
|
|
|
// 品牌相关变量
|
|
|
|
var $brandDefault = $('.brand .default'),
|
|
|
|
$brandInput = $('#brand-search-input'),
|
|
|
|
$brandPanel = $('.brand .brand-panel'),
|
|
|
|
$brandAttrs = $brandPanel.find('.attr'),
|
|
|
|
$brandMore = $('#brand-more'),
|
|
|
|
$brandMulti = $('#brand-multi'),
|
|
|
|
$brandsIndex = $('.brands-index');
|
|
|
|
|
|
|
|
var $brandMoreTxt, $brandMoreIcon;
|
|
|
|
|
|
|
|
// 价格相关变量
|
|
|
|
var $udPrice = $('.ud-price-range'),
|
|
|
|
interReg = /^\d+$/,
|
|
|
|
$limit, $min, $max, $btn;
|
|
|
|
|
|
|
|
// 分类相关变量
|
|
|
|
var $sortSub = $('.sort-sub-wrap');
|
|
|
|
|
|
|
|
// 高级选项相关变量
|
|
|
|
var $seniorSubWrap = $('.senior-sub-wrap'),
|
|
|
|
$seniorAttrWrap = $('.senior-attr-wrap');
|
|
|
|
|
|
|
|
var seniorHoverTime, hoveredIndex;
|
|
|
|
|
|
|
|
// 尺寸 handlebars 模板
|
|
|
|
var sizeTmpl = '{{# size}}<a class="attr {{#if checked}}checked{{/if}}" href="{{href}}">{{name}}</a>{{/ size}}',
|
|
|
|
sizeCache = {}, // 缓存一下尺寸信息
|
|
|
|
$sizeWrap = $('.filter-box .size');
|
|
|
|
|
|
|
|
sizeTmpl = Handlebars.compile(sizeTmpl);
|
|
|
|
|
|
|
|
// 清除checkbox选中状态[页面默认checked不清空]
|
|
|
|
function clearChecked($checkbox, $checked) {
|
|
|
|
$checkbox.each(function() {
|
|
|
|
if ($(this).closest('.attr').hasClass('checked')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
$(this).removeClass('checked').html(checkUnicode.unchecked);
|
|
|
|
});
|
|
|
|
$checked.find('.checkbox').addClass('checked').html(checkUnicode.checked);
|
|
|
|
}
|
|
|
|
|
|
|
|
// 显示更多品牌面板
|
|
|
|
function brandShowMore() {
|
|
|
|
$brandDefault.addClass('hide');
|
|
|
|
$brandPanel.removeClass('hide');
|
|
|
|
}
|
|
|
|
|
|
|
|
// 隐藏更多品牌面板
|
|
|
|
function brandHideMore() {
|
|
|
|
$brandPanel.addClass('hide');
|
|
|
|
$brandDefault.removeClass('hide');
|
|
|
|
|
|
|
|
// 清除索引状态
|
|
|
|
$brandsIndex.children('span').removeClass('hover');
|
|
|
|
}
|
|
|
|
|
|
|
|
// url构造&跳转
|
|
|
|
function uriLoc(attr, val) {
|
|
|
|
var qs = window.queryString(),
|
|
|
|
newHref;
|
|
|
|
|
|
|
|
qs[attr] = val;
|
|
|
|
delete qs.page;
|
|
|
|
newHref = '?' + decodeURIComponent($.param(qs));
|
|
|
|
window.location.href = newHref;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 隐藏高级选项面板
|
|
|
|
function hideSeniorPanel() {
|
|
|
|
$seniorSubWrap.children('.senior-sub:eq(' + hoveredIndex + ')').addClass('hide');
|
|
|
|
$seniorAttrWrap.children('.attr:eq(' + hoveredIndex + ')').removeClass('hover');
|
|
|
|
hoveredIndex = -1;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 屏蔽筛选项双击文字选中
|
|
|
|
$('.filter-box').on('selectstart', '.attr, .brands-index span', function() {
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
|
|
|
|
// 【分类】
|
|
|
|
$('.sort-pre').on('click', 'li', function() {
|
|
|
|
var $this = $(this),
|
|
|
|
index = $this.index(),
|
|
|
|
id = $this.data('id');
|
|
|
|
|
|
|
|
if ($this.hasClass('active')) {
|
|
|
|
|
|
|
|
// 选中时，再次点击取消选中
|
|
|
|
$this.removeClass('active');
|
|
|
|
$sortSub.children(':eq(' + index + ')').addClass('hide');
|
|
|
|
$sizeWrap.addClass('hide');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
$this.siblings('.active').removeClass('active');
|
|
|
|
$this.addClass('active');
|
|
|
|
|
|
|
|
$sortSub.children(':not(.hide)').addClass('hide');
|
|
|
|
$sortSub.children(':eq(' + index + ')').removeClass('hide');
|
|
|
|
|
|
|
|
if (!$sizeWrap.data('load')) {
|
|
|
|
if (sizeCache[id]) {
|
|
|
|
$sizeWrap.find('.attr-content').html(sizeCache[id]);
|
|
|
|
$sizeWrap.removeClass('hide');
|
|
|
|
} else {
|
|
|
|
$.ajax({
|
|
|
|
url: '/product/search/sortSize',
|
|
|
|
data: {
|
|
|
|
msort: id
|
|
|
|
}
|
|
|
|
}).then(function(res) {
|
|
|
|
if ($.type(res) === 'array' && res.length) {
|
|
|
|
sizeCache[id] = sizeTmpl({
|
|
|
|
size: res
|
|
|
|
});
|
|
|
|
$sizeWrap.find('.attr-content').html(sizeCache[id]);
|
|
|
|
$sizeWrap.removeClass('hide');
|
|
|
|
} else {
|
|
|
|
$sizeWrap.addClass('hide');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// 【品牌】
|
|
|
|
if ($brandMore.length > 0) {
|
|
|
|
$brandMoreTxt = $brandMore.children('em');
|
|
|
|
$brandMoreIcon = $brandMore.children('.iconfont');
|
|
|
|
}
|
|
|
|
|
|
|
|
// 【品牌】多选
|
|
|
|
$brandMulti.click(function() {
|
|
|
|
if ($brandPanel.css('display') === 'none') {
|
|
|
|
|
|
|
|
// 显示品牌面板
|
|
|
|
$brandMore.trigger('click');
|
|
|
|
}
|
|
|
|
|
|
|
|
brandShowMore();
|
|
|
|
$brandPanel.removeClass('hide').addClass('multi'); // 显示出checkbox
|
|
|
|
$(this).addClass('hide');
|
|
|
|
|
|
|
|
// 隐藏更多按钮
|
|
|
|
$brandMore.addClass('hide');
|
|
|
|
});
|
|
|
|
|
|
|
|
// 【品牌】更多
|
|
|
|
$brandMore.click(function() {
|
|
|
|
var $this = $(this);
|
|
|
|
|
|
|
|
if ($this.hasClass('more')) {
|
|
|
|
brandHideMore();
|
|
|
|
|
|
|
|
$brandMoreTxt.text('更多');
|
|
|
|
$brandMoreIcon.html(moreUnicode.down);
|
|
|
|
|
|
|
|
// 清空搜索框和搜索结果
|
|
|
|
$brandInput.val('').trigger('keyup');
|
|
|
|
} else {
|
|
|
|
brandShowMore();
|
|
|
|
|
|
|
|
$brandMoreTxt.text('收起');
|
|
|
|
$brandMoreIcon.html(moreUnicode.up);
|
|
|
|
}
|
|
|
|
|
|
|
|
$(this).toggleClass('more');
|
|
|
|
});
|
|
|
|
|
|
|
|
// 【品牌】索引
|
|
|
|
$brandsIndex.on('mouseenter', 'span', function() {
|
|
|
|
var $this = $(this),
|
|
|
|
index = $this.data('index');
|
|
|
|
|
|
|
|
if ($this.hasClass('hover')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
setTimeout(function() {
|
|
|
|
$this.siblings('span.hover').removeClass('hover');
|
|
|
|
$this.addClass('hover');
|
|
|
|
|
|
|
|
if ($this.index() === 0) {
|
|
|
|
|
|
|
|
// 全部
|
|
|
|
$brandAttrs.removeClass('hide');
|
|
|
|
} else {
|
|
|
|
$brandAttrs.addClass('hide').filter('[data-index=' + index + ']').removeClass('hide');
|
|
|
|
}
|
|
|
|
}, 120);
|
|
|
|
});
|
|
|
|
|
|
|
|
// 【品牌】搜索
|
|
|
|
$brandInput.keyup(function() {
|
|
|
|
var val = $(this).val().toLowerCase();
|
|
|
|
|
|
|
|
if (val === '') {
|
|
|
|
$brandAttrs.removeClass('hide');
|
|
|
|
} else {
|
|
|
|
$brandAttrs.addClass('hide').filter('[data-key*="' + val + '"]').removeClass('hide');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// 【品牌】多选确定
|
|
|
|
$('#brand-multi-ok').click(function() {
|
|
|
|
var val = [];
|
|
|
|
|
|
|
|
if ($(this).hasClass('dis')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
$brandPanel.find('span.checked').each(function() {
|
|
|
|
val.push($(this).data('id'));
|
|
|
|
});
|
|
|
|
|
|
|
|
uriLoc('brand', val.join(','));
|
|
|
|
});
|
|
|
|
|
|
|
|
// 【品牌/高级选项】多选取消
|
|
|
|
$('.multi-select-cancel').click(function() {
|
|
|
|
var $panel = $(this).closest('.multi');
|
|
|
|
|
|
|
|
if ($panel.hasClass('brand-panel')) {
|
|
|
|
|
|
|
|
$brandMulti.removeClass('hide'); // 显示多选按钮
|
|
|
|
$brandMore.trigger('click');
|
|
|
|
|
|
|
|
// 显示出更多按钮
|
|
|
|
$brandMore.removeClass('hide');
|
|
|
|
|
|
|
|
// 清空搜索框和搜索结果
|
|
|
|
$brandInput.val('').trigger('keyup');
|
|
|
|
brandHideMore();
|
|
|
|
}
|
|
|
|
|
|
|
|
$panel.addClass('hide').removeClass('multi');
|
|
|
|
clearChecked($panel.find('.checkbox.checked'), $panel.find('.attr.checked')); // 清除选中状态
|
|
|
|
|
|
|
|
// 确定按钮状态恢复dis
|
|
|
|
$(this).siblings('.multi-select-ok').addClass('dis');
|
|
|
|
});
|
|
|
|
|
|
|
|
// 【品牌/高级选项】checkbox
|
|
|
|
$('.check-container').on('click', '.attr', function() {
|
|
|
|
var $this = $(this),
|
|
|
|
$check = $this.find('.checkbox'),
|
|
|
|
$btnOk = $this.closest('.brand-panel, .senior-sub').find('.multi-select-ok');
|
|
|
|
|
|
|
|
$check.toggleClass('checked');
|
|
|
|
|
|
|
|
if ($check.hasClass('checked')) {
|
|
|
|
$check.html(checkUnicode.checked);
|
|
|
|
} else {
|
|
|
|
$check.html(checkUnicode.unchecked);
|
|
|
|
}
|
|
|
|
|
|
|
|
// 更新按钮状态
|
|
|
|
if ($check.hasClass('checked') ||
|
|
|
|
$this.siblings('.attr').find('.checked').length > 0) {
|
|
|
|
$btnOk.removeClass('dis');
|
|
|
|
} else {
|
|
|
|
$btnOk.addClass('dis');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// 【品牌/高级选项】当多选时阻止链接默认跳转
|
|
|
|
$('.brand, .senior').on('click', '.attr > a', function(e) {
|
|
|
|
if ($(this).closest('.multi').length > 0) {
|
|
|
|
e.preventDefault();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// 已选中的条件，点击不刷新
|
|
|
|
$('.filter-box').on('click', 'li.checked, a.checked', function(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
});
|
|
|
|
|
|
|
|
// 【价格】用户定义价格处理
|
|
|
|
if ($udPrice.length > 0) {
|
|
|
|
$limit = $udPrice.find('.limit');
|
|
|
|
$min = $limit.filter('.min');
|
|
|
|
$max = $limit.filter('.max');
|
|
|
|
$btn = $udPrice.find('.price-sure');
|
|
|
|
|
|
|
|
// 【价格】输入
|
|
|
|
$limit.keyup(function() {
|
|
|
|
var thisPrice = $.trim($(this).val()),
|
|
|
|
isPriInt = interReg.test(thisPrice),
|
|
|
|
intPrice,
|
|
|
|
min,
|
|
|
|
max;
|
|
|
|
|
|
|
|
if (!isPriInt) {
|
|
|
|
intPrice = parseInt(thisPrice, 10);
|
|
|
|
$(this).val(isNaN(intPrice) ? '' : intPrice);
|
|
|
|
}
|
|
|
|
|
|
|
|
min = $.trim($min.val());
|
|
|
|
max = $.trim($max.val());
|
|
|
|
|
|
|
|
if (min !== '' || max !== '') {
|
|
|
|
$btn.removeClass('hide');
|
|
|
|
} else {
|
|
|
|
$btn.addClass('hide');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// 【价格】多项查询
|
|
|
|
$btn.click(function() {
|
|
|
|
var min = $.trim($min.val()),
|
|
|
|
max = $.trim($max.val()),
|
|
|
|
tmp;
|
|
|
|
|
|
|
|
// 对于min大于max的情况，交换位置
|
|
|
|
if (min !== '' && max !== '' && +min > +max) {
|
|
|
|
tmp = max;
|
|
|
|
max = min;
|
|
|
|
min = tmp;
|
|
|
|
}
|
|
|
|
|
|
|
|
uriLoc('price', min + ',' + max);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
// 【高级选项】鼠标移入显示子项
|
|
|
|
$seniorAttrWrap.on('mouseenter', '.attr', function() {
|
|
|
|
var $this = $(this);
|
|
|
|
var index = $this.index();
|
|
|
|
|
|
|
|
if ($this.hasClass('no-sub')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
$this.addClass('hover').siblings().removeClass('hover');
|
|
|
|
|
|
|
|
$seniorSubWrap.children('.senior-sub:eq(' + index + ')').removeClass('hide').siblings().addClass('hide');
|
|
|
|
}).on('mouseleave', '.attr', function() {
|
|
|
|
var $this = $(this),
|
|
|
|
index = $this.index();
|
|
|
|
|
|
|
|
if ($this.hasClass('no-sub')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
hoveredIndex = index;
|
|
|
|
|
|
|
|
seniorHoverTime = setTimeout(function() {
|
|
|
|
hideSeniorPanel();
|
|
|
|
}, 100);
|
|
|
|
});
|
|
|
|
|
|
|
|
// 【高级选项】多选
|
|
|
|
$('.senior-sub').on('click', '.multi-select', function() {
|
|
|
|
$(this).closest('.senior-sub').addClass('multi');
|
|
|
|
}).on('click', '.multi-select-ok', function() {
|
|
|
|
var $btn2 = $(this),
|
|
|
|
$sub = $btn2.closest('.senior-sub'),
|
|
|
|
val = [];
|
|
|
|
|
|
|
|
if ($btn2.hasClass('dis')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
$sub.find('span.checked').each(function() {
|
|
|
|
val.push($(this).data('id'));
|
|
|
|
});
|
|
|
|
|
|
|
|
uriLoc($sub.data('attr'), val.join(','));
|
|
|
|
}).on('mouseenter', function() {
|
|
|
|
clearTimeout(seniorHoverTime);
|
|
|
|
}).on('mouseleave', function() {
|
|
|
|
hideSeniorPanel();
|
|
|
|
}); |
...
|
...
|
|
