fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit dec7d3b5e67420fc81259037b2eac3f460cb188e 1 parent a5dc41f5

filter-split

Inline Side-by-side
Showing 2 changed files with 263 additions and 254 deletions
const filter = require('../plugin/filter');
const lazyLoad = require('yoho-jquery-lazyload');
require('product/search/list.page.css');
require('product/shop/redshop.page.css');
require('plugin/sticky');
require('../plugin/sticky');
require('./shop/coupon');
let Tab = require('plugin/tab');
const allProduct = require('./shop/all-product');
let noResultHbs = require('product/search/no-result-new.hbs');
let Tab = require('../plugin/tab');
let $goodsContainer = $('#goods-container');
let $container = $goodsContainer.children('.default-goods'); // 承载商品列表的容器
let $listNav = $('#list-nav'); // 筛选项列表
let $pre = $listNav.find('.active'); // 记录进入筛选前的active项，初始为选中项
let $filterBox = $('.filter-box');
let $filterBody = $('.filter-body');
let navInfo = {
price: {
order: 1,
reload: true,
page: 0,
end: false
},
discount: {
order: 1,
reload: true,
page: 0,
end: false
},
default: {
order: 0,
reload: true,
page: 0,
end: false
},
new: {
order: 0,
reload: true,
page: 0,
end: false
},
sale: {
order: 0,
reload: true,
page: 0,
end: false
}
};
let navType = 'default'; // 目前激活的导航页面
let defaultOpt = navInfo.default; // 默认参数
let onSearching = false; // 是否正在搜索
let isScrollLoad = false; // 是否是滚动加载
let page = 1; // 页码
/**
* 处理筛选参数
*/
function handleChoseFilter() {
$.each($filterBody.find('.chosed'), function(index, elem) {
let choseOpt = {};
choseOpt[$(elem).parent().data('type')] = $(elem).data('id');
Object.assign(defaultOpt, choseOpt);
});
}
/**
* 获取商品列表
*/
function getGoodsList() {
handleChoseFilter();
if (isScrollLoad && !onSearching) {
Object.assign(defaultOpt, {
page: page++
});
}
if (!onSearching) {
onSearching = true;
$.ajax({
type: 'GET',
url: location.protocol + '//m.yohobuy.com/product/search/search',
data: defaultOpt,
xhrFields: {
withCredentials: true
},
beforeSend: function() {
if ($('.no-result-new').length > 0) {
$('.no-result-new').remove();
}
$container.append('<div class="search-divide">正在加载...</div>');
},
success: function(result) {
// 去掉正在加载
$('.search-divide').remove();
// 没有结果输出没有结果页面
if (!result || result.length < 1) {
$container.html(noResultHbs());
onSearching = false;
return false;
}
if (isScrollLoad) {
$container.append(result);
} else {
$container.html(result);
}
lazyLoad($container.find('img[class=lazy]').not('img[src]'));
onSearching = false;
},
error: function() {
let $divide = $('.search-divide');
$divide.text('加载失败，点击重试');
$divide.one('click', function() {
$divide.text('正在加载...');
getGoodsList();
});
onSearching = false;
}
});
}
}
/**
* 当scroll到1/2$goodsContainer高度后继续请求下一页数据
*/
function scrollHandler() {
if ($filterBox.is(':visible') && $(window).scrollTop() > $goodsContainer.height() * 0.6) {
isScrollLoad = true;
getGoodsList();
}
}
/**
* 加载筛选数据
*/
function getFilter() {
$.ajax({
type: 'GET',
url: location.protocol + '//m.yohobuy.com/product/search/filter',
data: defaultOpt,
success: function(data) {
$goodsContainer.append(data);
// 初始化filter&注册filter回调
filter.initFilter({
fCbFn: getGoodsList,
hCbFn: function() {
// 切换active状态到$pre上
$pre.addClass('active');
$pre.siblings('.filter').removeClass('active');
}
});
$filterBody = $('.filter-body');
}
});
}
let $goodsContainer = $('#goods-container');
Tab.prototype.filterhide = function() { // 隐藏筛选 TAB
$filterBox.css('display', 'none');
... ... @@ -175,99 +17,9 @@ Tab.prototype.filterhide = function() { // 隐藏筛选 TAB
Tab.prototype.filtershow = function() { // 显示筛选 TAB
$filterBox.css('display', 'block');
if ($goodsContainer.find('.good-info').length < 1) {
getGoodsList();
allProduct.getGoodsList();
}
};
$listNav.bind('contextmenu', function() {
return false;
});
$listNav.on('touchend touchcancel', function(e) {
isScrollLoad = false;
let $this = $(e.target).closest('li'); // 被点击的 Tab
let $active;
let nav;
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 = 'new';
} else if ($this.hasClass('price')) {
navType = 'price';
} else if ($this.hasClass('discount')) {
navType = 'discount';
} else if ($this.hasClass('default')) {
navType = 'default';
} else if ($this.hasClass('sale')) {
navType = 'sale';
}
// 更新当前排序：默认、最新、价格、折扣
nav = navInfo[navType];
if ($this.hasClass('active')) {
// 默认、最新无排序切换
if ($this.hasClass('default') || $this.hasClass('new')) {
return false;
}
if ($this.hasClass('price') || $this.hasClass('discount')) {
// 价格或折扣切换排序状态
$this.find('.icon > .iconfont').toggleClass('cur');
$pre = $this; // 更新 pre 为当前项
nav.reload = true; // 排序改变，标记需要重新获取数据
nav.order = nav.order === 0 ? 1 : 0; // 切换排序
}
} else {
$active = $this.siblings('.active');
$pre = $this; // $pre为除筛选导航的其他导航项，若当前active的为筛选，则把$pre置为当前点击项
if ($active.hasClass('filter')) {
// 若之前active项为筛选，则隐藏筛选面板
filter.hideFilter();
}
$active.removeClass('active');
$this.addClass('active');
}
/* 排序条件更新 */
defaultOpt.type = navType;
Object.assign(defaultOpt, nav);
if (nav.reload) {
getGoodsList();
}
}
});
// 页面打开直接加载筛选项
getFilter();
// srcoll to load more
$(window).scroll(function() {
window.requestAnimationFrame(scrollHandler);
});
allProduct.getFilter();
... ...
const filter = require('../../plugin/filter');
const lazyLoad = require('yoho-jquery-lazyload');
let noResultHbs = require('product/search/no-result-new.hbs');
let $goodsContainer = $('#goods-container');
let $container = $goodsContainer.children('.default-goods'); // 承载商品列表的容器
let $listNav = $('#list-nav'); // 筛选项列表
let $pre = $listNav.find('.active'); // 记录进入筛选前的active项，初始为选中项
let $filterBox = $('.filter-box');
let $filterBody = $('.filter-body');
let navInfo = {
price: {
order: 1,
reload: true,
page: 0,
end: false
},
discount: {
order: 1,
reload: true,
page: 0,
end: false
},
default: {
order: 0,
reload: true,
page: 0,
end: false
},
new: {
order: 0,
reload: true,
page: 0,
end: false
},
sale: {
order: 0,
reload: true,
page: 0,
end: false
}
};
let navType = 'default'; // 目前激活的导航页面
let defaultOpt = navInfo.default; // 默认参数
let onSearching = false; // 是否正在搜索
let isScrollLoad = false; // 是否是滚动加载
let page = 1; // 页码
/**
* 处理筛选参数
*/
const handleChoseFilter = function() {
$.each($filterBody.find('.chosed'), function(index, elem) {
let choseOpt = {};
choseOpt[$(elem).parent().data('type')] = $(elem).data('id');
Object.assign(defaultOpt, choseOpt);
});
};
/**
* 获取商品列表
*/
const getGoodsList = function() {
handleChoseFilter();
if (isScrollLoad && !onSearching) {
Object.assign(defaultOpt, {
page: page++
});
}
if (!onSearching) {
onSearching = true;
$.ajax({
type: 'GET',
url: location.protocol + '//m.yohobuy.com/product/search/search',
data: defaultOpt,
xhrFields: {
withCredentials: true
},
beforeSend: function() {
if ($('.no-result-new').length > 0) {
$('.no-result-new').remove();
}
$container.append('<div class="search-divide">正在加载...</div>');
},
success: function(result) {
// 去掉正在加载
$('.search-divide').remove();
// 没有结果输出没有结果页面
if (!result || result.length < 1) {
$container.html(noResultHbs());
onSearching = false;
return false;
}
if (isScrollLoad) {
$container.append(result);
} else {
$container.html(result);
}
lazyLoad($container.find('img[class=lazy]').not('img[src]'));
onSearching = false;
},
error: function() {
let $divide = $('.search-divide');
$divide.text('加载失败，点击重试');
$divide.one('click', function() {
$divide.text('正在加载...');
getGoodsList();
});
onSearching = false;
}
});
}
};
/**
* 当scroll到1/2$goodsContainer高度后继续请求下一页数据
*/
const scrollHandler = function() {
if ($filterBox.is(':visible') && $(window).scrollTop() > $goodsContainer.height() * 0.6) {
isScrollLoad = true;
getGoodsList();
}
};
/**
* 加载筛选数据
*/
const getFilter = function() {
$.ajax({
type: 'GET',
url: location.protocol + '//m.yohobuy.com/product/search/filter',
data: defaultOpt,
success: function(data) {
$goodsContainer.append(data);
// 初始化filter&注册filter回调
filter.initFilter({
fCbFn: getGoodsList,
hCbFn: function() {
// 切换active状态到$pre上
$pre.addClass('active');
$pre.siblings('.filter').removeClass('active');
}
});
$filterBody = $('.filter-body');
}
});
};
$listNav.bind('contextmenu', function() {
return false;
});
$listNav.on('touchend touchcancel', function(e) {
isScrollLoad = false;
let $this = $(e.target).closest('li'); // 被点击的 Tab
let $active;
let nav;
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 = 'new';
} else if ($this.hasClass('price')) {
navType = 'price';
} else if ($this.hasClass('discount')) {
navType = 'discount';
} else if ($this.hasClass('default')) {
navType = 'default';
} else if ($this.hasClass('sale')) {
navType = 'sale';
}
// 更新当前排序：默认、最新、价格、折扣
nav = navInfo[navType];
if ($this.hasClass('active')) {
// 默认、最新无排序切换
if ($this.hasClass('default') || $this.hasClass('new')) {
return false;
}
if ($this.hasClass('price') || $this.hasClass('discount')) {
// 价格或折扣切换排序状态
$this.find('.icon > .iconfont').toggleClass('cur');
$pre = $this; // 更新 pre 为当前项
nav.reload = true; // 排序改变，标记需要重新获取数据
nav.order = nav.order === 0 ? 1 : 0; // 切换排序
}
} else {
$active = $this.siblings('.active');
$pre = $this; // $pre为除筛选导航的其他导航项，若当前active的为筛选，则把$pre置为当前点击项
if ($active.hasClass('filter')) {
// 若之前active项为筛选，则隐藏筛选面板
filter.hideFilter();
}
$active.removeClass('active');
$this.addClass('active');
}
/* 排序条件更新 */
defaultOpt.type = navType;
Object.assign(defaultOpt, nav);
if (nav.reload) {
getGoodsList();
}
}
});
// srcoll to load more
$(window).scroll(function() {
window.requestAnimationFrame(scrollHandler);
});
module.exports = {
getGoodsList,
getFilter
};
... ...