|
|
|
'use strict';
|
|
|
|
require('product/new-arrival.page.css');
|
|
|
|
require('common');
|
|
|
|
require('common/suspend-cart');
|
|
|
|
require('plugin/sticky');
|
|
|
|
|
|
|
|
let Swiper = require('yoho-swiper');
|
|
|
|
let lazyLoad = require('yoho-jquery-lazyload');
|
|
|
|
|
|
|
|
let filter = require('plugin/filter');
|
|
|
|
|
|
|
|
new Swiper('.handpick-swiper', {
|
|
|
|
// Optional parameters
|
|
|
|
lazyLoading: true,
|
|
|
|
lazyLoadingInPrevNext: true,
|
|
|
|
loop: true,
|
|
|
|
|
|
|
|
// If we need pagination
|
|
|
|
slidesPerView: 'auto',
|
|
|
|
centeredSlides: true,
|
|
|
|
paginationClickable: true,
|
|
|
|
spaceBetween: 30,
|
|
|
|
});
|
|
|
|
|
|
|
|
new Swiper('.banner-swiper', {
|
|
|
|
lazyLoading: true,
|
|
|
|
|
|
|
|
// If we need pagination
|
|
|
|
centeredSlides: true,
|
|
|
|
paginationClickable: true,
|
|
|
|
pagination: (function() {
|
|
|
|
if ($('.banner-swiper').find('.swiper-slide').length > 1) {
|
|
|
|
return '#banner-pagination';
|
|
|
|
} else {
|
|
|
|
$('#banner-pagination').hide();
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
}()),
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// ==============================================
|
|
|
|
// 1 滚动： 搜索参数不变, 追加数据
|
|
|
|
// 2 筛选，切换排序： 重新搜索
|
|
|
|
//
|
|
|
|
|
|
|
|
|
|
|
|
let searchView = function() {
|
|
|
|
let body = document.body;
|
|
|
|
let $c = $('#new-goods');
|
|
|
|
let $navBox = $c.find('.filter-nav');
|
|
|
|
let $goodsWraper = $c.find('.goods-container');
|
|
|
|
|
|
|
|
let goodsT = require('product/new/goods.hbs');
|
|
|
|
let $loading = $('<div class="yo-loading"></div>');
|
|
|
|
|
|
|
|
let $prevNav = $navBox.children('.new');
|
|
|
|
let $goodBox = $goodsWraper.children('.goods-box');
|
|
|
|
let fetchXhr = null;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 搜索 参数
|
|
|
|
* Note：filter 没有重置功能
|
|
|
|
* see: search-process.js
|
|
|
|
*/
|
|
|
|
let searchParams = {
|
|
|
|
order: 's_t_desc',
|
|
|
|
filter: {
|
|
|
|
},
|
|
|
|
page: {
|
|
|
|
cur: 0,
|
|
|
|
total: null
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function initFilter() {
|
|
|
|
return $.get('/product/new/goods-filter').done(filterHtml => {
|
|
|
|
$('#js-filter').html(filterHtml);
|
|
|
|
|
|
|
|
filter.initFilter({
|
|
|
|
/**
|
|
|
|
* filterObj:
|
|
|
|
* {filtering, id, type}
|
|
|
|
*/
|
|
|
|
fCbFn: function(filterObj) {
|
|
|
|
let filterKey = filterObj.type;
|
|
|
|
|
|
|
|
// 字段正规化
|
|
|
|
let normalizeKey = ({
|
|
|
|
ageLevel: 'age_level'
|
|
|
|
|
|
|
|
// TODO: 哪些字段不正规，添加再这里
|
|
|
|
})[filterKey];
|
|
|
|
|
|
|
|
normalizeKey && (filterKey = normalizeKey);
|
|
|
|
|
|
|
|
// 放入查询参数
|
|
|
|
searchParams.filter[filterKey] = filterObj.id;
|
|
|
|
|
|
|
|
console.log(searchParams);
|
|
|
|
|
|
|
|
fetchNew({ // eslint-disable-line
|
|
|
|
$box: $goodBox,
|
|
|
|
before: $box => {
|
|
|
|
fetchXhr.abort();
|
|
|
|
$box.html('');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
hCbFn: function() {
|
|
|
|
// hide filter ,switch prev nav;
|
|
|
|
$navBox.children('.filter').removeClass('active');
|
|
|
|
$prevNav.addClass('active');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 切换nav
|
|
|
|
*/
|
|
|
|
function switchNav($nextNav) {
|
|
|
|
let _$prevNav = $navBox.children('.active'); // 当前active nav
|
|
|
|
|
|
|
|
// active 不是filter, 都暂存起来，filter hide的时候用到
|
|
|
|
if (!_$prevNav.hasClass('filter')) {
|
|
|
|
$prevNav = _$prevNav;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 点击的nav 是filter nav
|
|
|
|
if ($nextNav.hasClass('filter')) {
|
|
|
|
let filterActived = $nextNav.hasClass('active');
|
|
|
|
|
|
|
|
filterActived ? filter.hideFilter() : filter.showFilter();
|
|
|
|
$prevNav.toggleClass('active', filterActived);
|
|
|
|
$nextNav.toggleClass('active', !filterActived);
|
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 以下都是 order nav的情况, $prevNav始终是order nav;
|
|
|
|
|
|
|
|
filter.hideFilter();
|
|
|
|
|
|
|
|
if (!$prevNav.is($nextNav)) {
|
|
|
|
$prevNav.removeClass('active');
|
|
|
|
} else if ($nextNav.is('.price,.discount')) { // same && is price, discount
|
|
|
|
let $cur = $nextNav.find('.cur');
|
|
|
|
|
|
|
|
$cur.removeClass('cur').siblings().addClass('cur');
|
|
|
|
}
|
|
|
|
|
|
|
|
$nextNav.toggleClass('active', true);
|
|
|
|
|
|
|
|
return $nextNav;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* order是否改变
|
|
|
|
* Note: filter的改变，有filter的回调处理
|
|
|
|
*/
|
|
|
|
function checkOrderChange($activeNav, changeAction) {
|
|
|
|
if (!$activeNav) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
let order = $activeNav.data('order') || $activeNav.find('.cur').data('order');
|
|
|
|
|
|
|
|
searchParams.order = order;
|
|
|
|
changeAction();
|
|
|
|
}
|
|
|
|
|
|
|
|
function renderGoods($container, data) {
|
|
|
|
let html = goodsT({
|
|
|
|
goods: data
|
|
|
|
});
|
|
|
|
|
|
|
|
$container.append(html);
|
|
|
|
|
|
|
|
|
|
|
|
lazyLoad(html);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 搜索
|
|
|
|
* @param conf
|
|
|
|
* {
|
|
|
|
* $box: 数据塞入的容器,
|
|
|
|
* nextPage: true // 有该字段，且为true， 会去fetch 下一页数据
|
|
|
|
* before: 搜索之前的动作，第一个参数为 $box
|
|
|
|
* }
|
|
|
|
*/
|
|
|
|
function fetchNew(conf) {
|
|
|
|
let $box = conf.$box;
|
|
|
|
let page = {
|
|
|
|
cur: 0,
|
|
|
|
total: null
|
|
|
|
};
|
|
|
|
|
|
|
|
if (conf.nextPage) {
|
|
|
|
page = searchParams.page;
|
|
|
|
|
|
|
|
if (page.cur === page.total) { // no nore next
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
conf.before && conf.before.apply(null, [$box]);
|
|
|
|
|
|
|
|
// search params
|
|
|
|
let data = {};
|
|
|
|
|
|
|
|
data.page = page.cur + 1; // fetch one page
|
|
|
|
data.order = searchParams.order;
|
|
|
|
$.extend(data, searchParams.filter);
|
|
|
|
|
|
|
|
$loading.appendTo($box);
|
|
|
|
return (fetchXhr = $.get('/product/new/goods.json', data))
|
|
|
|
.done(res => {
|
|
|
|
searchParams.page.total = res.pageTotal;
|
|
|
|
searchParams.page.cur = page.cur + 1;
|
|
|
|
|
|
|
|
renderGoods($box, res.list);
|
|
|
|
})
|
|
|
|
.always(() => {
|
|
|
|
$loading.remove();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 滚动到底部一定距离时， 加载下一页
|
|
|
|
*/
|
|
|
|
function fetchNextPage() {
|
|
|
|
fetchNew({
|
|
|
|
$box: $goodBox,
|
|
|
|
nextPage: true
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
initFilter()
|
|
|
|
.done(function() {
|
|
|
|
$navBox.on('click', 'li', function(event) {
|
|
|
|
let $curNav = $(event.currentTarget);
|
|
|
|
|
|
|
|
let $activeNav = switchNav($curNav);
|
|
|
|
|
|
|
|
checkOrderChange($activeNav, function() {
|
|
|
|
fetchNew({ // eslint-disable-line
|
|
|
|
$box: $goodBox,
|
|
|
|
before: $box => {
|
|
|
|
fetchXhr.abort();
|
|
|
|
$box.html('');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
$(window).scroll(function() {
|
|
|
|
setTimeout(() => {
|
|
|
|
if (body.scrollHeight - (body.scrollTop + body.scrollWidth) < 300 && fetchXhr.readyState === 4) {
|
|
|
|
fetchNextPage();
|
|
|
|
}
|
|
|
|
}, 0);
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
fetchNew({
|
|
|
|
$box: $goodBox
|
|
|
|
});
|
|
|
|
|
|
|
|
return {
|
|
|
|
fetchNew,
|
|
|
|
switchNav
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
window.search = searchView();
|
|
|
|
window.filter = filter;
|
|
|
|
window.$ = $;
|
|
|
|
|
|
|
|
|
...
|
...
|
|
