From 07b4cbf032466e41a098134e4d353228c3495232 Mon Sep 17 00:00:00 2001
From: taoshihan1991 <630892807@qq.com>
Date: Wed, 5 Aug 2020 17:49:58 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=A1=A8=E6=83=85=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/css/common.css      | 20 ++++++++++++----
 static/html/chat_main.html | 48 ++++++++++++++++++++++++++++++++++----
 static/html/chat_page.html | 22 ++++++++---------
 static/html/nav.html       |  2 +-
 static/js/functions.js     | 21 +++++++++++++++++
 5 files changed, 91 insertions(+), 22 deletions(-)

diff --git a/static/css/common.css b/static/css/common.css
index 3aeffe1..48caee1 100644
--- a/static/css/common.css
+++ b/static/css/common.css
@@ -3,6 +3,20 @@
 .faceBtn, .faceBtn:after, .faceBtn {
     border: 1px solid;
 }
+.visitorFaceBtn{
+    right: 70px;
+    bottom: 50%;
+    position: absolute!important;
+}
+.visitorFaceBox{
+    position: absolute;
+    bottom: 70px;
+}
+.kefuFaceBox{
+    position: absolute;
+    bottom: 110px;
+    z-index: 999;
+}
 .faceBtn {
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
@@ -12,15 +26,13 @@
     width: 28px;
     display: inline-block;
     vertical-align: middle;
-    position: absolute;
     font-style: normal;
     color: #9da0a0;
     text-align: left;
     text-indent: -9999px;
     direction: ltr;
     margin-bottom: -14px;
-    right: 70px;
-    bottom: 50%;
+    position: relative;
     cursor: pointer;
 }
 .faceBtn:before {
@@ -61,9 +73,7 @@
 .faceBox{
     width: 100%;
     background: #fff;
-    position: absolute;
     z-index: 99999999;
-    bottom: 70px;
     padding: 2px;
     display: none;
 }
diff --git a/static/html/chat_main.html b/static/html/chat_main.html
index aea069c..632bb86 100644
--- a/static/html/chat_main.html
+++ b/static/html/chat_main.html
@@ -20,6 +20,7 @@
         .chatLeft .el-tabs__nav{margin-left: 20px;}
         .sw-bg{background: #fff;border: solid 1px #e6e6e6;boder-top:none;padding:5px 10px;}
         .chatContext .el-row{margin-bottom: 5px;}
+        .chatContext{position: relative;}
         .chatUser{
             line-height: 24px;
             font-size: 12px;
@@ -119,11 +120,18 @@
                                 <el-col :span="3"><el-avatar :size="60" :src="v.avator"></el-avatar></el-col>
                                 <el-col :span="21">
                                     <div class="chatUser"><{v.name}></div>
-                                    <div class="chatContent"><{v.content}></div>
+                                    <div class="chatContent" v-html="v.content"></div>
                                 </el-col>
                             </el-row>
                         </div>
+                        <div class="faceBox kefuFaceBox">
+                            <ul class="faceBoxList">
+                                <li v-on:click="faceIconClick(i)" class="faceIcon" v-for="(v,i) in face"  :title="v.name"><img :src=v.path></li>
+                            </ul>
+                            <div class="clear"></div>
+                        </div>
                         <el-input type="textarea" class="chatArea" v-model="messageContent"  v-on:keyup.enter.native="chatToUser"></el-input>
+                        <div class="faceBtn"></div>
                         <el-button class="floatRight" type="primary" v-on:click="chatToUser">发送</el-button>
                         <div class="clear"></div>
                     </div>
@@ -196,6 +204,7 @@
             visitorCount:0,
             visitorCurrentPage:1,
             visitorPageSize:10,
+            face:[],
         },
         methods: {
             //跳转
@@ -290,7 +299,7 @@
                     let _this=this;
                     content.avator = msg.avator;
                     content.name = msg.name;
-                    content.content = msg.content;
+                    content.content = replaceContent(msg.content);
                     content.is_kefu = false;
                     content.time = msg.time;
                     if (msg.id == this.currentGuest) {
@@ -329,7 +338,8 @@
             },
             //发送给客户
             chatToUser() {
-                if(this.messageContent==""||this.currentGuest==""){
+                this.messageContent=this.messageContent.trim("\r\n");
+                if(this.messageContent==""||this.messageContent=="\r\n"||this.currentGuest==""){
                     return;
                 }
                 let _this=this;
@@ -346,7 +356,7 @@
                 let content = {}
                 content.avator = this.kfConfig.avator;
                 content.name = this.kfConfig.name;
-                content.content = this.messageContent;
+                content.content = replaceContent(this.messageContent);
                 content.is_kefu = true;
                 content.time = '';
                 this.msgList.push(content);
@@ -448,7 +458,7 @@
                                     content.avator = visitorMes["visitor_avator"];
                                     content.name = visitorMes["visitor_name"];
                                 }
-                                content.content = visitorMes["content"];
+                                content.content = replaceContent(visitorMes["content"]);
                                 content.time = visitorMes["time"];
                                 _this.msgList.push(content);
                                 _this.scrollBottom();
@@ -533,8 +543,36 @@
                     $('.chatBox').scrollTop($(".chatBox")[0].scrollHeight);
                 });
             },
+            //jquery
+            initJquery(){
+                this.$nextTick(() => {
+                    var _this=this;
+                    $(function () {
+                        //展示表情
+                        var faces=placeFace();
+                        $.each(faceTitles, function (index, item) {
+                            _this.face.push({"name":item,"path":faces[item]});
+                        });
+                        $(".faceBtn").click(function(){
+                            var status=$('.faceBox').css("display");
+                            if(status=="block"){
+                                $('.faceBox').hide();
+                            }else{
+                                $('.faceBox').show();
+                            }
+                        });
+                    });
+                });
+            },
+            //表情点击事件
+            faceIconClick(index){
+                $('.faceBox').hide();
+                this.messageContent+="face"+this.face[index].name;
+            },
        },
         created: function () {
+            //jquery
+            this.initJquery();
             this.getKefuInfo();
             //心跳
             this.ping();
diff --git a/static/html/chat_page.html b/static/html/chat_page.html
index c79c38f..8821f20 100644
--- a/static/html/chat_page.html
+++ b/static/html/chat_page.html
@@ -103,7 +103,7 @@
                     <el-col :span="3"><el-avatar :src="v.avator"></el-avatar></el-col>
                     <el-col :span="21">
                         <div class="chatUser"><{v.name}></div>
-                        <div class="chatContent"><{v.content}></div>
+                        <div class="chatContent" v-html="v.content"></div>
                     </el-col>
                     <div class="clear"></div>
                 </el-row>
@@ -111,13 +111,13 @@
         </div>
         <div class="chatBoxSend">
             <el-input type="textarea" class="chatArea" v-model="messageContent" v-on:keyup.enter.native="chatToUser"></el-input>
-            <div class="faceBox">
+            <div class="faceBox visitorFaceBox">
                 <ul class="faceBoxList">
-                    <li v-on:click="faceIconClick(i)" class="faceIcon" v-for="(v,i) in face"  :title="v.name"><img :src="'/static/images/face/'+v.path"></li>
+                    <li v-on:click="faceIconClick(i)" class="faceIcon" v-for="(v,i) in face"  :title="v.name"><img :src=v.path></li>
                 </ul>
                 <div class="clear"></div>
             </div>
-            <div class="faceBtn"></div>
+            <div class="faceBtn visitorFaceBtn"></div>
             <el-button type="primary" class="chatBoxSendBtn" size="small" v-on:click="chatToUser">{{.SendBtn}}</el-button>
         </div>
         <!--//客服代码-->
@@ -186,7 +186,7 @@
                     let content = {}
                     content.avator = msg.avator;
                     content.name = msg.name;
-                    content.content = msg.content;
+                    content.content =replaceContent(msg.content);
                     content.is_kefu = false;
                     content.time = msg.time;
                     this.msgList.push(content);
@@ -228,7 +228,7 @@
 
                 let content = {}
                 content.avator=guest.avator;
-                content.content = this.messageContent;
+                content.content = replaceContent(this.messageContent);
                 content.name = guest.name;
                 content.is_kefu = true;
                 content.time = this.getNowDate();
@@ -299,7 +299,7 @@
                                     content.avator = visitorMes["visitor_avator"];
                                     content.name = visitorMes["visitor_name"];
                                 }
-                                content.content = visitorMes["content"];
+                                content.content = replaceContent(visitorMes["content"]);
                                 content.time = visitorMes["time"];
                                 _this.msgList.push(content);
                                 _this.scrollBottom();
@@ -379,9 +379,9 @@
                         $(".chatBox").css("max-height",$(window).height()-65);
                     }
                     //展示表情
-                    var alt = ["[微笑]", "[嘻嘻]", "[哈哈]", "[可爱]", "[可怜]", "[挖鼻]", "[吃惊]", "[害羞]", "[挤眼]", "[闭嘴]", "[鄙视]", "[爱你]", "[泪]", "[偷笑]", "[亲亲]", "[生病]", "[太开心]", "[白眼]", "[右哼哼]", "[左哼哼]", "[嘘]", "[衰]", "[委屈]", "[吐]", "[哈欠]", "[抱抱]", "[怒]", "[疑问]", "[馋嘴]", "[拜拜]", "[思考]", "[汗]", "[困]", "[睡]", "[钱]", "[失望]", "[酷]", "[色]", "[哼]", "[鼓掌]", "[晕]", "[悲伤]", "[抓狂]", "[黑线]", "[阴险]", "[怒骂]", "[互粉]", "[心]", "[伤心]", "[猪头]", "[熊猫]", "[兔子]", "[ok]", "[耶]", "[good]", "[NO]", "[赞]", "[来]", "[弱]", "[草泥马]", "[神马]", "[囧]", "[浮云]", "[给力]", "[围观]", "[威武]", "[奥特曼]", "[礼物]", "[钟]", "[话筒]", "[蜡烛]", "[蛋糕]"], arr = {};
-                    $.each(alt, function (index, item) {
-                        _this.face.push({"name":item,"path":index + '.gif'});
+                    var faces=placeFace();
+                    $.each(faceTitles, function (index, item) {
+                        _this.face.push({"name":item,"path":faces[item]});
                     });
                     $(".faceBtn").click(function(){
                         var status=$('.faceBox').css("display");
@@ -418,7 +418,7 @@
             faceIconClick(index){
                 $('.faceBox').hide();
                 this.messageContent+="face"+this.face[index].name;
-            }
+            },
         },
         created: function () {
             this.init();
diff --git a/static/html/nav.html b/static/html/nav.html
index 7117af3..5831a36 100644
--- a/static/html/nav.html
+++ b/static/html/nav.html
@@ -2,7 +2,7 @@
 <el-menu
         default-active="3"
         mode="horizontal">
-    <el-menu-item  class="mainLogo" v-on:click="openUrl('/login')">GO-FLY<span class="version">V0.0.7</span></el-menu-item>
+    <el-menu-item  class="mainLogo" v-on:click="openUrl('/login')">GO-FLY<span class="version">V0.0.8</span></el-menu-item>
     <el-menu-item style="display:none" index="2" v-on:click="openIframeUrl('/list')">邮箱<el-badge class="mark" :value="mailTotal" style="margin-bottom: 20px;"/>
     </el-menu-item>
     <el-menu-item index="3" v-on:click="openIframeUrl('/chat_main')">聊天</el-menu-item>
diff --git a/static/js/functions.js b/static/js/functions.js
index 8359cd5..c99b574 100644
--- a/static/js/functions.js
+++ b/static/js/functions.js
@@ -54,6 +54,27 @@ function flashTitle() {
     titleTimer = setTimeout("flashTitle()", 500);
 }
 
+var faceTitles = ["[微笑]", "[嘻嘻]", "[哈哈]", "[可爱]", "[可怜]", "[挖鼻]", "[吃惊]", "[害羞]", "[挤眼]", "[闭嘴]", "[鄙视]", "[爱你]", "[泪]", "[偷笑]", "[亲亲]", "[生病]", "[太开心]", "[白眼]", "[右哼哼]", "[左哼哼]", "[嘘]", "[衰]", "[委屈]", "[吐]", "[哈欠]", "[抱抱]", "[怒]", "[疑问]", "[馋嘴]", "[拜拜]", "[思考]", "[汗]", "[困]", "[睡]", "[钱]", "[失望]", "[酷]", "[色]", "[哼]", "[鼓掌]", "[晕]", "[悲伤]", "[抓狂]", "[黑线]", "[阴险]", "[怒骂]", "[互粉]", "[心]", "[伤心]", "[猪头]", "[熊猫]", "[兔子]", "[ok]", "[耶]", "[good]", "[NO]", "[赞]", "[来]", "[弱]", "[草泥马]", "[神马]", "[囧]", "[浮云]", "[给力]", "[围观]", "[威武]", "[奥特曼]", "[礼物]", "[钟]", "[话筒]", "[蜡烛]", "[蛋糕]"];
+function placeFace() {
+    var faces=[];
+    for(var i=0;i<faceTitles.length;i++){
+        faces[faceTitles[i]]="/static/images/face/"+i+".gif";
+    }
+    return faces;
+}
 function replaceContent (content) {// 转义聊天内容中的特殊字符
+    var faces=placeFace();
+    var html = function (end) {
+        return new RegExp('\\n*\\[' + (end || '') + '(pre|div|span|p|table|thead|th|tbody|tr|td|ul|li|ol|li|dl|dt|dd|h2|h3|h4|h5)([\\s\\S]*?)\\]\\n*', 'g');
+    };
+    content = (content || '').replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&amp;')
+        .replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;').replace(/"/g, '&quot;') // XSS
+        .replace(/face\[([^\s\[\]]+?)\]/g, function (face) {  // 转义表情
+            var alt = face.replace(/^face/g, '');
+            return '<img alt="' + alt + '" title="' + alt + '" src="' + faces[alt] + '">';
+        })
+        .replace(html(), '\<$1 $2\>').replace(html('/'), '\</$1\>') // 转移HTML代码
+        .replace(/\n/g, '<br>') // 转义换行
 
+    return content;
 }
\ No newline at end of file