帮助中心

@@ -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}}

@@ -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";