|
...
|
...
|
@@ -7,7 +7,8 @@ let innerScroll = require('js/plugin/inner-scroll'); |
|
|
|
|
|
|
|
// import lazyLoad from 'yoho-jquery-lazyload';
|
|
|
|
// import tip from 'js/plugin/tip';
|
|
|
|
// import loading from 'js/plugin/loading';
|
|
|
|
import loading from 'js/plugin/loading';
|
|
|
|
|
|
|
|
|
|
|
|
class Group extends Page {
|
|
|
|
constructor() {
|
|
...
|
...
|
@@ -18,32 +19,33 @@ class Group extends Page { |
|
|
|
floorsContentHeight: $('.floors').height(),
|
|
|
|
groupTab: $('.group-tab'),
|
|
|
|
filterTab: $('.filter-nav'),
|
|
|
|
groupListContent: $('.group-list')
|
|
|
|
groupListContent: $('.goods-list')
|
|
|
|
};
|
|
|
|
this.navInfo = {
|
|
|
|
new: {
|
|
|
|
order: 's_t_desc',
|
|
|
|
reload: true,
|
|
|
|
page: 1,
|
|
|
|
end: false
|
|
|
|
reload: true, // 是否重新加载
|
|
|
|
isScrollLoad: false, // 是否是滚动加载
|
|
|
|
page: 0,
|
|
|
|
end: false // 是否继续请求数据
|
|
|
|
},
|
|
|
|
popularity: {
|
|
|
|
order: 'h_v_desc',
|
|
|
|
reload: true,
|
|
|
|
isScrollLoad: false,
|
|
|
|
page: 0,
|
|
|
|
end: false
|
|
|
|
},
|
|
|
|
price: {
|
|
|
|
order: 's_p_asc',
|
|
|
|
reload: true,
|
|
|
|
isScrollLoad: false,
|
|
|
|
page: 0,
|
|
|
|
end: false
|
|
|
|
}
|
|
|
|
};
|
|
|
|
this.noResult = '<p class="no-result">未找到相关搜索结果</p>';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.defaultLimit = 15;
|
|
|
|
this.selectedChannel = 'newGroup';
|
|
|
|
this.filterTab = {
|
|
|
|
newGroup: {
|
|
...
|
...
|
@@ -64,10 +66,22 @@ class Group extends Page { |
|
|
|
this.bindEvents();
|
|
|
|
this.swiperTop();
|
|
|
|
this.filterInit();
|
|
|
|
$(window).scroll(() => {
|
|
|
|
window.requestAnimationFrame(this.scrollHandler.bind(this));
|
|
|
|
let self = this;
|
|
|
|
|
|
|
|
$(window).scroll(function() {
|
|
|
|
window.requestAnimationFrame(() => {
|
|
|
|
self.scrollHandler();
|
|
|
|
});
|
|
|
|
|
|
|
|
setTimeout(function() {
|
|
|
|
window.requestAnimationFrame(() => {
|
|
|
|
self.scrollListHandler();
|
|
|
|
});
|
|
|
|
}, 5);
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
scrollHandler() {
|
|
|
|
// 滚动固定tab
|
|
|
|
let floorsContentHeight = this.selector.floorsContentHeight + 5;
|
|
...
|
...
|
@@ -80,6 +94,22 @@ class Group extends Page { |
|
|
|
this.selector.groupListContent.removeClass('mrt');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
scrollListHandler() {
|
|
|
|
// 当scroll到1/2$goodsContainer高度后继续请求下一页数据
|
|
|
|
let floorsContentHeight = this.selector.floorsContentHeight + 5;
|
|
|
|
let goodsContainerHeight = this.selector.groupListContent.height();
|
|
|
|
let navType = this.judgeType(this.filterTab[this.selectedChannel].$pre);
|
|
|
|
let nav = this.navInfo[navType];
|
|
|
|
|
|
|
|
if (($(window).scrollTop() - floorsContentHeight) > goodsContainerHeight * 0.6) {
|
|
|
|
nav.reload = false;
|
|
|
|
nav.isScrollLoad = true;
|
|
|
|
console.log('load');
|
|
|
|
if (!nav.end) {
|
|
|
|
this.search();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
bindEvents() {
|
|
|
|
this.selector.tabSection.on('click', this.fixedTab.bind(this));
|
|
|
|
this.selector.groupTab.on('click', this.groupTabChange.bind(this));
|
|
...
|
...
|
@@ -126,6 +156,9 @@ class Group extends Page { |
|
|
|
return;
|
|
|
|
}
|
|
|
|
nav.reload = true;
|
|
|
|
nav.end = false;
|
|
|
|
nav.isScrollLoad = false;
|
|
|
|
nav.page = 0;
|
|
|
|
nav.order = $this.data('order');
|
|
|
|
this.filterTab[currentChannel].order = nav.order;
|
|
|
|
}
|
|
...
|
...
|
@@ -134,6 +167,9 @@ class Group extends Page { |
|
|
|
if ($this.hasClass('price')) {
|
|
|
|
$this.find('.icon > .iconfont').toggleClass('cur');
|
|
|
|
nav.reload = true;
|
|
|
|
nav.end = false;
|
|
|
|
nav.isScrollLoad = false;
|
|
|
|
nav.page = 0;
|
|
|
|
nav.order = nav.order === 's_p_asc' ? 's_p_desc' : 's_p_asc'; // 切换排序
|
|
|
|
this.filterTab[currentChannel].order = nav.order;
|
|
|
|
}
|
|
...
|
...
|
@@ -167,8 +203,9 @@ class Group extends Page { |
|
|
|
for (let i in navInfo) {
|
|
|
|
if (navInfo.hasOwnProperty(i)) {
|
|
|
|
navInfo[i].reload = true;
|
|
|
|
navInfo[i].isScrollLoad = false;
|
|
|
|
navInfo[i].end = false;
|
|
|
|
|
|
|
|
navInfo[i].page = 0;
|
|
|
|
if (i === 'price') {
|
|
|
|
navInfo[i].order = 's_p_asc';
|
|
|
|
}
|
|
...
|
...
|
@@ -189,6 +226,10 @@ class Group extends Page { |
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 清除筛选页存储的数据
|
|
|
|
this.filterPage.newGroup = {};
|
|
|
|
this.filterPage.normalGroup = {};
|
|
|
|
|
|
|
|
// 根据条件重置筛选页面及商品列表
|
|
|
|
this.filterInit();
|
|
|
|
this.search();
|
|
...
|
...
|
@@ -210,6 +251,23 @@ class Group extends Page { |
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 判断导航类型
|
|
|
|
judgeType(dom) {
|
|
|
|
let navType;
|
|
|
|
|
|
|
|
if (dom.hasClass('new')) {
|
|
|
|
navType = 'new';
|
|
|
|
} else if (dom.hasClass('popularity')) {
|
|
|
|
navType = 'popularity';
|
|
|
|
} else if (dom.hasClass('price')) {
|
|
|
|
navType = 'price';
|
|
|
|
} else {
|
|
|
|
navType = 'other';
|
|
|
|
}
|
|
|
|
|
|
|
|
return navType;
|
|
|
|
}
|
|
|
|
|
|
|
|
//
|
|
|
|
/**
|
|
|
|
* 筛选注册的回调，筛选子项点击后逻辑
|
|
...
|
...
|
@@ -217,35 +275,108 @@ class Group extends Page { |
|
|
|
* @param opt
|
|
|
|
*/
|
|
|
|
search() {
|
|
|
|
let params = this.filterTab[this.selectedChannel];
|
|
|
|
let groupListContent = this.selector.groupListContent;
|
|
|
|
let params = {
|
|
|
|
...this.filterTab[this.selectedChannel]
|
|
|
|
};
|
|
|
|
let pageParams = this.filterPage[this.selectedChannel];
|
|
|
|
let nav;
|
|
|
|
let navType;
|
|
|
|
let page;
|
|
|
|
let that = this;
|
|
|
|
|
|
|
|
delete params.$pre;
|
|
|
|
|
|
|
|
console.log('searchParam', params);
|
|
|
|
console.log('pageParams', this.filterPage[this.selectedChannel]);
|
|
|
|
|
|
|
|
// 导航类别
|
|
|
|
navType = this.judgeType(this.filterTab[this.selectedChannel].$pre);
|
|
|
|
nav = this.navInfo[navType];
|
|
|
|
page = nav.page + 1;
|
|
|
|
if (nav.reload) {
|
|
|
|
page = 1;
|
|
|
|
}
|
|
|
|
nav.page = page;
|
|
|
|
console.log('nav', nav);
|
|
|
|
if (nav.end) {
|
|
|
|
// 不需要重新加载并且数据请求结束
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
loading.showLoadingMask();
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: '/activity/group/search',
|
|
|
|
data: {
|
|
|
|
...params,
|
|
|
|
...pageParams,
|
|
|
|
page
|
|
|
|
},
|
|
|
|
beforeSend: () => {
|
|
|
|
if ($('.search-divide').length > 0) {
|
|
|
|
$('.search-divide').remove();
|
|
|
|
}
|
|
|
|
|
|
|
|
groupListContent.after(() => {
|
|
|
|
return '<div class="search-divide">正在加载...</div>';
|
|
|
|
});
|
|
|
|
},
|
|
|
|
success: (data) => {
|
|
|
|
that.dataRender(data, nav);
|
|
|
|
},
|
|
|
|
error: () => {
|
|
|
|
let $divide = $('.search-divide');
|
|
|
|
|
|
|
|
// let setting;
|
|
|
|
$divide.text('加载失败，点击重试');
|
|
|
|
$divide.one('click', () => {
|
|
|
|
$divide.text('正在加载...');
|
|
|
|
this.search();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
dataRender(result, curNav) {
|
|
|
|
// 去掉正在加载
|
|
|
|
$('.search-divide').remove();
|
|
|
|
|
|
|
|
let isResult = !result || !result.length ||
|
|
|
|
result.length < 1 ||
|
|
|
|
(result.list && result.list.length < 1);
|
|
|
|
|
|
|
|
// loading.showLoadingMask();
|
|
|
|
let groupListContent = this.selector.groupListContent;
|
|
|
|
|
|
|
|
// $.ajax({
|
|
|
|
// type: 'GET',
|
|
|
|
// url: '/product/sale/search',
|
|
|
|
// data: setting,
|
|
|
|
// success: function() {
|
|
|
|
// },
|
|
|
|
// error: function() {
|
|
|
|
// tip.show('网络断开连接了~');
|
|
|
|
// loading.hideLoadingMask();
|
|
|
|
// }
|
|
|
|
// });
|
|
|
|
// 没有结果输出没有结果页面
|
|
|
|
if (isResult) {
|
|
|
|
if (curNav.isScrollLoad && !curNav.reload) {
|
|
|
|
groupListContent.after(() => {
|
|
|
|
return '<div class="search-divide">没有更多内容了...</div>';
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
groupListContent.html('<div>未查询到数据！</div>');
|
|
|
|
}
|
|
|
|
|
|
|
|
curNav.end = true;
|
|
|
|
console.log('curNav', curNav);
|
|
|
|
return false;
|
|
|
|
} else {
|
|
|
|
if (curNav.isScrollLoad && !curNav.reload) {
|
|
|
|
groupListContent.append(result);
|
|
|
|
} else {
|
|
|
|
groupListContent.html(result);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 筛选初始化
|
|
|
|
filterInit() {
|
|
|
|
let selectedChannel = this.selectedChannel;
|
|
|
|
let requestParams = {
|
|
|
|
...this.filterTab[this.selectedChannel]
|
|
|
|
...this.filterTab[selectedChannel]
|
|
|
|
};
|
|
|
|
let filterTab = this.selector.filterTab;
|
|
|
|
let filterPage = this.filterPage;
|
|
|
|
let search = this.search.bind(this);
|
|
|
|
|
|
|
|
delete requestParams.$pre;
|
|
...
|
...
|
@@ -260,7 +391,13 @@ class Group extends Page { |
|
|
|
|
|
|
|
// 初始化filter&注册filter回调
|
|
|
|
filter.initFilter({
|
|
|
|
fCbFn: search,
|
|
|
|
fCbFn: function(params) {
|
|
|
|
console.log(params);
|
|
|
|
|
|
|
|
// 存储筛选页数据
|
|
|
|
filterPage[selectedChannel][params.type] = params.id;
|
|
|
|
search();
|
|
|
|
},
|
|
|
|
hCbFn: function() {
|
|
|
|
filterTab.children('.filter').removeClass('active');
|
|
|
|
innerScroll.enableScroll($('body'));
|
...
|
...
|
|
