|
|
|
/*
|
|
|
|
* @Author: Targaryen
|
|
|
|
* @Date: 2017-03-24 13:43:55
|
|
|
|
* @Last Modified by: Targaryen
|
|
|
|
* @Last Modified time: 2017-06-20 09:50:01
|
|
|
|
*/
|
|
|
|
|
|
|
|
/** *****************************
|
|
|
|
* 红人店铺使用的全部商品页面碎片
|
|
|
|
*******************************/
|
|
|
|
|
|
|
|
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 $allGoodsTabPage = $(document.getElementById('all-goods'));
|
|
|
|
let $filterBody = $('.filter-body');
|
|
|
|
let $dropList = $('.drop-list');
|
|
|
|
|
|
|
|
const shopId = $('#shopId').val();
|
|
|
|
|
|
|
|
let navInfo = {
|
|
|
|
price: {
|
|
|
|
order: 1,
|
|
|
|
end: false
|
|
|
|
},
|
|
|
|
discount: {
|
|
|
|
order: 1,
|
|
|
|
end: false
|
|
|
|
},
|
|
|
|
default: {
|
|
|
|
order: 0,
|
|
|
|
end: false,
|
|
|
|
type: 'default'
|
|
|
|
},
|
|
|
|
new: {
|
|
|
|
order: 0,
|
|
|
|
end: false
|
|
|
|
},
|
|
|
|
sale: {
|
|
|
|
order: 0,
|
|
|
|
end: false
|
|
|
|
},
|
|
|
|
popularity: {
|
|
|
|
order: 0,
|
|
|
|
end: false
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
let beforeScroll = document.body.scrollTop; // 滚动前位置记录
|
|
|
|
let navType = 'default'; // 目前激活的导航页面
|
|
|
|
let defaultOpt = Object.assign({}, navInfo.default, {shop_id: shopId}); // 默认参数
|
|
|
|
let onSearching = false; // 是否正在搜索
|
|
|
|
let isScrollLoad = false; // 是否是滚动加载
|
|
|
|
let page = 1; // 页码
|
|
|
|
let nav;
|
|
|
|
let $firstText = $('.first-li-more').find('.nav-txt');
|
|
|
|
let $thisLi = '';
|
|
|
|
|
|
|
|
// 物料商品列表标记
|
|
|
|
if ($('#material-flag').val() === 'material') {
|
|
|
|
let material = true;
|
|
|
|
|
|
|
|
if ($('.first-li-more').hasClass('active')) {
|
|
|
|
page = 2; // 已在服务端渲染第一页
|
|
|
|
}
|
|
|
|
Object.assign(defaultOpt, {
|
|
|
|
material: material,
|
|
|
|
unionType: window.queryString.union_type
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 处理筛选参数
|
|
|
|
*/
|
|
|
|
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 = params => {
|
|
|
|
handleChoseFilter();
|
|
|
|
|
|
|
|
if (!onSearching) {
|
|
|
|
Object.assign(defaultOpt, {
|
|
|
|
page: page++
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
// 有参数，参数优先，滚动加载相关参数重置
|
|
|
|
if (params && !params.filtering) {
|
|
|
|
Object.assign(defaultOpt, params);
|
|
|
|
if (params.page) {
|
|
|
|
page = params.page + 1;
|
|
|
|
}
|
|
|
|
isScrollLoad = false;
|
|
|
|
beforeScroll = document.body.scrollTop;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (nav && nav.end) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
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();
|
|
|
|
|
|
|
|
let noResult = !result || result.length < 1 || (result.list && result.list.length < 1);
|
|
|
|
|
|
|
|
|
|
|
|
// 没有结果输出没有结果页面
|
|
|
|
if (noResult) {
|
|
|
|
if (isScrollLoad) {
|
|
|
|
$container.append('<div class="search-divide">没有更多内容了...</div>');
|
|
|
|
} else {
|
|
|
|
$container.html(noResultHbs());
|
|
|
|
}
|
|
|
|
|
|
|
|
if (nav) {
|
|
|
|
nav.end = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 加载筛选数据
|
|
|
|
*/
|
|
|
|
const getFilter = function() {
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: location.protocol + '//m.yohobuy.com/product/search/filter',
|
|
|
|
data: defaultOpt,
|
|
|
|
success: function(data) {
|
|
|
|
if (!data) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
$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;
|
|
|
|
});
|
|
|
|
|
|
|
|
const popularityFilter = function(thisLi, type) {
|
|
|
|
if (thisLi.hasClass('active')) {
|
|
|
|
$dropList.hide();
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
$thisLi.addClass('active').siblings('li').removeClass('active');
|
|
|
|
|
|
|
|
defaultOpt.type = type;
|
|
|
|
|
|
|
|
nav = navInfo[type];
|
|
|
|
|
|
|
|
if (thisLi.hasClass('asc')) {
|
|
|
|
nav.order = 1;
|
|
|
|
} else {
|
|
|
|
nav.order = 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
Object.assign(defaultOpt, nav);
|
|
|
|
getGoodsList();
|
|
|
|
$dropList.hide();
|
|
|
|
};
|
|
|
|
|
|
|
|
$listNav.on('touchend touchcancel', function(e) {
|
|
|
|
page = 1;
|
|
|
|
beforeScroll = $(window).scrollTop();
|
|
|
|
isScrollLoad = false;
|
|
|
|
|
|
|
|
let $this = $(e.target).closest('li'); // 被点击的 Tab
|
|
|
|
let $active;
|
|
|
|
|
|
|
|
// 默认列表增加人气筛选
|
|
|
|
if ($this.hasClass('first-li-more') && $this.hasClass('active')) {
|
|
|
|
$this.siblings('.active').removeClass('active');
|
|
|
|
$this.addClass('active');
|
|
|
|
$dropList.toggle();
|
|
|
|
$dropList.find('.default').on('touchend touchcancel', function() {
|
|
|
|
$thisLi = $(this);
|
|
|
|
$firstText.html('默认');
|
|
|
|
popularityFilter($thisLi, 'default');
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
$dropList.find('.discount').on('touchend touchcancel', function() {
|
|
|
|
$thisLi = $(this);
|
|
|
|
$firstText.html($(this).data('text'));
|
|
|
|
popularityFilter($thisLi, 'discount');
|
|
|
|
$('.first-li-more').removeClass('new default sale discount').addClass('discount');
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
} else if ($this.hasClass('filter')) { // 筛选面板
|
|
|
|
$dropList.css('display', 'none');
|
|
|
|
|
|
|
|
// 筛选面板切换状态
|
|
|
|
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 { // 排序改变
|
|
|
|
$dropList.css('display', 'none');
|
|
|
|
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';
|
|
|
|
} else if ($this.hasClass('popularity')) {
|
|
|
|
navType = 'popularity';
|
|
|
|
}
|
|
|
|
|
|
|
|
// 更新当前排序：默认、最新、价格、折扣
|
|
|
|
nav = navInfo[navType];
|
|
|
|
|
|
|
|
if ($this.hasClass('active')) {
|
|
|
|
|
|
|
|
// 默认、最新无排序切换
|
|
|
|
if ($this.hasClass('default') || $this.hasClass('new') || $this.hasClass('popularity')) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
if ($this.hasClass('price') || $this.hasClass('discount')) {
|
|
|
|
|
|
|
|
// 价格或折扣切换排序状态
|
|
|
|
$this.find('.icon > .iconfont').toggleClass('cur');
|
|
|
|
$pre = $this; // 更新 pre 为当前项
|
|
|
|
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);
|
|
|
|
|
|
|
|
getGoodsList();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 当scroll到1/2$goodsContainer高度后继续请求下一页数据
|
|
|
|
*/
|
|
|
|
const scrollHandler = function() {
|
|
|
|
if ($allGoodsTabPage.hasClass('active') && $(window).scrollTop() > $goodsContainer.height() * 0.6) {
|
|
|
|
isScrollLoad = true;
|
|
|
|
getGoodsList();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 滚动加载
|
|
|
|
*/
|
|
|
|
$(window).scroll(function() {
|
|
|
|
setTimeout(function() {
|
|
|
|
let afterScroll = document.body.scrollTop;
|
|
|
|
|
|
|
|
if (afterScroll - beforeScroll > 0) {
|
|
|
|
window.requestAnimationFrame(scrollHandler);
|
|
|
|
beforeScroll = afterScroll;
|
|
|
|
} else {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}, 5);
|
|
|
|
});
|
|
|
|
|
|
|
|
module.exports = {
|
|
|
|
getGoodsList,
|
|
|
|
getFilter
|
|
|
|
}; |
