fe / yoho-blk · Commits

Go to a project

Authored by 姜枫
Commit a90a9807b7f02c902e5bd750ad86886f631d94e4 1 parent b5b2f162

add editorial favorite

Inline Side-by-side
Showing 14 changed files with 571 additions and 41 deletions
... ... @@ -26,12 +26,13 @@ const favorite = {
title: '我的收藏',
isMe: true,
content: {
nav: mcHandler.getMeCrumb(),
nav: mcHandler.getMeCrumb('我的收藏'),
navigation: mcHandler.getSideMenu('我的收藏'),
banner: 'http://placehold.it/150x120',
collection: true,
favorite: {
product: true
product: true,
title: '我的收藏'
}
}
};
... ... @@ -73,6 +74,12 @@ const favorite = {
}).slice((page - 1) * 16, page * 16);
retData.products.forEach(p => {
if (p.status === 0) {
p.stateText = '已下架';
}
if (p.storage === 0) {
p.stateText = '已售罄';
}
p.url = `/product/pro_${p.productId}_${p.goodsId}/${p.cnAlphabet}.html`;
p.imageUrl = p.image;
});
... ... @@ -81,7 +88,7 @@ const favorite = {
}
res.render('index', ret);
res.display('index', ret);
}).catch(next);
},
... ... @@ -90,19 +97,20 @@ const favorite = {
let q = req.query;
let page = parseInt(q.page || 1, 10);
let uid = cookie.getUid(req);
let limit = 10;
let limit = 5;
let ret = {
module: 'me',
page: 'favorite.brand',
title: '我的收藏',
isMe: true,
content: {
nav: mcHandler.getMeCrumb(),
nav: mcHandler.getMeCrumb('我的收藏'),
navigation: mcHandler.getSideMenu('我的收藏'),
banner: 'http://placehold.it/150x120',
collection: true,
favorite: {
brand: true
brand: true,
title: '我的收藏'
}
}
};
... ... @@ -127,13 +135,69 @@ const favorite = {
queryParams: q
};
retData.brandList = data.brandList;
retData.brandList.forEach(b => {
b.newProduct.forEach(p => {
p.url = `${config.siteUrl}/product/pro_${p.productId}_${p.goods[0].id}/${p.cnAlphabet}.html`;
});
b.newProduct.push({
more: true
});
b.newProduct = _.chunk(b.newProduct, 4);
});
ret.content.favorite.data = retData;
}
res.render('index', ret);
res.display('index', ret);
}).catch(next);
},
editorial(req, res, next) {
let q = req.query;
let page = parseInt(q.page || 1, 10);
let uid = cookie.getUid(req);
let limit = 5;
let ret = {
module: 'me',
page: 'favorite.editorial',
title: '我的收藏',
isMe: true,
content: {
nav: mcHandler.getMeCrumb('我的收藏'),
navigation: mcHandler.getSideMenu('我的收藏'),
banner: 'http://placehold.it/150x120',
collection: true,
favorite: {
editorial: true,
title: '我的收藏'
}
}
};
FavoriteData.getFavoriteEditoreial({
uid: uid,
page: page,
limit: limit
}).then(result => {
if (result && result.code === 200 && result.data) {
let data = camelCase(result.data);
let retData = {
siteUrl: config.siteUrl,
editorialList: data.data
};
retData.total = data.total;
retData.paginationData = {
page: page,
limit: limit,
total: data.total,
pageTotal: data.totalPage,
queryParams: q
};
ret.content.favorite.data = retData;
}
res.display('index', ret);
}).catch(next);
},
... ... @@ -149,6 +213,19 @@ const favorite = {
res.json({code: 400});
}
}).catch(next);
},
editorialCancel(req, res, next) {
let ids = req.body.ids;
let uid = cookie.getUid(req);
FavoriteData.cancelEditorialFavorite(uid, ids).then(result => {
if (result && result.code === 200) {
res.json({code: 200});
} else {
res.json({code: 400});
}
}).catch(next);
}
};
... ...
... ... @@ -8,6 +8,7 @@
const _ = require('lodash');
const API = global.yoho.API;
const ServiceAPI = global.yoho.ServiceAPI;
const favorite = {
getFavoriteProduct(param) {
... ... @@ -26,6 +27,10 @@ const favorite = {
return API.get('', _.assign(p, param));
},
getFavoriteEditoreial(param) {
return ServiceAPI.get('/guang/api/*/favorite/getUserFavArticleList', param);
},
cancelFavorite(uid, ids, type) {
let p = {
method: 'web.favorite.cancel',
... ... @@ -35,6 +40,13 @@ const favorite = {
};
return API.post('', p);
},
cancelEditorialFavorite(uid, ids) {
return ServiceAPI.get('/guang/api/*/favorite/cancelFavorite', {
article_id: ids,
uid: uid
});
}
};
... ...
... ... @@ -45,6 +45,8 @@ router.get('/currency', currency.index);
// 我的收藏
router.get('/collection', favorite.goods);
router.get('/collection/brand', favorite.brand);
router.get('/collection/editorial', favorite.editorial);
router.post('/collection/cancel', favorite.cancel);
router.post('/collection/editorial/cancel', favorite.editorialCancel);
module.exports = router;
... ...
{{#if favorite.product}}
{{> collection/product}}
{{/if}}
{{#favorite}}
{{> common/subtitle}}
<div class="order-nav">
<ul class="tabs clearfix">
<li class="{{#if product}}active{{/if}}">
<a href="/me/collection"><span class="badge"></span>商品收藏</a>
</li>
<li class="{{#if brand}}active{{/if}}">
<a href="/me/collection/brand"><span class="badge"></span>店铺收藏</a>
</li>
<li class="{{#if editorial}}active{{/if}}">
<a href="/me/collection/editorial"><span class="badge"></span>资讯收藏</a>
</li>
</ul>
</div>
{{#if favorite.brand}}
{{> collection/brand}}
{{/if}}
{{#if product}}
{{> collection/product}}
{{/if}}
{{#if brand}}
{{> collection/brand}}
{{/if}}
{{#if editorial}}
{{> collection/editorial}}
{{/if}}
{{/favorite}}
... ...
{{# favorite.data}}
{{# data}}
{{#if total}}
<div class="favorite-brands">
... ... @@ -8,7 +8,7 @@
<div class="check">
{{> icon/checkbox}}
</div>
<div class="brand-info">
<div class="brand-info" data-id="{{brandId}}">
<div class="brand-icon">
<img src="{{image brandIco 145 126}}" alt="">
</div>
... ... @@ -32,16 +32,26 @@
<div class="slide-wrap">
<ul>
{{#each newProduct}}
<li>
<li class="clearfix">
{{#each this}}
<div class="goods-info">
<img class="lazy thumb" src="{{image defaultImages 145 196}}"
style="display: block;">
<div class="desc">
<span class="name">{{productName}}</span>
<p class="price">¥{{round salesPrice 2}}</p>
{{#if more}}
<div class="goods-more">
<div class="more-text">MORE</div>
<p>查看更多</p>
</div>
</div>
{{^}}
<div class="goods-info">
<a href="{{url}}" target="_blank">
<img class="lazy thumb"
src="{{image defaultImages 148 196}}"
style="display: block;">
<div class="desc">
<span class="name">{{productName}}</span>
<p class="price">¥{{round salesPrice 2}}</p>
</div>
</a>
</div>
{{/if}}
{{/each}}
</li>
{{/each}}
... ... @@ -71,4 +81,4 @@
<p>您还没有收藏的店铺, 去<a href="{{siteUrl}}">首页</a>看看吧</p>
</div>
{{/if}}
{{/favorite.data}}
{{/data}}
... ...
{{# data}}
{{#if total}}
<div class="favorite-editorials">
<div class="editorial-list clearfix">
{{#each editorialList}}
<div class="editorial-raw clearfix" data-id="{{id}}">
<div class="check">
{{> icon/checkbox}}
</div>
<div class="editorial-cover">
<a href="/editorial/{{id}}.html" target="_blank">
<img src="{{image src 240 160 1}}" alt="">
</a>
</div>
<div class="editorial-info">
<div class="editorial-title">
<a href="/editorial/{{id}}.html" target="_blank">
{{title}}
</a>
</div>
<div class="editorial-some">
<span class="author">{{author.name}}</span>
<span class="time">{{publishTime}}</span>
<span>浏览: {{viewsNum}}</span>
<span>评论: {{praiseNum}}</span>
</div>
<p class="summer">
{{intro}}
</p>
<div class="editorial-tags">
<span>户外</span>
<span>学院</span>
</div>
</div>
<div class="fav-cancel">
<span class="iconfont">&#xe614;</span>
</div>
</div>
{{/each}}
</div>
<div class="favorite-footer">
<div class="favorite-tool">
<div class="check-all">
{{> icon/checkbox}}
<label>全选</label>
</div>
<div class="favorite-cancel">
取消收藏
</div>
</div>
{{{ pagination paginationData }}}
</div>
</div>
{{^}}
<div class="favorite-empty">
<p>您还没有收藏的资讯, 去<a href="{{siteUrl}}/editorial">首页</a>看看吧</p>
</div>
{{/if}}
{{/data}}
... ...
{{# favorite.data}}
{{# data}}
{{#if total}}
<div class="favorite-products">
<div class="products-cates clearfix">
... ... @@ -13,7 +12,19 @@
<div class="clearfix product-list">
{{#each products}}
<div class="goods-info" data-id="{{productId}}">
<img class="lazy thumb" data-original="{{imageUrl}}" style="display: block;">
<div class="choose-icon">
<span class="iconfont">&#xe646;</span>
</div>
<div class="goods-img">
<img class="lazy thumb" data-original="{{imageUrl}}" style="display: block;">
{{#stateText}}
<div class="goods-state-bg"></div>
<div class="goods-state">
{{this}}
</div>
{{/stateText}}
</div>
<div class="desc">
<span class="name">{{productName}}</span>
<p class="price">¥{{round salesPrice 2}}</p>
... ... @@ -44,4 +55,4 @@
<p>您还没有收藏的商品, 去<a href="{{siteUrl}}">首页</a>看看吧</p>
</div>
{{/if}}
{{/favorite.data}}
{{/data}}
... ...
... ... @@ -5,9 +5,86 @@
*/
$(function() {
var FavoriteBrand = {
init: function() {
var $root = $('.favorite-brands');
require('./me');
require('../plugins/check');
$('.brand-products ul').each(function() {
var lis = $('li', this);
$(lis[0]).addClass('show');
});
$('.slide-switch a').click(function() {
FavoriteBrand.moveSlide(this);
});
$('.check', $root).check({
type: 'checkbox',
onChange: function(ele, checked) {
if (checked) {
$(ele).next('.brand-info').addClass('choose');
} else {
$(ele).next('.brand-info').removeClass('choose');
}
}
});
$('.check-all', $root).check({
type: 'checkbox',
onChange: function(ele, checked) {
if (checked) {
$('.check', $root).check('checkAll');
} else {
$('.check', $root).check('unCheckAll');
}
}
});
var lis = $('.brand-products ul li');
$('.btn.cancel', $root).click(function() {
var id = $(this).parents('.brand-info').data('id');
$('.brand-products ul').css('width', lis.length * 100 + '%');
FavoriteBrand.doCancel(id);
});
$('.favorite-cancel', $root).click(function() {
var ids = [];
$('.brand-info.choose', $root).each(function() {
ids.push($(this).data('id'));
});
FavoriteBrand.doCancel(ids.join(','));
});
},
moveSlide: function(ele) {
var wrap = $(ele).parent().next('.slide-wrap');
var currLi = $('ul li.show', wrap);
if ($(ele).hasClass('next') && $(currLi).next('li').length > 0) {
$(currLi).next('li').addClass('show');
$(currLi).removeClass('show');
} else if ($(ele).hasClass('prev') && $(currLi).prev('li').length > 0) {
$(currLi).prev('li').addClass('show');
$(currLi).removeClass('show');
}
},
doCancel: function(ids) {
$.post('/me/collection/cancel', {
type: 'brand',
ids: ids
}, function(data) {
if (data.code === 200) {
location.href = '/me/collection/brand';
}
});
}
};
$(function() {
FavoriteBrand.init();
});
... ...
/**
*
* @author: jiangfeng<jeff.jiang@yoho.cn>
* @date: 16/7/20
*/
var FavoriteEditorial = {
init: function() {
var $root = $('.favorite-editorials');
require('./me');
require('../plugins/check');
$('.check', $root).check({
type: 'checkbox',
onChange: function(ele, checked) {
if (checked) {
$(ele).parent().addClass('choose');
} else {
$(ele).parent().removeClass('choose');
}
}
});
$('.check-all', $root).check({
type: 'checkbox',
onChange: function(ele, checked) {
if (checked) {
$('.check', $root).check('checkAll');
} else {
$('.check', $root).check('unCheckAll');
}
}
});
$('.fav-cancel', $root).click(function() {
var id = $(this).parent().data('id');
FavoriteEditorial.doCancel(id);
});
$('.favorite-cancel', $root).click(function() {
var ids = [];
$('.editorial-raw.choose', $root).each(function() {
ids.push($(this).data('id'));
});
FavoriteEditorial.doCancel(ids.join(','));
});
},
doCancel: function(ids) {
$.post('/me/collection/editorial/cancel', {
ids: ids
}, function(data) {
if (data.code === 200) {
location.href = '/me/collection/editorial';
}
});
}
};
$(function() {
FavoriteEditorial.init();
});
... ...
... ... @@ -17,7 +17,7 @@ function doCancel(ids) {
ids: ids
}, function(data) {
if (data.code === 200) {
location.href = location.href;
location.href = '/me/collection';
}
});
}
... ...
... ... @@ -11,6 +11,7 @@
.check {
padding: 56px 0;
margin-right: 20px;
cursor: pointer;
.iconfont {
font-size: 16px;
... ... @@ -64,22 +65,20 @@
}
.goods-info {
display: inline-block;
width: 137px;
height: 195px;
margin: 0 7px;
float: left;
width: 148px;
margin: 0 5px;
img {
width: 137px;
width: 148px;
height: 195px;
}
.name {
display: block;
height: 30px;
height: 36px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 18px;
}
... ... @@ -88,6 +87,32 @@
}
}
.goods-more {
float: left;
width: 147px;
height: 195px;
background-color: #eee;
margin: 0 7px 67px;
text-align: center;
position: relative;
.more-text {
position: absolute;
top: 70px;
color: #fff;
width: 55px;
left: 46px;
font-size: 18px;
background-color: #000;
}
p {
position: relative;
top: 93px;
font-size: 12px;
}
}
.slide-container {
.slide-switch {
... ... @@ -106,11 +131,17 @@
width: 625px;
margin: 0 auto;
ul {
position: relative;
li {
float: left;
width: 625px;
width: 635px;
overflow: hidden;
padding: 0 -7px;
margin: 0 -5px;
display: none;
}
li.show {
display: block;
}
}
}
... ...
.favorite-editorials {
.editorial-raw > div {
float: left;
}
.editorial-raw.choose,
.editorial-raw:hover {
.fav-cancel {
display: block;
}
}
.editorial-raw {
padding: 30px 0;
border-bottom: 1px solid #eee;
position: relative;
.fav-cancel {
position: absolute;
display: none;
top: 30px;
right: 30px;
cursor: pointer;
.iconfont {
color: #999;
font-size: 14px;
}
}
.check {
padding: 80px 0;
margin-right: 20px;
cursor: pointer;
.iconfont {
font-size: 16px;
color: #666;
}
}
.editorial-cover {
width: 240px;
height: 160px;
}
.editorial-info {
width: 520px;
height: 160px;
margin-left: 30px;
position: relative;
.editorial-title {
font-size: 18px;
line-height: 28px;
}
.summer {
font-size: 14px;
margin-top: 10px;
}
}
.editorial-tags {
position: absolute;
bottom: 0;
span {
background-color: #bbb;
color: #fff;
display: inline-block;
padding: 4px 8px;
font-size: 14px;
margin-right: 10px;
}
}
.editorial-some {
margin-top: 15px;
font-size: 14px;
.author {
margin-right: 50px;
color: #1b1b1b;
}
span {
margin-right: 30px;
color: #999;
}
}
}
}
... ...
@import "product";
@import "brand";
@import "editorial";
@import "favorite-footer";
.favorite-empty {
height: 700px;
position: relative;
padding-top: 120px;
p {
text-align: center;
font-size: 14px;
a {
color: #379ed6;
}
}
}
... ...
.favorite-products {
margin-top: 20px;
.products-cates {
font-size: 14px;
... ... @@ -36,6 +38,46 @@
width: 216px;
margin: 20px 10px 0;
cursor: pointer;
position: relative;
.choose-icon {
position: absolute;
display: none;
top: 0;
right: 0;
z-index: 1;
.iconfont {
font-size: 36px;
color: #999;
}
}
.goods-img {
position: relative;
.goods-state-bg {
position: absolute;
bottom: 0;
height: 35px;
background-color: #666;
opacity: 0.7;
width: 100%;
z-index: 1;
}
.goods-state {
position: absolute;
bottom: 0;
height: 35px;
line-height: 35px;
text-align: center;
color: #fff;
font-size: 14px;
width: 100%;
z-index: 2;
}
}
.desc {
overflow: hidden;
... ... @@ -66,6 +108,9 @@
.goods-info:hover,
.goods-info.choose {
.choose-icon {
display: block;
}
.tool-area {
.btn {
display: inline-block;
... ...