fe / yoho-blk · Commits

Go to a project

Authored by 王水玲
Commit 4c52566b9bb061a8496276f786072a74474be1cd 1 parent 126c3b7f

帮助中心数据模块添加 店铺推荐 最近预览没有数据不显示模块

Inline Side-by-side
Showing 18 changed files with 579 additions and 125 deletions
... ... @@ -8,7 +8,7 @@
<a href="{{https url}}" target="_blank">
<img class="lazy-img" data-original="{{image src 395 495}}" alt="{{alt}}">
</a>
<div class="editorial-title"><p>{{title}}</p></div>
<div class="editorial-title"><div><p>{{title}}</p></div></div>
</span>
{{/ big}}
</div>
... ... @@ -18,7 +18,7 @@
<a href="{{https url}}" target="_blank">
<img class="lazy-img" data-original="{{image src 360 240}}" alt="{{alt}}">
</a>
<div class="editorial-title"><p>{{title}}</p></div>
<div class="editorial-title"><div><p>{{title}}</p></div></div>
</span>
{{/ small}}
</div>
... ...
... ... @@ -54,20 +54,22 @@ const getNav = (id)=> {
};
const index = (req, res) => {
res.display('help', {
module: 'help',
page: 'help-index',
content: {
nav: [
{
link: global.yoho.config.siteUrl,
name: 'YOHO!BLK首页'
},
{
name: '帮助中心'
}
]
}
helpModel.helpData().then(result => {
res.display('help', {
module: 'help',
page: 'help-index',
content: Object.assign({
nav: [
{
link: global.yoho.config.siteUrl,
name: 'YOHO!BLK首页'
},
{
name: '帮助中心'
}
]
}, result)
});
});
};
... ...
/**
* 帮助中心首页
* @author: wsl<shuiling.wang@yoho.cn>
* @date: 2016/12/13
*/
'use strict';
const api = global.yoho.API;
// 获取热词搜索
const getHotSearch = () => {
return api.get('', {
method: 'app.help.hotSearch',
platformName: 'yohobuy_pc'
}).then(result => {
// return {
// 'alg': 'SALT_MD5',
// 'code': 200,
// 'data':
// [
// {
// 'id': 2,
// 'keyword': '5CM',
// 'link': '5cm',
// 'orderBy': 1
// },
// {
// 'id': 4,
// 'keyword': '有货',
// 'link': 'Yoho',
// 'orderBy': 2
// }
// ],
// 'md5': 'c0dcdb4194c935b41ebd5f9b4329e24f',
// 'message': '操作成功'
// };
return result;
});
};
// 获取首页帮助分类以及常见问题
const gethomeCategoryFaq = () => {
return api.get('', {
method: 'app.help.homeCategoryFaq',
showPlatform: 'yohobuy_pc'
}).then(result => {
// return {
// 'alg': 'SALT_MD5',
// 'code': 200,
// 'data': {
// 'categorys': [
// {
// 'categoryDescription': '新手指南',
// 'categoryIco': '/2016/12/09/17/025c8608fd0b33a283afe595046d67793b.jpg',
// 'categoryItems': [
// {
// 'categoryDescription': '登录注册',
// 'categoryIco': '/2016/12/09/17/025c8608fd0b33a283afe595046d67793b.jpg',
// 'categoryLevel': 2,
// 'categoryName': '登录注册',
// 'id': 10,
// 'orderBy': 1
// },
// {
// 'categoryDescription': '搜索商品',
// 'categoryIco': '/2016/12/09/17/025c8608fd0b33a283afe595046d67793b.jpg',
// 'categoryLevel': 2,
// 'categoryName': '搜索商品',
// 'id': 12,
// 'orderBy': 2
// }
// ],
// 'categoryLevel': 1,
// 'categoryName': '新手指南',
// 'id': 8,
// 'orderBy': 1
// },
// {
// 'categoryDescription': '这是一个公告',
// 'categoryIco': '/2016/12/09/17/025c8608fd0b33a283afe595046d67793b.jpg',
// 'categoryLevel': 1,
// 'categoryName': '公告',
// 'contentItems': [
// {
// 'caption': '差价返还公告',
// 'content': '差价返还公告',
// 'helperType': 1,
// 'id': 8,
// 'orderBy': 1
// },
// {
// 'caption': '警惕网络诈骗公告',
// 'content': '警惕网络诈骗公告',
// 'helperType': 1,
// 'id': 10,
// 'orderBy': 2
// },
// {
// 'caption': '差价返还公告',
// 'content': '差价返还公告1',
// 'helperType': 1,
// 'id': 8,
// 'orderBy': 1
// },
// {
// 'caption': '警惕网络诈骗公告',
// 'content': '警惕网络诈骗公告2',
// 'helperType': 1,
// 'id': 10,
// 'orderBy': 2
// }
// ],
// 'id': 14,
// 'orderBy': 2
// },
// {
// 'categoryDescription': '会员中心',
// 'categoryIco': '/2016/12/09/17/025c8608fd0b33a283afe595046d67793b.jpg',
// 'categoryItems': [
// {
// 'categoryDescription': '账户管理',
// 'categoryIco': '/2016/12/09/17/025c8608fd0b33a283afe595046d67793b.jpg',
// 'categoryLevel': 2,
// 'categoryName': '账户管理',
// 'contentItems': [
// {
// 'caption': '账号管理',
// 'content': '账号如何管理?',
// 'helperType': 1,
// 'id': 12,
// 'orderBy': 1
// },
// {
// 'caption': '账号管理2',
// 'content': '账号还可以这么管理',
// 'helperType': 1,
// 'id': 14,
// 'orderBy': 2
// }
// ],
// 'id': 20,
// 'orderBy': 1
// },
// {
// 'categoryDescription': '密码管理',
// 'categoryIco': '/2016/12/09/17/025c8608fd0b33a283afe595046d67793b.jpg',
// 'categoryLevel': 2,
// 'categoryName': '密码管理',
// 'contentItems': [
// {
// 'caption': '密码管理',
// 'content': '密码这么管理',
// 'helperType': 1,
// 'id': 16,
// 'orderBy': 1
// }
// ],
// 'id': 22,
// 'orderBy': 2
// },
// {
// 'categoryDescription': '无图标会员中心',
// 'categoryIco': '',
// 'categoryLevel': 2,
// 'categoryName': '无图标会员中心',
// 'id': 24,
// 'orderBy': 3
// }
// ],
// 'categoryLevel': 1,
// 'categoryName': '会员中心',
// 'id': 18,
// 'orderBy': 3
// }
// ],
// 'faqs': [
// {
// 'caption': '账号帮助',
// 'content': '<p>\r\n\t请上传证件\r\n</p>\r\n<p>\r\n\t<img src="http://img11.static.yhbimg.com/goodsimg/2016/12/09/17/016ae11a9445207acc3a01286f4eeee83e.jpg" alt="" />\r\n</p>',
// 'helperType': 2,
// 'id': 2,
// 'orderBy': 1
// },
// {
// 'caption': '账号管理',
// 'content': '账号如何管理?',
// 'helperType': 1,
// 'id': 12,
// 'orderBy': 1
// },
// {
// 'caption': '密码管理',
// 'content': '密码这么管理',
// 'helperType': 1,
// 'id': 16,
// 'orderBy': 1
// }
// ]
// },
// 'md5': '56e926453c4b165b117bc163610e490b',
// 'message': '操作成功'
// };
return result;
});
};
// 获取自助服务
const getSelfService = () => {
return api.get('', {
method: 'app.help.selfService',
showPlatform: 'yohobuy_pc'
}).then(result => {
// return {
// 'alg': 'SALT_MD5',
// 'code': 200,
// 'data':
// [
// {
// 'categoryDescription': '测试',
// 'categoryIco': '/2016/12/09/18/025c8608fd0b33a283afe595046d67793b.jpg',
// 'categoryName': '测试1',
// 'id': 8,
// 'jumpType': 2,
// 'jumpUrl': 'http://www.yohobuy.com',
// 'orderBy': 0
// },
// {
// 'categoryDescription': '说明22',
// 'categoryIco': '/2016/12/09/19/0235925818a92b5d9b7c1d9f5029cfdc1a.jpg',
// 'categoryName': '帮助分类',
// 'id': 12,
// 'jumpType': 2,
// 'jumpUrl': '跳转',
// 'orderBy': 0
// },
// {
// 'categoryDescription': '登录问题',
// 'categoryIco': '/2016/12/09/18/025c8608fd0b33a283afe595046d67793b.jpg',
// 'categoryName': '登录问题',
// 'id': 4,
// 'jumpType': 2,
// 'jumpUrl': 'http://www.yohobuy.com',
// 'orderBy': 10
// },
// {
// 'categoryDescription': '分类说明',
// 'categoryIco': '/2016/12/09/17/0235925818a92b5d9b7c1d9f5029cfdc1a.jpg',
// 'categoryName': '登录问题',
// 'id': 2,
// 'jumpType': 2,
// 'jumpUrl': 'http://erp.yohobuy.com/helper/self/add',
// 'orderBy': 22
// },
// {
// 'categoryDescription': '22',
// 'categoryIco': '/2016/12/09/19/0135925818a92b5d9b7c1d9f5029cfdc1a.jpg',
// 'categoryName': '测试验',
// 'id': 10,
// 'jumpType': 2,
// 'jumpUrl': '22',
// 'orderBy': 22
// }
// ],
// 'md5': '1c5929f72fd3df3d139d1207b3b24277',
// 'message': '操作成功'
// };
return result;
});
};
module.exports = {
getHotSearch,
gethomeCategoryFaq,
getSelfService
};
... ...
... ... @@ -5,6 +5,42 @@
*/
'use strict';
const _ = require('lodash');
const helpApi = require('./help-api');
const _processHomeCategoryFaq = (list) => {
let result = {};
list = list || {};
_.forEach(list.categorys, (item) => {
let newCont = [];
switch (item.categoryName) {
case '新手指南':
result.newGuide = item;
break;
case '公告':
_.chunk(item.contentItems, 2).forEach(data => {
newCont.push({
row: data
});
});
result.notice = newCont;
break;
default:
break;
}
});
result.problem = {
categoryName: '常见问题',
list: list.faqs
};
return result;
};
/**
* 分类数据
... ... @@ -66,6 +102,25 @@ const menuData = ()=> {
};
};
const helpData = () => {
return Promise.all([
helpApi.getHotSearch(),
helpApi.gethomeCategoryFaq(),
helpApi.getSelfService()
]).then(result => {
return _.assign({
hotSearch: result[0].data,
selfService: {
categoryName: '自助服务',
list: result[2].data
}
}, _processHomeCategoryFaq(result[1].data));
});
};
module.exports = {
menuData
menuData,
helpData
};
... ...
... ... @@ -7,25 +7,25 @@
<div class="content">
<div class="nav-top">
<span class="title-img"></span>
<ul class="notice">
{{#each notice}}
<li>
{{#each row}}
<a class="notice-cont" href="{{url}}"><i class="dot-icon"></i> 差价返还公告公告公告差距</a>
{{/each}}
</li>
{{/each}}
</ul>
<ul class="notice" id="notice">
{{#each notice}}
<li>
{{#each row}}
<a class="notice-cont" href="{{url}}"><i class="dot-icon"></i> {{content}}</a>
{{/each}}
</li>
{{/each}}
</ul>
{{> search-form}}
</div>
{{#newGuide}}
{{> nav-title}}
<ul class="menu-common new-guide">
{{#each newGuide}}
{{#each categoryItems}}
<li>
<a href="{{url}}"><img src="{{img}}" width="70" href="70"></a>
<p>{{title}}</p>
<a href="{{jumpUrl}}"><img src="{{categoryIco}}" width="70" href="70"></a>
<p>{{categoryName}}</p>
</li>
{{/each}}
</ul>
... ... @@ -34,10 +34,10 @@
{{#selfService}}
{{> nav-title}}
<ul class="menu-common self-service">
{{#each selfService}}
{{#each list}}
<li>
<a href="{{url}}"><img src="{{img}}" width="70" href="70"></a>
<p>{{title}}</p>
<a href="{{jumpUrl}}"><img src="{{categoryIco}}" width="70" href="70"></a>
<p>{{categoryName}}</p>
</li>
{{/each}}
</ul>
... ... @@ -46,15 +46,11 @@
{{#problem}}
{{> nav-title}}
<div class="problem">
<a href="javascript:void(0);" data-ask="" data-answer=""><i class="dot-icon"></i>{{cont}}</a>
{{#each list}}
<a href="javascript:void(0);" data-ask="{{caption}}" data-answer="{{content}}"><i class="dot-icon"></i>{{caption}}</a>
{{/each}}
</div>
{{/problem}}
{{> nav-title}}
<div class="problem">
<a href="javascript:void(0);"><i class="dot-icon"></i>aaaaa</a>
<a href="javascript:void(0);"><i class="dot-icon"></i>bbbbb</a>
<a href="javascript:void(0);"><i class="dot-icon"></i>ccccc</a>
</div>
<ul class="help-nav">
<li>
<h2>会员中心</h2>
... ...
<div class="nav-title">
<div class="center-area">
<span class="title">新手指南</span>
<span class="title">{{categoryName}}</span>
</div>
</div>
... ...
... ... @@ -4,11 +4,8 @@
<span class="iconfont">&#xe605;</span>
</div>
<div class="keyword">
{{#each keyword}}
<a href="{{url}}">关键词</a>
{{#each hotSearch}}
<a href="{{link}}">{{keyword}}</a>
{{/each}}
<a href="{{url}}">关键词</a>
<a href="{{url}}">关键词</a>
<a href="{{url}}">关键词</a>
</div>
</div>
... ...
... ... @@ -95,14 +95,10 @@ const recentPreview = (req, res, next) => {
skn = _.slice(_.uniq(skn.split(',')), 0, limit).join(','); // 去重+截取
recommend.recentPreview(skn, limit).then(data => {
res.jsonp(data);
res.json(data);
}).catch(next);
} else {
res.jsonp({
code: 200,
data: [],
message: 'User info'
});
res.json(false);
}
};
... ...
... ... @@ -9,6 +9,9 @@
</a>
{{/ brandLogo}}
<p class="opt right">
<span id="brand-fav" class="brand-fav{{#if brandFav}} coll{{/if}}" data-id={{brandId}}>
<i class="iconfont">&#xe6b5;</i>
</span>
{{# brandHome}}
<a href="{{https link}}">
<i class="iconfont">&#xe634;</i>
... ... @@ -22,10 +25,6 @@
{{text}}
</a>
{{/ brandIntro}}
<span id="brand-fav" class="brand-fav{{#if brandFav}} coll{{/if}}" data-id={{brandId}}>
<i class="iconfont">&#xe6b5;</i>
</span>
</p>
</div>
</div>
... ...
... ... @@ -5,6 +5,7 @@
*/
var helpSearch = require('./help-search');
var problemBox = require('./problem-box');
var Scroller = require('./scroller');
require('../common/header');
require('../common/return-top');
... ... @@ -21,5 +22,7 @@ $(function() {
});
}
});
new Scroller('notice', 30, 5);
});
... ...
/**
* [上下滚动]
* @author: wsl(shuiling.wang@yoho.cn)
* @date: 2016/12/13
*/
// 类创建函数
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
};
}
};
var Scroller = Class.create();
function $(element) {
var i, length, elements;
if (arguments.length > 1) {
for (i = 0, length = arguments.length, elements = []; i < length; i++) {
elements.push($(arguments[i]));
}
return elements;
}
if (typeof element === 'string') {
return document.getElementById(element);
} else {
return element;
}
}
// 对象属性方法扩展
Function.prototype.bind = function(object) { // eslint-disable-line
var method = this;
return function() {
method.apply(object, arguments);
};
};
Scroller.prototype = {
// 第一个参数定义要滚动的区域,第二个参数定义每次滚动的高度
initialize: function(element, height, delay) {
this.element = $(element);
this.element.innerHTML += this.element.innerHTML;
this.height = height;
this.delay = delay * 1000;
this.maxHeight = this.element.scrollHeight / 2;
this.counter = 0;
this.scroll();
this.timer = '';
this.element.onmouseover = this.stop.bind(this);
this.element.onmouseout = function() {
this.timer = setTimeout(this.scroll.bind(this), 1000);
}.bind(this);
},
scroll: function() {
if (this.element.scrollTop < this.maxHeight) {
this.element.scrollTop ++;
this.counter ++;
} else {
this.element.scrollTop = 0;
this.counter = 0;
}
if (this.counter < this.height) {
this.timer = setTimeout(this.scroll.bind(this), 10);
} else {
this.counter = 0;
this.timer = setTimeout(this.scroll.bind(this), this.delay);
}
},
stop: function() {
clearTimeout(this.timer);
}
};
module.exports = Scroller;
... ...
... ... @@ -55,7 +55,7 @@ recProduct.init({
dom: '.recommend-product',
isGoodsDetail: true,
params: {
productSkn: '51085370'
productSkn: skn
}
});
... ...
... ... @@ -21,33 +21,32 @@ var recommmendProduct = {
$.extend(_this, {
$changeBtn: $dom.find('.change-btn'),
$recommendHeader: $('.recommend-header'),
$dom: $dom
});
// 为您优选||店铺推荐
_this.getProducts({
url: url,
index: 0,
params: params
});
// 最近预览
_this.getProducts({
url: '/product/recentPreview',
index: 1,
params: {
limit: 20
}
});
$dom.find('.head-tab').on('click', function() {
var index = $(this).index(),
$tabCont = $('.tab-cont-' + index);
$('.head-tab').removeClass('active');
$(this).addClass('active');
if ($tabCont.find('.goods-group').length === 0 && index === 1) {
_this.getProducts({
url: '/product/recentPreview',
index: index,
params: {
limit: 20
}
});
}
_this.isShowChangeBtn($tabCont.find('.goods-group').length);
$tabCont.removeClass('hide').siblings().addClass('hide');
});
... ... @@ -87,7 +86,17 @@ var recommmendProduct = {
var _this = this;
$.get(obj.url, obj.params, function(result) {
var curTab = $('.head-tab').eq(obj.index);
if (result) {
if (_this.$recommendHeader.hasClass('hide')) {
_this.$recommendHeader.removeClass('hide');
}
if (curTab.hasClass('hide')) {
curTab.removeClass('hide');
}
_this.$dom.find('.tab-cont-' + obj.index).html(recProduct({result: result}));
_this.lazyImage();
... ...
... ... @@ -39,11 +39,20 @@
line-height: 70px;
padding: 0 $space;
div {
line-height: 1.6;
display: inline-block;
vertical-align: middle;
margin-top: 15px;
}
p {
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-break: break-all;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
... ...
... ... @@ -75,22 +75,30 @@
.notice {
margin-top: 25px;
height: 30px;
overflow: hidden;
li {
text-align: center;
line-height: 30px;
height: 30px;
}
.notice-cont {
width: 49%;
display: inline-block;
overflow: hidden;
height: 30px;
font-size: 14px;
margin: 0 5px;
padding-left: 3px;
}
.notice-cont:hover {
color: #1ea1da;
.dot-icon {
background: url("/help/dot-blue.png") no-repeat;
}
}
}
}
... ... @@ -177,6 +185,11 @@
width: 230px;
margin-left: 10px;
display: inline-block;
height: 30px;
overflow: hidden;
padding-left: 3px;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
color: #1ea1da;
... ...
.brand-banner {
position: relative;
.banner-img {
min-height: 45px;
}
.opt-wrap {
width: 100%;
height: 45px;
position: absolute;
top: 50%;
margin-top: -23px;
.brand-logo {
display: inline-block;
height: 45px;
> img {
height: 100%;
}
}
.opt > * {
height: 32px;
line-height: 32px;
padding: 0 10px;
margin: 6px 0 0 5px;
color: #fff;
font-size: 14px;
border: 1px solid #fff;
display: inline-block;
}
.brand-info {
cursor: pointer;
}
.brand-fav {
cursor: pointer;
}
.coll {
color: #fc0d1b;
}
.iconfont {
font-size: 12px;
}
}
}
.brand-banner {
position: relative;
.banner-img {
min-height: 45px;
}
.opt-wrap {
width: 100%;
height: 45px;
position: absolute;
top: 50%;
margin-top: -23px;
.brand-logo {
display: inline-block;
height: 45px;
> img {
height: 100%;
}
}
.opt > * {
height: 32px;
line-height: 32px;
padding: 0 10px;
margin: 6px 0 0 5px;
color: #fff;
font-size: 14px;
display: inline-block;
}
.brand-info {
cursor: pointer;
}
.brand-fav {
cursor: pointer;
.iconfont {
font-size: 16px;
}
}
.coll {
color: #fc0d1b;
}
.iconfont {
font-size: 22px;
}
}
}
... ...
... ... @@ -218,6 +218,15 @@
line-height: 25px;
}
.name {
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
display: inline-block;
}
.name,
.intro {
padding: 10px 0;
... ...
<div class="recommend-header">
<span class="head-tab active">{{#if isGoodsDetail}}店铺推荐{{else}}为您优选{{/if}}</span>
<span class="head-tab">最近浏览</span>
<div class="recommend-header hide">
<span class="head-tab active hide">{{#if isGoodsDetail}}店铺推荐{{else}}为您优选{{/if}}</span>
<span class="head-tab hide">最近浏览</span>
<span class="change-btn">换一批<i class="iconfont">&#xe613;</i></span>
</div>
<div class="recommend-goods clearfix">
... ...