pull/23/head
taoshihan1991 4 years ago
commit 3c321f0b66

@ -56,7 +56,7 @@
.chatBoxMe .el-col-3{float: right;text-align: right;} .chatBoxMe .el-col-3{float: right;text-align: right;}
.chatBoxMe .chatUser{text-align: right} .chatBoxMe .chatUser{text-align: right}
.chatBoxMe .chatContent:after{left:auto;right: -10px;} .chatBoxMe .chatContent:after{left:auto;right: -10px;}
.chatBox{max-height: 340px;overflow-y: auto;overflow-x: hidden;} .chatBox{height: 340px;overflow-y: auto;overflow-x: hidden;}
.chatTime{text-align: center;color: #bbb;margin: 5px 0;font-size: 12px;} .chatTime{text-align: center;color: #bbb;margin: 5px 0;font-size: 12px;}
.funcBtns{margin: 2px 0px;color: #7f7f7f;border-bottom: 1px solid #e6e6e6;font-size: 12px;padding: 5px 0px;} .funcBtns{margin: 2px 0px;color: #7f7f7f;border-bottom: 1px solid #e6e6e6;font-size: 12px;padding: 5px 0px;}
</style> </style>
@ -75,7 +75,7 @@
<el-avatar :size="40" :src="item.avator"></el-avatar> <el-avatar :size="40" :src="item.avator"></el-avatar>
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
<div><{item.username}></div> <div style="height:20px;overflow: hidden"><{item.username}></div>
<div class="lastNewMsg"><{item.last_message}></div> <div class="lastNewMsg"><{item.last_message}></div>
</el-col> </el-col>
</div> </div>
@ -87,7 +87,7 @@
<el-col :span="4"> <el-col :span="4">
<el-avatar v-bind:class="{'imgGray': item.status==0 }" :size="40" :src="item.avator"></el-avatar> <el-avatar v-bind:class="{'imgGray': item.status==0 }" :size="40" :src="item.avator"></el-avatar>
</el-col> </el-col>
<el-col :span="16" v-bind:class="{'imgGray': item.status==0 }"> <el-col style="height:40px;overflow: hidden" :span="16" v-bind:class="{'imgGray': item.status==0 }">
<{item.name}> <{item.name}>
</el-col> </el-col>
</div> </div>
@ -128,6 +128,13 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<el-alert
v-show="chatInputing!=''"
:closable="false"
show-icon
:title="chatInputing"
>
</el-alert>
<div class="iconBtnsBox"> <div class="iconBtnsBox">
<div class="faceBox kefuFaceBox"> <div class="faceBox kefuFaceBox">
<ul class="faceBoxList"> <ul class="faceBoxList">
@ -302,4 +309,4 @@
</div> </div>
</body> </body>
<script src="/static/js/chat-main.js?v=0.4.1"></script> <script src="/static/js/chat-main.js?v=0.4.1"></script>
</html> </html>

@ -50,7 +50,7 @@
<div class="folderBtn visitorFolderBtn" id="uploadFile" v-on:click="uploadFile('/uploadfile')"></div> <div class="folderBtn visitorFolderBtn" id="uploadFile" v-on:click="uploadFile('/uploadfile')"></div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<el-input type="textarea" class="chatArea" v-model="messageContent" v-on:keyup.enter.native="chatToUser"></el-input> <el-input type="textarea" class="chatArea" v-model="messageContent" @keyup.native="inputNextText" v-on:keyup.enter.native="chatToUser"></el-input>
<div class="faceBox visitorFaceBox"> <div class="faceBox visitorFaceBox">
<ul class="faceBoxList"> <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> <li v-on:click="faceIconClick(i)" class="faceIcon" v-for="(v,i) in face" :title="v.name"><img :src=v.path></li>

@ -15,6 +15,7 @@ var app=new Vue({
currentGuest:"", currentGuest:"",
msgList:[], msgList:[],
chatTitle:"暂时未处理咨询", chatTitle:"暂时未处理咨询",
chatInputing:"",
kfConfig:{ kfConfig:{
id : "kf_1", id : "kf_1",
name : "客服丽丽", name : "客服丽丽",
@ -85,6 +86,10 @@ var app=new Vue({
OnMessage(e) { OnMessage(e) {
const redata = JSON.parse(e.data); const redata = JSON.parse(e.data);
switch (redata.type){ switch (redata.type){
case "inputing":
this.handleInputing(redata.data);
//this.sendKefuOnline();
break;
case "allUsers": case "allUsers":
this.handleOnlineUsers(redata.data); this.handleOnlineUsers(redata.data);
//this.sendKefuOnline(); //this.sendKefuOnline();
@ -170,6 +175,7 @@ var app=new Vue({
_this.talkTo(msg.id,msg.name); _this.talkTo(msg.id,msg.name);
}); });
_this.alertSound(); _this.alertSound();
_this.chatInputing="";
} }
}, },
//接手客户 //接手客户
@ -284,6 +290,12 @@ var app=new Vue({
} }
}, },
//处理正在输入
handleInputing:function (retData) {
if(retData.from==this.visitor.visitor_id){
this.chatInputing="正在输入:"+retData.content+"...";
}
},
//获取客服信息 //获取客服信息
getKefuInfo(){ getKefuInfo(){
let _this=this; let _this=this;

@ -136,6 +136,21 @@ new Vue({
}); });
}, },
//正在输入
inputNextText(){
if(this.socketClosed||!this.socket){
return;
}
console.log(this.messageContent);
var message = {}
message.type = "inputing";
message.data = {
from : this.visitor.visitor_id,
to : this.visitor.to_id,
content:this.messageContent
};
this.socket.send(JSON.stringify(message));
},
OnClose:function() { OnClose:function() {
this.chatTitle="连接关闭!请重新打开页面"; this.chatTitle="连接关闭!请重新打开页面";
$(".chatBox").append("<div class=\"chatTime\">"+this.chatTitle+"</div>"); $(".chatBox").append("<div class=\"chatTime\">"+this.chatTitle+"</div>");
@ -155,6 +170,7 @@ new Vue({
message: res.msg, message: res.msg,
type: 'error' type: 'error'
}); });
_this.sendDisabled=true;
return; return;
} }
_this.visitor=res.result; _this.visitor=res.result;

@ -128,6 +128,22 @@ func WsServerBackend() {
Mux.Lock() Mux.Lock()
conn.WriteMessage(websocket.TextMessage, str) conn.WriteMessage(websocket.TextMessage, str)
Mux.Unlock() Mux.Unlock()
case "inputing":
//msg := TypeMessage{
// Type: "pong",
//}
//str, _ := json.Marshal(msg)
//var data SimpleMessage
//json.Unmarshal([]byte(typeMsg.Data.(string)),&data)
//log.Println(data)
//from:=typeMsg.Data["from"]
to:=typeMsg.Data.(map[string]interface{})["to"].(string)
//content:=typeMsg.Data["content"]
log.Println(to)
Mux.Lock()
//conn.WriteMessage(websocket.TextMessage, str)
OneKefuMessage(to,message.content)
Mux.Unlock()
} }
} }

Loading…
Cancel
Save