组件化

@@ -9,22 +9,8 @@
     网络连接失败，请稍后再试
 </div>
 <!--im 主体-->
-<div id="chat-window">
-    <!--时间-->
-    <div class="chat-time">
-        2016.09.08 11:33
-    </div>
-
-    <!--客服不在线留言提示-->
-    <div class="leave-msg-wraper">
-        <span class="leave-msg">您可以选择<a href="#">留言</a>，客服会以短信形式回复您</span>
-    </div>
-
-    <!--切换客服提示-->
-    <div class="change-mm">
-        <span class="leave-msg">智障小HO正在为您服务</span>
-    </div>
-
+<div id="chat-window">    
+    
     <!--接受消息-->
     <div class="msg-wrap recevied-msg">
         <img src="" alt="" class="head-icon">
@@ -32,15 +18,6 @@
             <span>Hellow!</span>
         </div>
     </div>
-
-    <!--发送消息-->
-    <div class="msg-wrap send-msg">
-        <img src="" alt="" class="head-icon">
-        <div class="chat-info">
-            <i class="send-fail">!</i>
-            <span>what the fuck?a ha? what the fuck?</span> 
-        </div>
-    </div>
 </div>
 <!--im footer-->
 <footer id="chat-footer">

 'use strict';
+
+require('./chat/index');

+/*
+    yoho客服 im: 首页
+    @author acgpiano
+*/
+
+'use strict';
+
+import {Time} from './time';
+import {Tip} from './tip';
+import {ChatRole, Customer, Employee, Robot} from './role';
+
+const chatBox = $('#chat-window');
+
+chatBox.append(new Tip().offLine());
+chatBox.append(new Tip('aaaa').onLine());
+
+let men = new Customer();
+
+chatBox.append(men.sendMsg('阿萨德法师打发斯蒂芬阿斯顿发送到发送到快乐自行车vasdfasdf 阿斯顿发生的发生的罚款一u让我u', true));
+
+
+
+
+
+

@@ -6,17 +6,22 @@
 'use strict';
 
 class ChatRole {
-
-    /*
-        发送消息
-    */
-    sendMessage() {
-        // Todo
+    constructor(msg) {
+        this.msg = msg;
     }
 }
 
 class Customer extends ChatRole {
-
+    sendMsg(msg, status) {
+        status = status ? '' : '<i class="send-fail">!</i>';
+        return `<div class="msg-wrap send-msg">
+                    <img src="" alt="" class="head-icon">
+                    <div class="chat-info">
+                        ${status}
+                        <span>${msg}</span> 
+                    </div>
+                </div>`;
+    }
 }
 
 class Employee extends ChatRole {

+/*
+    yoho客服 im: 时间模块
+    @author acgpiano
+    Time.long() 返回年月日模块
+    Time.short() 返回小时模块
+*/
+
+class Time {
+    constructor(timestamp) {
+        this.timestamp = new Date(timestamp);
+    }
+
+    // 日期格式化
+    _format(timestamp, fmt) {
+        let o = {
+            'M+': timestamp.getMonth() + 1,
+            'd+': timestamp.getDate(),
+            'h+': timestamp.getHours(),
+            'm+': timestamp.getMinutes(),
+            's+': timestamp.getSeconds(),
+            'q+': Math.floor((timestamp.getMonth() + 3) / 3),
+            S: timestamp.getMilliseconds(),
+        };
+
+        if (/(y+)/.test(fmt)) {
+            fmt = fmt.replace(RegExp.$1, (timestamp.getFullYear() + '').substr(4 - RegExp.$1.length));
+        }
+        for (let k in o) {
+            if (new RegExp('(' + k + ')').test(fmt)) {
+                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
+            }
+        }
+        return fmt;
+    }
+
+    // 返回长时间
+    long() {
+        let time = this._format(this.timestamp, 'yyyy.MM.dd hh:mm');
+
+        return `<div class="chat-time">
+                ${time}
+                </div>`;
+    }
+
+    // 返回短时间
+    short() {
+        let time = this._format(this.timestamp, 'hh:mm');
+
+        return `<div class="chat-time">
+                ${time}
+                </div>`;
+    }
+}
+
+export {Time};

+/*
+    yoho客服 im: 客服提示模块
+    @author acgpiano
+    offLine() 离线状态
+    onLine() 在线状态
+*/
+
+class Tip {
+    constructor(uname) {
+        this.uname = uname || '';
+    }
+
+    offLine() {
+        return `<div class="leave-msg-wraper">
+                    <span class="leave-msg">您可以选择<a href="#">留言</a>，客服会以短信形式回复您</span>
+                </div>`;
+    }
+
+    onLine() {
+        return `<div class="change-mm">
+                    <span class="leave-msg">${this.uname}正在为您服务</span>
+                </div>`;
+    }
+}
+
+export {Tip};

 .service-chat {
     /* 评价 */
     .comment {
+        display: none;
         position: absolute;
         top: 0;
         left: 0;