fe / yohobuywap-node · Commits

Go to a project

Authored by 郝肖肖
Commit 243a8db580bc2ed3ea3c998144e1351bc82804a4 2 parents 9bcada2b 3af657c8

merage shopSort筛选功能

Inline Side-by-side
Showing 8 changed files with 399 additions and 64 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 data-bp-id="shop_listnav_new_1" class="new active buriedpoint first-li-more">
<a href="javascript:void(0);">
<span class="spanTest">最新</span>
<span class="iconfont cur">&#xe616;</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">
... ... @@ -152,6 +153,12 @@
</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>
</div>
<div class="discount-area first">
... ... @@ -161,10 +168,10 @@
{{> common/goods}}
{{/ goods}}
</div>
<div class="default-goods container hide clearfix"></div>
<div class="sale-goods container hide clearfix"></div>
<div class="price-goods container hide clearfix"></div>
<div class="discount-goods container hide clearfix"></div>
</div>
</div>
</div>
... ... @@ -182,9 +189,9 @@
<a href="{{allGoods}}" target="_blank">全部商品</a>
</li>
</ul>
<ul id="pos-list" class="home-sub-nav pos-list hide">
<li class="new active buriedpoint" data-bp-id="shop_poslist_new_1">
<div id="pos-list" class='hide'>
<ul class="home-sub-nav pos-list">
<li class="new active buriedpoint first-li-more" data-bp-id="shop_poslist_new_1">
<a href="javascript:void(0);">
<span class="spanTest">最新</span>
<span class="iconfont cur">&#xe616;</span>
... ... @@ -218,6 +225,15 @@
</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>
{{> common/filter}}
{{/ shopIndex}}
... ...
... ... @@ -90,22 +90,15 @@
<!-- 优惠卷 -->
<div class="coupon-group"></div>
<div>
<ul id="list-nav" class="list-nav clearfix">
{{#if isSearch}}
<li class="new active buriedpoint" data-bp-id="">
<a href="javascript:void(0);">
<span class="nav-txt">默认</span>
<span class="iconfont 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}}
<li class="price buriedpoint" data-bp-id="shop_listnav_price_1">
<a href="javascript:void(0);">
<span class="nav-txt">价格</span>
... ... @@ -131,8 +124,18 @@
</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>
</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;
}
... ...
... ... @@ -27,16 +27,18 @@ var tip = require('../../plugin/tip'),
var $subNav = $('.home-sub-nav'),
$collect = $('#collect'),
$goodsContainer = $('#goods-container'),
$goodsChildren = $goodsContainer.children(),
$ngc = $($goodsChildren.get(0)),
$pgc = $($goodsChildren.get(1)),
$dgc = $($goodsChildren.get(2)),
$ngc = $goodsContainer.children('.new-goods'),
$defaultgc = $goodsContainer.children('.default-goods'),
$sgc = $goodsContainer.children('.sale-goods'),
$pgc = $goodsContainer.children('.price-goods'),
$dgc = $goodsContainer.children('.discount-goods'),
shopId = $('input[name="shop_id"]').val(),
appVersion = $('input[name="app_version"]').val(),
brand = $('input[name="brand"]').val(),
coverChannel = $('input[name="coverChannel"]').val(),
favId = $('input[name="favId"]').val(),
uid = $('input[name="uid"]').val();
uid = $('input[name="uid"]').val(),
$newList = $('.new-list');
var winH = $(window).height(),
noResult = '<p class="no-result">未找到相关搜索结果</p>';
... ... @@ -89,7 +91,7 @@ var $listNav = $('#list-nav'),
// 导航数据信息
navInfo = {
new: {
order: 1,
order: 0,
reload: true,
page: 1,
end: false
... ... @@ -97,12 +99,6 @@ var $listNav = $('#list-nav'),
hot: {
order: 1,
reload: true,
page: 1,
end: false
},
newest: {
order: 0,
reload: true,
page: 0,
end: false
},
... ... @@ -117,6 +113,18 @@ var $listNav = $('#list-nav'),
reload: true,
page: 0,
end: false
},
default: {
order: 0,
reload: true,
page: 0,
end: false
},
sale: {
order: 0,
reload: true,
page: 0,
end: false
}
},
$pre = $listNav.find('.active'), // 纪录进入筛选前的active项，初始为选中项
... ... @@ -199,7 +207,7 @@ function getPageGoods(info) {
url: info.url,
data: info.data,
success: function(data) {
if (data === ' ') {
if (data === '') {
nav.end = true;
}
... ... @@ -324,7 +332,8 @@ var theY;
* 筛选后内容变化，导致nav1位置错掉，重新计算确保位置正确显示
*/
function reNav1Pos() {
var sTop = theY ? theY : 0;
var sTop = theY ? theY : 0, tra;
if (sTop < imgH + main1oH + nav1H) {
if ($nav1.hasClass('hide')) {
$nav1.removeClass('hide');
... ... @@ -385,6 +394,7 @@ function scrollHandler() {
if (sTop + winH * 2 > scH) {
scrollCall = function() {
var translate = 'translate3d(0, ' + (-scH) + 'px, 0)';
$nav1.css({
transform: translate,
'-moz-transform': translate,
... ... @@ -620,11 +630,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];
... ... @@ -668,7 +682,7 @@ function search(opt) {
num;
switch (navType) {
case 'newest':
case 'new':
$container = $ngc;
break;
case 'price':
... ... @@ -677,11 +691,17 @@ function search(opt) {
case 'discount':
$container = $dgc;
break;
case 'default':
$container = $defaultgc;
break;
case 'sale':
$container = $sgc;
break;
default:
break;
}
if (data === ' ') {
if (data === '') {
nav.end = true;
if (nav.reload) {
... ... @@ -722,10 +742,88 @@ function search(opt) {
}
$listNav.bind('contextmenu', function(e) {
$listNav.bind('contextmenu', function() {
return false;
});
function newListHide() {
var $firstLi = $('ul.pos-list').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 = $('ul.pos-list').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('.spanTest').text($(this).text());
$firstLiDom.attr('data-bp-id', bpIdData).addClass('active').siblings().removeClass('active');
$subNav.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({
type: 'shop_id',
id: shopId,
brand: brand,
appVersion: appVersion,
url: location.protocol + '//m.yohobuy.com/product/search/search',
nextPage: false
});
});
$(document).on('touchstart', function(e) {
if (!$newList.hasClass('hide') &&
$(e.target).closest('.new-list, li.first-li-more').length <= 0) {
$newList.addClass('hide');
newListHide();
}
});
$subNav.on('touchend touchcancel', function(e) {
var $this = $(e.target).closest('li'),
cname,
... ... @@ -735,6 +833,24 @@ $subNav.on('touchend touchcancel', function(e) {
var bpIdData = $this.attr('data-bp-id') || '';
e.preventDefault();
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');
$(document).trigger('shouldSendBpData', [bpIdData]);
if (typeof $this === 'undefined' || $this.length === 0) {
... ... @@ -772,13 +888,19 @@ $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';
} else if ($this.hasClass('discount')) {
cname = '.discount';
navType = 'discount';
} else if ($this.hasClass('hot')) {
cname = '.default';
navType = 'default';
} else if ($this.hasClass('sale')) {
cname = '.sale';
navType = 'sale';
}
myScroll && myScroll.enable();
... ... @@ -803,7 +925,7 @@ $subNav.on('touchend touchcancel', function(e) {
$goodsContainer.children('.container:not(.hide)').addClass('hide');
switch (navType) {
case 'newest':
case 'new':
$ngc.removeClass('hide');
break;
... ... @@ -814,6 +936,14 @@ $subNav.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;
}
... ... @@ -832,7 +962,7 @@ $subNav.on('touchend touchcancel', function(e) {
$goodsContainer.children('.container:not(.hide)').addClass('hide');
switch (navType) {
case 'newest':
case 'new':
$ngc.removeClass('hide');
break;
... ... @@ -843,6 +973,14 @@ $subNav.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;
}
... ... @@ -885,7 +1023,7 @@ filter.initFilter({
missStatus: true
});
$listNav.on('touchstart', 'li', function(e) {
$listNav.on('touchstart', 'li', function() {
$(this).addClass('bytouch');
}).on('touchend touchcancel', function() {
$listNav.find('li').removeClass('bytouch');
... ... @@ -893,7 +1031,7 @@ $listNav.on('touchstart', 'li', function(e) {
// myScroll && myScroll.refresh();
});
$nav2.on('touchstart', 'li', function(e) {
$nav2.on('touchstart', 'li', function() {
$(this).addClass('bytouch');
}).on('touchend touchcancel', function() {
$nav2.find('li').removeClass('bytouch');
... ... @@ -929,6 +1067,7 @@ $nav2.on('touchstart', 'li', function(e) {
$('.shop-foot-wrapper .buriedpoint').click(function() {
var subGroup = $(this).find('.sub-group');
if (subGroup.hasClass('hide')) {
subGroup.removeClass('hide');
} else {
... ... @@ -953,7 +1092,7 @@ $collect.on('touchstart', function() {
$.ajax({
method: 'get',
url: location.protocol + '//m.yohobuy.com' + '/product/opt/favoriteBrand',
url: location.protocol + '//m.yohobuy.com/product/opt/favoriteBrand',
data: {
id: favId ? favId : shopId,
appVersion: appVersion,
... ...
... ... @@ -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;
}
}
}
}
... ...
... ... @@ -373,11 +373,9 @@
}
}
.active {
.cur {
.active .cur{
color: #444;
}
}
.list-nav .icon .up {
top: -28px;
... ... @@ -523,13 +521,6 @@
width: 100%;
height: 100%;
color: #b0b0b0;
/*b {
height: 28px;
border-left: 1px solid #e0e0e0;
float: right;
margin-top: 25px;
}*/
}
}
... ... @@ -581,6 +572,32 @@
.category-list-only-one-row {
border-top: none!important;
}
.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;
}
}
}
}
.shop-index + .filter-mask {
... ...
... ... @@ -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';
}
... ...