Authored by 王水玲

帮助中心

... ... @@ -17,9 +17,10 @@ const index = (req, res, next) => {
page: 'help-index',
content: Object.assign({
siteUrl: siteUrl,
nav: [
isHelp: true,
pathNav: [
{
link: siteUrl,
href: siteUrl,
name: 'YOHO!BLK首页'
},
{
... ... @@ -45,12 +46,12 @@ const detail = (req, res, next) => {
let nav = [
{
link: global.yoho.config.siteUrl,
href: global.yoho.config.siteUrl,
name: 'YOHO!BLK首页'
},
{
name: '帮助中心',
link: '/help/index'
href: '/help/index'
}
];
... ... @@ -65,7 +66,10 @@ const detail = (req, res, next) => {
res.render('detail', Object.assign({
module: 'help',
page: 'help',
content: Object.assign({nav}, newData.data),
content: Object.assign({
isHelp: true,
pathNav: nav
}, newData.data),
qid: q.helpQuery ? false : params.id
}, headerData));
}).catch(next);
... ...
... ... @@ -65,8 +65,6 @@ const allQA = () => {
const onlineService = () => {
return api.get('', {
method: 'app.helper.getServiceOnline'
}, {
code: 200
});
};
... ...
... ... @@ -8,6 +8,7 @@
const _ = require('lodash');
const helpApi = require('./help-api');
const headerModel = require('../../../doraemon/models/header');
const pager = require(`${global.utils}/pager`).setPager;
/**
* 根据id获取当前所在位置,拼接面包屑
... ... @@ -23,7 +24,7 @@ const _getNav = (id, menuData)=> {
if (menuData[i].subsets[j].id === id) {
return [
{
link: ' ',
href: ' ',
name: menuData[i].categoryName
}, {
name: menuData[i].subsets[j].categoryName
... ... @@ -62,6 +63,38 @@ const _processLink = (list, id) => {
return list;
};
// 处理分类
const _processMenuType = (item) => {
let curMenu = {
id: item.id,
categoryName: item.categoryName
};
let subsets = [];
if (item.categoryItems) {
_.forEach(item.categoryItems, c => {
subsets.push({
id: c.id,
parendId: item.id,
categoryName: c.categoryName
});
});
curMenu.subsets = subsets;
}
return curMenu;
};
// 统计当前分类下的内容是否大于1
const _processCountLength = (c) => {
if (!c.contentItems) {
return false;
} else {
return c.contentItems.length > 1;
}
};
// 首页模块内容处理
const _processHomeCategoryFaq = (list) => {
let result = {
... ... @@ -120,38 +153,6 @@ const _processHomeCategoryFaq = (list) => {
return result;
};
// 处理分类
const _processMenuType = (item) => {
let curMenu = {
id: item.id,
categoryName: item.categoryName
};
let subsets = [];
if (item.categoryItems) {
_.forEach(item.categoryItems, c => {
subsets.push({
id: c.id,
parendId: item.id,
categoryName: c.categoryName
});
});
curMenu.subsets = subsets;
}
return curMenu;
};
// 统计当前分类下的内容是否大于1
const _processCountLength = (c) => {
if (!c.contentItems) {
return false;
} else {
return c.contentItems.length > 1;
}
};
const returnCont = (data, contId) => {
let curCont = {};
... ... @@ -203,17 +204,13 @@ const _processSearch = (list, params) => {
error: true
};
} else {
let page = pager(_.get(list, 'page_total', 0), {
page: params.page,
helpQuery: params.keywords
});
list = _.assign({
paginationData: {
page: list.page,
limit: list.page_size || 10,
total: list.total,
pageTotal: list.page_total,
queryParams: {
page: params.page,
helpQuery: params.keywords
}
}
footPager: page
}, list);
}
... ... @@ -224,7 +221,7 @@ const _processSearch = (list, params) => {
const _processDetailData = (result, params) => {
let menuData = [];
let contData = false;
let data = result[2].data;
let data = result[2].data || {};
let nav = [];
// 常见问题
... ... @@ -300,7 +297,7 @@ const helpData = (channel) => {
list: result[3].data
}
}, _processHomeCategoryFaq(result[2].data))
}
};
});
};
... ... @@ -332,20 +329,18 @@ const searchData = (params) => {
return helpApi.helpSearch(params).then(result => {
return _.assign({
keywords: params.keywords
}, _processSearch(_.get(result, 'data.data', []), params));
}, _processSearch(_.get(result, 'data', []), params));
});
};
// 在线客服
const onlineService = () => {
return helpApi.onlineService().then(result => {
let url = '';
if (result.data) {
url = result.data.url;
if (result.code === 200) {
return result.data.url;
} else {
return '';
}
return url;
});
};
... ...
<div class="common-problem">
<h2>常见问题</h2>
<h2 class="nav-title">常见问题</h2>
<div class="problem">
{{#faqs}}
<a href="javascript:void(0);" data-ask="{{caption}}" data-answer="{{content}}"><i class="dot-icon"></i>{{caption}}</a>
{{/faqs}}
</div>
<h2 class="all-problem-title">所有问题</h2>
<h2 class="all-problem-title nav-title">所有问题</h2>
<ul class="all-problem">
{{#allQa}}
<li class="problem-li">
... ...
... ... @@ -32,10 +32,10 @@ module.exports = {
imCs: 'https://imhttp.yohobuy.com/api',
imServer: 'https://imhttp.yohobuy.com/server',
api: 'http://dev-api.yohops.com:9999/',
service: 'http://dev-service.yohops.com:9999/',
liveApi: 'http://testapi.live.yohops.com:9999/',
singleApi: 'http://api-test1.yohops.com:9999/'
favApi: 'http://192.168.102.31:8092/brower',
api: 'http://192.168.102.205:8080/gateway/',
service: 'http://192.168.102.205:8080/gateway/',
search: 'http://192.168.102.216:8080/yohosearch/'
},
subDomains: {
host: '.yohobuy.com',
... ... @@ -81,7 +81,7 @@ module.exports = {
port: '4444' // influxdb port
},
console: {
level: 'debug',
level: 'info',
colorize: 'all',
prettyPrint: true
}
... ...
{{#if pathNav}}
<p class="path-nav" listType="{{listType}}" brandId="{{brandId}}">
{{#if isHelp}}
<span class="iconfont home-icon">&#xe61a;</span>
{{/if}}
{{#each pathNav}}
{{#if name}}
{{#if href}}
... ...
<div class="problem-box">
<div class="mark"></div>
<div class="problem-area">
<i class="iconfont close">&#xe608;</i>
<div class="a-area"></div>
<div class="q-area"></div>
<div class="problem-border"></div>
<i class="iconfont close">&#xe60d;</i>
<div class="problem-cont">
<div class="cont-area">
<div class="a-area"></div>
<div class="q-area"></div>
</div>
</div>
</div>
</div>
... ...
{{#if error}}
<div class="search-result">很抱歉,关于“<span class="blue">{{keywords}}</span></div>
<div class="search-result nav-title">很抱歉,关于“<span class="red">{{keywords}}</span></div>
<p class="result-error mt30">建议您:看看输入的文字是否有误/减少分类条件的限制/重新检索</p>
<p class="result-error">或 者:使用<a href="{{jumpUrl}}">在线客服</a>试试</p>
{{else}}
<div class="search-result">关于“<span class="blue">{{keywords}}</span>”,共为您查询到<span class="blue">{{total}}</span>个答案</div>
<ul class="search-list">
<div class="search-result nav-title">关于“<span class="red">{{keywords}}</span>”,共为您查询到<span class="red">{{total}}</span>个答案</div>
<ul class="search-list-area">
{{#helper_list}}
<li class="{{#if problem}}problem-li{{else}}article-li{{/if}}">
<p class="title">{{caption}}</p>
<p class="title">{{{caption}}}</p>
{{#if problem}}
<p class="cont">{{{allCont}}}</p>
{{else}}
... ... @@ -17,5 +17,31 @@
{{/helper_list}}
</ul>
{{!-- 分页 --}}
{{{ pagination paginationData }}}
{{# footPager}}
<div class="foot-pager clearfix" data-total={{../totalCount}}>
<span class="total">
{{# tip}}
{{#if totalText}}
{{totalText}}
{{^}}
{{start}} - {{end}} / 共{{total}}件商品
{{/if}}
{{/ tip}}
</span>
<div class="pager">
{{# prePage}}
<a href="{{url}}" title="上一页"><span class="iconfont">&#xe60e;</span>上一页</a>
{{/ prePage}}
{{# pages}}
<a{{#if url}} href="{{url}}"{{/if}}{{#if cur}} class="cur"{{/if}}>{{num}}</a>
{{/ pages}}
{{# nextPage}}
<a href="{{url}}" title="下一页">下一页<span class="iconfont">&#xe60c;</span></a>
{{/ nextPage}}
</div>
</div>
{{/ footPager}}
{{/if}}
... ...

19 KB | W: | H:

19.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -44,7 +44,7 @@ if (keywords) {
}
s.content = helper.cutStr({
str: s.content,
len: 380,
len: 300,
type: s.helperType,
url: '/help/detail?id=' + id + '&contId=' + s.id
});
... ...
... ... @@ -4,6 +4,7 @@
background: #f5f5f5;
padding-top: 30px;
border-bottom: 1px solid #dfdfdf;
box-sizing: border-box;
}
.detail-cont {
... ... @@ -45,6 +46,110 @@
width: 740px;
margin: 0 auto;
font-size: 14px;
overflow: hidden;
}
}
.common-problem {
.problem {
margin-bottom: 20px;
}
}
.all-problem,
.search-list-area {
width: 740px;
margin: 0 auto;
height: auto;
overflow: hidden;
p {
font-size: 14px;
line-height: 22px;
}
a {
color: #ce021b;
}
.keyword {
color: #ce021b;
}
.titile {
color: #000;
}
.cont {
color: #989898;
margin-top: 15px;
}
.show-all {
color: #ce021b;
cursor: pointer;
}
}
.problem-li {
float: left;
margin-top: 30px;
position: relative;
padding-left: 36px;
width: 100%;
box-sizing: border-box;
.title:before {
content: "";
width: 18px;
height: 18px;
background: url("/help/q.png") no-repeat;
position: absolute;
left: 0;
}
.cont:before {
content: "";
width: 18px;
height: 18px;
background: url("/help/a.png") no-repeat;
position: absolute;
left: 0;
}
}
.search-list-area {
.article-li {
float: left;
margin-top: 30px;
position: relative;
padding-left: 36px;
width: 100%;
box-sizing: border-box;
.title:before {
content: "";
width: 18px;
height: 18px;
background: url("/help/file.png") no-repeat;
position: absolute;
left: 0;
}
}
}
.result-error {
width: 740px;
margin: 0 auto;
line-height: 30px;
&.mt30 {
margin-top: 30px;
}
a {
color: #ce021b;
padding: 0 5px;
}
}
}
\ No newline at end of file
... ...
... ... @@ -12,8 +12,8 @@
input {
width: 250px;
border: none;
padding: 5px 0 5px 20px;
line-height: 20px;
padding: 6px 0 6px 20px;
line-height: 21px;
display: inline-block;
}
... ...
... ... @@ -3,6 +3,21 @@
width: 990px;
}
.home-icon {
font-size: 16px;
}
.red {
color: #ce021b;
margin: 0 5px;
}
.foot-pager {
border-top: none;
width: 740px;
margin: 0 auto;
}
.help-navigation {
width: 163px;
background: #fff;
... ... @@ -50,7 +65,7 @@
}
li.selected > a {
color: #379ed6;
color: #ce021b;
}
.smll-category {
... ... @@ -90,27 +105,49 @@
}
.problem-area {
width: 520px;
min-height: 260px;
background: #fff;
width: 610px;
height: 350px;
position: relative;
z-index: 2;
vertical-align: middle;
display: inline-block;
line-height: 24px;
text-align: left;
padding: 60px 0;
box-sizing: border-box;
}
.problem-border {
width: 610px;
height: 350px;
background-color: #000;
opacity: 0.5;
position: absolute;
}
.problem-cont {
width: 600px;
height: 340px;
background: #fff;
position: absolute;
left: 5px;
top: 5px;
}
.cont-area {
height: 220px;
margin: 60px auto;
overflow: auto;
width: 530px;
}
.a-area,
.q-area {
width: 416px;
margin: 15px auto 0;
width: 465px;
position: relative;
font-size: 14px;
color: #1b1b1b;
min-height: 20px;
margin-top: 15px;
padding-left: 36px;
&:before {
content: "";
... ... @@ -118,7 +155,7 @@
height: 18px;
display: block;
position: absolute;
left: -36px;
left: 5px;
}
}
... ... @@ -139,9 +176,35 @@
right: 20px;
top: 20px;
cursor: pointer;
font-size: 18px;
font-size: 26px;
z-index: 4;
}
}
::-webkit-scrollbar {
width: 16px;
height: 16px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
border-radius: 999px;
border: 5px solid transparent;
}
::-webkit-scrollbar-track {
box-shadow: 0 0 6px rgba(0, 0, 0, 0) inset;
}
::-webkit-scrollbar-thumb {
min-height: 20px;
background-clip: content-box;
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.3) inset;
}
::-webkit-scrollbar-corner {
background: transparent;
}
}
@import "help";
... ...