Authored by zhangxiaoru

新品到着

<div class='list-nav-layer'>
<ul id="list-nav" class="list-nav filter-nav clearfix">
<li class="default active first-li-more" {{#if firstOrderValue}}data-order="s_t_desc"{{/if}}>
<li class="default active first-li-more">
<a href="javascript:void(0);">
<span class="span-test">{{#if firstOrderName}}{{firstOrderName}}{{else}}默认{{/if}}</span>
<span class="iconfont up cur hide">&#xe615;</span>
<span class="iconfont down cur">&#xe616;</span>
<span class="span-test">默认</span>
<span class="iconfont drop">&#xe613;</span>
</a>
</li>
<li class="new" data-order="s_t_desc">
<a href="javascript:void(0);">
<span class="span-test">最新</span>
</a>
</li>
<li class="price">
... ... @@ -33,5 +37,10 @@
</li>
</ul>
<!--搜索默认排序列表-->
{{> product/search-default-sort-list}}
<div class='new-list hide'>
<ul>
<li class='active default' data-bp-id='shop_listnav_default_1'>默认</li>
<li class='popularity' data-bp-id='shop_listnav_popularity_1'>人气</li>
</ul>
</div>
</div>
... ...
... ... @@ -266,22 +266,25 @@ let searchView = function() {
$navBox.on('click', 'li', function(event) {
let $curNav = $(event.currentTarget);
// 处理新添加的默认,最新排序
// if ($curNav.hasClass('first-li-more')) {
// filter.hideFilter();
// if ($newList.hasClass('hide')) {
// $curNav.find('.up').removeClass('hide');
// $curNav.find('.down').addClass('hide');
// $newList.removeClass('hide');
// } else {
// $curNav.find('.up').addClass('hide');
// $curNav.find('.down').removeClass('hide');
// $newList.addClass('hide');
// }
// switchNav($curNav);
// return;
// }
// 处理新添加的默认,人气排序
if ($curNav.hasClass('first-li-more')) {
filter.hideFilter();
if ($newList.hasClass('hide')) {
// $curNav.find('.up').removeClass('hide');
// $curNav.find('.down').addClass('hide');
$newList.removeClass('hide');
} else {
// $curNav.find('.up').addClass('hide');
// $curNav.find('.down').removeClass('hide');
$newList.addClass('hide');
}
switchNav($curNav);
return;
}
$newList.addClass('hide');
... ... @@ -298,35 +301,36 @@ let searchView = function() {
});
});
// 单独处理默认、最新排序条件
// $newList.on('click', 'li', function(event) {
// let $defaultCurNav = $(event.currentTarget);
// let $firstMore = $('.first-li-more');
// $newList.addClass('hide');
// $firstMore.find('.up').addClass('hide');
// $firstMore.find('.down').removeClass('hide');
// if ($defaultCurNav.hasClass('new')) {
// $firstMore.attr('data-order', 's_t_desc').find('.span-test').text('最新');
// $defaultCurNav.addClass('active');
// $newList.find('.default').removeClass('active');
// } else {
// $firstMore.attr('data-order', '').find('.span-test').text('默认');
// $defaultCurNav.addClass('active');
// $newList.find('.new').removeClass('active');
// }
// checkOrderChange($firstMore, function() {
// fetchNew({ // eslint-disable-line
// $box: $goodBox,
// before: $box => {
// fetchXhr.abort();
// $box.html('');
// }
// });
// });
// });
// 单独处理默认、人气排序条件
$newList.on('click', 'li', function(event) {
let $defaultCurNav = $(event.currentTarget);
let $firstMore = $('.first-li-more');
$newList.addClass('hide');
// $firstMore.find('.up').addClass('hide');
// $firstMore.find('.down').removeClass('hide');
if ($defaultCurNav.hasClass('popularity')) {
$firstMore.attr('data-order', 'h_v_desc').find('.span-test').text('人气');
$defaultCurNav.addClass('active');
$newList.find('.default').removeClass('active');
} else {
$firstMore.attr('data-order', '').find('.span-test').text('默认');
$defaultCurNav.addClass('active');
$newList.find('.popularity').removeClass('active');
}
checkOrderChange($firstMore, function() {
fetchNew({ // eslint-disable-line
$box: $goodBox,
before: $box => {
fetchXhr.abort();
$box.html('');
}
});
});
});
});
... ...
... ... @@ -36,6 +36,10 @@
&.cur {
color: #000;
}
&.drop {
color: #000;
}
}
.filter .iconfont {
... ...
... ... @@ -25,6 +25,48 @@ body {
width: 100%;
}
.list-nav {
li {
width: 20%;
}
}
.drop-list {
padding-left: 30px;
position: absolute;
z-index: 10;
background: #fff;
width: 100%;
li {
width: 100%;
height: 88px;
font-size: 28px;
color: #b0b0b0;
line-height: 88px;
border-bottom: 1px solid #e0e0e0;
}
li:last-child {
border-bottom: none;
}
.active {
color: #444;
.chose {
display: inline-block;
width: 30px;
height: 22px;
background-image: resolve("product/chose.png");
background-size: 100%;
float: right;
margin-top: 33px;
margin-right: 30px;
}
}
}
.new-list {
width: 100%;
background-color: #fff;
... ... @@ -135,6 +177,10 @@ body {
color: inherit;
}
.filter-nav .iconfont.drop {
color: inherit;
}
.banner-top {
border-bottom: 1PX solid #dededf;
margin-bottom: 30px;
... ... @@ -147,9 +193,3 @@ body {
.brand-news-count h5 {
display: none;
}
.first-li-more {
.iconfont {
display: none;
}
}
... ...
... ... @@ -85,7 +85,7 @@
}
.drop-list {
padding: 0 30px;
padding-left: 30px;
position: absolute;
z-index: 10;
background: #fff;
... ... @@ -115,6 +115,7 @@
background-size: 100%;
float: right;
margin-top: 33px;
margin-right: 30px;
}
}
}
... ...
... ... @@ -347,7 +347,7 @@
}
.drop-list {
padding: 0 30px;
padding-left: 30px;
position: absolute;
z-index: 10;
background: #fff;
... ... @@ -377,6 +377,7 @@
background-size: 100%;
float: right;
margin-top: 33px;
margin-right: 30px;
}
}
}
... ...