Authored by 陈峰

列表排序

... ... @@ -51,21 +51,13 @@
{{/ brandHome}}
<!-- /品牌页面 -->
<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">
<a href="javascript:void(0);">
<span class="nav-txt">最新</span>
<span class="iconfont 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>
... ... @@ -91,12 +83,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 id="goods-container" class="goods-container">
<div class="new-goods container clearfix">
<div class="default-goods container clearfix">
{{#newGoods}}
{{> common/goods}}
{{/newGoods}}
</div>
{{/newGoods}}</div>
<div class="new-goods container clearfix hide"></div>
<div class="price-goods container clearfix hide"></div>
<div class="discount-goods container clearfix hide"></div>
... ...
... ... @@ -29,21 +29,13 @@
{{/ baseShopHome}}
<!-- /基础店铺页面 -->
<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">
<a href="javascript:void(0);">
<span class="nav-txt">最新</span>
<span class="iconfont 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>
... ... @@ -69,12 +61,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 id="goods-container" class="goods-container">
<div class="new-goods container clearfix">
<div class="default-goods container clearfix">
{{#newGoods}}
{{> common/goods}}
{{/newGoods}}
</div>
{{/newGoods}}</div>
<div class="new-goods container clearfix hide"></div>
<div class="price-goods container clearfix hide"></div>
<div class="discount-goods container clearfix hide"></div>
... ...
... ... @@ -43,11 +43,11 @@
</div>
<ul id="nav" class="nav">
<li class="active color buriedpoint" tab="home-page" data-bp-id="shop_nav_index_1">首页</li>
<li tab="new-arrival" data-bp-id="shop_nav_new_1" class="buriedpoint">上新</li>
<li tab="popularity" data-bp-id="shop_nav_populary_1" class="buriedpoint">人气</li>
<li class="active color buriedpoint" tab="home-page" data-bp-id="shop_nav_index_1"><div class="text">首页</div></li>
<li tab="new-arrival" data-bp-id="shop_nav_new_1" class="buriedpoint"><div class="text">上新</div></li>
<li tab="popularity" data-bp-id="shop_nav_populary_1" class="buriedpoint"><div class="text">人气</div></li>
<li data-bp-id="shop_nav_all_1" class="all-goods buriedpoint">
<a href="{{allGoods}}" target="_blank">全部商品</a>
<div class="text"><a href="{{allGoods}}" target="_blank">全部商品</a></div>
</li>
</ul>
... ... @@ -175,11 +175,11 @@
{{> shop/shop-footer}}
{{/unless}}
<ul id="pos-nav" class="nav hide">
<li class="active color buriedpoint" tab="home-page" data-bp-id="shop_posnav_index_1">首页</li>
<li tab="new-arrival" class="buriedpoint" data-bp-id="shop_posnav_new_1">上新</li>
<li tab="popularity" class="buriedpoint" data-bp-id="shop_posnav_populary_1">人气</li>
<li class="active color buriedpoint" tab="home-page" data-bp-id="shop_posnav_index_1"><div class="text">首页</div></li>
<li tab="new-arrival" class="buriedpoint" data-bp-id="shop_posnav_new_1"><div class="text">上新</div></li>
<li tab="popularity" class="buriedpoint" data-bp-id="shop_posnav_populary_1"><div class="text">人气</div></li>
<li class="all-goods buriedpoint" data-bp-id="shop_posnav_all_1">
<a href="{{allGoods}}" target="_blank">全部商品</a>
<div class="text"><a href="{{allGoods}}" target="_blank">全部商品</a></div>
</li>
</ul>
... ...
'use strict';
const fs = require('fs');
let devHost = '127.0.0.1';
let devHost = '172.16.9.195';
fs.readFile('.devhost', (err, buf)=> {
if (!err) {
... ...
/**
* 品牌店铺首页
*/
require('./shop/coupon');
var $ = require('yoho-jquery'),
IScroll = require('yoho-iscroll/build/iscroll-probe'),
lazyLoad = require('yoho-jquery-lazyload'),
... ... @@ -358,6 +358,7 @@ function tabChange(dom, index) {
} else if (activeTab === 'home-page') {
$nav1.removeClass('fixed-top absolute');
$nav2.removeClass('fixed-top absolute');
viewType = 1;
scrollToNav1();
}
scH = $('#scroller').outerHeight();
... ... @@ -370,13 +371,13 @@ function tabChange(dom, index) {
function scrollHandler() {
var scrollCall,
sTop = $(document).scrollTop(),
scH = $('#scroller').outerHeight(),
nav1OffsetTop = $('#nav').length ? $('#nav').offset().top : 0,
nav2OffsetTop = $('#list-nav').length ? $('#list-nav').offset().top : 0;
var tra;
//分页加载店铺商品列表
if (sTop + winH > scH - 0.25 * $goodsContainer.height() - 50) {
if (sTop > scH - winH * 2 && viewType === 1) {
if ($pre !== undefined) {
search({
type: 'shop_id',
... ... @@ -867,3 +868,4 @@ $collect.on('touchstart', function() {
}
});
});
... ...
... ... @@ -23,9 +23,11 @@ var tip = require('../../plugin/tip');
var loading = require('../../plugin/loading');
var $goodsContainer = $('#goods-container'),
$defaultgc = $goodsContainer.children('.default-goods'),
$ngc = $goodsContainer.children('.new-goods'),
$pgc = $goodsContainer.children('.price-goods'),
$dgc = $goodsContainer.children('.discount-goods');
$dgc = $goodsContainer.children('.discount-goods'),
$newList = $('.new-list');
var winH = $(window).height();
... ... @@ -46,7 +48,13 @@ var $listNav = $('#list-nav'),
newest: {
order: 1,
reload: true,
page: 0,
page: 1,
end: false
},
default: {
order: 0,
reload: true,
page: 1,
end: false
},
price: {
... ... @@ -298,8 +306,9 @@ function search(opt) {
navType = 'price';
} else if ($pre.hasClass('discount')) {
navType = 'discount';
} else if ($pre.hasClass('default')) {
navType = 'default';
}
nav = navInfo[navType];
page = nav.page + 1;
... ... @@ -383,6 +392,9 @@ function search(opt) {
case 'discount':
$container = $dgc;
break;
case 'default':
$container = $defaultgc;
break;
default:
break;
}
... ... @@ -405,8 +417,10 @@ function search(opt) {
first_load = false;
//移除头四个
goodList.splice(0, 4);
}
$container.append(goodList);
} else {
$container.html(goodList);
}
lazyLoad($container.find('.lazy'));
} else {
num = $container.find('.good-info').length;
... ... @@ -417,7 +431,6 @@ function search(opt) {
}
}
nav.reload = false;
nav.page = page;
... ... @@ -448,6 +461,10 @@ 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;
default:
break;
}
... ... @@ -498,7 +515,84 @@ writeSearch.bindWirteLocal($('#search-form'));
$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'),
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');
$listNav.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();
}
});
$(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,
... ... @@ -506,6 +600,22 @@ $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.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')) {
// 筛选面板切换状态
... ... @@ -531,6 +641,8 @@ $listNav.on('touchend touchcancel', function(e) {
navType = 'price';
} else if ($this.hasClass('discount')) {
navType = 'discount';
} else if ($pre.hasClass('default')) {
navType = 'default';
}
nav = navInfo[navType];
... ... @@ -576,6 +688,10 @@ $listNav.on('touchend touchcancel', function(e) {
case 'discount':
$dgc.removeClass('hide');
break;
case 'default':
$defaultgc.removeClass('hide');
break;
default:
break;
}
... ... @@ -689,3 +805,4 @@ $listNav.on('touchstart', 'li', function() {
});
require('../../common/footer');
require('./coupon');
... ...
... ... @@ -90,16 +90,20 @@
li{
display: block;
height: 28px;
height: 100%;
line-height: 100%;
float: left;
line-height: 28px;
width: 24.7%;
text-align: center;
border-left: 1px solid #e0e0e0;
margin-top: 30px;
border-sizing: border-box;
color: #b0b0b0;
.text {
display: block;
width: 100%;
border-left: 1px solid #e0e0e0;
margin-top: 30px;
height: 28px;
}
&:first-child {
border-left: none;
}
... ...