|
|
|
import {
|
|
|
|
View
|
|
|
|
} from 'yoho-mvc';
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 排序 nav view
|
|
|
|
*/
|
|
|
|
class NavView extends View {
|
|
|
|
constructor() {
|
|
|
|
super('#list-nav');
|
|
|
|
|
|
|
|
// 初始化变量
|
|
|
|
this.navType = '';
|
|
|
|
this.navInfo = {
|
|
|
|
new: {
|
|
|
|
order: 0,
|
|
|
|
reload: true,
|
|
|
|
page: 1,
|
|
|
|
end: false
|
|
|
|
},
|
|
|
|
price: {
|
|
|
|
order: 1,
|
|
|
|
reload: true,
|
|
|
|
page: 0,
|
|
|
|
end: false
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
this.$pre = this.$base.find('.active');
|
|
|
|
|
|
|
|
// 事件委托
|
|
|
|
this.on('touchend touchcancel', 'li', this.onTabClick.bind(this));
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* nav tab click 事件处理
|
|
|
|
* @param {*} e
|
|
|
|
*/
|
|
|
|
onTabClick(e) {
|
|
|
|
let $this = $(e.currentTarget);
|
|
|
|
let $active;
|
|
|
|
|
|
|
|
if ($this.hasClass('filter')) {
|
|
|
|
// 筛选面板切换状态
|
|
|
|
if ($this.hasClass('active')) {
|
|
|
|
this.filter.hideFilter();
|
|
|
|
} else {
|
|
|
|
this.$pre = $this.siblings('.active');
|
|
|
|
this.filter.showFilter();
|
|
|
|
}
|
|
|
|
this.$pre.toggleClass('active');
|
|
|
|
$this.toggleClass('active');
|
|
|
|
return;
|
|
|
|
} else {
|
|
|
|
if ($this.hasClass('new')) {
|
|
|
|
this.navType = 'new';
|
|
|
|
} else if ($this.hasClass('price')) {
|
|
|
|
this.navType = 'price';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
let nav = this.navInfo[this.navType];
|
|
|
|
|
|
|
|
if ($this.hasClass('active')) {
|
|
|
|
|
|
|
|
// 最新无排序切换
|
|
|
|
if ($this.hasClass('new')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if ($this.hasClass('price')) {
|
|
|
|
|
|
|
|
// 价格切换排序状态
|
|
|
|
$this.find('.icon > .iconfont').toggleClass('cur');
|
|
|
|
this.$pre = $this; // 更新pre为当前项
|
|
|
|
nav.reload = true; // 重置reload,HTML会被替换为逆序的HTML
|
|
|
|
nav.order = nav.order === 0 ? 1 : 0; // 切换排序
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
$active = $this.siblings('.active');
|
|
|
|
|
|
|
|
this.$pre = $this; // $pre为除筛选导航的其他导航项，若当前active的为筛选，则把$pre置为当前点击项
|
|
|
|
|
|
|
|
if ($active.hasClass('filter')) {
|
|
|
|
|
|
|
|
// 若之前active项为筛选，则隐藏筛选面板
|
|
|
|
this.filter.hideFilter();
|
|
|
|
}
|
|
|
|
|
|
|
|
$active.removeClass('active');
|
|
|
|
$this.addClass('active');
|
|
|
|
}
|
|
|
|
|
|
|
|
this.emit('nav-change', nav, this.navType);
|
|
|
|
}
|
|
|
|
|
|
|
|
// 获取默认排序
|
|
|
|
getDefaultNav() {
|
|
|
|
return this.navInfo.new;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 设置前一个tab为选中状态
|
|
|
|
preActive() {
|
|
|
|
this.$pre.addClass('active');
|
|
|
|
this.$pre.siblings('.filter').removeClass('active');
|
|
|
|
}
|
|
|
|
|
|
|
|
setFilter(filter) {
|
|
|
|
this.filter = filter;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 商品列表 view
|
|
|
|
*/
|
|
|
|
class ContentView extends View {
|
|
|
|
constructor() {
|
|
|
|
super('#global-container');
|
|
|
|
this.$ngc = this.$base.children('.new-goods');
|
|
|
|
this.$pgc = this.$base.children('.price-goods');
|
|
|
|
this.$current = this.$ngc;
|
|
|
|
|
|
|
|
this.winH = $(window).height();
|
|
|
|
|
|
|
|
// srcoll to load more
|
|
|
|
$(window).scroll(() => {
|
|
|
|
window.requestAnimationFrame(this.scrollHandler.bind(this));
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 滚动事件处理
|
|
|
|
*/
|
|
|
|
scrollHandler() {
|
|
|
|
// 当scroll到1/2$goodsContainer高度后继续请求下一页数据
|
|
|
|
if ($(window).scrollTop() + this.winH >
|
|
|
|
$(document).height() - 0.5 * this.$current.height()) {
|
|
|
|
this.emit('search');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 商品列表切换
|
|
|
|
* @param {*} e
|
|
|
|
* @param {*} navType
|
|
|
|
*/
|
|
|
|
doContentChange(e, navType) {
|
|
|
|
// 切换container显示
|
|
|
|
this.$base.children('.container:not(.hide)').addClass('hide');
|
|
|
|
|
|
|
|
switch (navType) {
|
|
|
|
case 'new':
|
|
|
|
this.$ngc.removeClass('hide');
|
|
|
|
this.$current = this.$ngc;
|
|
|
|
break;
|
|
|
|
case 'price':
|
|
|
|
this.$pgc.removeClass('hide');
|
|
|
|
this.$current = this.$pgc;
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
setList(data, opts) {
|
|
|
|
if (opts.reload) {
|
|
|
|
this.$current.html(data);
|
|
|
|
} else {
|
|
|
|
this.$current.append(data);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export {
|
|
|
|
NavView,
|
|
|
|
ContentView
|
|
|
|
}; |
...
|
...
|
|
