|
|
|
/**
|
|
|
|
* 折扣专区
|
|
|
|
* @author: liangzhifeng<zhifeng.liang@yoho.cn>
|
|
|
|
* @date: 2015/10/23
|
|
|
|
*/
|
|
|
|
|
|
|
|
var $ = require('yoho.zepto'),
|
|
|
|
Swiper = require('yoho.iswiper'),
|
|
|
|
lazyLoad = require('yoho.zeptolazyload');
|
|
|
|
|
|
|
|
var $curNav,
|
|
|
|
$navList = $('#discount-nav'),
|
|
|
|
$newArrivalList = $('#discount-goods-list'),
|
|
|
|
$goods = $newArrivalList.children('.goods-list'),
|
|
|
|
$goodList = $('.goods-list');
|
|
|
|
|
|
|
|
var swiper;
|
|
|
|
var index = 0,
|
|
|
|
winH = $(window).height(),
|
|
|
|
loadMoreH = $('#load-more').height(),
|
|
|
|
loading = false,
|
|
|
|
page = 0,
|
|
|
|
pd = "";
|
|
|
|
|
|
|
|
swiper = new Swiper('.swiper-container', {
|
|
|
|
lazyLoading: true,
|
|
|
|
pagination: '.swiper-pagination'
|
|
|
|
});
|
|
|
|
var filter = require('../../plugin/filter');
|
|
|
|
|
|
|
|
lazyLoad($('img.lazy'));
|
|
|
|
$curNav = $navList.children('.focus');
|
|
|
|
var $goodsContainer = $('#goods-container'),
|
|
|
|
$ngc = $($goodsContainer.children().get(0)),
|
|
|
|
$pgc = $($goodsContainer.children().get(1)),
|
|
|
|
$dgc = $($goodsContainer.children().get(2));
|
|
|
|
$all = $($goodsContainer.children().get(3));
|
|
|
|
|
|
|
|
$('#discount-nav').delegate('li', 'touchstart', function() {
|
|
|
|
var $this = $(this),
|
|
|
|
$content;
|
|
|
|
var winH = $(window).height();
|
|
|
|
|
|
|
|
if ($this.hasClass('focus')) {
|
|
|
|
return;
|
|
|
|
//默认筛选条件
|
|
|
|
var defaultOpt = {
|
|
|
|
gender: $('#gender').val(),
|
|
|
|
brand: $('#brand').val(),
|
|
|
|
msort: $('#msort').val(),
|
|
|
|
color: $('#color').val(),
|
|
|
|
size: $('#size').val(),
|
|
|
|
price: $('#price').val(),
|
|
|
|
discount: $('#discount').val(),
|
|
|
|
limit: $('#limit').val(),
|
|
|
|
dayLimit: $('#dayLimit').val(),
|
|
|
|
channel: $('#channel').val(),
|
|
|
|
p_d: $('#p_d').val()
|
|
|
|
};
|
|
|
|
|
|
|
|
var $listNav = $('#list-nav'),
|
|
|
|
|
|
|
|
//导航数据信息
|
|
|
|
navInfo = {
|
|
|
|
today: {
|
|
|
|
reload: true,
|
|
|
|
page: 0,
|
|
|
|
end: false
|
|
|
|
},
|
|
|
|
week: {
|
|
|
|
reload: true,
|
|
|
|
page: 0,
|
|
|
|
end: false
|
|
|
|
},
|
|
|
|
sale: {
|
|
|
|
reload: true,
|
|
|
|
page: 0,
|
|
|
|
end: false
|
|
|
|
},
|
|
|
|
all: {
|
|
|
|
reload: true,
|
|
|
|
page: 0,
|
|
|
|
end: false
|
|
|
|
}
|
|
|
|
},
|
|
|
|
$pre, //纪录进入筛选前的active项
|
|
|
|
searching;
|
|
|
|
|
|
|
|
index = $this.index();
|
|
|
|
pd = getSalePdByChoose(index);
|
|
|
|
$pgc.addClass('hide');
|
|
|
|
$dgc.addClass('hide');
|
|
|
|
$all.addClass('hide');
|
|
|
|
|
|
|
|
$this.addClass('focus');
|
|
|
|
$curNav.removeClass('focus');
|
|
|
|
/**
|
|
|
|
* 筛选注册的回调，筛选子项点击后逻辑
|
|
|
|
* 需要执行search的场景：1.点选筛选项；2.relaod为true时切换导航；3.下拉加载
|
|
|
|
* @param opt {type, id}
|
|
|
|
*/
|
|
|
|
function search(opt) {
|
|
|
|
var setting = {},
|
|
|
|
ext,
|
|
|
|
att,
|
|
|
|
nav, navType,
|
|
|
|
dayLimit,
|
|
|
|
page;
|
|
|
|
|
|
|
|
if (opt) {
|
|
|
|
|
|
|
|
$goods.not('.hide').addClass('hide');
|
|
|
|
$content = $goods.eq(index);
|
|
|
|
$content.removeClass('hide');
|
|
|
|
//筛选项变更则重置reload为true
|
|
|
|
for (att in navInfo) {
|
|
|
|
if (navInfo.hasOwnProperty(att)) {
|
|
|
|
navInfo[att].reload = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$curNav = $this;
|
|
|
|
//处理active状态
|
|
|
|
$listNav.children('.active').removeClass('active');
|
|
|
|
$pre.addClass('active');
|
|
|
|
|
|
|
|
$(document).trigger('scroll'); //Trigger lazyLoad
|
|
|
|
});
|
|
|
|
switch (opt.type) {
|
|
|
|
case 'gender':
|
|
|
|
ext = {
|
|
|
|
gender: opt.id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'brand':
|
|
|
|
ext = {
|
|
|
|
brand: opt.id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'msort':
|
|
|
|
ext = {
|
|
|
|
msort: opt.id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'color':
|
|
|
|
ext = {
|
|
|
|
color: opt.id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'size':
|
|
|
|
ext = {
|
|
|
|
size: opt.id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'price':
|
|
|
|
ext = {
|
|
|
|
price: opt.id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'discount':
|
|
|
|
ext = {
|
|
|
|
discount: opt.id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'limit':
|
|
|
|
ext = {
|
|
|
|
limit: opt.id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'channel':
|
|
|
|
ext = {
|
|
|
|
channel: opt.id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'p_d':
|
|
|
|
ext = {
|
|
|
|
p_d: opt.id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
$.extend(defaultOpt, ext); //扩展筛选项
|
|
|
|
}
|
|
|
|
|
|
|
|
if (searching) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
//导航类别
|
|
|
|
if ($pre === undefined || $pre.hasClass('today')) {
|
|
|
|
navType = 'today';
|
|
|
|
dayLimit = 1;
|
|
|
|
} else if ($pre.hasClass('week')) {
|
|
|
|
navType = 'week';
|
|
|
|
dayLimit = 2;
|
|
|
|
} else if ($pre.hasClass('sale')) {
|
|
|
|
navType = 'sale';
|
|
|
|
dayLimit = 3;
|
|
|
|
}else if ($pre.hasClass('all')) {
|
|
|
|
navType = 'all';
|
|
|
|
dayLimit = 4;
|
|
|
|
}
|
|
|
|
|
|
|
|
//srcoll to load more
|
|
|
|
$(window).scroll(function () {
|
|
|
|
if ($(window).scrollTop() + winH >= $(document).height() - loadMoreH) {
|
|
|
|
if (loading) {
|
|
|
|
nav = navInfo[navType];
|
|
|
|
|
|
|
|
page = nav.page + 1;
|
|
|
|
if (nav.reload) {
|
|
|
|
page = 1;
|
|
|
|
} else if (nav.end) {
|
|
|
|
|
|
|
|
//不需要重新加载并且数据请求结束
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
loading = true;
|
|
|
|
|
|
|
|
// num = $goodList.children('.good-info').length;
|
|
|
|
$.extend(setting, defaultOpt, {
|
|
|
|
dayLimit: dayLimit,
|
|
|
|
page: page
|
|
|
|
});
|
|
|
|
|
|
|
|
searching = true;
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: '/product/newsale/selectNewSale',
|
|
|
|
data: {
|
|
|
|
p_d: pd,
|
|
|
|
page: page + 1
|
|
|
|
},
|
|
|
|
data: setting,
|
|
|
|
success: function(data) {
|
|
|
|
var noResult = '<p class="no-result">未找到相关搜索结果</p>',
|
|
|
|
$container;
|
|
|
|
|
|
|
|
switch (navType) {
|
|
|
|
case 'today':
|
|
|
|
$container = $ngc;
|
|
|
|
break;
|
|
|
|
case 'week':
|
|
|
|
$container = $pgc;
|
|
|
|
break;
|
|
|
|
case 'sale':
|
|
|
|
$container = $dgc;
|
|
|
|
break;
|
|
|
|
case 'all':
|
|
|
|
$container = $all;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (data === ' ') {
|
|
|
|
nav.end = true;
|
|
|
|
|
|
|
|
//opt.end = true;
|
|
|
|
loading = false;
|
|
|
|
return;
|
|
|
|
if (nav.reload) {
|
|
|
|
$container.html(noResult);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (nav.reload) {
|
|
|
|
$container.html(data);
|
|
|
|
} else {
|
|
|
|
$container.append(data);
|
|
|
|
}
|
|
|
|
|
|
|
|
$goodList.append(data);
|
|
|
|
lazyLoad($container.find('.lazy'));
|
|
|
|
}
|
|
|
|
|
|
|
|
//lazyLoad
|
|
|
|
//lazyLoad($goodList.children('.good-info:gt(' + (num - 1) + ')').find('img.lazy'));
|
|
|
|
lazyLoad($('.good-info').find('img.lazy'));
|
|
|
|
nav.reload = false;
|
|
|
|
nav.page = page;
|
|
|
|
|
|
|
|
loading = false;
|
|
|
|
page++;
|
|
|
|
},
|
|
|
|
error: function() {
|
|
|
|
tip.show('网络断开连接了~');
|
|
|
|
loading = false;
|
|
|
|
searching = false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
lazyLoad($('.lazy'));
|
|
|
|
|
|
|
|
filter.registerCbFn(search);
|
|
|
|
|
|
|
|
//导航栏点击逻辑说明：
|
|
|
|
//1.点击非active项时切换active状态
|
|
|
|
//2.价格和折扣active状态时继续点击切换排序
|
|
|
|
//3.筛选无active时点击展开筛选面板
|
|
|
|
//4.筛选有active时点击隐藏筛选面板并恢复点击筛选前active项的active状态
|
|
|
|
//5.当前active为筛选并且点击其他项时，隐藏筛选面板
|
|
|
|
$listNav.delegate('li', 'touchstart', function() {
|
|
|
|
var $this = $(this),
|
|
|
|
nav,
|
|
|
|
navType,
|
|
|
|
$active;
|
|
|
|
|
|
|
|
if ($this.hasClass('filter')) {
|
|
|
|
|
|
|
|
//筛选面板切换状态
|
|
|
|
if ($this.hasClass('active')) {
|
|
|
|
filter.hideFilter();
|
|
|
|
|
|
|
|
//点击筛选钱的active项回复active
|
|
|
|
$pre.addClass('active');
|
|
|
|
$this.removeClass('active');
|
|
|
|
} else {
|
|
|
|
$pre = $this.siblings('.active');
|
|
|
|
|
|
|
|
$pre.removeClass('active');
|
|
|
|
$this.addClass('active');
|
|
|
|
|
|
|
|
filter.showFilter();
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
|
|
|
|
});
|
|
|
|
if ($this.hasClass('new')) {
|
|
|
|
navType = 'newest';
|
|
|
|
} else if ($this.hasClass('price')) {
|
|
|
|
navType = 'price';
|
|
|
|
} else if ($this.hasClass('discount')) {
|
|
|
|
navType = 'discount';
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 根据用户的选择获取商品折扣值
|
|
|
|
*
|
|
|
|
* @param int index
|
|
|
|
* @return string
|
|
|
|
*/
|
|
|
|
function getSalePdByChoose(index) {
|
|
|
|
var pd = "0.1,0.3";
|
|
|
|
switch (index) {
|
|
|
|
case 0:
|
|
|
|
pd = "0.1,0.3";
|
|
|
|
nav = navInfo[navType];
|
|
|
|
|
|
|
|
if ($this.hasClass('active')) {
|
|
|
|
|
|
|
|
//最新无排序切换
|
|
|
|
if ($this.hasClass('new')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if ($this.hasClass('price') || $this.hasClass('discount')) {
|
|
|
|
|
|
|
|
// 价格/折扣切换排序状态
|
|
|
|
$this.find('.icon > .iconfont').toggleClass('cur');
|
|
|
|
$pre = $this; //更新pre为当前项
|
|
|
|
nav.reload = true; //重置reload,HTML会被替换为逆序的HTML
|
|
|
|
nav.order = nav.order === 0 ? 1 : 0; //切换排序
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
$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 'newest':
|
|
|
|
$ngc.removeClass('hide');
|
|
|
|
break;
|
|
|
|
case 1:
|
|
|
|
pd = "0.4,0.6";
|
|
|
|
|
|
|
|
case 'price':
|
|
|
|
$pgc.removeClass('hide');
|
|
|
|
break;
|
|
|
|
case 2:
|
|
|
|
pd = "0.7,0.9";
|
|
|
|
|
|
|
|
case 'discount':
|
|
|
|
$dgc.removeClass('hide');
|
|
|
|
break;
|
|
|
|
case 3:
|
|
|
|
pd = "0.1,0.9";
|
|
|
|
|
|
|
|
case 'all':
|
|
|
|
$dgc.removeClass('hide');
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
return pd;
|
|
|
|
} |
|
|
\ No newline at end of file |
|
|
|
}
|
|
|
|
|
|
|
|
$active.removeClass('active');
|
|
|
|
$this.addClass('active');
|
|
|
|
}
|
|
|
|
|
|
|
|
if (nav.reload) {
|
|
|
|
search();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
$(window).scroll(function() {
|
|
|
|
|
|
|
|
//当scroll到1/4$goodsContainer高度后继续请求下一页数据
|
|
|
|
if ($(window).scrollTop() + winH >
|
|
|
|
$(document).height() - 0.25 * $goodsContainer.height()) {
|
|
|
|
search();
|
|
|
|
}
|
|
|
|
}); |
|
|
\ No newline at end of file |
...
|
...
|
|
