zzdyrmyyUI/WebUI/CallCenterWe.../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 seatFlag = window.localStorage.getItem('seatFlag')
var touserid;
var aa,fq;
var flag;
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;
}
if(seatFlag=='true'){
	$('.replyType_btn').show()
}else{
	$('.replyType_btn').hide()
}
getInforNotice()
fq=setInterval(function(){
	getInforNotice()
},5000)
//console.log(document.cookie.getItem('touristCode'))
//获取客服工号
getTouserid();
//获取聊天列表
getchatinglist();
//};
$('.open_chat').click(function() {
	if ($('#chat').css('display') == 'block') {
		$('#chat').hide();
	} else {
		$('#chat').show();
	}
	clearInterval(fq)
	getNoneInfor()
	$('.name').text(userCode);
	GetOnlineservicetinfo()
	aa = setInterval(function() {
		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() {
	$('.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') {
		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()
	$('.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 ($('.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) {
			if(res.data==0){
				$('.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').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()
					}
				}
			});
		}
		
	})	
}
//图片上传预览 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 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);
		}
	});
}

//发送消息
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参数）
	});
}
//获取客服工号
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 += '<li><p class="chat_name">' + v.usercode + '</p></li>'
			})
			$('.sidebar_list').html(str);
			// $(".sidebar_list li").eq(0).addClass('actives')
			let className=document.getElementsByClassName('chat_name');
				console.log(touserid)
			for(let i=0;i<className.length;i++){
				if(className[i].innerText==String(touserid)){
					num=i-1
					console.log(num)
					$(".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";
// }