Authored by 郝肖肖

sale 专区、折扣、vip 默认筛选

<div class="discount-detail-page goods-page yoho-page" data-product-pool="{{product_pool}}">
{{> sale/banner}}
<div>
<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>
{{!--筛选tab--}}
{{> product/filter-tab}}
{{> sale/common}}
<input type="hidden" id="discount" value="discount">
</div>
\ No newline at end of file
</div>
... ...
... ... @@ -48,8 +48,12 @@
{{/floorHeader}}
<div class="sale-nav-wrap">
{{> common/filter-nav}}
<div class='list-nav-layer'>
{{!--筛选tab--}}
{{> product/filter-tab}}
</div>
</div>
{{> sale/common}}
{{> common/suspend-home}}
</div>
... ...
<div class="sale-vip-page goods-page yoho-page">
{{> sale/banner}}
<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}}
{{!--筛选tab--}}
{{> product/filter-tab}}
</div>
{{> sale/common}}
</div>
\ No newline at end of file
</div>
... ...
... ... @@ -15,8 +15,13 @@ const domains = {
// liveApi: 'http://testapi.live.yohops.com:9999/',
// singleApi: 'http://api-test3.yohops.com:9999/',
api: 'http://dev-api.yohops.com:9999/',
service: 'http://dev-service.yohops.com:9999/',
// api: 'http://dev-api.yohops.com:9999/',
// service: 'http://dev-service.yohops.com:9999/',
// liveApi: 'http://api.live.yoho.cn/',
// singleApi: 'http://single.yoho.cn/',
api: 'http://api.yoho.yohoops.org/',
service: 'http://service.yoho.yohoops.org/',
liveApi: 'http://api.live.yoho.cn/',
singleApi: 'http://single.yoho.cn/',
... ...
... ... @@ -17,8 +17,7 @@ var $goodsContainer = $('#goods-container'),
$pgc = $goodsContainer.find('.price-goods'),
$agc = $goodsContainer.find('.all-goods'),
$cgc = $goodsContainer.find('.category-goods'),
$sgc = $goodsContainer.find('.sale-goods'),
$newList = $('.new-list');
$sgc = $goodsContainer.find('.sale-goods');
var winH = $(window).height(),
noResult = '<p class="no-result">未找到相关搜索结果</p>';
... ... @@ -384,18 +383,6 @@ $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,
... ... @@ -408,23 +395,6 @@ $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')) {
// 筛选面板切换状态
... ... @@ -452,7 +422,8 @@ $listNav.on('touchend touchcancel', function(e) {
if ($this.hasClass('active')) {
// 最新无排序切换
if ($this.hasClass('new') || $this.hasClass('sale') || $this.hasClass('all')) {
if ($this.hasClass('default') || $this.hasClass('new') ||
$this.hasClass('sale') || $this.hasClass('all')) {
return;
}
... ... @@ -551,69 +522,6 @@ $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
};
... ...
... ... @@ -5,7 +5,7 @@
> li {
float: left;
width: 25%;
width: 20%;
height: 66px;
text-align: center;
font-size: 28px;
... ...