Authored by 王水玲

帮助中心bug 修改

... ... @@ -45,7 +45,8 @@ const detail = (req, res, next) => {
id: parseInt(q.id || 1, 10),
contId: +req.query.contId || 0,
keywords: req.query.helpQuery,
channel: req.query.channel ? req.query.channel : 'boys'
channel: req.query.channel ? req.query.channel : 'boys',
url: req.originalUrl
};
let nav = [
... ... @@ -76,7 +77,8 @@ const detail = (req, res, next) => {
page: 'help',
content: Object.assign({
isHelp: true,
pathNav: nav
pathNav: nav,
helpQuery: req.query.helpQuery
}, newData.data),
qid: q.helpQuery ? false : params.id
}, headerData));
... ...
... ... @@ -17,14 +17,14 @@ const pager = require(`${global.utils}/pager`).setPager;
* @returns {*[]}
* @private
*/
const _getNav = (id, menuData)=> {
const _getNav = (id, menuData, url)=> {
for (let i = 0; i < menuData.length; i++) {
if (menuData[i].subsets) {
for (let j = 0; j < menuData[i].subsets.length; j++) {
if (menuData[i].subsets[j].id === id) {
return [
{
href: ' ',
href: url,
name: menuData[i].categoryName
}, {
name: menuData[i].subsets[j].categoryName
... ... @@ -98,7 +98,6 @@ const _processCountLength = (c) => {
// 首页模块内容处理
const _processHomeCategoryFaq = (list) => {
let result = {
other: [],
menuData: []
};
... ... @@ -268,7 +267,7 @@ const _processDetailData = (result, params) => {
}
];
} else {
nav = _getNav(params.id, menuData);
nav = _getNav(params.id, menuData, params.url);
}
return {
... ...
... ... @@ -31,7 +31,7 @@
<ul class="menu-common new-guide">
{{#each categoryItems}}
<li>
<a href="{{jumpLink}}">
<a href="{{jumpLink}}" target="_blank">
<img src="{{categoryIco}}" width="55" height="55">
<p>{{categoryName}}</p>
</a>
... ... @@ -45,7 +45,7 @@
<ul class="menu-common self-service">
{{#each list}}
<li>
<a href="{{jumpUrl}}">
<a href="{{jumpUrl}}" target="_blank">
<img src="{{categoryIco}}" width="55" height="55">
<p>{{categoryName}}</p>
</a>
... ... @@ -62,20 +62,6 @@
{{/each}}
</div>
{{/problem}}
<ul class="help-nav">
{{#other}}
<li>
<h2>{{categoryName}}</h2>
<div class="list-box">
<div class="nav-list">
{{#categoryItems}}
<a href="{{jumpLink}}">{{categoryName}}</a>
{{/categoryItems}}
</div>
</div>
</li>
{{/other}}
</ul>
</div>
{{/ content}}
</div>
... ...
<div class="search-box">
<div class="search-area">
<form id="help-search-form" action="{{siteUrl}}/help/detail">
<input type="text" class="help-search" autocomplete="off" name="helpQuery">
<input type="text" class="help-search" autocomplete="off" name="helpQuery" value="{{helpQuery}}">
<span class="iconfont search-btn">&#xe640;</span>
</form>
</div>
... ...
<div class="problem-box">
<div class="mark"></div>
<div class="problem-area">
<div class="problem-border"></div>
<i class="iconfont close">&#xe60d;</i>
<div class="problem-cont">
<div class="cont-area">
... ...
{{#if error}}
<div class="search-result nav-title">很抱歉,关于“<span class="red">{{keywords}}</span>”没有找到您想要的答案</div>
<p class="result-error mt30">建议您:看看输入的文字是否有误/减少分类条件的限制/重新检索</p>
<p class="result-error mt15">建议您:看看输入的文字是否有误/减少分类条件的限制/重新检索</p>
<p class="result-error">或 者:使用<a href="{{jumpUrl}}">在线客服</a>试试</p>
{{else}}
<div class="search-result nav-title">关于“<span class="red">{{keywords}}</span>”,共为您查询到<span class="red">{{total}}</span>个答案</div>
... ... @@ -9,7 +9,7 @@
<li class="{{#if problem}}problem-li{{else}}article-li{{/if}}">
<p class="title">{{{caption}}}</p>
{{#if problem}}
<div class="cont">{{{allCont}}}</div>
<div class="cont">{{{content}}}</div>
{{else}}
<div class="cont">{{{content}}}</div>
{{/if}}
... ...
... ... @@ -22,10 +22,13 @@ var problemBox = function() {
$problemBox.find('.a-area').html(ask);
$problemBox.find('.q-area').html(answer);
$problemBox.show();
$('body').css({overflow: 'hidden'});
});
$('.problem-box .close, .problem-box .mark').on('click', function() {
$problemBox.hide();
$('body').css({overflow: 'auto'});
});
};
... ...
... ... @@ -7,11 +7,13 @@
var cutStr = function(params) {
var strLength = 0;
var strCut = '';
var strLen = params.str.length || 0;
var i, curStr, addTxt;
var i, curStr, addTxt, strLen;
params.str = params.str.replace(/\s/g, '');
params.str = params.str.replace(/<[^>]*>/g, '');
strLen = params.str.length || 0;
if (params.type === 2) {
addTxt = '';
} else {
... ... @@ -41,8 +43,9 @@ var cutStr = function(params) {
// 搜索关键词标蓝显示
var keywordLabel = function(str, key) {
str = str.replace(key, '<i class="keyword">' + key + '</i>');
var reg = new RegExp(key, 'gm');
str = str.replace(reg, '<i class="keyword">' + key + '</i>');
return str.replace('www.yohobuy.com', '<a href="http://www.yohobuy.com" class="keyword">www.yohobuy.com</a>');
};
... ...
... ... @@ -36,6 +36,13 @@ var helpSearch = {
searchDefaultVal: function() {
var _this = this;
var defaultVal = '请输入您想知道的帮助信息';
var startVal = defaultVal;
var defaultColor = '#989898';
if (_this.$search.val()) {
startVal = _this.$search.val();
defaultColor = '#1b1b1b';
}
_this.$search.focus(function() {
var key = _this.$search.val();
... ... @@ -49,7 +56,7 @@ var helpSearch = {
if ($.trim(key) === '') {
_this.$search.val(defaultVal).css('color', '#989898');
}
}).val(defaultVal).css('color', '#989898');
}).val(startVal).css('color', defaultColor);
}
};
... ...
... ... @@ -34,10 +34,9 @@ if (keywords) {
$.each(result.helper_list, function(k, s) {
if (s.helperType === 2) {
s.problem = true;
s.allCont = s.content;
}
if (s.secendCategoryId === 0) {
if (s.secendCategoryId === '0') {
id = s.firstCategoryId;
} else {
id = s.secendCategoryId;
... ... @@ -49,6 +48,8 @@ if (keywords) {
url: '/help/detail?id=' + id + '&contId=' + s.id
});
// console.log(s.content)
s.content = helper.keywordLabel(s.content, keywords);
s.caption = helper.keywordLabel(s.caption, keywords);
});
... ...
... ... @@ -92,6 +92,10 @@
font-size: 14px;
overflow: hidden;
line-height: 24px;
img {
width: 100%;
}
}
}
... ... @@ -147,9 +151,11 @@
width: 740px;
margin: 0 auto;
line-height: 30px;
font-size: 14px;
padding-left: 30px;
&.mt30 {
margin-top: 30px;
&.mt15 {
margin-top: 15px;
}
a {
... ...
... ... @@ -30,12 +30,15 @@
margin: 10px 0 45px;
font-size: 14px;
color: #000;
text-align: left;
text-align: center;
a {
margin: 0 8px;
margin: 0 1px;
display: inline-block;
color: #3a3a3a;
line-height: 18px;
width: 56px;
text-align: left;
}
a:hover {
... ... @@ -127,7 +130,7 @@
}
a {
width: 56px;
widtsh: 56px;
text-align: center;
display: block;
}
... ... @@ -146,7 +149,7 @@
padding: 0 20px;
li {
margin-left: 159px;
margin-left: 158px;
}
}
... ...
... ... @@ -122,49 +122,38 @@
}
.problem-area {
width: 610px;
height: 350px;
min-width: 345px;
min-height: 193px;
max-width: 610px;
max-height: 380px;
position: relative;
z-index: 2;
vertical-align: middle;
display: inline-block;
line-height: 24px;
text-align: left;
}
.problem-border {
width: 610px;
height: 350px;
background-color: #000;
opacity: 0.4;
position: absolute;
border: 5px solid rgba(0, 0, 0, 0.4);
}
.problem-cont {
width: 600px;
height: 340px;
max-width: 610px;
max-height: 380px;
background: #fff;
position: absolute;
left: 5px;
top: 5px;
}
.cont-area {
height: 220px;
margin: 60px auto;
overflow: auto;
width: 558px;
margin: 0 auto;
padding: 60px 40px;
}
.a-area,
.q-area {
width: 460px;
position: relative;
font-size: 14px;
color: #444;
min-height: 20px;
margin-top: 15px;
padding-left: 66px;
padding-left: 30px;
&:before {
content: "";
... ... @@ -172,7 +161,7 @@
height: 18px;
display: block;
position: absolute;
left: 26px;
left: 0;
top: 3px;
}
}
... ... @@ -185,6 +174,8 @@
.q-area {
line-height: 24px;
max-height: 210px;
overflow: auto;
}
.a-area:before {
... ...