fe / yohobuywap-node · Commits

Go to a project

Authored by 王水玲
Commit 3d6488d3c270bd09ba214dbf054f4e1d58f00fc0 1 parent 40d60572

sale 首页

Inline Side-by-side
Showing 9 changed files with 661 additions and 34 deletions
... ... @@ -38,37 +38,54 @@ exports.index = (req, res) => {
limit: 10,
order: 's_t_desc'
}).then((result) => {
console.log(result.data.filter);
// result = {
// headerBanner: {
// list: [
// {
// url: '',
// src: 'http://img11.static.yhbimg.com/yhb-img01/2016/04/18/06/01abda0859d64f9af63a434ca281d213c5.jpg?imageView2/2/w/640/h/240'
// },
// {
// url: '',
// src: 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/0239e814b8121913aa67b9ad509bd4e310.jpg?imageView2/2/w/640/h/240'
// }
// ]
// },
// smallPic: {
// data: [
// {
// url: '',
// src: 'http://img11.static.yhbimg.com/yhb-img01/2016/05/12/15/011684760312d139ac2429c3678951ebd0.jpg?imageView2/2/w/640/h/403'
// },
// {
// url: '',
// src: 'http://img11.static.yhbimg.com/yhb-img01/2016/05/12/15/011684760312d139ac2429c3678951ebd0.jpg?imageView2/2/w/640/h/403'
// },
// {
// url: '',
// src: 'http://img11.static.yhbimg.com/yhb-img01/2016/05/12/15/011684760312d139ac2429c3678951ebd0.jpg?imageView2/2/w/275/h/160'
// }
// ]
// }
// };
result = {
headerBanner: {
list: [
{
url: '',
src: 'http://img11.static.yhbimg.com/yhb-img01/2016/04/18/06/01abda0859d64f9af63a434ca281d213c5.jpg?imageView2/2/w/640/h/240'
},
{
url: '',
src: 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/0239e814b8121913aa67b9ad509bd4e310.jpg?imageView2/2/w/640/h/240'
}
]
},
smallPic: {
data: [
{
url: '',
src: 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/0239e814b8121913aa67b9ad509bd4e310.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80'
},
{
url: '',
src: 'http://img11.static.yhbimg.com/yhb-img01/2016/05/12/15/011684760312d139ac2429c3678951ebd0.jpg?imageView2/2/w/640/h/403'
},
{
url: '',
src: 'http://img11.static.yhbimg.com/yhb-img01/2016/05/12/15/011684760312d139ac2429c3678951ebd0.jpg?imageView2/2/w/275/h/160'
}
]
},
title: {
title: '最新降价'
},
goods: {
url: 'http://m.yohobuy.com/product/pro_320421_412063/SYSTAGYuanLingWeiYiSYSA601HC09.html',
thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/12/07/09/01ced0e2ed6a4f2a6d95be70cd0a6c5a56.jpg?imageView/2/w/235/h/314',
name: 'NEFF ONE OF US RAGLAN L/S 男款森林风连帽卫衣',
salePrice: '759.00',
price: '799.00',
tags: {
isNew: true,
isAdvance: false,
isDiscount: false,
isYohoood: false,
isLimited: false
},
isSoonSoldOut: true
}
};
res.render('sale', Object.assign(renderData, result));
}).catch((err) => {
saleLogger(err, res);
... ...
... ... @@ -6,4 +6,54 @@
{{# smallPic}}
{{> product/thumb-row}}
{{/ smallPic}}
{{> common/floor-header}}
<ul id="list-nav" class="list-nav clearfix">
<li class="new active">
<a href="javascript:void(0);">
<span class="span-test">最新</span>
<span class="iconfont cur">&#xe616;</span>
</a>
</li>
<li class="price">
<a href="javascript:void(0);">
<span class="span-test">价格</span>
<span class="icon">
<i class="iconfont up cur">&#xe615;</i>
<i class="iconfont down">&#xe616;</i>
</span>
</a>
</li>
<li class="discount">
<a href="javascript:void(0);">
<span class="span-test">折扣</span>
<span class="icon">
<i class="iconfont up cur">&#xe615;</i>
<i class="iconfont down">&#xe616;</i>
</span>
</a>
</li>
<li class="filter">
<a href="javascript:void(0);">
<span class="span-test">筛选</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/good}}
{{/ goods}}
</div>
<div class="price-goods container hide clearfix"></div>
<div class="discount-goods container hide clearfix"></div>
{{> common/filter}}
</div>
{{> common/query-param}}
{{> common/suspend-cart}}
</div>
\ No newline at end of file
... ...
<div id="thumb-row">
{{# data}}
<a href="{{url}}">
<div class="thumb-row-box" style="background-image:url({{image src 275 160}})"></div>
<img class="thumb-row-box lazy" data-original="{{image src 275 130}}">
</a>
{{/ data}}
</div>
... ...
/**
* sale
* 商品列表页
* @author: wsl<shuiling.wang@yoho.cn>
* @date: 2016/5/17
*/
var $ = require('yoho-jquery'),
Swiper = require('yoho-swiper'),
ellipsis = require('yoho-mlellipsis'),
lazyLoad = require('yoho-jquery-lazyload'),
Swiper = require('yoho-swiper');
tip = require('../plugin/tip'),
filter = require('../plugin/filter'),
loading = require('../plugin/loading');
var $goodsContainer = $('#goods-container'),
$goodsChildren = $goodsContainer.children(),
$ngc = $($goodsChildren.get(0)),
$pgc = $($goodsChildren.get(1)),
$dgc = $($goodsChildren.get(2));
var winH = $(window).height(),
noResult = '<p class="no-result">未找到相关搜索结果</p>';
// 默认筛选条件
var defaultOpt = require('./query-param');
var $listNav = $('#list-nav'),
// 导航数据信息
navInfo = {
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;
require('./suspend-cart'); // 悬浮购物车
ellipsis.init();
lazyLoad($('img.lazy'));
... ... @@ -20,3 +67,325 @@ if ($('.swiper-container .swiper-slide').length > 1) {
pagination: '.banner-top .pagination-inner'
});
}
/**
* 筛选注册的回调，筛选子项点击后逻辑
* 需要执行search的场景：1.点选筛选项；2.relaod为true时切换导航；3.下拉加载
* @param opt {type, id}
*/
function search(opt) {
var setting = {},
ext,
att,
nav, navType,
page;
if (searching) {
return;
}
if (opt) {
// 筛选项变更则重置reload为true
for (att in navInfo) {
if (navInfo.hasOwnProperty(att)) {
navInfo[att].reload = true;
}
}
// 处理active状态
$listNav.children('.active').removeClass('active');
$pre.addClass('active');
switch (opt.type) {
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;
default:
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
});
searching = true;
loading.showLoadingMask();
$.ajax({
type: 'GET',
url: '/product/newsale/selectNewSale',
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;
default:
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);
// lazy good-infos who append in
lazyLoad($container.find('.good-info:gt(' + (num - 1) + ') .lazy'));
}
}
nav.reload = false;
nav.page = page;
searching = false;
loading.hideLoadingMask();
window.rePosFooter();
$('.good-detail-text .name').each(function() {
var $this = $(this),
$title = $this.find('a');
$title[0].mlellipsis(2);
});
},
error: function() {
tip.show('网络断开连接了~');
searching = false;
loading.hideLoadingMask();
}
});
}
$.ajax({
type: 'GET',
url: '/product/newsale/filter',
data: defaultOpt,
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
});
}
});
lazyLoad($('.lazy'));
// 导航栏点击逻辑说明：
// 1.点击非active项时切换active状态
// 2.价格和折扣active状态时继续点击切换排序
// 3.筛选无active时点击展开筛选面板
// 4.筛选有active时点击隐藏筛选面板并恢复点击筛选前active项的active状态
// 5.当前active为筛选并且点击其他项时，隐藏筛选面板
$listNav.bind('contextmenu', function() {
return false;
});
$listNav.on('touchend touchcancel', function(e) {
var $this = $(e.target).closest('li'),
nav,
navType,
$active;
e.preventDefault();
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')) {
navType = 'newest';
} else if ($this.hasClass('price')) {
navType = 'price';
} else if ($this.hasClass('discount')) {
navType = 'discount';
}
nav = navInfo[navType];
if ($this.hasClass('active')) {
// 最新无排序切换
if ($this.hasClass('new')) {
return;
}
if ($this.hasClass('price') || $this.hasClass('discount')) {
// 价格/折扣切换排序状态
$this.find('.icon > .iconfont').toggleClass('cur');
$pre = $this; // 更新pre为当前项
nav.reload = true; // 重置reload,HTML会被替换为逆序的HTML
nav.order = nav.order === 0 ? 1 : 0; // 切换排序
}
} else {
$active = $this.siblings('.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;
default:
break;
}
}
$active.removeClass('active');
$this.addClass('active');
}
if (nav.reload) {
search();
}
}
e.stopPropagation();
});
function scrollHandler() {
// 当scroll到1/4$goodsContainer高度后继续请求下一页数据
if ($(window).scrollTop() + winH >
$(document).height() - 0.25 * $goodsContainer.height() - 50) {
if (typeof($pre) !== 'undefined') {
search();
}
}
}
// srcoll to load more
$(window).scroll(function() {
window.requestAnimationFrame(scrollHandler);
});
// 初始请求最新第一页数据
search();
$listNav.on('touchstart', 'li', function() {
$(this).addClass('bytouch');
}).on('touchend touchcancel', function() {
$listNav.find('li').removeClass('bytouch');
});
... ...
... ... @@ -12,4 +12,8 @@
@import "product/recommend-for-you";
@import "product/sale";
@import "product/special";
@import "product/discount";
@import "product/good";
@import "product/filter";
@import "product/suspend-cart";
@import "cart/chose-panel";
... ...
... ... @@ -20,6 +20,8 @@
height: 90px;
line-height: 90px;
z-index: 1;
max-width: 640px;
margin: 0 auto;
&.boys {
background-image: linear-gradient(#323232, #414141);
... ...
.discount-page {
background-color: #fff;
.swiper-container {
width: 100%;
height: 310px;
img {
height: 100%;
width: 100%;
}
.swiper-pagination {
bottom: 0;
left: 0;
width: 100%;
}
.swiper-pagination-bullet-active {
background: #fff;
}
}
.banner-top-single {
width: 100%;
height: 200px;
img {
display: block;
height: 100%;
width: 100%;
}
}
.list-nav {
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
> li {
float: left;
width: 25%;
height: 66px;
line-height: 66px;
text-align: center;
font-size: 28px;
}
.bytouch {
background: #eee;
}
a {
display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
color: #999;
}
.active > a {
color: #000;
.span-test {
width: auto;
height: 100%;
display: inline-block;
box-sizing: border-box;
}
.iconfont {
color: #999;
&.cur {
color: #000;
}
}
}
.new .iconfont {
transform: scale(0.8);
font-weight: bold;
}
.filter .iconfont {
font-size: 24px;
transition: transform 0.1 ease-in;
}
.filter.active .iconfont {
transform: rotate(-180deg);
}
.icon {
position: relative;
i {
position: absolute;
transform: scale(0.8);
font-weight: bold;
}
.up {
top: -22px;
}
.down {
top: -8px;
}
}
}
.no-result {
text-align: center;
vertical-align: middle;
color: #ccc;
font-size: 1.2em;
margin-top: 320px;
}
.goods-container {
position: relative;
min-height: 880px;
padding-left: 15px;
padding-top: 8px;
}
}
... ...
.sale-page {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 640px;
overflow: hidden;
#thumb-row {
text-align: left;
background: #fff;
height: auto;
overflow: hidden;
padding-left: 30px;
a {
float: left;
width: 275px;
height: 130px;
margin-bottom: 30px;
margin-right: 30px;
}
.thumb-row-box {
border-radius: 20px;
width: 100%;
height: 100%;
margin: 0 auto;
}
}
}
... ...
.suspend-cart {
position: fixed;
width: 88px;
height: 88px;
line-height: 88px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3);
text-align: center;
right: 30px;
bottom: 140px;
z-index: 10;
a {
display: block;
width: 100%;
height: 100%;
}
.iconfont {
color: #fff;
font-size: 36px;
}
.cart-count {
position: absolute;
top: -24px;
right: -20px;
width: 72px;
height: 72px;
font-size: 40px;
line-height: 72px;
color: #fff;
background: #f03d35;
text-align: center;
border-radius: 50%;
transform: scale(0.5);
}
}
... ...