|
...
|
...
|
@@ -4,7 +4,7 @@ |
|
|
|
|
|
|
|
var $ = require('jquery'),
|
|
|
|
IScroll = require('iscroll/iscroll-probe'),
|
|
|
|
// lazyLoad = require('yoho.lazyload'),
|
|
|
|
lazyLoad = require('yoho.lazyload'),
|
|
|
|
Swiper = require('yoho.iswiper'),
|
|
|
|
activeTab,
|
|
|
|
myScroll,
|
|
...
|
...
|
@@ -19,6 +19,349 @@ var $ = require('jquery'), |
|
|
|
$nav2 = $('#pos-list'),
|
|
|
|
isIphone = navigator.userAgent.indexOf('iPhone') > 0 ? true : false;//判断浏览器类型
|
|
|
|
|
|
|
|
var tip = require('../plugin/tip'),
|
|
|
|
filter = require('../plugin/filter'),
|
|
|
|
loading = require('../plugin/loading');
|
|
|
|
|
|
|
|
var $goodsContainer = $('#goods-container'),
|
|
|
|
$goodsChildren = $goodsContainer.children(),
|
|
|
|
$ngc = $($goodsChildren.get(0)),
|
|
|
|
$pgc = $($goodsChildren.get(1)),
|
|
|
|
$dgc = $($goodsChildren.get(2));
|
|
|
|
|
|
|
|
var winH = $(window).height(),
|
|
|
|
noResult = '<p class="no-result">未找到相关搜索结果</p>';
|
|
|
|
|
|
|
|
//默认筛选条件
|
|
|
|
var defaultOpt = require('./query-param');
|
|
|
|
|
|
|
|
var $listNav = $('#list-nav'),
|
|
|
|
|
|
|
|
//导航数据信息
|
|
|
|
navInfo = {
|
|
|
|
newest: {
|
|
|
|
order: 1,
|
|
|
|
reload: true,
|
|
|
|
page: 0,
|
|
|
|
end: false
|
|
|
|
},
|
|
|
|
price: {
|
|
|
|
order: 1,
|
|
|
|
reload: true,
|
|
|
|
page: 0,
|
|
|
|
end: false
|
|
|
|
},
|
|
|
|
discount: {
|
|
|
|
order: 1,
|
|
|
|
reload: true,
|
|
|
|
page: 0,
|
|
|
|
end: false
|
|
|
|
}
|
|
|
|
},
|
|
|
|
$pre = $listNav.find('.active'), //纪录进入筛选前的active项，初始为选中项
|
|
|
|
searching;
|
|
|
|
|
|
|
|
function search(opt) {
|
|
|
|
var setting = {},
|
|
|
|
ext,
|
|
|
|
att,
|
|
|
|
nav, navType,
|
|
|
|
page;
|
|
|
|
|
|
|
|
if (searching) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (opt) {
|
|
|
|
|
|
|
|
//筛选项变更则重置reload为true
|
|
|
|
for (att in navInfo) {
|
|
|
|
if (navInfo.hasOwnProperty(att)) {
|
|
|
|
navInfo[att].reload = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//处理active状态
|
|
|
|
$listNav.children('.active').removeClass('active');
|
|
|
|
$pre.addClass('active');
|
|
|
|
|
|
|
|
switch (opt.type) {
|
|
|
|
case 'gender':
|
|
|
|
ext = {
|
|
|
|
gender: opt.id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'brand':
|
|
|
|
ext = {
|
|
|
|
brand: opt.id
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'sort':
|
|
|
|
ext = {
|
|
|
|
sort: 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;
|
|
|
|
}
|
|
|
|
|
|
|
|
$.extend(defaultOpt, ext); //扩展筛选项
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//导航类别
|
|
|
|
if ($pre.hasClass('new')) {
|
|
|
|
navType = 'newest';
|
|
|
|
} else if ($pre.hasClass('price')) {
|
|
|
|
navType = 'price';
|
|
|
|
} else if ($pre.hasClass('discount')) {
|
|
|
|
navType = 'discount';
|
|
|
|
}
|
|
|
|
|
|
|
|
nav = navInfo[navType];
|
|
|
|
|
|
|
|
page = nav.page + 1;
|
|
|
|
if (nav.reload) {
|
|
|
|
page = 1;
|
|
|
|
} else if (nav.end) {
|
|
|
|
|
|
|
|
//不需要重新加载并且数据请求结束
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
$.extend(setting, defaultOpt, {
|
|
|
|
type: navType,
|
|
|
|
order: nav.order,
|
|
|
|
page: page
|
|
|
|
});
|
|
|
|
|
|
|
|
searching = true;
|
|
|
|
loading.showLoadingMask();
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: '/product/newsale/selectNewSale',
|
|
|
|
data: setting,
|
|
|
|
success: function(data) {
|
|
|
|
var $container,
|
|
|
|
num;
|
|
|
|
|
|
|
|
switch (navType) {
|
|
|
|
case 'newest':
|
|
|
|
$container = $ngc;
|
|
|
|
break;
|
|
|
|
case 'price':
|
|
|
|
$container = $pgc;
|
|
|
|
break;
|
|
|
|
case 'discount':
|
|
|
|
$container = $dgc;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
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();
|
|
|
|
},
|
|
|
|
error: function() {
|
|
|
|
tip.show('网络断开连接了~');
|
|
|
|
searching = false;
|
|
|
|
loading.hideLoadingMask();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: '/product/newsale/filter',
|
|
|
|
data: defaultOpt,
|
|
|
|
success: function(data) {
|
|
|
|
$goodsContainer.append(data);
|
|
|
|
|
|
|
|
//初始化filter&注册filter回调
|
|
|
|
filter.initFilter({
|
|
|
|
fCbFn: search,
|
|
|
|
hCbFn: function() {
|
|
|
|
|
|
|
|
//切换active状态到$pre上
|
|
|
|
$pre.addClass('active');
|
|
|
|
$pre.siblings('.filter').removeClass('active');
|
|
|
|
},
|
|
|
|
missStatus: true
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
$listNav.bind('contextmenu', function(e) {
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
|
|
|
|
$listNav.on('touchend touchcancel', function(e) {
|
|
|
|
var $this = $(e.target).closest('li'),
|
|
|
|
nav,
|
|
|
|
navType,
|
|
|
|
$active;
|
|
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
if (typeof $this === 'undefined' || $this.length === 0) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
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';
|
|
|
|
}
|
|
|
|
|
|
|
|
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 'price':
|
|
|
|
$pgc.removeClass('hide');
|
|
|
|
break;
|
|
|
|
|
|
|
|
case 'discount':
|
|
|
|
$dgc.removeClass('hide');
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$active.removeClass('active');
|
|
|
|
$this.addClass('active');
|
|
|
|
}
|
|
|
|
|
|
|
|
if (nav.reload) {
|
|
|
|
search();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
e.stopPropagation();
|
|
|
|
});
|
|
|
|
|
|
|
|
function scrollHandler() {
|
|
|
|
|
|
|
|
//当scroll到1/4$goodsContainer高度后继续请求下一页数据
|
|
|
|
if ($(window).scrollTop() + winH >
|
|
|
|
$(document).height() - 0.25 * $goodsContainer.height() - 50) {
|
|
|
|
if ($pre !== undefined) {
|
|
|
|
search();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//srcoll to load more
|
|
|
|
$(window).scroll(function() {
|
|
|
|
window.requestAnimationFrame(scrollHandler);
|
|
|
|
});
|
|
|
|
|
|
|
|
//初始请求最新第一页数据
|
|
|
|
search();
|
|
|
|
|
|
|
|
$listNav.on('touchstart', 'li', function(e) {
|
|
|
|
$(this).addClass('bytouch');
|
|
|
|
}).on('touchend touchcancel', function() {
|
|
|
|
$listNav.find('li').removeClass('bytouch');
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// lazyLoad($('img.lazy'));
|
|
|
|
|
|
|
|
if ($('.banner-swiper').find('li').size() > 1) {
|
|
...
|
...
|
@@ -47,53 +390,53 @@ if ($('.multi-browse').find('li').size() > 1) { |
|
|
|
}
|
|
|
|
|
|
|
|
function tabChange(dom, index) {
|
|
|
|
var li = dom.eq(index);
|
|
|
|
var li = dom.eq(index),
|
|
|
|
sortSize = li.find('.iconfont').length;
|
|
|
|
|
|
|
|
dom.removeClass('active');
|
|
|
|
dom.removeClass('color');
|
|
|
|
li.addClass('active');
|
|
|
|
|
|
|
|
dom.removeClass('color');
|
|
|
|
li.addClass('color');
|
|
|
|
|
|
|
|
li.addClass('active');
|
|
|
|
}
|
|
|
|
|
|
|
|
$.jqtab = function(nav, nav1, main) {
|
|
|
|
|
|
|
|
$(nav + ' li, ' + nav1 + ' li').on('touchstart', function() {
|
|
|
|
var index = $(this).index();
|
|
|
|
$.jqtab = function(nav, posNav, main) {
|
|
|
|
|
|
|
|
$(nav + ' li, ' + posNav + ' li').on('touchstart', function() {
|
|
|
|
var index = $(this).index(),
|
|
|
|
activeTab = $(this).attr('tab');
|
|
|
|
console.log(activeTab)
|
|
|
|
|
|
|
|
tabChange($(nav + ' li'), index);
|
|
|
|
tabChange($(nav1 + ' li'), index);
|
|
|
|
tabChange($(posNav + ' li'), index);
|
|
|
|
|
|
|
|
$(main).hide();
|
|
|
|
$('#' + activeTab).fadeIn();
|
|
|
|
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
};
|
|
|
|
$.jqtab('#nav','#pos-nav', '.main');
|
|
|
|
|
|
|
|
|
|
|
|
$.jqtab('#nav','#pos-nav','.main');
|
|
|
|
|
|
|
|
$(function(){
|
|
|
|
// if (!isIphone) {
|
|
|
|
// return;
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
$('#wrapper').addClass('scroll-wrapper');
|
|
|
|
myScroll = new IScroll('#wrapper', {
|
|
|
|
probeType: 3,
|
|
|
|
mouseWheel: true,
|
|
|
|
click: true
|
|
|
|
});
|
|
|
|
lazyLoad($('img.lazy'));
|
|
|
|
|
|
|
|
setTimeout(function(){
|
|
|
|
myScroll = new IScroll('#wrapper', {
|
|
|
|
probeType: 3,
|
|
|
|
mouseWheel: true,
|
|
|
|
click: true
|
|
|
|
});
|
|
|
|
|
|
|
|
document.addEventListener('touchmove', function(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
if (!isIphone) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
// lazyLoad($('img.lazy'), {
|
|
|
|
// container: $("#scroller")
|
|
|
|
// });
|
|
|
|
|
|
|
|
myScroll.on('scroll', function() {
|
|
|
|
var sTop = -this.y;
|
|
|
|
myScroll.on('scroll', function() {
|
|
|
|
var sTop = -this.y;
|
|
|
|
|
|
|
|
if (sTop < imgH) {
|
|
|
|
if (!$nav1.hasClass('hide')) {
|
|
...
|
...
|
@@ -153,7 +496,23 @@ $(function(){ |
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$("#scroller").trigger('scroll');
|
|
|
|
});
|
|
|
|
}, 1000)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// console.log(lazyLoad)
|
|
|
|
// console.log($('#scroller').height())
|
|
|
|
|
|
|
|
document.addEventListener('touchmove', function(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
if (!isIphone) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
//window onload 后重新refresh iscroll
|
|
...
|
...
|
@@ -168,13 +527,3 @@ window.onload = function() { |
|
|
|
scH = $('#scroller').outerHeight();
|
|
|
|
};
|
|
|
|
|
|
|
|
// $(nav + ' li, ' + nav1 + ' li').on('touchstart', function() {
|
|
|
|
// $.ajax({
|
|
|
|
// url:,
|
|
|
|
// data:,
|
|
|
|
// xxx:,
|
|
|
|
// success:function(data){
|
|
|
|
// $('#nav-main').append(data);
|
|
|
|
// }
|
|
|
|
// });
|
|
|
|
// }); |
|
|
\ No newline at end of file |
...
|
...
|
|
