Authored by 王水玲

店铺首页

... ... @@ -23,28 +23,28 @@ const _getShopData = (shopId, uid, isApp) => {
let channel = req.yoho.channel;
isApp = isApp || '';
//Promise.all([searchModel.getShopDecorator(shopId),searchModel.getShopInfo(shopId, uid)]).then((result) => {
// data = {
// decorator: result[0], // 店铺装修资源数据
// shopInfo: result[1] // 店铺信息
// };
//
// // 店铺使用基础模板,返回品牌页面
// if (data.shopInfo.data.shopTemplateType && data.shopInfo.data.shopTemplateType ===1) {
// return {
// goBrand: data.shopInfo.data
// }
// }
//
// // 店铺分类
// return searchModel.getShopCategory(shopId, channel);
//}).then(shopCategory => {
// _.assign({
// shopCategory: shopCategory
// }, data);
//
// return searchModel.formShopData(data, shopId, isApp); // 组织楼层数据
//});
Promise.all([searchModel.getShopDecorator(shopId),searchModel.getShopInfo(shopId, uid)]).then((result) => {
data = {
decorator: result[0], // 店铺装修资源数据
shopInfo: result[1] // 店铺信息
};
// 店铺使用基础模板,返回品牌页面
if (data.shopInfo.data.shopTemplateType && data.shopInfo.data.shopTemplateType ===1) {
return {
goBrand: data.shopInfo.data
}
}
// 店铺分类
return searchModel.getShopCategory(shopId, channel);
}).then(shopCategory => {
_.assign({
shopCategory: shopCategory
}, data);
return searchModel.formShopData(data, shopId, isApp); // 组织楼层数据
});
};
/**
... ...
... ... @@ -421,7 +421,7 @@ const getShopCategory = (shopId, channel) => {
* 组织店铺页面数据
* @param {array} data 接口返回的店铺页所需数据
* @param {int} shopId 店铺id
* @param {int} isAap app版本
* @param {int} isApp app版本
* @return array
*/
const formShopData = (data, shopId, isApp) => {
... ...
... ... @@ -61,5 +61,6 @@ router.get('/search/search', search.search);
router.get('/index/index', search.category);
router.get('/index/brand', search.brand);
router.post('/opt/favoriteBrand', search.favoriteBrand);
router.get('/opt/favoriteBrand', search.favoriteBrand);
module.exports = router;
... ...
{{# shopIndex}}
<div class="shop-index yoho-page" id="wrapper">
<div id="scroller">
<div id="nav-top">
{{!--{{# headerBanner}}
{{> resources/banner-top}}
{{/ headerBanner}}--}}
<div class="search-area">
<div id="search-input" class="search-input">
<form id="search-form" action={{url}} method="get">
<i class="search-icon iconfont">&#xe60f;</i>
<input type="text" placeholder="搜索店铺内潮品" name="query" class="buriedpoint" data-bp-id="shop_search_input_1">
<input type="hidden" name="from" value="search">
<i class="clear-input iconfont hide">&#xe626;</i>
<span id="search" class="search buriedpoint" type="submit" data-bp-id="shop_search_btn_0">搜索</span>
</form>
</div>
</div>
<div class="branner-top">
<img src="{{branerImg}}">
<img class="logo" src=""></div>
<p class="name">Vans专营店</p>
<div class="collect"></div>
</div>
</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" class="buriedpoint" data-bp-id="shop_nav_new_1">上新</li>
<li tab="popularity" class="buriedpoint" data-bp-id="shop_nav_populary_1">人气</li>
<li class="buriedpoint" data-bp-id="shop_nav_all_1">
<a href="#" target="_blank">全部商品</a>
</li>
</ul>
<div id="home-page">
<div id="nav-main" class="main">
{{#unless brands}}
<div class="multi-brands">
<h2>品牌一览</h2>
<div class="multi-browse">
<ul class="swiper-wrapper">
{{#each multiList}}
<li class="swiper-slide brand-img buriedpoint" data-bp-id="shop_brand_{{img}}_0">
<a href="{{url}}">
<img src="{{img}}">
</a>
<p>{{brandName}}</p>
</li>
{{/each}}
</ul>
</div>
</div>
{{/unless}}
<div class="banner-area">
{{# bannerTop}}
{{> home/banner_top}}
{{/ bannerTop}}
</div>
<ul class="spring">
{{#each spring}}
<li class="buriedpoint" data-bp-id="shop_spring_{{img}}_0" >
<a href="{{url}}">
<img src="{{springType}}">
</a>
</li>
{{/each}}
</ul>
{{! 热门品类}}
{{# hotCategory}}
{{> resources/hot-category}}
{{/ hotCategory}}
<div class="popularity-title">
人气单品
<a class="more" href="{{more_url}}">&#xe618;</a>
</div>
<ul class="product-list">
{{#each hotList}}
<li class="buriedpoint" data-bp-id="shop_hotcategory_{{listUrl}}_0">
<a href="{{url}}">
<img src="{{listUrl}}">
</a>
<div class="list-price">
<p>VANS AP M BERZE</p>
<p><span class="red">{{originalPrice}}</span>
<span>{{presentPrice}}</span>
</p>
</div>
</li>
{{/each}}
</ul>
</div>
<div class="discount-area">
{{> shop/goods-nav-top}}
</div>
</div>
<div id="new-arrival" class=""></div>
<div id="popularity" class=""></div>
</div>
{{> shop/shop-footer}}
<ul id="pos-nav" class="nav hide">
<li class="active color buriedpoint" data-bp-id="shop_nav_index_1">首页</li>
<li class="buriedpoint" data-bp-id="shop_nav_new_1">上新</li>
<li class="buriedpoint" data-bp-id="shop_nav_populary_1">人气</li>
<li class="buriedpoint" data-bp-id="shop_nav_all_1">
<a href="#" target="_blank">全部商品</a>
</li>
</ul>
<ul id="pos-list " class="list-nav hide">
<li class="new active buriedpoint" data-bp-id="shop_listnav_new_1">
<a href="javascript:void(0);">
<span class="spanTest">最新</span>
<span class="iconfont cur">&#xe616;</span>
</a>
</li>
<li class="price buriedpoint" data-bp-id="shop_listnav_price_1">
<a href="javascript:void(0);">
<span class="spanTest">价格</span>
<span class="icon">
<i class="iconfont up cur">&#xe615;</i>
<i class="iconfont down">&#xe616;</i>
</span>
</a>
</li>
<li class="discount buriedpoint" data-bp-id="shop_listnav_discount_true">
<a href="javascript:void(0);">
<span class="spanTest">折扣</span>
<span class="icon">
<i class="iconfont up cur">&#xe615;</i>
<i class="iconfont down">&#xe616;</i>
</span>
</a>
</li>
<li class="filter buriedpoint" data-bp-id="shop_listnav_filter_1">
<a href="javascript:void(0);">
<span class="spanTest">筛选</span>
<span class="iconfont cur">&#xe613;</span>
</a>
</li>
</ul>
</div>
{{/ shopIndex}}
... ...
<ul id="list-nav" class="home-sub-nav list-nav clearfix">
<li data-bp-id="shop_listnav_new_1" class="new active buriedpoint">
<a href="javascript:void(0);">
<span class="spanTest">最新</span>
<span class="iconfont cur">&#xe616;</span>
</a>
</li>
<li class="price buriedpoint" data-bp-id="shop_listnav_price_1">
<a href="javascript:void(0);">
<span class="spanTest">价格</span>
<span class="icon">
<i class="iconfont up cur">&#xe615;</i>
<i class="iconfont down">&#xe616;</i>
</span>
</a>
</li>
<li class="discount buriedpoint" data-bp-id="shop_listnav_discount_1">
<a href="javascript:void(0);">
<span class="spanTest">折扣</span>
<span class="icon">
<i class="iconfont up cur">&#xe615;</i>
<i class="iconfont down">&#xe616;</i>
</span>
</a>
</li>
<li class="filter buriedpoint" data-bp-id="shop_listnav_filter_1">
<a href="javascript:void(0);">
<span class="spanTest">筛选</span>
<span class="iconfont cur">&#xe613;</span>
</a>
</li>
</ul>
<div id="goods-container" class="goods-container">
<div class="new-goods container clearfix">
{{# goods}}
{{> common/goods}}
{{/ goods}}
</div>
<div class="price-goods container hide clearfix"></div>
<div class="discount-goods container hide clearfix"></div>
{{> common/filter}}
</div>
... ...
<div class="shop-foot-wrapper">
<ul{{#if brandList}} class="foot-list-3"{{/if}}>
<li data-bp-id="shop_footnav_one_1" class="buriedpoint">
{{#if shopCategory.url}}
<a href="{{shopCategory.url}}">商品分类</a>
{{^}}
商品分类
<div class="sub-group hide">
<dl>
{{# shopCategory.list}}
<dd data-bp-id="shop_subgroup_{{name}}_1" class="buriedpoint"><a href="{{url}}">{{name}}</a></dd>
{{/ shopCategory.list}}
</dl>
<div class="sharp"></div>
</div>
{{/if}}
<div class="wall"></div>
</li>
{{#if brandList}}
<li data-bp-id="shop_footnav_two_1" class="buriedpoint">
{{#if brandList.url}}
<a href="{{brandList.url}}">品牌一览</a>
{{^}}
品牌一览
<div class="sub-group hide">
<dl>
{{# brandList.list}}
<dd><a href="{{url}}" data-bp-id="shop_subgroup_{{brandName}}_1" class="buriedpoint">{{brandName}}</a></dd>
{{/ brandList.list}}
</dl>
<div class="sharp"></div>
</div>
{{/if}}
<div class="wall"></div>
</li>
{{/if}}
<li data-bp-id="shop_footnav_three_1" class="buriedpoint">
<a href="{{shopIntroHref}}">店铺简介</a>
</li>
</ul>
</div>
\ No newline at end of file
... ...
request('../shop/shop');
... ...
/**
* 品牌店铺首页
*/
var $ = require('jquery'),
IScroll = require('iscroll/iscroll-probe'),
lazyLoad = require('yoho.lazyload'),
Swiper = require('yoho.iswiper'),
bannerSwiper,
multiSwiper,
myScroll,
imgH,
nav1H,
main1H,
main1oH,
nav2H,
main2oH,
scH,
$nav1 = $('#pos-nav'),
$nav2 = $('#pos-list'),
sTop;
var tip = require('../plugin/tip'),
filter = require('../plugin/filter'),
loading = require('../plugin/loading');
var $subNav = $('.home-sub-nav'),
$goodsContainer = $('#goods-container'),
$goodsChildren = $goodsContainer.children(),
$ngc = $($goodsChildren.get(0)),
$pgc = $($goodsChildren.get(1)),
$dgc = $($goodsChildren.get(2)),
shopId = $('input[name="shop_id"]').val(),
appVersion = $('input[name="app_version"]').val(),
brand = $('input[name="brand"]').val(),
favId = $('input[name="favId"]').val();
var winH = $(window).height(),
noResult = '<p class="no-result">未找到相关搜索结果</p>';
//默认筛选条件
var defaultOpt = require('./query-param');
var $listNav = $('#list-nav'),
//导航数据信息
navInfo = {
new: {
order: 1,
reload: true,
page: 1,
end: false
},
hot: {
order: 1,
reload: true,
page: 1,
end: false
},
newest: {
order: 1,
reload: true,
page: 0,
end: false
},
price: {
order: 1,
reload: true,
page: 0,
end: false
},
discount: {
order: 1,
reload: true,
page: 0,
end: false
}
},
$pre = $listNav.find('.active'), //纪录进入筛选前的active项,初始为选中项
searching;
var viewType = 1,// 1-首页,2-上新,3-人气
listCount = $('.category-list li').length,
listModValue = 4 - listCount % 4,
listIndex;
lazyLoad($('img.lazy'));
//焦点效果
if ($('.banner-swiper').find('li').size() > 1) {
bannerSwiper = new Swiper('.banner-swiper', {
lazyLoading: true,
lazyLoadingInPrevNext: true,
loop: true,
autoplay: 3000,
autoplayDisableOnInteraction: false,
paginationClickable: true,
slideElement: 'li',
pagination: '.banner-top .pagination-inner'
});
}
if ($('.multi-browse').find('li').size() > 1) {
multiSwiper = new Swiper('.multi-browse', {
lazyLoading: true,
lazyLoadingInPrevNext: true,
lazyLoadingOnTransitionStart: true,
grabCursor: true,
slidesPerView: 'auto',
slideElement: 'li',
watchSlidesVisibility: true
});
}
//根据热门品类的个数来改变样式展示
//
if ($('.category-list li').length % 4 !== 0) {
$('.category-list li:last-child').addClass('category-list-last-li');
}
if ($('.category-list li').length < 4) {
$('.category-list').addClass('category-list-top-board');
$('.category-list').find('.buriedpoint').addClass('category-list-only-one-row');
}
if ($('.category-list li').length >= 5) {
for (listIndex = listModValue; listIndex >= 0; listIndex--) {
$('.category-list li').eq(listCount - 4 + listIndex - 1).addClass('category-list-last-full-row');
}
}
function getPageGoods(info) {
var nav,navType;
if (searching) {
return;
}
navType = info.data.type;
nav = navInfo[navType];
//不需要重新加载并且数据请求结束
if (nav.end) {
return;
}
searching = true;
$.ajax({
type: 'GET',
url: info.url,
data: info.data,
success: function(data) {
if (data === ' ') {
nav.end = true;
}
info.callBack(data);
},
error: function() {
alert('网络断开连接了~');
searching = false;
}
});
}
function getParam(req) {
if (brand) {
req.data.brand = brand;
}
if (shopId) {
req.data.shop_id = shopId;
}
}
function newData(callback) {
var req = {};
req.url = '/index/search/search';
req.data = {
type: 'newest',
order: '1',
page: navInfo.new.page,
tagNew: '1'
};
getParam(req);
req.callBack = function(data) {
$('#new-arrival').append(data);
navInfo.new.page++;
myScroll.refresh();
lazyLoad($('#new-arrival .lazy'));
scH = $('#scroller').outerHeight();
searching = false;
callback && $.isFunction(callback) && callback();
};
getPageGoods(req);
}
function hotData(callback) {
var req = {};
req.url = '/index/search/search';
req.data = {
type: 'hot',
order: '1',
page: navInfo.hot.page,
showTag: '1'
};
getParam(req);
req.callBack = function(data) {
$('#popularity').append(data);
navInfo.hot.page++;
myScroll.refresh();
lazyLoad($('#popularity .lazy'));
scH = $('#scroller').outerHeight();
searching = false;
callback && $.isFunction(callback) && callback();
};
getPageGoods(req);
}
function tabChange(dom, index) {
var li = dom.eq(index);
dom.removeClass('active');
li.addClass('active');
dom.removeClass('color');
li.addClass('color');
}
//首页导航
$.jqtab = function(nav, posNav, main) {
$(nav + ' li, ' + posNav + ' li').not('li.all-goods').on('touchstart', function() {
var index = $(this).index(),
activeTab = $(this).attr('tab');
$nav1.removeClass('fixed-top');
tabChange($(nav + ' li'), index);
tabChange($(posNav + ' li'), index);
$(main).hide();
$('#' + activeTab).fadeIn();
if (activeTab === 'new-arrival') {
newData();
viewType = 2;
} else if (activeTab === 'popularity') {
hotData();
viewType = 3;
} else if (activeTab === 'home-page') {
myScroll && myScroll.refresh();
scH = $('#scroller').outerHeight();
$nav1.removeClass('fixed-top');
$nav1.removeClass('absolute');
$nav2.removeClass('fixed-top');
$nav2.removeClass('absolute');
}
if (!$nav1.hasClass('hide')) {
myScroll.scrollTo(0, 0 - imgH);
}
$nav1.addClass('hide');
});
};
$.jqtab('#nav', '#pos-nav', '.main');
$('#wrapper').addClass('scroll-wrapper');
// lazyLoad($('img.lazy'));
myScroll = new IScroll('#wrapper', {
probeType: 3,
mouseWheel: true,
click: true
});
myScroll.on('scroll', function() {
var scrollCall,
sTop = -this.y;
if (sTop + winH * 2 > scH) {
switch (viewType) {
case 2:
scrollCall = function() {
$nav1.css({
transform: 'translate(0, ' + (-scH) + 'px)'
});
};
newData(scrollCall);
break;
case 3:
scrollCall = function() {
$nav1.css({
transform: 'translate(0, ' + (-scH) + 'px)'
});
};
hotData(scrollCall);
break;
}
}
if (sTop < imgH) {
if (!$nav1.hasClass('hide')) {
$nav1.addClass('hide');
}
if (!$nav2.hasClass('hide')) {
$nav2.addClass('hide');
} //滑动距离不到导航1
} else if (sTop < imgH + nav1H + main1oH) {
if ($nav1.hasClass('hide')) {
$nav1.removeClass('hide');
}
if (!$nav2.hasClass('hide')) {
$nav2.addClass('hide');
}//滑动距离不到导航2
if (sTop < imgH + main1H) {
if (!$nav1.hasClass('fixed-top')) {
$nav1.addClass('fixed-top')
.removeClass('absolute')
.css({
transform: 'translate(0, ' + (-scH) + 'px)'
});
}
} else if (sTop < imgH + nav1H + main1H) {
if ($('#home-page').is(':hidden')) {
return false;
}
if (!$nav1.hasClass('absolute')) {
$nav1.addClass('absolute')
.removeClass('fixed-top');
}
$nav1.css({
transform: 'translate(0, ' + (imgH + main1H - sTop - scH) + 'px)'
});
}
} else {
if ($('#home-page').is(':hidden')) {
return false;
}
if (!$nav1.hasClass('hide')) {
$nav1.addClass('hide');
}
if ($nav2.hasClass('hide')) {
$nav2.removeClass('hide');
}
if (sTop < scH) {
if (!$nav2.hasClass('absolute')) {
$nav2.addClass('absolute')
.removeClass('fixed-top');
}
$nav2.css({
transform: 'translate(0, ' + (-scH) + 'px)'
});
}
}
$('#scroller').trigger('scroll');
});
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
/*if (!isIphone) {
return;
}*/
//window onload 后重新refresh iscroll
$(window).load(function() {
myScroll && myScroll.refresh();
imgH = $('#nav-top').outerHeight();
nav1H = $('#nav').outerHeight();
main1H = $('#nav-main').height();
main1oH = $('#nav-main').outerHeight();
nav2H = $('#list-nav').outerHeight();
main2oH = $('#goods-container').outerHeight();
setTimeout(function() {
scH = $('#scroller').outerHeight();
}, 1000);
});
function bindGoodThumbClick() {
$(document).trigger('rebindBpEvent');
}
function search(opt) {
var setting = {},
ext,
att,
nav, navType,
page;
if (searching) {
return;
}
if (!opt.url) {
opt.url = '/index/search/search';
}
if (!opt.nextPage) {
//筛选项变更则重置reload为true
for (att in navInfo) {
if (navInfo.hasOwnProperty(att)) {
navInfo[att].reload = true;
}
}
$listNav.children('.active').removeClass('active');
$pre.addClass('active');
if (opt.hasOwnProperty('id')) {
switch (opt.type) {
case 'shop_id':
ext = {
shop_id: opt.id
};
break;
case 'gender':
ext = {
gender: opt.id
};
break;
case 'brand':
ext = {
brand: opt.id
};
break;
case 'sort':
ext = {
sort: opt.id
};
break;
case 'color':
ext = {
color: opt.id
};
break;
case 'size':
ext = {
size: opt.id
};
break;
case 'price':
ext = {
price: opt.id
};
break;
case 'discount':
ext = {
discount: opt.id
};
break;
case 'ageLevel':
ext = {
age_level: opt.id
};
break;
}
$.extend(defaultOpt, ext); //扩展筛选项
}
}
//导航类别
if ($pre.hasClass('new')) {
navType = 'newest';
} else if ($pre.hasClass('price')) {
navType = 'price';
} else if ($pre.hasClass('discount')) {
navType = 'discount';
}
nav = navInfo[navType];
page = nav.page + 1;
if (nav.reload) {
page = 1;
} else if (nav.end) {
//不需要重新加载并且数据请求结束
return;
}
$.extend(setting, defaultOpt, {
type: navType,
order: nav.order,
page: page
});
if (brand) {
setting.brand = brand;
}
if (shopId) {
setting.shop_id = shopId;
}
searching = true;
loading.showLoadingMask();
$.ajax({
type: 'GET',
url: opt.url ? opt.url : '',
data: setting,
success: function(data) {
var $container,
num;
switch (navType) {
case 'newest':
$container = $ngc;
break;
case 'price':
$container = $pgc;
break;
case 'discount':
$container = $dgc;
break;
}
if (data === ' ') {
nav.end = true;
if (nav.reload) {
$container.html(noResult);
}
} else {
if (nav.reload) {
$container.html(data);
lazyLoad($container.find('.lazy'));
} else {
num = $container.find('.good-info').length;
$container.append(data);
lazyLoad($container.find('.good-info:gt(' + (num - 1) + ') .lazy'));
}
}
nav.reload = false;
nav.page = page;
searching = false;
loading.hideLoadingMask();
window.rePosFooter();
setTimeout(function() {
myScroll.refresh();
scH = $('#scroller').outerHeight();
}, 1000);
bindGoodThumbClick();
},
error: function() {
tip.show('网络断开连接了~');
searching = false;
loading.hideLoadingMask();
}
});
}
/**
* 获取url参数
*/
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return window.unescape(r[2]);
}
return null;
}
$.ajax({
type: 'GET',
url: '/search/filter',
data: {
shop_id: brand ? '' : shopId,
brand: brand,
gender: getQueryString('gender'),
channel: getQueryString('channel')
},
success: function(data) {
$goodsContainer.append(data);
//初始化filter&注册filter回调
filter.initFilter({
fCbFn: search,
hCbFn: function() {
//切换active状态到$pre上
$pre.addClass('active');
$pre.siblings('.filter').removeClass('active');
},
missStatus: true
});
setTimeout(function() {
myScroll.refresh();
scH = $('#scroller').outerHeight();
}, 1000);
}
});
$listNav.bind('contextmenu', function(e) {
return false;
});
$subNav.on('touchend touchcancel', function(e) {
var $this = $(e.target).closest('li'),
cname,
nav,
navType,
$active;
var bpIdData = $this.attr('data-bp-id') || '';
e.preventDefault();
$(document).trigger('shouldSendBpData', [bpIdData]);
if (typeof $this === 'undefined' || $this.length === 0) {
return;
}
if ($this.hasClass('filter')) {
//筛选面板切换状态
if ($this.hasClass('active')) {
filter.hideFilter();
//点击筛选钱的active项回复active
$pre.addClass('active');
$this.removeClass('active');
} else {
$pre = $this.siblings('.active');
$pre.removeClass('active');
$this.addClass('active');
filter.showFilter();
}
} else {
if ($this.hasClass('new')) {
cname = '.new';
navType = 'newest';
} else if ($this.hasClass('price')) {
cname = '.price';
navType = 'price';
} else if ($this.hasClass('discount')) {
cname = '.discount';
navType = 'discount';
}
nav = navInfo[navType];
if ($this.hasClass('active')) {
//最新无排序切换
if ($this.hasClass('new')) {
return;
}
if ($this.hasClass('price') || $this.hasClass('discount')) {
$this = $subNav.find(cname);
// 价格/折扣切换排序状态
$this.find('.icon > .iconfont').toggleClass('cur');
$pre = $this; //更新pre为当前项
nav.reload = true; //重置reload,HTML会被替换为逆序的HTML
nav.order = nav.order === 0 ? 1 : 0; //切换排序
$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;
}
}
} else {
$active = $subNav.find('.active');
$pre = $this; //$pre为除筛选导航的其他导航项,若当前active的为筛选,则把$pre置为当前点击项
if ($active.hasClass('filter')) {
//若之前active项为筛选,则隐藏筛选面板
filter.hideFilter();
} else {
//切换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;
}
}
$subNav.children().removeClass('active');
$subNav.find(cname).addClass('active');
}
if (nav.reload) {
search({
type: 'shop_id',
id: shopId,
brand: brand,
url: '/index/search/search',
nextPage: false
});
}
}
e.stopPropagation();
});
function scrollHandler() {
sTop = -myScroll.y;
//当scroll到1/4$goodsContainer高度后继续请求下一页数据
myScroll && myScroll.refresh();
if (sTop + winH > $('#scroller').height() - 0.25 * $goodsContainer.height() - 50) {
if ($pre !== undefined) {
search({
type: 'shop_id',
id: shopId,
brand: brand,
url: '/index/search/search',
nextPage: true
});
}
}
}
//srcoll to load more
$(window).scroll(function() {
window.requestAnimationFrame(scrollHandler);
});
//初始请求最新第一页数据
search({
type: 'shop_id',
id: shopId,
brand: brand,
url: '/index/search/search',
nextPage: false
});
$listNav.on('touchstart', 'li', function(e) {
$(this).addClass('bytouch');
}).on('touchend touchcancel', function() {
$listNav.find('li').removeClass('bytouch');
myScroll.refresh();
});
$nav2.on('touchstart', 'li', function(e) {
$(this).addClass('bytouch');
}).on('touchend touchcancel', function() {
$nav2.find('li').removeClass('bytouch');
myScroll.refresh();
});
//底部导航点击
function fotterClick(group) {
$(group + ' li').on('touchstart', function() {
$('.sub-group').addClass('hide');
if ($(this).find('.sub-group').length > 0) {
$(this).find('.sub-group').removeClass('hide');
}
});
}
fotterClick('.shop-foot-wrapper');
function stopPropagation(e) {
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
$(document).bind('touchstart', function() {
$('.sub-group').addClass('hide');
});
$('.shop-foot-wrapper').bind('touchstart', function(e) {
stopPropagation(e);
});
//收藏
function postCollect(info) {
var url = '';
if (searching) {
return;
}
searching = true;
$.ajax({
method: 'post',
url: info.url,
data: info.data,
success: function(data) {
if (data.code === 200) {
if ($('#collect').hasClass('alreadyCollect')) {
$('#collect').attr('class', 'notCollect');
} else {
$('#collect').attr('class', 'alreadyCollect');
}
}
if (data.code === 401) {
url = data.url;
$('body').append('<a href=\'' + url + '\'><span class="jump-login"><span></a>');
$('.jump-login').click();
}
setTimeout(function() {
myScroll.refresh();
scH = $('#scroller').outerHeight();
}, 1000);
searching = false;
},
error: function() {
alert('网络断开连接了~');
searching = false;
}
});
}
function collectShop() {
var qew = {};
qew.url = '/product/index/shopFav';
qew.data = {
shop_id: favId ? favId : shopId,
app_version: appVersion
};
postCollect(qew);
}
function cancelShop() {
var qew = {};
qew.url = '/product/index/cancelShopFav';
qew.data = {
shop_id: favId ? favId : shopId,
app_version: appVersion
};
postCollect(qew);
}
$('#collect').on('touchstart', function(e) {
if ($('#collect').hasClass('alreadyCollect')) {
cancelShop();
} else {
collectShop();
}
});
\ No newline at end of file
... ...
... ... @@ -2,3 +2,4 @@
@import "detail/index";
@import "outlet/index";
@import "search/index";
@import "shop/shop-index";
... ...
.shop-index {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
.branner-top {
width: 100%;
height: 200px;
position: relative;
overflow: hidden;
.shop-back-img {
height: 100%;
width: 100%;
}
}
.logo {
position: absolute;
overflow: hidden;
left: 30px;
bottom: 30px;
width: 100px;
height: 100px;
}
.store-name {
color: #fff;
font-size: 28px;
position: absolute;
overflow: hidden;
left: 148px;
bottom: 20px;
}
.collect {
width: 128px;
height: 49px;
position: absolute;
bottom: 30px;
right: 30px;
border-radius: 10px;
text-align: center;
background-size: contain;
}
.alreadyCollect{
width: 128px;
height: 50px;
border-radius: 10px;
background-image: url('/product/already-collect.png') no-repeat;
background-size: contain;
}
.notCollect{
width: 128px;
height: 50px;
border-radius: 10px;
background-image: url('/product/not-collect.png') no-repeat;
background-size: contain;
}
.nav {
width: 100%;
height: 88px;
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
list-style: none;
font-size: 28px;
background: #fff;
overflow: hidden;
border-sizing: border-box;
border-bottom: 1px solid #e1e1e1;
li{
color: #b1b1b1;
display: block;
height: 28px;
float: left;
line-height: 28px;
width: 24.7%;
text-align: center;
border-left: 1px solid #e1e1e1;
margin-top: 30px;
border-sizing: border-box;
color: #b1b1b1;
&:first-child {
border-left: none;
}
a {
color: #b1b1b1;
}
}
.color {
color: #000;
}
}
.main {
background: #f0f0f0;
padding-bottom: 40px;
overflow: hidden;
}
.banner-area {
@extend .banner-top;
margin-bottom: 30px;
}
.hide {
display: hidden;
}
.coupon {
width: 100%;
padding: 30px 0;
overflow: hidden;
img {
width: 245px;
height: 120px;
vertical-align: top;
margin-left: 30px;
float: left;
}
}
.multi-brands {
width: 100%;
height: 270px;
background: #fff;
border: 1px solid #e1e1e1;
border-top: none;
font-size: 20px;
text-align: center;
padding-top: 25px;
margin-bottom: 30px;
overflow: hidden;
p {
font-size: 30px;
}
}
.multi-browse {
margin-top: 50px;
}
.brand-img {
margin-left: 30px;
width: 30%;
height: 150px;
overflow: hidden;
padding-bottom: 20px;
float: left;
p {
font-size: 25px;
color: #b1b1b1;
padding-top: 10px;
height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
img {
height: 70%;
}
}
.spring {
margin: 0;
overflow: hidden;
li {
width: 50%;
float: left;
text-align: center;
list-style: none;
display: list-item;
img {
width: 90%;
border-radius: 10px;
vertical-align: top;
}
}
}
.popularity-title {
background: #fff;
border-bottom: 1px solid #e8e8e8;
text-align: center;
line-height: 98px;
font-size: 32px;
margin-top: 40px;
position: relative;
}
.more {
position: absolute;
right: 30px;
top: 0;
bottom: 0;
color: #b0b0b0;
font-size: 50px;
font-family: "iconfont" !important;
font-style: normal;
text-decoration: none;
}
.product-list {
margin: 0;
padding: 0 0 30px 30px;
overflow: hidden;
background: #fff;
border-bottom: 30px solid #f0f0f0;
li {
width: 275px;
height: 368px;
margin-top: 50px;
margin-right: 30px;
float: left;
text-align: center;
list-style: none;
img {
width: 275px;
height: 368px;
vertical-align: top;
}
}
}
.list-price {
height: 60px;
background: #aaaeac;
color: #FFFFFF;
font-size: 22px;
margin-top: -60px;
position: relative;
opacity: 0.90;
padding-left: 15px;
p {
margin: 0;
line-height: 32px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.red {
color: red;
}
.icon {
position: relative;
color: #b1b1b1;
i {
position: absolute;
}
.up {
top: -5px;
left: 8px;
}
.down {
top: 8px;
left: 8px;
}
}
.goods-container {
position: relative;
min-height: 440px;
padding-left: 15px;
padding-top: 20px;
border-bottom: 1px solid #e0e0e0;
}
.discount-area {
@extend .discount-page;
.list-nav li {
display: block;
height: 78px;
float: left;
line-height: 78px;
width: 24.8%;
text-align: center;
border-sizing: border-box;
position: relative;
span {
padding-top: 0;
font-size: 28px;
}
}
.new:after {
height: 28px;
content: '';
border-left: 1px solid #e1e1e1;
position: absolute;
top: 25px;
left: 163px;
}
.price:after {
height: 28px;
content: '';
border-left: 1px solid #e1e1e1;
position: absolute;
top: 25px;
left: 163px;
}
.discount:after {
height: 28px;
content: '';
border-left: 1px solid #e1e1e1;
position: absolute;
top: 25px;
left: 163px;
}
.active {
.cur {
color: #000;
}
}
.list-nav .icon .up {
top: -28px;
}
.list-nav .icon .down {
top: -14px;
}
.goods-container {
padding-top: 30px;
padding-bottom: 100px;
}
}
.search-area {
@extend .search-page;
}
.hide {
display: none;
}
.shop-foot-wrapper {
position: absolute;
bottom: 0;
display: table;
width: 100%;
height: 88px;
line-height: 88px;
font-size: 28px;
background: #fff;
border-top: 1px solid #eaeaea;
ul {
display: table-row;
}
li {
display: table-cell;
text-align: center;
.wall {
width: 0;
height: 28px;
margin-top: 30px;
float: right;
border-right: 1px solid #eaeaea;
display: inline-block;
}
}
.sub-group {
position: absolute;
background: #fff;
border: 1px solid #eaeaea;
border-radius: 12px;
bottom: 104px;
width: 40%;
margin-left: 5%;
dl {
width: 80%;
margin: 0 auto;
}
dd {
line-height: 80px;
text-align: center;
border-top: 1px solid #eaeaea;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
dd:first-child {
border-top: 0;
}
}
.sharp {
position: absolute;
width: 100%;
height: 14px;
background: resolve('product/sharp.png') no-repeat center center;
}
.foot-list-3 .sub-group {
width: 29%;
margin-left: 2%;
}
}
.bytouch{
background:#eee;
}
.new-arrival {
padding-top: 30px;
overflow: hidden;
padding-left: 15px;
background: #fff;
padding-bottom: 100px;
}
.popularity {
padding-top: 30px;
overflow: hidden;
padding-left: 15px;
background: #fff;
padding-bottom: 100px;
}
.pos-list {
@extend .discount-page;
background: #fff;
width: 100%;
overflow: hidden;
li {
display: block;
height: 78px;
float: left;
line-height: 78px;
width: 24.8%;
text-align: center;
border-sizing: border-box;
span {
font-size: 28px;
}
a {
display: block;
box-sizing: border-box;
text-align: center;
width: 100%;
height: 100%;
color: #999;
b {
height: 28px;
border-left: 1px solid #e1e1e1;
float: right;
margin-top: 25px;
}
}
}
.active .cur {
color: #000;
}
.active a {
color: #000;
}
.new .iconfont {
transform: scale(0.8);
font-weight: bold;
}
.price .iconfont {
transform: scale(0.8);
font-weight: bold;
}
.filter .iconfont {
font-size: 22px;
transition: transform 0.1 ease-in;
}
.filter.active .iconfont {
transform: rotate(-180deg);
}
}
.pos-list .icon .up {
top: -28px;
}
.pos-list .icon .down {
top: -14px;
}
.category-list-top-board {
border-top: 1px solid #e0e0e0;
}
.category-list-last-li {
border-right: 1px solid #e0e0e0;
}
.category-list-only-one-row {
border-top: none!important;
}
.category-list-last-full-row {
border-bottom: 1px solid #e0e0e0;
}
}
\ No newline at end of file
... ...