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 @@
<{v.name}>
-
<{v.content}>
+
+
+ +
+
+
发送
@@ -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 @@
<{v.name}>
-
<{v.content}>
+
@@ -111,13 +111,13 @@
-
+
    -
  • +
-
+
{{.SendBtn}}
@@ -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 @@ - + 邮箱 聊天 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/g, '>').replace(/'/g, ''').replace(/"/g, '"') // XSS + .replace(/face\[([^\s\[\]]+?)\]/g, function (face) { // 转义表情 + var alt = face.replace(/^face/g, ''); + return '' + alt + ''; + }) + .replace(html(), '\<$1 $2\>').replace(html('/'), '\') // 转移HTML代码 + .replace(/\n/g, '
') // 转义换行 + return content; } \ No newline at end of file