客服聊天 layout 完成

+'use strict';
+
 exports.page = (req, res, next) => {
 exports.page = (req, res, next) => {
+
+    res.locals.module = 'service';
+    res.locals.page = 'chat';
+    res.locals.pageStyle = 'service-chat';
+    res.locals.width750 = true;
+
     res.render('chat/index');
     res.render('chat/index');
-};
+};

@@ -5,28 +5,28 @@
  */
  */
 
 
 var express = require('express'),
 var express = require('express'),
-    path = require('path'),
-    hbs = require('express-handlebars');
+    path = require('path');
 
 
 var app = express();
 var app = express();
 
 
 // set view engin
 // set view engin
-var doraemon = path.join(__dirname, '../../doraemon/views'); //parent view root
+var doraemon = path.join(__dirname, '../../doraemon/views'); // parent view root
 
 
 app.on('mount', function(parent) {
 app.on('mount', function(parent) {
     delete parent.locals.settings; // 不继承父 App 的设置
     delete parent.locals.settings; // 不继承父 App 的设置
     Object.assign(app.locals, parent.locals);
     Object.assign(app.locals, parent.locals);
 });
 });
 
 
-app.set('views', path.join(__dirname, 'views/action'));
-app.engine('.hbs', hbs({
+app.use(global.yoho.hbs({
     extname: '.hbs',
     extname: '.hbs',
     defaultLayout: 'layout',
     defaultLayout: 'layout',
     layoutsDir: doraemon,
     layoutsDir: doraemon,
-    partialsDir: [path.join(__dirname, 'views/partial'), `${doraemon}/partial`],
+    partialsDir: [path.join(__dirname, 'views/partial')],
+    views: path.join(__dirname, 'views/action'),
     helpers: global.yoho.helpers
     helpers: global.yoho.helpers
 }));
 }));
 
 
+
 // router
 // router
 app.use(require('./router'));
 app.use(require('./router'));
 
 

-<header></header>
-<div></div>
-<footer></footer>
+<!--im 头部-->
+<header id="chat-header">
+    <h2></h2>
+    <div class=""></div>
+    <div></div>
+</header>
+<!--im 主体-->
+<div id="chat-window"></div>
+<!--im footer-->
+<footer id="chat-footer">
+    <div id="chat-send-box" class="table">
+        <span class="table-cell">
+            <a href="javascript:;" class="input-method input-text"></a>
+        </span>
+        <span class="table-cell cell-max">
+            <input type="text" class="input-in text-in">
+        </span>
+        <span class="table-cell">
+            <a href="javascript:;" class="menu-trigger"></a>
+        </span>
+    </div>
+</footer>
+<div></div>

@@ -69,7 +69,7 @@ module.exports = {
             port: '4444' // influxdb port
             port: '4444' // influxdb port
         },
         },
         console: {
         console: {
-            level: 'error',
+            level: 'debug',
             colorize: 'all',
             colorize: 'all',
             prettyPrint: true
             prettyPrint: true
         }
         }

+'use strict';

+/*
+    yoho客服 im: 角色
+    @author xuan.chen@yoh.cn
+*/
+
+'use strict';
+
+class ChatRole {
+
+    /*
+        发送消息
+    */
+    sendMessage() {
+        // Todo
+    }
+}
+
+class Customer extends ChatRole {
+
+}
+
+class Employee extends ChatRole {
+
+}
+
+class Robot extends ChatRole {
+
+}
+
+export {ChatRole, Customer, Employee, Robot};
+

+/*
+    留言view
+*/
+class LeaveMSGView {}
+
+/*
+    评价view
+*/
+class RatingView {}
+
+/*
+    订单列表view
+*/
+class OrderListView {}
+
+
+
+class ChatView {
+
+}

@@ -27,3 +27,4 @@
 @import "cart/index";
 @import "cart/index";
 @import "home/index";
 @import "home/index";
 @import "me/index";
 @import "me/index";
+@import "service/index"; /* 帮助与反馈 */

+/* -------------------------------------- *\
+    帮助与反馈: 在线客服
+\* -------------------------------------- */
+@import "chat/layout";
+@import "chat/chat";
+@import "chat/message";
+@import "chat/rating";

+.service-chat {
+    #chat-send-box {
+        border-top: 1PX solid #e5e5e5;
+        padding: 16px 20px 14px;
+
+        .input-method,
+        .menu-trigger {
+            display: block;
+            width: 60px;
+            height: 60px;
+            background-repeat: no-repeat;
+            background-size: 60px 60px;
+        }
+
+        /* 输入方式 */
+        .input-method {
+            margin-right: 20px;
+        }
+
+        .input-text {
+            background-image: resolve("service/chat/input-text.png");
+        }
+
+        .input-voice {
+            background-image: resolve("service/chat/input-voice.png");
+        }
+
+        /* 输入框 */
+        .input-in {
+            display: block;
+            width: 100%;
+            height: 70px;
+            border: 1PX solid #e0e0e0;
+            border-radius: 8px;
+        }
+
+        .menu-trigger {
+            margin-left: 20px;
+            background-image: resolve("service/chat/menu-trigger.png");
+        }
+    }
+}

+.service-chat {
+    /* -------------------------------- *\
+        atom, util
+    \* -------------------------------- */
+    .table {
+        display: table;
+        width: 100%;
+    }
+
+    .table-cell {
+        display: table-cell;
+        vertical-align: middle;
+
+        &.cell-max {
+            width: 6666px;
+        }
+    }
+
+    .main-wrap {
+        position: static;
+    }
+
+    #chat-window,
+    #chat-footer {
+        max-width: 750px;
+    }
+
+    #chat-header {
+        height: 85px;
+        background-color: #3e3e3e;
+    }
+
+    #chat-window {
+        position: absolute;
+        top: 85px;
+        bottom: 100px;
+        width: 100%;
+        background-color: #f0f0f0;
+    }
+
+    #chat-footer {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 100px;
+        background-color: #f7f7f7;
+    }
+}