fe / yohobuywap-node · Commits

Go to a project

Authored by baoss
Commit 3d718573e4a6a8a22b5f6742bbaac40d05af24ee 1 parent a3379ac5

tab切换

Inline Side-by-side
Showing 3 changed files with 132 additions and 7 deletions
... ... @@ -45,7 +45,8 @@
{{/each}}
</div>
{{/if}}
{{> common/filter}}
</div>
<a class="bottom" href="/activity/group/order">我的拼团</a>
</div>
\ No newline at end of file
... ...
... ... @@ -5,17 +5,17 @@
<span class="iconfont drop">&#xe613;</span>
</a>
</li> --}}
<li class="new active" data-order="s_t_desc">
<li class="new active" data-type="new" data-order="s_t_desc">
<a href="javascript:void(0);">
<span class="span-test">新品</span>
</a>
</li>
<li class="popularity" data-order="h_v_desc">
<li class="popularity" data-type="popularity" data-order="h_v_desc">
<a href="javascript:void(0);">
<span class="span-test">人气</span>
</a>
</li>
<li class="price">
<li class="price" data-type="price">
<a href="javascript:void(0);">
<span class="span-test">价格</span>
<span class="icon">
... ...
... ... @@ -3,6 +3,10 @@ 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() {
... ... @@ -15,6 +19,43 @@ class Group extends Page {
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();
... ... @@ -26,7 +67,6 @@ class Group extends Page {
// 滚动固定tab
let floorsContentHeight = this.selector.floorsContentHeight + 5;
console.log(floorsContentHeight);
if ($(window).scrollTop() > floorsContentHeight) {
this.selector.tabSection.addClass('float');
this.selector.groupListContent.addClass('mrt');
... ... @@ -38,7 +78,7 @@ class Group extends Page {
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();
... ... @@ -51,8 +91,32 @@ class Group extends Page {
$(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; // 切换排序
}
}
groupTabChange(e) {
let target = $(e.target);
let channel = target.data('channel');
... ... @@ -61,7 +125,8 @@ class Group extends Page {
this.selector.groupTab.find('.tiptext').removeClass('active');
target.addClass('active');
}
console.log(channel);
this.selectedChannel = channel;
this.search();
}
// 顶部swiper
... ... @@ -81,6 +146,65 @@ 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
// });
// }
// });
// }
}
$(() => {
... ...