fe / yohobuy-node · Commits

Go to a project

Authored by 周少峰
Commit 0e023f4c3dc81da748f5deb5954d4077c5626de2 2 parents 3c1d94c9 4a1a377c

Merge branch 'feature/help' of git.yoho.cn:fe/yohobuy-node into feature/help

Inline Side-by-side
Showing 16 changed files with 77 additions and 69 deletions
... ... @@ -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: []
};
... ... @@ -129,7 +128,7 @@ const _processHomeCategoryFaq = (list) => {
break;
case '公告':
_.forEach(item.contentItems, c => {
c.caption = c.caption.substring(0, 9);
c.caption = c.caption.substring(0, 10);
});
_.chunk(item.contentItems, 2).forEach(data => {
... ... @@ -268,7 +267,7 @@ const _processDetailData = (result, params) => {
}
];
} else {
nav = _getNav(params.id, menuData);
nav = _getNav(params.id, menuData, params.url);
}
return {
... ...
... ... @@ -31,8 +31,10 @@
<ul class="menu-common new-guide">
{{#each categoryItems}}
<li>
<a href="{{jumpLink}}"><img src="{{categoryIco}}" width="55" height="55"></a>
<p>{{categoryName}}</p>
<a href="{{jumpLink}}" target="_blank">
<img src="{{categoryIco}}" width="55" height="55">
<p>{{categoryName}}</p>
</a>
</li>
{{/each}}
</ul>
... ... @@ -43,8 +45,10 @@
<ul class="menu-common self-service">
{{#each list}}
<li>
<a href="{{jumpUrl}}"><img src="{{categoryIco}}" width="55" height="55"></a>
<p>{{categoryName}}</p>
<a href="{{jumpUrl}}" target="_blank">
<img src="{{categoryIco}}" width="55" height="55">
<p>{{categoryName}}</p>
</a>
</li>
{{/each}}
</ul>
... ... @@ -58,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}}
... ...

141 Bytes | W: | H:

14.2 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

19.3 KB | W: | H:

19.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -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>');
};
... ...
... ... @@ -14,7 +14,7 @@ $(function() {
problemBox();
$('.new-guide li').each(function(key, item) {
if (key % 5 === 0) {
if (key % 6 === 0) {
$(item).css({
marginLeft: 0
});
... ...
... ... @@ -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,11 +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 {
... ... @@ -87,6 +91,7 @@
font-size: 14px;
margin: 0 5px;
padding-left: 3px;
color: #3a3a3a;
}
.notice-cont:hover {
... ... @@ -119,22 +124,23 @@
li {
float: left;
margin: 20px 0 0 70px;
margin: 20px 0 0 74px;
height: 105px;
overflow: hidden;
}
a {
width: 55px;
height: 55px;
widtsh: 56px;
text-align: center;
line-height: 55px;
display: block;
}
p {
width: 100%;
font-size: 14px;
color: #1b1b1b;
line-height: 30px;
color: #3a3a3a;
line-height: 17px;
margin-top: 10px;
text-align: center;
}
}
... ... @@ -143,7 +149,7 @@
padding: 0 20px;
li {
margin-left: 159px;
margin-left: 158px;
}
}
... ... @@ -165,6 +171,7 @@
white-space: nowrap;
box-sizing: border-box;
font-size: 14px;
color: #3a3a3a;
}
a:hover {
... ...
... ... @@ -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 {
... ...