var app=new Vue({ el: '#app', delimiters:["<{","}>"], data: { visible:false, chatTitleType:"info", fullscreenLoading:true, leftTabActive:"first", rightTabActive:"visitorInfo", users:[], usersMap:[], server:getWsBaseUrl()+"/ws_kefu?token="+localStorage.getItem("token"), //server:getWsBaseUrl()+"/chat_server", socket:null, socketClosed:false, messageContent:"", currentGuest:"", msgList:[], chatTitle:"暂时未处理咨询", chatInputing:"", kfConfig:{ id : "kf_1", name : "客服丽丽", avator : "", to_id : "", }, visitor:{ visitor_id:"", refer:"", client_ip:"", city:"", status:"", source_ip:"", created_at:"", }, visitorExtra:[], visitors:[], visitorCount:0, visitorCurrentPage:1, visitorPageSize:10, face:[], transKefuDialog:false, otherKefus:[], replyGroupDialog:false, replyContentDialog:false, editReplyContentDialog:false, replySearch:"", replySearchList:[], replySearchListActive:[], groupName:"", groupId:"", replys:[], replyId:"", replyContent:"", replyTitle:"", ipBlacks:[], sendDisabled:false, }, methods: { //跳转 openUrl(url) { window.location.href = url; }, sendKefuOnline(){ let mes = {} mes.type = "kfOnline"; mes.data = this.kfConfig; this.socket.send(JSON.stringify(mes)); }, //心跳 ping(){ let _this=this; let mes = {} mes.type = "ping"; mes.data = ""; setInterval(function () { if(_this.socket!=null){ _this.socket.send(JSON.stringify(mes)); } },20000) setInterval(function(){ _this.getOnlineVisitors(); },120000); }, //初始化websocket initConn() { let socket = new ReconnectingWebSocket(this.server);//创建Socket实例 this.socket = socket this.socket.onmessage = this.OnMessage; this.socket.onopen = this.OnOpen; }, OnOpen() { this.sendKefuOnline(); }, OnMessage(e) { const redata = JSON.parse(e.data); switch (redata.type){ case "close": this.$message({ message: "客服在其他地方登录,当前登录状态退出", type: 'error' }); localStorage.removeItem("token"); this.socket.close(); break; case "inputing": this.handleInputing(redata.data); //this.sendKefuOnline(); break; case "allUsers": this.handleOnlineUsers(redata.data); //this.sendKefuOnline(); break; case "userOnline": this.addOnlineUser(redata.data); break; case "userOffline": this.removeOfflineUser(redata.data); //this.sendKefuOnline(); break; case "notice": //发送通知 var _this=this; window.parent.postMessage({ name:redata.data.username, body: redata.data.content, icon: redata.data.avator }); _this.alertSound(); break; } if (redata.type == "message") { let msg = redata.data let content = {} let _this=this; content.avator = msg.avator; content.name = msg.name; content.content = replaceContent(msg.content); content.is_kefu = msg.is_kefu=="yes"? true:false; content.time = msg.time; if (msg.id == this.currentGuest) { this.msgList.push(content); } for(let i=0;i10){ var i=msgList.length-10 }else{ var i=0; } for(;i { $('.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(); } return false; }); }); }); var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?82938760e00806c6c57adee91f39aa5e"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); }, //表情点击事件 faceIconClick(index){ $('.faceBox').hide(); this.messageContent+="face"+this.face[index].name; }, //上传图片 uploadImg (url){ let _this=this; $('#uploadImg').after(''); $("#uploadImgFile").click(); $("#uploadImgFile").change(function (e) { var formData = new FormData(); var file = $("#uploadImgFile")[0].files[0]; formData.append("imgfile",file); //传给后台的file的key值是可以自己定义的 filter(file) && $.ajax({ url: url || '', type: "post", data: formData, contentType: false, processData: false, dataType: 'JSON', mimeType: "multipart/form-data", success: function (res) { if(res.code!=200){ _this.$message({ message: res.msg, type: 'error' }); }else{ _this.messageContent+='img[/' + res.result.path + ']'; _this.chatToUser(); } }, error: function (data) { console.log(data); } }); }); }, //上传文件 uploadFile:function (url){ let _this=this; $('#uploadFile').after(''); $("#uploadRealFile").click(); $("#uploadRealFile").change(function (e) { var formData = new FormData(); var file = $("#uploadRealFile")[0].files[0]; formData.append("realfile",file); //传给后台的file的key值是可以自己定义的 console.log(formData); $.ajax({ url: url || '', type: "post", data: formData, contentType: false, processData: false, dataType: 'JSON', mimeType: "multipart/form-data", success: function (res) { if(res.code!=200){ _this.$message({ message: res.msg, type: 'error' }); }else{ _this.messageContent+='file[/' + res.result.path + ']'; _this.chatToUser(); } }, error: function (data) { console.log(data); } }); }); }, addIpblack(ip){ let _this=this; $.ajax({ type:"post", url:"/ipblack", data:{ip:ip}, headers:{ "token":localStorage.getItem("token") }, success: function(data) { if(data.code!=200){ _this.$message({ message: data.msg, type: 'error' }); }else{ _this.$message({ message: data.msg, type: 'success' }); } } }); }, //粘贴上传图片 onPasteUpload(event){ let items = event.clipboardData && event.clipboardData.items; let file = null if (items && items.length) { // 检索剪切板items for (var i = 0; i < items.length; i++) { if (items[i].type.indexOf('image') !== -1) { file = items[i].getAsFile() } } } if (!file) { return; } let _this=this; var formData = new FormData(); formData.append('imgfile', file); $.ajax({ url: '/uploadimg', type: "post", data: formData, contentType: false, processData: false, dataType: 'JSON', mimeType: "multipart/form-data", success: function (res) { if(res.code!=200){ _this.$message({ message: res.msg, type: 'error' }); }else{ _this.messageContent+='img[/' + res.result.path + ']'; _this.chatToUser(); } }, error: function (data) { console.log(data); } }); }, openUrl(url){ window.open(url); }, //提示音 alertSound(){ var b = document.getElementById("chatMessageAudio"); var p = b.play(); p && p.then(function(){}).catch(function(e){}); }, sendSound(){ var b = document.getElementById("chatMessageSendAudio"); var p = b.play(); p && p.then(function(){}).catch(function(e){}); }, //转移客服 transKefu(){ this.transKefuDialog=true; var _this=this; this.sendAjax("/other_kefulist","get",{},function(result){ _this.otherKefus=result; }); }, //转移访客客服 transKefuVisitor(kefu,visitorId){ var _this=this; this.sendAjax("/trans_kefu","get",{kefu_id:kefu,visitor_id:visitorId},function(result){ //_this.otherKefus=result; _this.transKefuDialog = false }); }, //保存回复分组 addReplyGroup(){ var _this=this; this.sendAjax("/reply","post",{group_name:_this.groupName},function(result){ //_this.otherKefus=result; _this.replyGroupDialog = false _this.groupName=""; _this.getReplys(); }); }, //添加回复内容 addReplyContent(){ var _this=this; this.sendAjax("/reply_content","post",{group_id:_this.groupId,item_name:_this.replyTitle,content:_this.replyContent},function(result){ //_this.otherKefus=result; _this.replyContentDialog = false _this.replyContent=""; _this.getReplys(); }); }, //获取快捷回复 getReplys(){ var _this=this; this.sendAjax("/replys","get",{},function(result){ _this.replys=result; }); }, //删除回复 deleteReplyGroup(id){ var _this=this; this.sendAjax("/reply?id="+id,"delete",{},function(result){ _this.getReplys(); }); }, //删除回复 deleteReplyContent(id){ var _this=this; this.sendAjax("/reply_content?id="+id,"delete",{},function(result){ _this.getReplys(); }); }, //编辑回复 editReplyContent(save,id,title,content){ var _this=this; if(save=='yes'){ var data={ reply_id:this.replyId, reply_title:this.replyTitle, reply_content:this.replyContent } this.sendAjax("/reply_content_save","post",data,function(result){ _this.editReplyContentDialog=false; _this.getReplys(); }); }else{ this.editReplyContentDialog=true; this.replyId=id; this.replyTitle=title; this.replyContent=content; } }, //搜索回复 searchReply(){ var _this=this; _this.replySearchListActive=[]; if(this.replySearch==""){ _this.replySearchList=[]; } this.sendAjax("/reply_search","post",{search:this.replySearch},function(result){ _this.replySearchList=result; for (var i in result) { _this.replySearchListActive.push(result[i].group_id); } }); }, //获取黑名单 getIpblacks(){ var _this=this; this.sendAjax("/ipblacks","get",{},function(result){ _this.ipBlacks=result; }); }, //删除黑名单 delIpblack(ip){ let _this=this; this.sendAjax("/ipblack?ip="+ip,"DELETE",{ip:ip},function(result){ _this.sendAjax("/ipblacks","get",{},function(result){ _this.ipBlacks=result; }); }); }, //划词搜索 selectText(){ return false; var _this=this; $('body').click(function(){ try{ var selecter = window.getSelection().toString(); if (selecter != null && selecter.trim() != ""){ _this.replySearch=selecter.trim(); _this.searchReply(); }else{ _this.replySearch=""; } } catch (err){ var selecter = document.selection.createRange(); var s = selecter.text; if (s != null && s.trim() != ""){ _this.replySearch=s.trim(); _this.searchReply(); }else{ _this.replySearch=""; } } var status=$('.faceBox').css("display"); if(status=="block"){ $('.faceBox').hide(); } }); }, sendAjax(url,method,params,callback){ let _this=this; $.ajax({ type: method, url: url, data:params, headers: { "token": localStorage.getItem("token") }, error:function(res){ var data=JSON.parse(res.responseText); console.log(data); if(data.code!=200){ _this.$message({ message: data.msg, type: 'error' }); } }, success: function(data) { if(data.code!=200){ _this.$message({ message: data.msg, type: 'error' }); }else if(data.result!=null){ callback(data.result); }else{ callback(data); } } }); }, }, mounted() { document.addEventListener('paste', this.onPasteUpload) }, created: function () { //jquery this.initJquery(); this.getKefuInfo(); this.getOnlineVisitors(); this.getReplys(); this.getIpblacks(); this.selectText(); //心跳 this.ping(); } })