taoshihan1991
4 years ago
parent
1fcefcad3d
commit
beb562b131
@ -0,0 +1,198 @@
|
||||
//首页组件
|
||||
var chatKfIndex = {
|
||||
delimiters:["<{","}>"],
|
||||
data: function(){
|
||||
return {
|
||||
visitors: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.getKefuInfo();
|
||||
},
|
||||
kfOnline() {
|
||||
let messsage = {}
|
||||
messsage.type = "kfOnline";
|
||||
messsage.data = this.$parent.kefuInfo;
|
||||
this.$parent.socket.send(JSON.stringify(messsage));
|
||||
},
|
||||
receiveMessage(e) {
|
||||
const retData = JSON.parse(e.data);
|
||||
switch (retData.type) {
|
||||
case "allUsers":
|
||||
this.visitors = retData.data;
|
||||
break;
|
||||
case "userOnline":
|
||||
this.visitors.push(retData.data);
|
||||
break;
|
||||
}
|
||||
},
|
||||
//初始化websocket
|
||||
initConn() {
|
||||
if(this.$parent.socket==null){
|
||||
this.$parent.socket = new ReconnectingWebSocket(this.$parent.server);
|
||||
}
|
||||
this.$parent.socket.onopen=this.kfOnline;
|
||||
this.$parent.socket.onmessage = this.receiveMessage;
|
||||
},
|
||||
//获取客服信息
|
||||
getKefuInfo(){
|
||||
let _this=this;
|
||||
$.ajax({
|
||||
type:"get",
|
||||
url:"/kefuinfo",
|
||||
headers:{
|
||||
"token":TOKEN
|
||||
},
|
||||
success: function(data) {
|
||||
if(data.code==200 && data.result!=null){
|
||||
_this.$parent.kefuInfo.id=data.result.id;
|
||||
_this.$parent.kefuInfo.name=data.result.name;
|
||||
_this.$parent.kefuInfo.avator=data.result.avator;
|
||||
_this.initConn();
|
||||
}
|
||||
if(data.code!=200){
|
||||
_this.$message({
|
||||
message: data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
created: function () {
|
||||
this.init();
|
||||
},
|
||||
template:$("#chatKfIndex").html()
|
||||
};
|
||||
//详情组件
|
||||
var chatKfBox = {
|
||||
delimiters:["<{","}>"],
|
||||
data: function(){
|
||||
return {
|
||||
visitorId:null,
|
||||
msgList: [],
|
||||
messageContent: "",
|
||||
face: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
receiveMessage(e) {
|
||||
const retData = JSON.parse(e.data);
|
||||
switch (retData.type) {
|
||||
case "message":
|
||||
alert(e.data);
|
||||
break;
|
||||
}
|
||||
},
|
||||
init(){
|
||||
//获取当前客户消息
|
||||
this.visitorId=this.$route.params.visitorId;
|
||||
this.getMesssagesByVisitorId(this.$route.params.visitorId);
|
||||
this.$parent.socket.onmessage = this.receiveMessage;
|
||||
},
|
||||
//获取信息列表
|
||||
getMesssagesByVisitorId(visitorId) {
|
||||
let _this = this;
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/messages?visitorId=" + visitorId,
|
||||
headers: {
|
||||
"token": TOKEN
|
||||
},
|
||||
success: function (data) {
|
||||
if (data.code == 200 && data.result != null) {
|
||||
let msgList = data.result;
|
||||
_this.msgList = [];
|
||||
for (let i = 0; i < msgList.length; i++) {
|
||||
let visitorMes = msgList[i];
|
||||
let content = {}
|
||||
if (visitorMes["mes_type"] == "kefu") {
|
||||
content.is_kefu = true;
|
||||
content.avator = visitorMes["kefu_avator"];
|
||||
content.name = visitorMes["kefu_name"];
|
||||
} else {
|
||||
content.is_kefu = false;
|
||||
content.avator = visitorMes["visitor_avator"];
|
||||
content.name = visitorMes["visitor_name"];
|
||||
}
|
||||
content.content = replaceContent(visitorMes["content"]);
|
||||
content.time = visitorMes["time"];
|
||||
_this.msgList.push(content);
|
||||
_this.scrollBottom();
|
||||
}
|
||||
}
|
||||
if (data.code != 200) {
|
||||
_this.$message({
|
||||
message: data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//发送给客户
|
||||
chatToUser() {
|
||||
this.messageContent=this.messageContent.trim("\r\n");
|
||||
if(this.messageContent==""||this.messageContent=="\r\n"||this.currentGuest==""){
|
||||
return;
|
||||
}
|
||||
let _this=this;
|
||||
let mes = {};
|
||||
mes.type = "kefu";
|
||||
mes.content = this.messageContent;
|
||||
mes.from_id = _this.$parent.kefuInfo.id;
|
||||
mes.to_id = this.visitorId;
|
||||
mes.content = this.messageContent;
|
||||
$.post("/message",mes,function(){
|
||||
_this.messageContent = "";
|
||||
});
|
||||
|
||||
let content = {}
|
||||
content.avator = _this.$parent.kefuInfo.avator;
|
||||
content.name = _this.$parent.kefuInfo.name;
|
||||
content.content = replaceContent(this.messageContent);
|
||||
content.is_kefu = true;
|
||||
content.time = '';
|
||||
this.msgList.push(content);
|
||||
this.scrollBottom();
|
||||
},
|
||||
//滚到底部
|
||||
scrollBottom(){
|
||||
this.$nextTick(() => {
|
||||
debugger;
|
||||
$('.chatBox').scrollTop($(".chatBox")[0].scrollHeight);
|
||||
});
|
||||
},
|
||||
},
|
||||
created: function () {
|
||||
this.init();
|
||||
},
|
||||
template:$("#chatBox").html()
|
||||
};
|
||||
var routes = [
|
||||
{ path: '/',component:chatKfIndex}, // 这个表示会默认渲染
|
||||
{path:'/chatKfBox/:visitorId',component:chatKfBox},
|
||||
];
|
||||
var router = new VueRouter({
|
||||
routes: routes
|
||||
})
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
el: '#app',
|
||||
|
||||
data: function(){
|
||||
return{
|
||||
server:getWsBaseUrl()+"/chat_server",
|
||||
socket:null,
|
||||
kefuInfo:{},
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
||||
},
|
||||
created: function () {
|
||||
},
|
||||
})
|
||||
Loading…
Reference in new issue