Authored by 郝肖肖

品牌和基础店铺最新列表

... ... @@ -87,19 +87,22 @@
{{/ baseShopHome}}
<!-- /基础店铺页面 -->
<div>
<ul id="list-nav" class="list-nav clearfix">
{{#if isSearch}}
<li class="new active buriedpoint" data-bp-id="">
<li class="default active buriedpoint first-li-more" data-bp-id="shop_listnav_default_1">
<a href="javascript:void(0);">
<span class="nav-txt">默认</span>
<span class="iconfont cur">&#xe616;</span>
<span class="iconfont up cur hide">&#xe615;</span>
<span class="iconfont down cur">&#xe616;</span>
</a>
</li>
{{else}}
<li class="new active buriedpoint" data-bp-id="shop_listnav_new_1">
<li class="new active buriedpoint first-li-more" data-bp-id="shop_listnav_new_1">
<a href="javascript:void(0);">
<span class="nav-txt">最新</span>
<span class="iconfont cur">&#xe616;</span>
<span class="iconfont up cur hide">&#xe615;</span>
<span class="iconfont down cur">&#xe616;</span>
</a>
</li>
{{/if}}
... ... @@ -128,8 +131,19 @@
</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>
<li class='sale' data-bp-id='shop_listnav_sale_1'>销量</li>
</ul>
</div>
</div>
<div id="goods-container" class="goods-container">
<div class="default-goods container clearfix"></div>
<div class="new-goods container clearfix"></div>
<div class="sale-goods container clearfix"></div>
<div class="price-goods container clearfix hide"></div>
<div class="discount-goods container clearfix hide"></div>
... ...
... ... @@ -22,9 +22,12 @@ var tip = require('../../plugin/tip');
var loading = require('../../plugin/loading');
var $goodsContainer = $('#goods-container'),
$defaultgc = $goodsContainer.children('.default-goods'),
$ngc = $goodsContainer.children('.new-goods'),
$sgc = $goodsContainer.children('.sale-goods'),
$pgc = $goodsContainer.children('.price-goods'),
$dgc = $goodsContainer.children('.discount-goods');
$dgc = $goodsContainer.children('.discount-goods'),
$newList = $('.new-list');
var winH = $(window).height();
... ... @@ -42,22 +45,34 @@ var $listNav = $('#list-nav'),
// 导航数据信息
navInfo = {
newest: {
price: {
order: 1,
reload: true,
page: 0,
end: false
},
price: {
discount: {
order: 1,
reload: true,
page: 0,
end: false
},
discount: {
order: 1,
default: {
order: 0,
reload: true,
page: 0,
page: 1,
end: false
},
new: {
order: 0,
reload: true,
page: 1,
end: false
},
sale: {
order: 0,
reload: true,
page: 1,
end: false
}
},
... ... @@ -290,11 +305,15 @@ function search(opt) {
// 导航类别
if ($pre.hasClass('new')) {
navType = 'newest';
navType = 'new';
} else if ($pre.hasClass('price')) {
navType = 'price';
} else if ($pre.hasClass('discount')) {
navType = 'discount';
} else if ($pre.hasClass('default')) {
navType = 'default';
} else if ($pre.hasClass('sale')) {
navType = 'sale';
}
nav = navInfo[navType];
... ... @@ -368,7 +387,7 @@ function search(opt) {
$container;
switch (navType) {
case 'newest':
case 'new':
$container = $ngc;
break;
case 'price':
... ... @@ -377,6 +396,12 @@ function search(opt) {
case 'discount':
$container = $dgc;
break;
case 'default':
$container = $defaultgc;
break;
case 'sale':
$container = $sgc;
break;
default:
break;
}
... ... @@ -419,7 +444,7 @@ function search(opt) {
// 用于统计点击了商品列表的第几个商品,序号从1开始计算。
if (window._yas) {
switch (navType) {
case 'newest':
case 'new':
window._yas(1 * new Date(), '1.0.16', 'yohobuy_m', window._ozuid,
'', $('.new-goods .good-info .good-detail-img .good-thumb'));
break;
... ... @@ -431,6 +456,14 @@ function search(opt) {
window._yas(1 * new Date(), '1.0.16', 'yohobuy_m', window._ozuid,
'', $('.discount-goods .good-info .good-detail-img .good-thumb'));
break;
case 'default':
window._yas(1 * new Date(), '1.0.16', 'yohobuy_m', window._ozuid,
'', $('.default-goods .good-info .good-detail-img .good-thumb'));
break;
case 'sale':
window._yas(1 * new Date(), '1.0.16', 'yohobuy_m', window._ozuid,
'', $('.sale-goods .good-info .good-detail-img .good-thumb'));
break;
default:
break;
}
... ... @@ -482,6 +515,77 @@ $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');
}
}
$newList.on('touchstart', 'li', function(e) {
var navType, bpIdData = $(this).attr('data-bp-id') || '',
$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('.nav-txt').text($(this).text());
$firstLiDom.attr('data-bp-id', bpIdData).addClass('active').siblings().removeClass('active');
$listNav.find('.first-li-more').removeClass('new default sale').addClass(navType);
$(document).trigger('shouldSendBpData', [bpIdData]);
newListHide();
// 切换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;
}
search();
});
$(document).on('touchstart', function(e) {
if (!$newList.hasClass('hide') &&
$(e.target).closest('.new-list, li.first-li-more').length <= 0) {
$newList.addClass('hide');
newListHide();
}
});
$listNav.on('touchend touchcancel', function(e) {
var $this = $(e.target).closest('li'),
nav,
... ... @@ -489,6 +593,23 @@ $listNav.on('touchend touchcancel', function(e) {
$active;
var bpIdData = $(this).find('.buriedpoint').attr('data-bp-id') || '';
if ($this.hasClass('first-li-more')) {
filter.hideFilter();
$newList.removeClass('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')) {
// 筛选面板切换状态
... ... @@ -509,11 +630,15 @@ $listNav.on('touchend touchcancel', function(e) {
} else {
if ($this.hasClass('new')) {
navType = 'newest';
navType = 'new';
} else if ($this.hasClass('price')) {
navType = 'price';
} else if ($this.hasClass('discount')) {
navType = 'discount';
} else if ($this.hasClass('default')) {
navType = 'default';
} else if ($this.hasClass('sale')) {
navType = 'sale';
}
nav = navInfo[navType];
... ... @@ -548,7 +673,7 @@ $listNav.on('touchend touchcancel', function(e) {
$goodsContainer.children('.container:not(.hide)').addClass('hide');
switch (navType) {
case 'newest':
case 'new':
$ngc.removeClass('hide');
break;
... ... @@ -559,6 +684,14 @@ $listNav.on('touchend touchcancel', function(e) {
case 'discount':
$dgc.removeClass('hide');
break;
case 'default':
$defaultgc.removeClass('hide');
break;
case 'sale':
$sgc.removeClass('hide');
break;
default:
break;
}
... ...
... ... @@ -103,12 +103,6 @@ var $listNav = $('#list-nav'),
page: 0,
end: false
},
newest: {
order: 0,
reload: true,
page: 1,
end: false
},
price: {
order: 1,
reload: true,
... ... @@ -631,7 +625,7 @@ function search(opt) {
// 导航类别
if ($pre.hasClass('new')) {
navType = 'newest';
navType = 'new';
} else if ($pre.hasClass('price')) {
navType = 'price';
} else if ($pre.hasClass('discount')) {
... ... @@ -683,7 +677,7 @@ function search(opt) {
num;
switch (navType) {
case 'newest':
case 'new':
$container = $ngc;
break;
case 'price':
... ... @@ -784,7 +778,6 @@ $newList.on('touchstart', 'li', function(e) {
$goodsContainer.children('.container:not(.hide)').addClass('hide');
switch (navType) {
case 'newest':
case 'new':
$ngc.removeClass('hide');
break;
... ... @@ -890,7 +883,7 @@ $subNav.on('touchend touchcancel', function(e) {
if ($this.hasClass('new')) {
cname = '.new';
navType = 'newest';
navType = 'new';
} else if ($this.hasClass('price')) {
cname = '.price';
navType = 'price';
... ... @@ -927,7 +920,7 @@ $subNav.on('touchend touchcancel', function(e) {
$goodsContainer.children('.container:not(.hide)').addClass('hide');
switch (navType) {
case 'newest':
case 'new':
$ngc.removeClass('hide');
break;
... ... @@ -964,7 +957,7 @@ $subNav.on('touchend touchcancel', function(e) {
$goodsContainer.children('.container:not(.hide)').addClass('hide');
switch (navType) {
case 'newest':
case 'new':
$ngc.removeClass('hide');
break;
... ...
... ... @@ -114,7 +114,6 @@
text-align: center;
border: 1px solid #fff;
color: #fff;
top: 50%;
margin-top: -24px;
}
... ... @@ -286,4 +285,30 @@
padding-left: 0.375rem;
padding-top: 0.2rem;
}
.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;
}
}
}
}
... ...
... ... @@ -59,6 +59,8 @@ 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';
}
... ...