Authored by 毕凯

Merge branch 'feature/defaultSort' into 'release/5.4'

筛选默认

经典店铺、基础店铺、搜索列表、sale列表、品牌列表,分类列表添加默认筛选选项。
默认order不传或者order=''。

See merge request !106
... ... @@ -5,7 +5,6 @@
'use strict';
const mRoot = '../models';
const listModel = require(`${mRoot}/list`);
const searchModel = require(`${mRoot}/search`);
const headerModel = require('../../../doraemon/models/header');
... ... @@ -48,8 +47,8 @@ const shop = {
let searchParam = Object.assign({
isApp: req.yoho.isApp,
brand: brandId,
type: 'newest',
order: '1',
type: 'default',
order: '0',
page: 1,
limit: 4,
}, params);
... ... @@ -156,8 +155,8 @@ const shop = {
let searchParam = {
isApp: req.yoho.isApp,
shop_id: shopId,
type: 'newest',
order: '1',
type: 'default',
order: '0',
page: 1,
limit: 4
};
... ...
... ... @@ -164,6 +164,11 @@ const _searchSales = (params) => {
let method = 'app.search.sales';
if (params.type === 'default') {
// 筛选 默认 不传order
delete params.order;
}
// 排除基本筛选项默认值为0的对象
for (let str in params) {
if (str !== 'order' && params[str] === '0' || params[str] === null) {
... ...
... ... @@ -136,7 +136,10 @@ const _searchGoods = (params) => {
attribute_not: 2
}, params);
if (params.order) {
if (params.type === 'default') {
// 筛选 默认 不传order
delete params.order;
} else if (params.order) {
params.order = searchProcess.getTypeCont(params.type || '', params.order);
} else {
params.order = 's_t_asc';
... ...
... ... @@ -85,17 +85,16 @@
</a>
</li>
</ul>
<div class='new-list hide'>
<ul>
<li class='active default' data-bp-id='shop_listnav_default_1'>默认</li>
<li class='new' data-bp-id='shop_listnav_new_1'>最新</li>
</ul>
</div>
<!--搜索默认排序列表-->
{{> product/search-default-sort-list}}
<div id="goods-container" class="goods-container">
<div class="default-goods container clearfix">
{{#newGoods}}
{{> common/goods}}
{{/newGoods}}</div>
{{/newGoods}}
</div>
<div class="new-goods container clearfix hide"></div>
<div class="price-goods container clearfix hide"></div>
<div class="discount-goods container clearfix hide"></div>
... ...
... ... @@ -63,12 +63,10 @@
</a>
</li>
</ul>
<div class='new-list hide'>
<ul>
<li class='active default' data-bp-id='shop_listnav_default_1'>默认</li>
<li class='new' data-bp-id='shop_listnav_new_1'>最新</li>
</ul>
</div>
<!--搜索默认排序列表-->
{{> product/search-default-sort-list}}
<div id="goods-container" class="goods-container">
<div class="default-goods container clearfix">
{{#newGoods}}
... ...
<div class="sale-vip-page goods-page yoho-page">
{{> sale/banner}}
<ul id="list-nav" class="list-nav clearfix">
<li class="new active">
<a href="javascript:void(0);">
<span class="span-test">最新</span>
</a>
</li>
<li class="price">
<a href="javascript:void(0);">
<span class="span-test">价格</span>
<span class="icon">
<i class="iconfont up cur">&#xe615;</i>
<i class="iconfont down">&#xe616;</i>
</span>
</a>
</li>
<li class="sale">
<a href="javascript:void(0);">
<span class="span-test">销量</span>
</a>
</li>
<li class="filter">
<a href="javascript:void(0);">
<span class="span-test">筛选</span>
<span class="iconfont cur">&#xe613;</span>
</a>
</li>
</ul>
<div class='list-nav-layer'>
<ul id="list-nav" class="list-nav clearfix">
<li class="default active first-li-more">
<a href="javascript:void(0);">
<span class="span-test">默认</span>
<span class="iconfont up cur hide">&#xe615;</span>
<span class="iconfont down cur">&#xe616;</span>
</a>
</li>
<li class="price">
<a href="javascript:void(0);">
<span class="span-test">价格</span>
<span class="icon">
<i class="iconfont up cur">&#xe615;</i>
<i class="iconfont down">&#xe616;</i>
</span>
</a>
</li>
<li class="sale">
<a href="javascript:void(0);">
<span class="span-test">销量</span>
</a>
</li>
<li class="filter">
<a href="javascript:void(0);">
<span class="span-test">筛选</span>
<span class="iconfont cur">&#xe613;</span>
</a>
</li>
</ul>
<!--搜索默认排序列表-->
{{> product/search-default-sort-list}}
</div>
{{> sale/common}}
</div>
\ No newline at end of file
... ...
... ... @@ -153,12 +153,9 @@
</a>
</li>
</ul>
<div class='new-list hide'>
<ul>
<li class='active default' data-bp-id='shop_listnav_default_1'>默认</li>
<li class='newest' data-bp-id='shop_listnav_newest_1'>最新</li>
</ul>
</div>
<!--搜索默认排序列表-->
{{> product/search-default-sort-list}}
</div>
<div class="discount-area first">
... ... @@ -225,13 +222,9 @@
</a>
</li>
</ul>
<div class='new-list hide'>
<ul>
<li class='active default' data-bp-id='shop_listnav_default_1'>默认</li>
<li class='newest' data-bp-id='shop_listnav_newest_1'>最新</li>
</ul>
</div>
<!--搜索默认排序列表-->
{{> product/search-default-sort-list}}
</div>
{{> common/suspend-home}}
</div>
... ...
<div id="goods-container" class="goods-container">
<div class="new-goods container clearfix">
<div class="default-goods container clearfix">
{{# goods}}
{{> common/goods}}
{{/ goods}}
</div>
<div class="new-goods container hide clearfix"></div>
<div class="price-goods container hide clearfix"></div>
<div class="discount-goods container hide clearfix"></div>
<div class="all-goods container hide clearfix"></div>
... ...
... ... @@ -127,12 +127,9 @@
</a>
</li>
</ul>
<div class='new-list hide'>
<ul>
<li class='active default' data-bp-id='shop_listnav_default_1'>默认</li>
<li class='new' data-bp-id='shop_listnav_new_1'>最新</li>
</ul>
</div>
<!--搜索默认排序列表-->
{{> product/search-default-sort-list}}
</div>
<div id="goods-container" class="goods-container">
... ...
<ul id="list-nav" class="list-nav clearfix">
<li class="new active">
<a href="javascript:void(0);">
<span class="span-test">最新</span>
</a>
</li>
<li class="price">
<a href="javascript:void(0);">
<span class="span-test">价格</span>
<span class="icon">
<i class="iconfont up cur">&#xe615;</i>
<i class="iconfont down">&#xe616;</i>
</span>
</a>
</li>
<li class="discount">
<a href="javascript:void(0);">
<span class="span-test">折扣</span>
<span class="icon">
<i class="iconfont up cur">&#xe615;</i>
<i class="iconfont down">&#xe616;</i>
</span>
</a>
</li>
<li class="filter">
<a href="javascript:void(0);">
<span class="span-test">筛选</span>
<span class="iconfont cur">&#xe613;</span>
</a>
</li>
</ul>
<div class='list-nav-layer'>
<ul id="list-nav" class="list-nav clearfix">
<li class="default active first-li-more">
<a href="javascript:void(0);">
<span class="span-test">默认</span>
<span class="iconfont up cur hide">&#xe615;</span>
<span class="iconfont down cur">&#xe616;</span>
</a>
</li>
<li class="price">
<a href="javascript:void(0);">
<span class="span-test">价格</span>
<span class="icon">
<i class="iconfont up cur">&#xe615;</i>
<i class="iconfont down">&#xe616;</i>
</span>
</a>
</li>
<li class="discount">
<a href="javascript:void(0);">
<span class="span-test">折扣</span>
<span class="icon">
<i class="iconfont up cur">&#xe615;</i>
<i class="iconfont down">&#xe616;</i>
</span>
</a>
</li>
<li class="filter">
<a href="javascript:void(0);">
<span class="span-test">筛选</span>
<span class="iconfont cur">&#xe613;</span>
</a>
</li>
</ul>
<!--搜索默认排序列表-->
{{> product/search-default-sort-list}}
</div>
... ...
<div class='new-list hide'>
<ul>
<li class='active default' data-bp-id='shop_listnav_default_1'>默认</li>
<li class='new' data-bp-id='shop_listnav_new_1'>最新</li>
</ul>
</div>
\ No newline at end of file
... ...
... ... @@ -39,7 +39,7 @@ $(function() {
var $saleNavSelect = $('.sale-nav-select');
var $vipFloor = $('.vip-floor');
var $saleNavWrap = $('.sale-nav-wrap');
var $listNav = $saleNavWrap.find('#list-nav');
var $listNavLayer = $saleNavWrap.find('.list-nav-layer');
var $filterMask = $('.filter-mask');
fastclick.attach(document.body);
... ... @@ -83,10 +83,10 @@ $(function() {
}
if ($body.scrollTop() > $saleNavWrap.offset().top) {
$listNav.addClass('fixed');
$listNavLayer.addClass('fixed');
$filterMask.addClass('fixed');
} else {
$listNav.removeClass('fixed');
$listNavLayer.removeClass('fixed');
$filterMask.removeClass('fixed');
}
}).trigger('scroll');
... ...
... ... @@ -11,12 +11,14 @@ var $ = require('yoho-jquery'),
loading = require('../../plugin/loading');
var $goodsContainer = $('#goods-container'),
$defaultgc = $goodsContainer.find('.default-goods'),
$ngc = $goodsContainer.find('.new-goods'),
$dgc = $goodsContainer.find('.discount-goods'),
$pgc = $goodsContainer.find('.price-goods'),
$agc = $goodsContainer.find('.all-goods'),
$cgc = $goodsContainer.find('.category-goods'),
$sgc = $goodsContainer.find('.sale-goods');
$sgc = $goodsContainer.find('.sale-goods'),
$newList = $('.new-list');
var winH = $(window).height(),
noResult = '<p class="no-result">未找到相关搜索结果</p>';
... ... @@ -37,7 +39,7 @@ var $listNav = $('#list-nav'),
page: 0,
end: false
},
newest: {
new: {
order: 0,
reload: true,
page: 0,
... ... @@ -66,6 +68,12 @@ var $listNav = $('#list-nav'),
reload: true,
page: 0,
end: false
},
default: {
order: 0,
reload: true,
page: 0,
end: false
}
},
$pre = $listNav.find('.active'), // 纪录进入筛选前的active项,初始为选中项
... ... @@ -106,7 +114,7 @@ function judgeType(dom) {
var navType = 'category';
if (dom.hasClass('new')) {
navType = 'newest';
navType = 'new';
} else if (dom.hasClass('price')) {
navType = 'price';
} else if (dom.hasClass('discount')) {
... ... @@ -117,6 +125,8 @@ function judgeType(dom) {
navType = 'all';
} else if (dom.hasClass('category')) {
navType = 'category';
} else if (dom.hasClass('default')) {
navType = 'default';
}
return navType;
... ... @@ -256,7 +266,7 @@ function search(opt, params, isScroll) {
num;
switch (navType) {
case 'newest':
case 'new':
$container = $ngc;
break;
case 'price':
... ... @@ -274,14 +284,16 @@ function search(opt, params, isScroll) {
case 'categroy':
$container = $cgc;
break;
case 'default':
$container = $defaultgc;
break;
default:
$container = $agc;
break;
}
if ($container.hasClass('hide')) {
$container.siblings().addClass('hide');
$container.removeClass('hide');
$container.removeClass('hide').siblings().addClass('hide');
}
if (data === '' || (data.list && data.list.length <= 0)) {
... ... @@ -372,6 +384,18 @@ $listNav.bind('contextmenu', function() {
return false;
});
function newListHide() {
var $firstLi = $listNav.find('li.first-li-more');
if ($newList.hasClass('hide')) {
$firstLi.find('span.up').addClass('hide');
$firstLi.find('span.down').removeClass('hide');
} else {
$firstLi.find('span.down').addClass('hide');
$firstLi.find('span.up').removeClass('hide');
}
}
$listNav.on('touchend touchcancel', function(e) {
var $this = $(e.target).closest('li'),
nav,
... ... @@ -384,6 +408,23 @@ $listNav.on('touchend touchcancel', function(e) {
return;
}
if ($this.hasClass('first-li-more')) {
filter.hideFilter();
$newList.toggleClass('hide');
if ($this.hasClass('default')) {
$newList.find('li.default').addClass('active').siblings().removeClass('active');
} else if ($this.hasClass('new')) {
$newList.find('li.new').addClass('active').siblings().removeClass('active');
} else if ($this.hasClass('sale')) {
$newList.find('li.sale').addClass('active').siblings().removeClass('active');
}
newListHide();
return true;
}
// 最新li 列表
$newList.addClass('hide');
if ($this.hasClass('filter')) {
// 筛选面板切换状态
... ... @@ -438,7 +479,7 @@ $listNav.on('touchend touchcancel', function(e) {
$goodsContainer.children('.container:not(.hide)').addClass('hide');
switch (navType) {
case 'newest':
case 'new':
$ngc.removeClass('hide');
break;
... ... @@ -457,6 +498,10 @@ $listNav.on('touchend touchcancel', function(e) {
case 'all':
$agc.removeClass('hide');
break;
case 'default':
$defaultgc.removeClass('hide');
break;
default:
break;
}
... ... @@ -506,6 +551,69 @@ $listNav.on('touchstart', 'li', function() {
$listNav.find('li').removeClass('bytouch');
});
$newList.on('touchstart', 'li', function(e) {
var navType,
$firstLiDom = $listNav.find('li.first-li-more');
e.preventDefault();
if ($(this).hasClass('new')) {
navType = 'new';
} else if ($(this).hasClass('default')) {
navType = 'default';
} else if ($(this).hasClass('sale')) {
navType = 'sale';
}
$newList.addClass('hide');
$firstLiDom.find('.span-test').text($(this).text());
$firstLiDom.addClass('active').siblings().removeClass('active');
$listNav.find('.first-li-more').removeClass('new default sale').addClass(navType);
newListHide();
if ($(this).hasClass('active')) {
return;
}
// 切换container显示
$goodsContainer.children('.container:not(.hide)').addClass('hide');
switch (navType) {
case 'new':
$ngc.removeClass('hide');
break;
case 'price':
$pgc.removeClass('hide');
break;
case 'discount':
$dgc.removeClass('hide');
break;
case 'default':
$defaultgc.removeClass('hide');
break;
case 'sale':
$sgc.removeClass('hide');
break;
default:
break;
}
$pre = $firstLiDom;
search({filtering: true});
});
$(document).on('touchstart', function(e) {
if (!$newList.hasClass('hide') &&
$(e.target).closest('.new-list, li.first-li-more').length <= 0) {
$newList.addClass('hide');
newListHide();
}
});
module.exports = {
start: search
};
... ...
... ... @@ -90,4 +90,30 @@
padding-left: 15px;
min-height: 640px;
}
.new-list {
width: 100%;
background-color: #fff;
font-size: 28px;
color: #444;
position: absolute;
z-index: 5;
li {
margin-left: 35px;
height: 88px;
line-height: 88px;
border-bottom: 1px solid #e0e0e0;
padding-right: 38px;
&:last-child {
border-bottom: none;
}
&.active {
background: resolve("product/shop/check.png") no-repeat 94% center;
background-size: 36px 26px;
}
}
}
}
... ...
... ... @@ -91,7 +91,8 @@
}
}
.list-nav {
.list-nav,
.list-nav-layer {
width: 100%;
z-index: 1;
background: #fff;
... ...
... ... @@ -59,8 +59,6 @@ const getTypeCont = (type, order) => {
return order === '0' ? 's_t_desc' : 's_t_asc';
case 'hot':
return order === '0' ? 's_n_desc' : 's_n_asc';
case 'default':
return order === '0' ? 's_n_desc' : 's_n_asc';
default:
return order === '0' ? 's_t_desc' : 's_t_asc';
}
... ...