fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit 3e609d4e08bc60c9f88c8b2676d8097cea6ebc32 1 parent af5dd480

reds-shop-scroll

Inline Side-by-side
Showing 3 changed files with 32 additions and 382 deletions
... ... @@ -14,6 +14,7 @@ const lazyLoad = require('yoho-jquery-lazyload');
class ProductListWithFilter {
constructor(filterParams, searchUrl) {
this.scrollActived = true;
this.filterParams = filterParams;
this.searchUrl = location.protocol + '//m.yohobuy.com/' + (searchUrl || 'product/search/search');
this.filterUrl = location.protocol + '//m.yohobuy.com/product/search/filter';
... ... @@ -68,18 +69,20 @@ class ProductListWithFilter {
* 滚动加载
*/
$(window).scroll(() => {
setTimeout(() => {
let afterScroll = document.body.scrollTop;
if (afterScroll - this.beforeScroll > 0) {
window.requestAnimationFrame(() => {
this.scrollHandler();
});
this.beforeScroll = afterScroll;
} else {
return false;
}
}, 5);
if (this.scrollActived) {
setTimeout(() => {
let afterScroll = document.body.scrollTop;
if (afterScroll - this.beforeScroll > 0) {
window.requestAnimationFrame(() => {
this.scrollHandler();
});
this.beforeScroll = afterScroll;
} else {
return false;
}
}, 5);
}
});
}
... ...
... ... @@ -3,25 +3,38 @@ require('product/search/list.page.css');
require('product/shop/redshop.page.css');
const $ = require('yoho-jquery');
const allProduct = require('./shop/all-product');
const shopId = $('#shopId').val();
const ProductListWithFilter = require('product/product-list-with-filter');
let Tab = require('../plugin/tab');
let $filterBox = $('.filter-box');
let $shopCategory = $('#shop-category');
let $listNav = $('#list-nav'); // 筛选项列表
/**
* 初始化全部商品 TAB 页
*/
let productListWithFilter = new ProductListWithFilter({
shop_id: shopId
});
productListWithFilter.scrollActived = false;
Tab.prototype.home = function() { // 隐藏筛选 TAB
$filterBox.css('display', 'none');
productListWithFilter.scrollActived = false;
};
Tab.prototype.getallgoods = function() { // 显示筛选 TAB
$listNav.find('li').removeClass('active');
$listNav.find('.default').addClass('active');
$filterBox.css('display', 'block');
allProduct.getGoodsList({type: 'default', page: 1});
productListWithFilter.getGoodsList({type: 'default', page: 1});
productListWithFilter.scrollActived = true;
};
Tab.prototype.getnewgoods = function() {
$filterBox.css('display', 'none');
allProduct.getGoodsList({type: 'new', page: 1});
productListWithFilter.getGoodsList({type: 'new', page: 1});
productListWithFilter.scrollActived = true;
};
/**
... ... @@ -35,7 +48,7 @@ if ($shopCategory.length > 0) {
// 页面打开直接加载筛选项
allProduct.getFilter();
productListWithFilter.getFilter();
require('../plugin/sticky');
require('./shop/coupon');
... ...
/*
* @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
};