fe / yohobuywap-node · Commits

Go to a project

Authored by 陈峰
Commit 6399256cd23aad816929ad12e5284854ac2f902d 1 parent 19917ba3

经典店铺改造完成

Inline Side-by-side
Showing 3 changed files with 156 additions and 15 deletions
... ... @@ -121,10 +121,11 @@
<div class="discount-area first" id="navlist2">
<ul id="list-nav" class="home-sub-nav list-nav pos-list clearfix">
<li data-bp-id="shop_listnav_new_1" class="new active buriedpoint">
<li class="default active buriedpoint first-li-more" data-bp-id="shop_listnav_default_1">
<a href="javascript:void(0);">
<span class="spanTest">最新</span>
<span class="iconfont cur">&#xe616;</span>
<span class="nav-txt">默认</span>
<span class="iconfont up cur hide">&#xe615;</span>
<span class="iconfont down cur">&#xe616;</span>
</a>
</li>
<li class="price buriedpoint" data-bp-id="shop_listnav_price_1">
... ... @@ -156,11 +157,11 @@
<div class="discount-area first">
<div id="goods-container" class="goods-container">
<div class="new-goods container clearfix">
{{# goods}}
<div class="default-goods container clearfix">
{{#newGoods}}
{{> common/goods}}
{{/ goods}}
</div>
{{/newGoods}}</div>
<div class="new-goods container clearfix hide"></div>
<div class="price-goods container hide clearfix"></div>
<div class="discount-goods container hide clearfix"></div>
... ... @@ -184,11 +185,11 @@
</ul>
<ul id="pos-list" class="home-sub-nav pos-list hide">
<li class="new active buriedpoint" data-bp-id="shop_poslist_new_1">
<li class="default active buriedpoint first-li-more" data-bp-id="shop_listnav_default_1">
<a href="javascript:void(0);">
<span class="spanTest">最新</span>
<span class="iconfont cur">&#xe616;</span>
<b></b>
<span class="nav-txt">默认</span>
<span class="iconfont up cur hide">&#xe615;</span>
<span class="iconfont down cur">&#xe616;</span>
</a>
</li>
<li class="price buriedpoint" data-bp-id="shop_poslist_price_1">
... ... @@ -218,6 +219,12 @@
</a>
</li>
</ul>
<div class='new-list classics 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>
</div>
{{> common/filter}}
{{/ shopIndex}}
... ...
... ... @@ -29,9 +29,11 @@ var $subNav = $('.home-sub-nav'),
$collect = $('#collect'),
$goodsContainer = $('#goods-container'),
$goodsChildren = $goodsContainer.children(),
$defaultgc = $goodsContainer.children('.default-goods'),
$ngc = $($goodsChildren.get(0)),
$pgc = $($goodsChildren.get(1)),
$dgc = $($goodsChildren.get(2)),
$newList = $('.new-list'),
shopId = $('input[name="shop_id"]').val(),
appVersion = $('input[name="app_version"]').val(),
brand = $('input[name="brand"]').val(),
... ... @@ -141,6 +143,12 @@ var $listNav = $('#list-nav'),
page: 1,
end: false
},
default: {
order: 0,
reload: true,
page: 1,
end: false
},
hot: {
order: 1,
reload: true,
... ... @@ -544,6 +552,8 @@ function search(opt, callback) {
navType = 'price';
} else if ($pre.hasClass('discount')) {
navType = 'discount';
} else if ($pre.hasClass('default')) {
navType = 'default';
}
nav = navInfo[navType];
... ... @@ -596,6 +606,9 @@ function search(opt, callback) {
case 'discount':
$container = $dgc;
break;
case 'default':
$container = $defaultgc;
break;
default:
break;
}
... ... @@ -646,7 +659,94 @@ function search(opt, callback) {
$listNav.bind('contextmenu', function(e) {
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');
}
}
$newList.on('touchstart', 'li', function(e) {
var navType, bpIdData = $(this).attr('data-bp-id') || '',
$firstLiDom = $subNav.find('li.first-li-more'),
cls = '';
e.preventDefault();
if ($(this).hasClass('new')) {
navType = 'newest';
cls = 'new';
} else if ($(this).hasClass('default')) {
navType = 'default';
cls = 'default';
} else if ($(this).hasClass('sale')) {
navType = 'sale';
cls = 'sale';
}
$newList.addClass('hide');
$firstLiDom.find('.nav-txt').text($(this).text());
$firstLiDom.attr('data-bp-id', bpIdData).addClass('active').siblings().removeClass('active');
$subNav.find('.first-li-more').removeClass('new default sale').addClass(cls);
$(document).trigger('shouldSendBpData', [bpIdData]);
newListHide();
// 切换container显示
$goodsContainer.children('.container:not(.hide)').addClass('hide');
switch (navType) {
case 'newest':
$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 = $('.first-li-more');
var nav = navInfo[navType];
if (nav.reload) {
search({
type: 'shop_id',
id: shopId,
brand: brand,
appVersion: appVersion,
url: '/product/search/search',
nextPage: false
}, function() {
});
}
});
$(document).on('touchstart', function(e) {
if (!$newList.hasClass('hide') &&
$(e.target).closest('.new-list, li.first-li-more').length <= 0) {
$newList.addClass('hide');
newListHide();
}
});
function subNavScrollTo() {
window.scrollTo(0, $('#list-nav').offset().top + 5)
}
$subNav.on('touchend touchcancel', function(e) {
var $this = $(e.target).closest('li'),
cname,
... ... @@ -661,6 +761,22 @@ $subNav.on('touchend touchcancel', function(e) {
if (typeof $this === 'undefined' || $this.length === 0) {
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();
subNavScrollTo();
return true;
}
// 最新li 列表
$newList.addClass('hide');
if ($this.hasClass('filter')) {
... ... @@ -682,7 +798,7 @@ $subNav.on('touchend touchcancel', function(e) {
}
}
window.scrollTo(0, $('#list-nav').offset().top + 5)
subNavScrollTo();
} else {
filter.hideFilter();// 隐藏面板
... ... @@ -696,7 +812,10 @@ $subNav.on('touchend touchcancel', function(e) {
} else if ($this.hasClass('discount')) {
cname = '.discount';
navType = 'discount';
}
} else if ($this.hasClass('default')) {
cname = '.default';
navType = 'default';
}
nav = navInfo[navType];
... ... @@ -729,6 +848,10 @@ $subNav.on('touchend touchcancel', function(e) {
case 'discount':
$dgc.removeClass('hide');
break;
case 'default':
$defaultgc.removeClass('hide');
break;
default:
break;
}
... ... @@ -758,6 +881,10 @@ $subNav.on('touchend touchcancel', function(e) {
case 'discount':
$dgc.removeClass('hide');
break;
case 'default':
$defaultgc.removeClass('hide');
break;
default:
break;
}
... ... @@ -776,7 +903,7 @@ $subNav.on('touchend touchcancel', function(e) {
url: '/product/search/search',
nextPage: false
}, function() {
window.scrollTo(0, $('#list-nav').offset().top + 5)
subNavScrollTo();
});
}
}
... ...
... ... @@ -106,6 +106,9 @@
}
&:first-child {
border-left: none;
.text {
border-left: none;
}
}
a {
... ... @@ -595,7 +598,11 @@
color: #444;
position: absolute;
z-index: 5;
&.classics {
position: fixed;
top: 90px;
left: 0px;
}
li {
margin-left: 35px;
height: 88px;
... ...