YH_Web_UI/WebUI/CallCenterWe.../zyChat/js/chat.js

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 touserid;
var aa;
var flag=0;
var flagAct;
var id = parseInt(Math.random() * 100000);
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;
}
//获取客服工号
getTouserid();
//获取聊天列表
getchatinglist();
GetOnlineservicetinfo()
aa = setInterval(function() {
	GetOnlineservicetinfo()
}, 500)
//移动拖拽弹框
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() {
	window.location.href = "javascript:history.go(-1)";
	clearInterval(aa)
})
//列表点击样式
$('.sidebar_list').click(function(e) {
	if(e.target.tagName != 'LI') {
		return;
	}
	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()
	console.log(touserid)
	$('.name').text(touserid);
	GetOnlineservicetinfo()
})
//快捷消息回复模板
//快捷消息回复模板
$('.reply_btn').click(function() {
	if ($('.con').css('display') == 'block') {
		$('.con').hide()
	} else {
		$('.con').show()
	}
	$('.replyType_cont').hide()
	getMessage();
})
$('.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()
})
$('.replyType_btn').click(function(){
	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();
});
//快捷回复
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 += '<li>' + (n + 1) + '、' + v.massmodelcenter + '</li>'
			})
			$('.con').html(messageStr);
		}
	});
}
//发送图片
//图片上传预览 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 = '<img id=imghead>';
		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 getReplyType(){
	$('.replyType_cont').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'){
						layer.msg("提交成功", {
							time: 1500,
							icon: 1
						});
						$('.replyType_cont').hide()
					}
				}
			});
		}
		
	})	
}
//发送消息
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('')
			}
		});
	}
	
}

//获取聊天记录
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 += '<li><p class="message_time "><span>' + v.createtime +
							'</span></p><div class="message_mincon self"><div class="message_img "><img  onclick="imgEnlarge()" src="' +huayi.config.img_url+
							v.imgurlinfo  + '"></div></div></li>'
						
					}else{
						str1 += '<li><p class="message_time "><span>' + v.createtime +
							'</span></p><div class="message_mincon self"><div class="message_text ">' +
							v.Msgcontent + '</div></div></li>'
					}
				} else {
					if(v.imgurlinfo!=null&&v.imgurlinfo!=''){
						str1 += '<li><p class="message_time "><span>' + v.createtime +
							'</span></p><div class="message_mincon"><div class="message_img"><img  onclick="imgEnlarge()" src="' +huayi.config.img_url+
							v.imgurlinfo  + '"></div></div></li>'
					}else{
						str1 += '<li><p class="message_time "><span>' + v.createtime +
							'</span></p><div class="message_mincon"><div class="message_text ">' +
							v.Msgcontent + '</div></div></li>'
					}
					
				}
			})
			$('.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参数）
	});
	// $('.imgDetial').html('<span class="closeIcon" onclick="closeImg()">×</span><img src="'+huayi.config.img_url+str+'">');
	// $('.imgDetial').css('display','block')
}
function closeImg(){
	$('.imgDetial').css('display','none')
}
//获取客服工号
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;
			$('.name').text(touserid)
		}
	});
}

//获取聊天列表
function getchatinglist() {
	$.ajax({
		type: "get",
		url: huayi.config.callcenter_url + "testusertypeapi/api/TestUserType/getchatinglist",
		async: true,
		dataType: 'json',
		data: {
			usercode: userCode
		},
		success: function(res) {
			let str = '';
			let num;
			res.data.forEach(function(v, n) {
				str += '<li><p class="chat_name">' + v.usercode + '</p></li>'
			})
			$('.sidebar_list').html(str);
			
			let className=document.getElementsByClassName('chat_name');
			for(let i=0;i<className.length;i++){
				if(className[i].innerText==String(touserid)){
					num=i-1
					$(".sidebar_list li").eq(num).addClass('actives');
				}
			}
		}
	});
}

//查看更多
function getmore(ele) {
	console.log("你点击了查看更多")
}