"use strict";
window.online = {
//在线客服
msgList: [],
fCheckIP: function(ip) {
//var ip = document.getElementById('reg_ip').value;
var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/; //正则表达式
if(re.test(ip)) {
if(RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256)
return true;
}
//alert("IP有误!");
return false;
},
autoCenter: function(el) {
if(!el) {
return;
}
//获取可见窗口大小
var bodyW = document.documentElement.clientWidth;
var bodyH = document.documentElement.clientHeight;
//获取对话框宽、高
var elW = el.offsetWidth;
var elH = el.offsetHeight || el.clientHeight;
//debugger
el.style.left = (bodyW - elW) / 2 + 'px';
el.style.top = (bodyH - elH) / 2 + 'px';
},
formatData: function(objData, flag) {
var ts = this;
var msgList = ts.msgList;
var sendData = {};
if(!ts.fCheckIP(objData.uid)) {
sendData = {
speaker: 'server',
content_type: objData.content_type || "text",
time: objData.time,
message: objData.message
};
if(flag) {
msgList.unshift(sendData);
} else {
msgList.push(sendData);
}
var thisTime, nextTime, flagtime;
for(var i = 0; i < msgList.length; i++) {
if(i < msgList.length - 1) {
thisTime = new Date(msgList[i].time).getTime();
nextTime = new Date(msgList[i + 1].time).getTime();
flagtime = (nextTime - thisTime) / 1000 / 60;
if(flagtime > 5) {
msgList[i + 1].isshowtime = true;
}
}
}
} else {
sendData = {
speaker: 'customer',
content_type: objData.content_type || "text",
time: objData.time,
message: objData.message
};
if(flag) {
msgList.unshift(sendData);
} else {
msgList.push(sendData);
}
let thisTime, nextTime, flagtime;
for(var i = 0; i < msgList.length; i++) {
if(i < msgList.length - 1) {
thisTime = new Date(msgList[i].time).getTime();
nextTime = new Date(msgList[i + 1].time).getTime();
flagtime = (nextTime - thisTime) / 1000 / 60;
if(flagtime > 5) {
msgList[i + 1].isshowtime = true;
}
}
}
}
ts.msgList = msgList;
},
formatHtml: function(flag, fun) {
var ts = this;
var sartHtmStr = '
一
小狐科技咨询 没有更多
点击加载历史记录
';
var htmStr = '';
for(var g = 0; g < ts.msgList.length; g++) {
if(ts.msgList[g].speaker == "server") {
htmStr += '
' + ts.msgList[g].time + '
' + ts.name + '
' + (ts.msgList[g].content_type == "text" ? ts.msgList[g].message : '
') + '
';
} else {
htmStr += '
' + (ts.msgList[g].time || '') + '
' + (ts.msgList[g].content_type == "text" ? ts.msgList[g].message : '
') + '
';
}
}
var htmStrEnd = '
';
if($("#uiShow").length) {
$("#uiShow").html(htmStr);
} else {
$("body").append(sartHtmStr + htmStr + htmStrEnd);
setTimeout(function() {
ts.fileUpload("msgFileLoad", ts.company_id);
}, 200);
}
if(fun) {
fun();
}
if(flag) {
return;
}
$('.ui_show').scrollTop($('.ui_show')[0].scrollHeight);
var $imgs = $("#uiShow").find("img");
$imgs.one('load', function() {
$('.ui_show').scrollTop($('.ui_show')[0].scrollHeight);
}).each(function() {
if(this.complete) $(this).load();
});
//">x
},
addFile: function(url, model) {
if(model == "js") {
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = url;
document.body.appendChild(s);
} else {
var creatHead = $('head');
creatHead.append('');
}
},
// 在线客服webs
initWebSocket: function(id, root, company_id, type) {
var ts = this;
console.log("initWebSocket");
ts.noncestr = localStorage.getItem("noncestr");
ts.root = root || "https://xiaohucloud.cn";
var zyArr = ['https://img.xiaohucloud.com/static/js/emoji/lib/script/jquery.mousewheel-3.0.6.min.js', 'https://img.xiaohucloud.com/static/js/emoji/lib/script/jquery.mCustomScrollbar.min.js', 'https://img.xiaohucloud.com/static/js/emoji/src/js/jquery.emoji.js'];
var cssArr = ['https://img.xiaohucloud.com/static/css/online.css', 'https://img.xiaohucloud.com/static/js/emoji/lib/css/jquery.mCustomScrollbar.min.css', 'https://img.xiaohucloud.com/static/js/emoji/src/css/jquery.emoji.css'];
for(var j = 0; cssArr.length > j; j++) {
ts.addFile(cssArr[j], 'css');
}
for(var i = 0; zyArr.length > i; i++) {
ts.addFile(zyArr[i], 'js');
}
/*在线聊天*/
$.ajax({
type: "get",
url: 'https://api.xiaohucloud.com/api/front/kfInfo?companyId=' + company_id,
dataType: 'json',
success: function(data) {
var arr = [];
ts.kfList = data.data.kfList;
for(var i = 0; data.data.kfList.length > i; i++) {
arr.push(data.data.kfList[i].mp_unique_no);
}
var param = {
uid: arr.join(),
noncestr: ts.noncestr,
ip: ts.clientip
};
//debugger
$.ajax({
type: "get",
data: param,
url: ts.root + '/api/getMessagCount',
dataType: 'json',
success: function(data) {
ts.msgCountList = data.data;
},
error: function(err) {
}
});
},
error: function(err) {
}
});
ts.company_id = company_id;
/*
*显示聊天窗口
* */
$("body").on("click", ".online", function() {
console.log("click online");
var $t = $(this);
//debugger
ts.unique_no = $t.data("unique_no");
ts.icon = $t.data("icon");
ts.name = $t.data("name");
ts.page = 1;
ts.msgList = [];
var params = {
ip: ts.clientip,
unique_no: ts.unique_no,
noncestr: ts.noncestr,
page: ts.page
}
ts.getHistory(params, false, function() {
console.log("click online baclk");
$("#artCom").removeClass("min_con big_fcon").attr('style', "");
$("#artCom").show();
$("#artCom").find(".icon_img").attr("src", ts.icon);
$("#artCom").find(".user_name").html(ts.name);
//debugger
$(".more_horstry").show();
$(".no_hor_try").hide();
if(!$(".emoji_container").length) {
$("#conect").emoji({
button: "#faceLoad",
showTab: false,
animation: 'slide',
icons: [{
name: "QQ表情",
path: "https://xiaohucloud.cn/asset_admin/emjoy/dist/img/qq/",
maxNum: 91,
excludeNums: [41, 45, 54],
file: ".gif"
}]
});
}
ts.mounted($("#artCom"), "move_part");
if(type == "mobile") {
$(".big_ft").hide();
$("#faceLoad").hide();
}
});
$("#" + id).find(".red_icon").hide();
});
/*
*切换隐藏成小窗口
* */
ts.initWebS();
$("body").on("click", ".close_ft,.msg_bg", function() {
$("#artCom").attr('style', "");
$("#artCom").removeClass("big_fcon min_con").hide();
ts.unique_no = "";
ts.icon = "";
ts.name = "";
//debugger
});
/*
*切换隐藏成小窗口
**/
$("body").on("click", ".min_ft", function() {
$("#artCom").addClass("min_con").removeClass("big_fcon").attr('style', "display: block");
});
/*
*切换成小窗口
**/
$("body").on("click", ".msg_ft", function() {
$("#artCom").attr('style', "display: block");
$("#artCom").removeClass("big_fcon min_con");
});
/*
*切换成大窗口
* */
$("body").on("click", ".big_ft", function() {
$("#artCom").addClass("big_fcon").removeClass("min_con");
urlLink.autoCenter($("#artCom")[0]);
});
/*
* 发送消息
*/
$("body").on("click", ".btn_aty", function() {
console.log("body send");
//debugger
ts.send();
});
/*
* emoji表情
*/
$("body").on("click", ".face_load", function(e) {
console.log("emoji");
$("#emoji_container_1").css({
top: e.pageY + 20,
left: e.pageX - 10
});
//debugger
});
/*
* 加载历史记录
*/
$("body").on("click", ".more_horstry", function() {
//console.log("loadHorstry");
$("#" + id).find(".load_ing").show();
ts.page++;
var params = {
ip: ts.clientip,
noncestr: ts.noncestr,
unique_no: ts.unique_no,
page: ts.page
}
ts.getHistory(params, true);
});
},
kfList: [],
msgCountList: [],
loadHorstry: function(data) {
var ts = this;
},
root: "",
eData: {},
unique_no: "",
icon: "",
noncestr: "",
company_id: "",
name: "",
page: 1,
onLine: [],
firstLi: "",
mounted: function($t, header) {
//声明需要用到的变量
var mx = 0,
my = 0; //鼠标x、y轴坐标(相对于left,top)
var dx = 0,
dy = 0; //对话框坐标(同上)
var isDraging = false; //不可拖动
var ts = this;
//console.log(this.$refs.mtDialog)
document.onkeydown = function(e) {
var key = window.event.keyCode;
if(key == 13) {
//v.editDial.isEdit = false;
}
}
/*window.onresize = function() {
ts.autoCenter($('#' + id)[0]);
};*/
//鼠标按下
$t.on('mousedown', '.' + header, function(e) {
var e = e || window.event;
//console.log("move_part");
e.stopPropagation();
mx = e.pageX; //点击时鼠标X坐标
my = e.pageY; //点击时鼠标Y坐标
dx = $t.position().left;
dy = $t.position().top;
isDraging = true; //标记对话框可拖动
document.onmousemove = function(e) {
var e = e || window.event;
var x = e.pageX; //移动时鼠标X坐标
var y = e.pageY; //移动时鼠标Y坐标
if(isDraging) { //判断对话框能否拖动
var moveX = dx + x - mx; //移动后对话框新的left值
var moveY = dy + y - my; //移动后对话框新的top值
$t[0].style.left = moveX + 'px'; //重新设置对话框的left
$t[0].style.top = moveY + 'px'; //重新设置对话框的top
//设置拖动范围
var pageW = document.documentElement.clientWidth;
var pageH = document.documentElement.clientHeight;
var dialogW = $t.width();
var dialogH = $t.height();
var maxX = pageW - dialogW; //X轴可拖动最大值
var maxY = pageH - dialogH; //Y轴可拖动最大值
moveX = Math.min(Math.max(0, moveX), maxX); //X轴可拖动范围
moveY = Math.min(Math.max(0, moveY), maxY); //Y轴可拖动范围
//console.log("id:"+id+"moveX:"+moveX);
$t[0].style.left = moveX + 'px'; //重新设置对话框的left
$t[0].style.top = moveY + 'px'; //重新设置对话框的top
};
};
});
//console.log(document.onmousemove);
//鼠标离开
document.addEventListener('mouseup', function() {
isDraging = false;
});
//autoCenter($('mtDialog')[0]);
},
fileUpload: function(id, company_id, func) {
var ts = this;
var uploader_file = WebUploader.create({
formData: {
companyId: company_id,
dirId: company_id
},
// swf文件路径
swf: 'webuploader/Uploader.swf',
// 文件接收服务端。
server: 'https://file.xiaohucloud.com/file/upload.action',
// 选择文件的按钮。
pick: {
id: '#' + id,
multiple: true,
label: ''
},
// 选完文件后,是否自动上传
auto: true,
// 上传数量限制
fileNumLimit: 0,
// 限制上传单个文件大小
fileSingleSizeLimit: 1 * 1024 * 1024,
// 限制上传所有文件大小
fileSizeLimit: 20 * 1024 * 1024,
// 让可重复上传
duplicate: true,
// 只允许选择文件格式
/*accept: {
title: 'File',
extensions: 'doc,docx,pdf,zip,rar,jpg,png,gif',
mimeTypes: '.doc,.docx,.pdf,.zip,.rar,.jpg,.png,.gif'
},*/
accept: { // 只允许选择图片文件格式
title: 'Images',
extensions: 'gif,jpg,bmp,png',
mimeTypes: 'image/*'
},
resize: false,
compress: false
});
// 验证文件格式以及文件大小
uploader_file.on("error", function(type) {
if(type == "Q_TYPE_DENIED") {
alert("请上传gif、jpg、png格式的文件");
} else if(type == "Q_EXCEED_SIZE_LIMIT") {
alert("文件大小不能超过10M");
} else if(type == "F_EXCEED_SIZE") {
alert("文件大小不能超过20M");
} else if(type == 'F_DUPLICATE') {
console.log('reply');
} else {
console.log("上传出错!请检查后重新上传!错误代码" + type);
}
});
// 当有文件被添加进队列的时候
uploader_file.on('fileQueued', function(file) {
console.log('等待上传...');
});
// 文件上传过程中创建进度条实时显示。
uploader_file.on('uploadProgress', function(file, percentage) {
console.log('上传中:' + percentage);
});
uploader_file.on('uploadSuccess', function(file, response) {
//console.log('上传成功');
//console.log(response.result);
var result = response.result;
//var url = result.url;
ts.send(result.url);
//fileCon
//$('#fileCon').html(url);
//$('#fileUrl').val(url);
});
uploader_file.on('uploadError', function(file) {
console.log('上传出错');
});
uploader_file.on('uploadComplete', function(file) {
console.log('上传完成');
});
},
params: "",
clientip: $('body').data('clientip') || '192.168.0.180',
getHistory: function(params, flag, fun) {
var ts = this;
//debugger
$.ajax({
type: "get",
url: ts.root + '/api/getMessagHistory',
data: params,
dataType: 'json',
success: function(data) {
$(".load_ing").hide();
ts.params = "";
var historyData = data.data.chatMessage.data;
if(flag) {
historyData.reverse();
}
for(var i = 0; ts.kfList.length > i; i++) {
if(ts.unique_no == ts.kfList[i].mp_unique_no && ts.kfList[i].text) {
ts.params = {
to_uid: ts.clientip,
ip: ts.clientip,
time: "",
noncestr: ts.noncestr,
content_type: 'text', //content_type: 'image'
message: ts.kfList[i].text || ""
};
}
}
//debugger
for(var i = 0; historyData.length > i; i++) {
ts.formatData(historyData[i], flag);
}
ts.params&&!flag && ts.formatData(ts.params, flag);
if(historyData.length) {
ts.formatHtml(flag, fun);
if(flag && historyData.length > 1) {
var top = $(".ui_show").find("li:nth-child(" + (--historyData.length) + ")").offset().top;
var $imgs = $("#uiShow").find("img");
$(".ui_show").scrollTop(top);
$imgs.one('load', function() {
if(flag && historyData.length > 1) {
var top = $(".ui_show").find("li:nth-child(" + (--historyData.length) + ")").offset().top;
$(".ui_show").scrollTop(top);
}
}).each(function() {
if(this.complete) $(this).load();
});
}
} else {
if(!ts.msgList.length) {
ts.params && ts.formatData(ts.params);
}
ts.formatHtml(flag, fun);
$(".more_horstry").hide();
$(".no_hor_try").show();
}
$(".load_ing").hide();
},
error: function(err) {
}
});
},
send: function(msg) {
var ts = this;
var tnf_con = msg || $("#conect").html();
if(!$.trim(tnf_con)) {
return;
}
var params = {
client_id: ts.eData.client_id,
uid: ts.clientip,
to_uid: ts.unique_no,
ip: ts.clientip,
noncestr: ts.noncestr,
content_type: msg ? 'image' : 'text', //content_type: 'image'
message: tnf_con
};
$("#conect").html("");
$.ajax({
type: "post",
url: ts.root + '/api/ws/sends',
data: params,
dataType: 'json',
success: function(data) {
},
error: function(err) {
//console.log("error")
}
});
},
initWebS: function() {
var ts = this;
ts.ws = ts.ws || new WebSocket("wss://xiaohucloud.cn/wss");
ts.ws.onopen = function(evt) { //绑定连接事件
console.log("connection open ...");
ts.ws.send("发送的数据");
};
ts.ws.onmessage = function(evt) { //绑定收到消息事件
ts.eData = JSON.parse(evt.data);
if(ts.eData.type == "init") {
var params = {
client_id: ts.eData.client_id,
uid: $('body').data('clientip') || '192.168.0.180',
to_uid: ts.unique_no,
noncestr: ts.noncestr || "",
message: "..."
};
$.ajax({
type: "post",
url: ts.root + '/api/ws/binds',
data: params,
//async: async,
//crossDomain: true,
//contentType: false,
//processData: false,
dataType: 'json',
success: function(da) {
// debugger
ts.noncestr = da.noncestr;
localStorage.setItem("noncestr", da.noncestr)
},
error: function(err) {
}
});
} else if(ts.eData.type == "send") {
if($("#artCom").hasClass("min_con")) {
$("#m" + ts.eData.uid).find(".red_icon").show();
} else if(ts.eData.to_uid == ts.unique_no || ts.eData.uid == ts.unique_no) {
ts.formatData(ts.eData);
ts.formatHtml();
} else {
$("#m" + ts.eData.uid).find(".red_icon").show();
}
}
// console.log("list Message: " + JSON.stringify(ts.eData));
};
ts.ws.onclose = function(evt) { //绑定关闭或断开连接事件
console.log("connection closed.");
online.initWebS();
// ts.ws = new WebSocket("wss://xiaohucloud.cn/wss");
};
}
};