yiheRepair/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 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 = '<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('')
			}
		});
	}

}
////消息
//$.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 += '<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 personName">' + v.usercode + '</p></li>'
			})
			$('.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";
// }