var bDrag = false; var disX = disY = 0; var chat = document.getElementById('chat') var chart_name = document.getElementsByClassName('name')[0]; var userCode = window.localStorage.getItem('userCode') //当前登录人 var touristCode = window.localStorage.getItem('touristCode') //聊天人 var seatFlag = window.localStorage.getItem('seatFlag') var roleName = window.localStorage.getItem('roleName') var touserid; var aa, fq; var flag; var flagAct; var modelState=0; var video = 0; var id = parseInt(Math.random() * 100000); if(roleName != '回访办'){ console.log(111) $('.open_chat').hide() // return } if(userCode == null && touristCode == null) { var id = parseInt(Math.random() * 100000) userCode = id; window.localStorage.setItem('touristCode', id); } else if(userCode == null && touristCode != null) { userCode = touristCode; } if(seatFlag == 'true') { $('.replyType_btn').show() } else { $('.replyType_btn').hide() } getInforNotice() fq = setInterval(function() { getInforNotice() }, 5000) //console.log(document.cookie.getItem('touristCode')) //}; $('.open_chat').click(function() { if($('#chat').css('display') == 'block') { $('#chat').hide(); } else { $('#chat').show(); } //获取客服工号 // getTouserid(); //获取聊天列表 getchatinglist(); clearInterval(fq) getNoneInfor() $('.name').text(userCode); GetOnlineservicetinfo() aa = setInterval(function() { //获取聊天列表 // getchatinglist(); GetOnlineservicetinfo() }, 5000) //移动拖拽弹框 chart_name.onmousedown = function(event) { var event = event || window.event; bDrag = true; disX = event.clientX - chat.offsetLeft; disY = event.clientY - chat.offsetTop; this.setCapture && this.setCapture(); return false }; document.onmousemove = function(event) { if(!bDrag) return; var event = event || window.event; var iL = event.clientX - disX; var iT = event.clientY - disY; var maxL = document.documentElement.clientWidth - chat.offsetWidth; var maxT = document.documentElement.clientHeight - chat.offsetHeight; iL = iL < 0 ? 0 : iL; iL = iL > maxL ? maxL : iL; iT = iT < 0 ? 0 : iT; iT = iT > maxT ? maxT : iT; chat.style.marginTop = chat.style.marginLeft = 0; chat.style.left = iL + "px"; chat.style.top = iT + "px"; return false }; document.onmouseup = window.onblur = chart_name.onlosecapture = function() { bDrag = false; chart_name.releaseCapture && chart_name.releaseCapture(); }; window.onkeydown = function(e) { if(e.keyCode == 13) { sendinfo(); flag = 0 } } if(flag = 0) { $('.chatlist_con').scrollTop($('.chatlist_con')[0].scrollHeight); } }) $('.close_icon').click(function() { modelState=0 $('.replyType_cont').hide() $('.con').hide() $('#chat').hide(); clearInterval(aa); fq = setInterval(function() { getInforNotice() }, 5000) }) clearInterval(aa) //列表点击样式 $('.sidebar_list').click(function(e) { if(e.target.tagName == 'LI' || e.target.tagName == 'P') { if(e.target.tagName == 'LI') { flag = 0; if(flag == 0) { $('.chatlist_con').scrollTop($('.chatlist_con')[0].scrollHeight); } $(e.target).addClass('actives'); $(e.target).siblings().removeClass('actives') touserid = $(e.target).children('p').eq(0).text() $('.name').text(touserid); GetOnlineservicetinfo() } } }) //快捷消息回复模板 $('.reply_btn').click(function() { if($('.con').css('display') == 'block') { $('.con').hide() } else { $('.con').show() } $('.replyType_cont').hide() getMessage(); }) //回话类型 $('.replyType_btn').click(function() { if(modelState==1){ layer.msg("已选过", { time: 1500, icon: 2 }); return } if($('.replyType_cont').css('display') == 'block') { $('.replyType_cont').hide() } else { $('.replyType_cont').show() } $('.con').hide() getReplyType() }) //发送图片 $("#scwj").click(function() { $("#upFile").trigger("click"); }) $("#upFile").change(function() { upload(); }); $('.con').click(function(e) { if(e.target.tagName == 'UL') { return false; } let messgaeCont = $(e.target).html(); const arr = messgaeCont.split('、'); $('.send_content').val(arr[1]); $('.con').hide() }) //通知 function getInforNotice() { // $.ajax({ // type: "get", // url: huayi.config.callcenter_url + "testusertypeapi/api/TestUserType/getonlineserviceifhave", // async: true, // dataType: 'json', // data: { // userCode: userCode // }, // success: function(res) { // console.log(res) // if(res.data == 0) { // // debugger // $('audio').remove(); // audioElementHovertree = document.createElement('audio'); // audioElementHovertree.setAttribute('src', 'js/video/info.mp3'); // audioElementHovertree.setAttribute('autoplay', 'autoplay'); //打开自动播放 // $('.mark').css('display', 'block'); // } // } // }); } //判断消息状态 function getNoneInfor() { $.ajax({ type: "get", url: huayi.config.callcenter_url + "testusertypeapi/api/TestUserType/uponlineserviceifhave", async: true, dataType: 'json', data: { userCode: userCode }, success: function(res) { if(res.state == 'success') { $('.mark').css('display', 'none'); } } }); } //回话类型 function getReplyType() { $('.replyType_cont').unbind("click").click(function(e) { if(e.target.tagName == 'LI') { $.ajax({ type: "get", url: huayi.config.callcenter_url + "testusertypeapi/api/TestUserType/addonlinesertype", async: true, dataType: 'json', data: { zxusercode: userCode, fwusercode: touserid, fwtype: $(e.target).text() }, success: function(res) { if(res.state == 'success') { modelState=1 layer.msg("提交成功", { time: 1500, icon: 1 }); $('.replyType_cont').hide() } } }); } e.stopPropagation() }) } //图片上传预览 IE是用了滤镜。 var file = document.getElementById("upFile"); function upload() { flagAct = 1; var MAXWIDTH = 170; var MAXHEIGHT = 120; var div = document.getElementById('preview'); if(file.files && file.files[0]) { div.innerHTML = ''; var img = document.getElementById('imghead'); img.onload = function() { var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); img.width = rect.width; img.height = rect.height; // img.style.marginLeft = rect.left+'px'; img.style.marginTop = rect.top + 'px'; } var reader = new FileReader(); reader.onload = function(evt) { img.src = evt.target.result; } reader.readAsDataURL(file.files[0]); } } function clacImgZoomParam(maxWidth, maxHeight, width, height) { var param = { top: 0, left: 0, width: width, height: height }; if(width > maxWidth || height > maxHeight) { rateWidth = width / maxWidth; rateHeight = height / maxHeight; if(rateWidth > rateHeight) { param.width = maxWidth; param.height = Math.round(height / rateWidth); } else { param.width = Math.round(width / rateHeight); param.height = maxHeight; } } param.left = Math.round((maxWidth - param.width) / 2); param.top = Math.round((maxHeight - param.height) / 2); return param; } function getMessage() { $.ajax({ type: "get", url: huayi.config.callcenter_url + "testusertypeapi/api/TestUserType/getmassmodellistall", async: true, dataType: 'json', data: {}, success: function(res) { let messageStr = '' res.data.forEach(function(v, n) { messageStr += '
  • ' + (n + 1) + '、' + v.massmodelcenter + '
  • ' }) $('.con').html(messageStr); } }); } //发送消息 function sendinfo() { flag = 0 console.log(flagAct) //发送聊天消息 if(flagAct == 1) { if(file.files.length > 0) { var formData = new FormData(); for(var i = 0; i < file.files.length; i++) { formData.append('file' + i, file.files[i]); } formData.append("fromuserid", userCode) formData.append("touserid", touserid) $.ajax({ url: huayi.config.callcenter_url + 'testusertypeapi/api/TestUserType/addonlineserviceimg', type: "POST", data: formData, /** *必须false才会自动加上正确的Content-Type */ contentType: false, /** * 必须false才会避开jQuery对 formdata 的默认处理 * XMLHttpRequest会对 formdata 进行正确的处理 */ processData: false, success: function(result) { $('#imghead').css('display', 'none'); flagAct = 0 } }); } } else { if($('.send_content').val() == '') { return false; } $.ajax({ type: "get", url: huayi.config.callcenter_url + "testusertypeapi/api/TestUserType/AddOnlineservice", async: true, dataType: 'json', data: { Msgcontent: $('.send_content').val(), fromuserid: userCode, touserid: touserid }, success: function(res) { $('.send_content').val('') } }); } } ////消息 //$.ajax({ // type: "get", // url: huayi.config.callcenter_url + "testusertypeapi/api/TestUserType/GetListOnlineservicemap", // async: true, // dataType: 'json', // data: { // PageIndex: 1, // PageSize: 10, // isread:0, // fromid:userCode // }, // success: function(res) { // console.log(res) // } // }); //获取聊天记录 function GetOnlineservicetinfo() { $.ajax({ type: "get", url: huayi.config.callcenter_url + "testusertypeapi/api/TestUserType/GetOnlineservicetinfo", async: true, dataType: 'json', data: { fromuserid: userCode, touserid: touserid }, success: function(res) { let str1 = '' res.data.forEach(function(v, n) { if(v.fromuserid == userCode) { if(v.imgurlinfo != null && v.imgurlinfo != '') { str1 += '
  • ' + v.createtime + '

  • ' } else { str1 += '
  • ' + v.createtime + '

    ' + v.Msgcontent + '
  • ' } } else { if(v.imgurlinfo != null && v.imgurlinfo != '') { str1 += '
  • ' + v.createtime + '

  • ' } else { str1 += '
  • ' + v.createtime + '

    ' + v.Msgcontent + '
  • ' } } }) $('.chatlist_con').html(str1); //图片放大 if(flag == 0) { $('.chatlist_con').scrollTop($('.chatlist_con')[0].scrollHeight); flag = 1 } } }); } function imgEnlarge(str) { layer.photos({ photos: '.message_img', anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数) }); } //获取客服工号 function getTouserid() { $.ajax({ type: "get", url: huayi.config.callcenter_url + "testusertypeapi/api/TestUserType/getzxuserinfo", async: false, dataType: 'json', data: { fromuserid: userCode }, success: function(res) { touserid = res.data; } }); } //获取聊天列表 function getchatinglist() { $.ajax({ type: "get", url: huayi.config.callcenter_url + "testusertypeapi/api/TestUserType/getchatinglist", async: false, dataType: 'json', data: { usercode: userCode }, success: function(res) { let str = ''; let num; res.data.forEach(function(v, n) { str += '
  • ' + v.usercode + '

  • ' }) $('.sidebar_list').html(str); $(".sidebar_list li").eq(0).addClass('actives') touserid = $(".sidebar_list li").eq(0).text() // console.log('6666',) // let className = document.getElementsByClassName('personName'); // console.log(touserid) // // debugger // for(let i = 0; i < className.length; i++) { // if(className[i].innerText == String(touserid)) { // num = i // $(".sidebar_list li").eq(num).addClass('actives'); // } // } } }); } //查看更多 // function getmore(ele) { // console.log("你点击了查看更多") // } // var wrap = document.querySelector(".wrap"); // var next = document.querySelector(".arrow_right"); // var prev = document.querySelector(".arrow_left"); // next.onclick = function () { // next_pic(); // } // prev.onclick = function () { // prev_pic(); // } // function next_pic () { // var newLeft = parseInt(wrap.style.left)-600; // wrap.style.left = newLeft + "px"; // } // function prev_pic () { // var newLeft = parseInt(wrap.style.left)+600; // wrap.style.left = newLeft + "px"; // }