|
...
|
...
|
@@ -3,16 +3,131 @@ import Swiper from 'yoho-swiper'; |
|
|
|
import $ from 'yoho-jquery';
|
|
|
|
import Page from 'js/yoho-page';
|
|
|
|
|
|
|
|
// import lazyLoad from 'yoho-jquery-lazyload';
|
|
|
|
// import tip from 'js/plugin/tip';
|
|
|
|
// import filter from 'js/plugin/filter';
|
|
|
|
// import loading from 'js/plugin/loading';
|
|
|
|
|
|
|
|
class Group extends Page {
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
|
|
|
|
this.selector = {};
|
|
|
|
this.selector = {
|
|
|
|
tabSection: $('#fixedTab'),
|
|
|
|
floorsContentHeight: $('.floors').height(),
|
|
|
|
groupTab: $('.group-tab'),
|
|
|
|
filterTab: $('.filter-nav'),
|
|
|
|
groupListContent: $('.group-list')
|
|
|
|
};
|
|
|
|
this.navInfo = {
|
|
|
|
new: {
|
|
|
|
order: 1,
|
|
|
|
reload: true,
|
|
|
|
page: 1,
|
|
|
|
end: false
|
|
|
|
},
|
|
|
|
popularity: {
|
|
|
|
order: 1,
|
|
|
|
reload: true,
|
|
|
|
page: 1,
|
|
|
|
end: false
|
|
|
|
},
|
|
|
|
price: {
|
|
|
|
order: 1,
|
|
|
|
reload: true,
|
|
|
|
page: 0,
|
|
|
|
end: false
|
|
|
|
}
|
|
|
|
};
|
|
|
|
this.noResult = '<p class="no-result">未找到相关搜索结果</p>';
|
|
|
|
this.$pre = this.selector.filterTab.find('.active');
|
|
|
|
this.selectedChannel = 'newGroup';
|
|
|
|
this.filterTab = {
|
|
|
|
newGroup: {
|
|
|
|
joinLimit: 1,
|
|
|
|
order: 's_t_desc'
|
|
|
|
},
|
|
|
|
normalGroup: {
|
|
|
|
joinLimit: 2,
|
|
|
|
order: 's_t_desc'
|
|
|
|
}
|
|
|
|
};
|
|
|
|
this.filterPage = {
|
|
|
|
newGroup: {},
|
|
|
|
normalGroup: {}
|
|
|
|
};
|
|
|
|
this.bindEvents();
|
|
|
|
this.swiperTop();
|
|
|
|
|
|
|
|
$(window).scroll(() => {
|
|
|
|
window.requestAnimationFrame(this.scrollHandler.bind(this));
|
|
|
|
});
|
|
|
|
}
|
|
|
|
scrollHandler() {
|
|
|
|
// 滚动固定tab
|
|
|
|
let floorsContentHeight = this.selector.floorsContentHeight + 5;
|
|
|
|
|
|
|
|
if ($(window).scrollTop() > floorsContentHeight) {
|
|
|
|
this.selector.tabSection.addClass('float');
|
|
|
|
this.selector.groupListContent.addClass('mrt');
|
|
|
|
} else {
|
|
|
|
this.selector.tabSection.removeClass('float');
|
|
|
|
this.selector.groupListContent.removeClass('mrt');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
bindEvents() {
|
|
|
|
this.selector.tabSection.on('click', this.fixedTab.bind(this));
|
|
|
|
this.selector.groupTab.on('click', this.groupTabChange.bind(this));
|
|
|
|
this.selector.filterTab.on('click', 'li', this.filterTabChange.bind(this));
|
|
|
|
}
|
|
|
|
fixedTab() {
|
|
|
|
let listHeight = this.selector.groupListContent.height();
|
|
|
|
let windowHeight = $(window).height();
|
|
|
|
|
|
|
|
// 商品列表超过一屏时
|
|
|
|
if (listHeight > windowHeight || listHeight === windowHeight) {
|
|
|
|
if (!this.selector.tabSection.hasClass('float')) {
|
|
|
|
this.selector.tabSection.addClass('float');
|
|
|
|
$(window).scrollTop(this.selector.floorsContentHeight + 10);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
filterTabChange(e) {
|
|
|
|
let $this = $(e.currentTarget);
|
|
|
|
let order = $this.data('order');
|
|
|
|
let navType = $this.data('type');
|
|
|
|
let currentChannel = this.selectedChannel;
|
|
|
|
let nav = this.navInfo[navType];
|
|
|
|
|
|
|
|
if ($this.hasClass('new') || $this.hasClass('popularity')) {
|
|
|
|
this.selector.filterTab.children('li').removeClass('active');
|
|
|
|
$this.addClass('active');
|
|
|
|
this.filterTab[currentChannel].order = order;
|
|
|
|
|
|
|
|
this.search();
|
|
|
|
}
|
|
|
|
if ($this.hasClass('price') || $this.hasClass('discount')) {
|
|
|
|
|
|
|
|
// 价格/折扣切换排序状态
|
|
|
|
$this.find('.icon > .iconfont').toggleClass('cur');
|
|
|
|
nav.reload = true; // 重置reload,HTML会被替换为逆序的HTML
|
|
|
|
nav.order = nav.order === 0 ? 1 : 0; // 切换排序
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
bindEvents() {}
|
|
|
|
groupTabChange(e) {
|
|
|
|
let target = $(e.target);
|
|
|
|
let channel = target.data('channel');
|
|
|
|
|
|
|
|
if (!target.hasClass('active')) {
|
|
|
|
this.selector.groupTab.find('.tiptext').removeClass('active');
|
|
|
|
target.addClass('active');
|
|
|
|
}
|
|
|
|
this.selectedChannel = channel;
|
|
|
|
this.search();
|
|
|
|
}
|
|
|
|
|
|
|
|
// 顶部swiper
|
|
|
|
swiperTop() {
|
|
...
|
...
|
@@ -29,6 +144,67 @@ class Group extends Page { |
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//
|
|
|
|
/**
|
|
|
|
* 筛选注册的回调，筛选子项点击后逻辑
|
|
|
|
* 需要执行search的场景：1.点选筛选项；2.下拉加载
|
|
|
|
* @param opt
|
|
|
|
*/
|
|
|
|
search() {
|
|
|
|
let params = this.filterTab[this.selectedChannel];
|
|
|
|
|
|
|
|
console.log(params);
|
|
|
|
|
|
|
|
// let setting;
|
|
|
|
|
|
|
|
|
|
|
|
// loading.showLoadingMask();
|
|
|
|
|
|
|
|
// $.ajax({
|
|
|
|
// type: 'GET',
|
|
|
|
// url: '/product/sale/search',
|
|
|
|
// data: setting,
|
|
|
|
// success: function() {
|
|
|
|
// },
|
|
|
|
// error: function() {
|
|
|
|
// tip.show('网络断开连接了~');
|
|
|
|
// loading.hideLoadingMask();
|
|
|
|
// }
|
|
|
|
// });
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// 筛选初始化
|
|
|
|
// filterInit(option) {
|
|
|
|
// let $filterMask;
|
|
|
|
|
|
|
|
// $.ajax({
|
|
|
|
// type: 'GET',
|
|
|
|
// url: '/product/sale/filter',
|
|
|
|
// data: $.extend(defaultOpt, {
|
|
|
|
// saleType: '1'
|
|
|
|
// }, option),
|
|
|
|
// success: function(data) {
|
|
|
|
// $filterMask && $filterMask.remove();
|
|
|
|
|
|
|
|
// this.selector.groupListContent.append(data);
|
|
|
|
|
|
|
|
// $filterMask = $('.filter-mask');
|
|
|
|
|
|
|
|
// // 初始化filter&注册filter回调
|
|
|
|
// filter.initFilter({
|
|
|
|
// fCbFn: this.search,
|
|
|
|
// hCbFn: function() {
|
|
|
|
// // 切换active状态到$pre上
|
|
|
|
// this.$pre.addClass('active');
|
|
|
|
// this.$pre.siblings().removeClass('active');
|
|
|
|
// },
|
|
|
|
// missStatus: true
|
|
|
|
// });
|
|
|
|
// }
|
|
|
|
// });
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
|
|
|
|
$(() => {
|
...
|
...
|
|
