'
}
}
if (item.is_customer){
if (item.content_type == 'text'){
mhtml += '
'
}else if (item.content_type == 'picture'){
mhtml += '
'
}else if (item.content_type == 'video'){
mhtml += '
'
}
}
if (mhtml.length > 0){
$(".chatMeassge").append(mhtml);
}
})
baguetteBox.run('.chatMeassge');
let tt2 = setTimeout(function () {
$('.chatMeassge').scrollTop($('.chatMeassge')[0].scrollHeight);
}, 500);
$(".blockScreen").hide();
}
let site_data = back_data.site_data;
if (site_data){
if (site_data.site_right_info_back_color){
$(".problemBox").css('background-color', site_data.site_right_info_back_color);
}
if (site_data.site_right_info_img){
$(".problemBox .advertisement").find('img').attr('src', site_data.site_right_info_img)
}else{
$(".problemBox .advertisement").find('img').hide();
}
if (site_data.site_main_color){
$(".evaluateForm .subComment").css('background-color', site_data.site_main_color);
$(".chatTextBox .optionBtn").css('background-color', site_data.site_main_color);
$(".TextBox .iconfont").css('color', site_data.site_main_color);
}
if (site_data.site_title){
$("title").text(site_data.site_title);
}
if (site_data.site_icon){
$("link[rel='icon']").attr('href',site_data.site_icon);
}
if (site_data.site_announcement){
$("#site_announcement").parent().show();
$("#site_announcement").append(site_data.site_announcement);
}else{
$("#site_announcement").parent().hide();
}
}
foowwLocalStorage.set(chatUsidKey, back_data.chatUsid, new Date().getTime() + 60000 * 60 * 24);
console.log('连接初始化成功！')
}else {
$("body").empty();
console.log('连接初始化失败！')
}
})
// 接收customer servicemessage
socket_app.on('chatReceiveServiceMessage', function (msg) {
let sHtml = '';
if (msg.content_type === 'text'){
sHtml += '
' +
'
' +
'
' +
'
' + chatConfig.service_data.service_name + '
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'' + msg.filename + '' +
''+ msg.file_size +'' +
'
' +
'
' +
'download' +
'
'
}
if (windowFocusStatu){
customerWinFocus_func()
}
$(".chatMeassge").append(sHtml);
baguetteBox.run('.chatMeassge');
let tt = setTimeout(function () {
$('.chatMeassge').scrollTop($('.chatMeassge')[0].scrollHeight);
}, 500);
})
// 上传picture反馈
socket_app.on('chatUploadFeedback', function (msg) {
let state = msg.state;
let _data = msg.data;
if (state !== 200){return;}
let uoloadCode = _data.uoloadCode;
let file_path = _data.file_path;
if (!uoloadCode){return}
let imgObj = $("#" + uoloadCode);
imgObj.find('.loading').hide();
imgObj.find('a').attr('href', file_path).show();
imgObj.find('a').find('img').attr('src', file_path);
baguetteBox.run('.chatMeassge');
let tt = setTimeout(function () {
$('.chatMeassge').scrollTop($('.chatMeassge')[0].scrollHeight);
}, 500);
})
// 接收服务器反馈
socket_app.on('chatReceiveServerFeedback', function (msg) {
let result_data = msg.data;
let action = result_data.action;
if (action === 'left_customer_score') {
// 左侧评论反馈
$(".evaluateForm").hide();
$(".evaluateSuccess").show();
$(".scoreSubLoading").css('display', 'none');
$(".scoreSuccessBox").css('display', 'flex');
} else if (action === 'serverUploadFeedback') {
// 客户端上次文件，反馈
if (msg.code === 200) {
let _data = msg.data;
let uoloadCode = _data.uoloadCode;
let file_path = _data.file_path;
if (!uoloadCode) {return}
let imgObj = $("#" + uoloadCode);
imgObj.find('.loading').hide();
imgObj.find('a').attr('href', file_path).show();
imgObj.find('a').find('img').attr('src', file_path);
imgObj.find('.time').show();
baguetteBox.run('.chatMeassge');
$("#uploadfile").val('');
let tt = setTimeout(function () {
let chatM = $('.chatMeassge');
chatM.scrollTop(chatM[0].scrollHeight);
}, 500);
}
}else if(action === 'finish_conversation'){
// 结束对话评论，处理反馈
if (msg.code === 200){
alert('Conversation ended！')
$("#diaShade").hide(0);
$(".chatTextBox").hide(0);
$(".chatFinishTextBox").show(0);
}
}else if(action === 'serviceColseChat'){
// 服务端主动结束会话
if (result_data.score_state){
$("#diaShade").hide(0);
$(".chatTextBox").hide(0);
$(".chatFinishTextBox").show(0);
}else {
$(".chatTextBox").hide(0);
$(".chatFinishTextBox").show(0);
$("#diaShade").show(0);
$(".dialogWrapDanFu").show();
$(".confirmModal").hide();
$("#colse_dialogWrapDanFu").hide();
}
}else if(action === 'serviceRetractMessage'){
// 服务器主动撤回消息
const crr_messageObj = $("div[data-uuid='"+result_data.dataId+"']");
// const html = '
The other party, withdrew a message
'
// crr_messageObj.empty().append(html)
crr_messageObj.empty()
} else if (action === 'serverReply'){
if (result_data.statu === 'ongoing'){
let htmll = '
'+zzsrz+'
'
$(".serverReplyStatu").remove()
$(".chatMeassge").find('.chatL').eq(-1).find('.chatting-left').append(htmll);
}else {
$(".serverReplyStatu").remove();
}
}
})
//jQuery实时监听input值变化
$("#textContent").on("input valuechange",function(){
let strText = $.trim($(this).val());
let chatUsid = foowwLocalStorage.get(chatUsidKey);
let chatSession = foowwLocalStorage.get(chatSessionKey);
socket_app.emit('realTimeInputMessage', {'text': strText, 'chatSession': chatSession, 'chatUsid': chatUsid})
});
// 点击发送
$("#faSongBtn").on('click', function () {
let chatUsid = foowwLocalStorage.get(chatUsidKey);
let chatSession = foowwLocalStorage.get(chatSessionKey);
let textMag = $.trim($("#textContent").val());
if (!textMag){
return alert('Please enter content!！')
}
socket_app.emit('chatReceiveMessage', {'text': textMag, 'chatSession': chatSession, 'chatUsid': chatUsid, 'type': 'text'});
socket_app.emit('realTimeInputMessage', {'text': '', 'chatSession': chatSession, 'chatUsid': chatUsid})
let html = '';
let crr_time = new Date();
let daTime = formatDate(crr_time, 'MM-dd hh:mm');
html += '
' +
'
' + '
' +
'
' +
'
' + textMag + '
' +
'
' + daTime + '
' +
'
'
$(".chatMeassge").append(html);
$('.chatMeassge').scrollTop($('.chatMeassge')[0].scrollHeight);
$("#textContent").val('');
})
// 回车键发送消息
$("#textContent").keydown(function (e) {
if ((e.ctrlKey == true) && (e.key == "Enter")) {
var mtxt = $("#textContent");
mtxt.val(mtxt.val() + '\n');
}else if(e.key == "Enter" && !e.ctrlKey){
e.preventDefault();
$("#faSongBtn").click();
}
})
// 发送picture触发函数
$("#uploadfile").on('change', function () {
let objt = $("#uploadfile");
let chatUsid = foowwLocalStorage.get(chatUsidKey);
let chatSession = foowwLocalStorage.get(chatSessionKey);
if (objt.get(0).files.length <= 0){
return
}
let filename = objt.get(0).files[0].name;
let filesize = objt.get(0).files[0].size;
let _ftype_arr = filename.split('.');
let _ftype = _ftype_arr[_ftype_arr.length-1]
let _ftype_to = '.' + _ftype.toLocaleLowerCase()
let imgindex = $.inArray(_ftype_to, image_types);
let videoindex = $.inArray(_ftype_to, video_types);
if (filesize > file_size){
return alert('File too large！')
}
if (imgindex >= 0){
return send_chat_images(objt.get(0).files[0], chatUsid, chatSession, filename, filesize)
}else if(videoindex >= 0){
return snd_chat_video(objt.get(0).files[0], chatUsid, chatSession, filename, filesize)
}else{
return alert('文件格式错误!~~~~~'+filename)
}
})
// submit评论
$("#subCommentBtn").on('click', function () {
if ($(".pingFen").find('.active').length <= 0){
return alert('Please select rating level!')
}
let level = parseInt($(".pingFen").find('.active').attr('data-fenshu'));
let cntText = $.trim($("#commentText").val());
if (!cntText){return alert('Please enter the rating content!！')}
let chatUsid = foowwLocalStorage.get(chatUsidKey);
let chatSession = foowwLocalStorage.get(chatSessionKey);
let _data = {
'action':'left_customer_score',
'level': level,
'cntText': cntText,
'chatUsid': chatUsid,
'chatSession': chatSession,
}
$(".evaluateForm").hide();
$(".evaluateSuccess").show();
$(".scoreSubLoading").css('display', 'block');
$(".scoreSuccessBox").css('display', 'none');
socket_app.emit('customerScore', _data)
})
// 结束会话
$("#finishConversation").on('click', function () {
$("#diaShade").show();
$(".dialogWrapDanFu").hide();
$(".promptBox").find('.xw').show();
$(".promptBox").find('img').hide();
$(".confirmModal").show();
})
$(".cancelBtn").on('click', function (){
$("#diaShade").hide();
})
$(".confirmBtn").on('click', function () {
if ($(".promptBox").find('.xw').css('display') === 'block'){
let chatUsid = foowwLocalStorage.get(chatUsidKey);
let chatSession = foowwLocalStorage.get(chatSessionKey);
let _data = {
chatUsid: chatUsid,
chatSession: chatSession,
}
socket_app.emit('finishConversation',_data);
return
if (chatConfig.is_score){
$("#diaShade").hide();
let _data = {
chatUsid: chatUsid,
chatSession: chatSession,
}
socket_app.emit('finishConversation',_data);
}else {
$("#diaShade").show();
$(".dialogWrapDanFu").show();
$(".confirmModal").hide();
}
}else if($(".promptBox").find('img').css('display') !== 'none'){
$(".promptBox").find('img').attr('src', '');
$(".promptBox").find('img').css('display', 'none');
$("#diaShade").hide();
$(".dialogWrapDanFu").hide();
$(".confirmModal").hide();
let filename = clipboardFile.name;
let filesize = clipboardFile.size;
let _ftype_arr = filename.split('.');
let _ftype = _ftype_arr[_ftype_arr.length-1]
let _ftype_to = '.' + _ftype.toLocaleLowerCase()
let imgindex = $.inArray(_ftype_to, image_types);
let videoindex = $.inArray(_ftype_to, video_types);
if (filesize > file_size){
return alert('File too large！')
}
let chatUsid = foowwLocalStorage.get(chatUsidKey);
let chatSession = foowwLocalStorage.get(chatSessionKey);
if (imgindex >= 0){
return send_chat_images(clipboardFile, chatUsid, chatSession, filename, filesize)
}else if(videoindex >= 0){
return snd_chat_video(clipboardFile, chatUsid, chatSession, filename, filesize)
}else{
return alert('文件格式错误!~~~~~'+filename)
}
}
})
// 评论弹窗submit
$(".subPingLunBtn").on('click', function () {
let level = $(".pfLevel .icon-pingfen").length;
let cntText = $.trim($("#pinLunText").val());
if (level <= 0){return alert('Please select rating level!');}
if (!cntText){return alert('Enter customer service！');}
let chatUsid = foowwLocalStorage.get(chatUsidKey);
let chatSession = foowwLocalStorage.get(chatSessionKey);
let _data = {
chatUsid: chatUsid,
chatSession: chatSession,
level: level,
cntText: cntText,
action: 'sub_opl',
}
socket_app.emit('finishConversation',_data);
})
// 监控粘贴板上传picture
$("#textContent").bind("paste",function(e){
// 获取文本值
// let textl = event.clipboardData.getData('text');
if (event.clipboardData.files.length <=0 ){
return;
}
let file = event.clipboardData.files[0];
// 判断类型
if (!(/^image\/[jpeg|png|gif|jpg]/.test(file.type))) {
return;
}
// 读取成base64
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (event) {
$("#diaShade").show();
$(".dialogWrapDanFu").hide();
$(".confirmModal").show();
$(".promptBox").find('.xw').hide();
let c_img_obj = $(".promptBox").find('img');
c_img_obj.attr('src', event.target.result)
c_img_obj.show();
}
clipboardFile = file;
})
// 问题选择监控
$("input[type='radio']").on('click', function () {
let problem = $.trim($("input[name='problem']:checked").val());
console.log('problem:', problem)
$(".demoIMage img").attr('src', '');
if (problem === 'czwt'){
$("#account").parent().show();
$("#czTime").parent().show();
$("#problemImage").parent().show();
$("#cjhdText").parent().hide();
$("#txTme").parent().hide()
}else if (problem === 'txwt'){
$("#account").parent().show();
$("#txTme").parent().show();
$("#problemImage").parent().show();
$("#cjhdText").parent().hide();
$("#czTime").parent().hide();
}else if (problem === 'cjsq'){
$("#account").parent().show();
$("#cjhdText").parent().css('display', 'flex');
$("#problemImage").parent().hide();
$("#txTme").parent().hide();
$("#czTime").parent().hide();
}else if (problem === 'qtwt'){
$("#account").parent().hide();
$("#cjhdText").parent().hide();
$("#problemImage").parent().hide();
$("#txTme").parent().hide();
$("#czTime").parent().hide();
$(".subBtn").hide();
$(".enterBtn").show();
}
})
})
// submit留言
function sub_LeaveMessage_func() {
let chatUsid = foowwLocalStorage.get(chatUsidKey)
if (!chatUsid){
alert('The page stays too long, please refresh and try again!！')
return location.reload();
}
let username = $.trim($("#username").val());
let telephone = $.trim($("#telephone").val());
let email = $.trim($("#email").val());
let note = $.trim($("#note").val());
if (username && username.length > 10){
return alert('Name length is too long！')
}
if (note && note.length > 500){
return alert('Note length is too long！')
}
var reg =/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if (email && !reg.test(email)){
return alert('Please enter a valid email address！')
}
if (!username){return alert('Please type in your name!')}
if (!telephone){return alert('please enter phone number!')}
if (!note){return alert('Please enter a note!')}
let pdata = {'action': 'subLeaveMessage', 'username': username, 'telephone': telephone, 'email': email, 'note':note, 'chatUsid': chatUsid, 'site_code': sessionCode};
socket_app.emit('leaveMessage', pdata)
$(".LeaveMessage").hide();
alert('Your information has been submitted successfully!')
let ttt = setTimeout(function () {
}, 3000)
}
// 评分
function pf_func(obj) {
if (obj.hasClass('icon-pingfen1')){
obj.removeClass('icon-pingfen1').addClass('icon-pingfen');
}else {
obj.removeClass('icon-pingfen').addClass('icon-pingfen1');
}
}
// 文件download
function download_func(fileUrl) {
var link = document.createElement('a');
link.setAttribute("download", "");
link.href = fileUrl;
link.click();
link.remove();
}
// 发送picture
function send_chat_images(imgfile, chatUsid, chatSession, filename, filesize) {
let crr_time = new Date();
let crr_timeC = Date.parse(crr_time);
let daTime = formatDate(crr_time, 'MM-dd hh:mm');
let uoloadCode = getRandomString(6) + crr_timeC;
let chatMeassgeObj = $(".chatMeassge");
let html = '';
html += '
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
![]()
' +
'
' + daTime + '
' +
'
' +
'
'
chatMeassgeObj.append(html);
chatMeassgeObj.scrollTop(chatMeassgeObj[0].scrollHeight);
var formdata = new FormData();
formdata.append("upload", imgfile);
formdata.append("action",'chatUploadImage');
formdata.append("chatUsid", chatUsid);
formdata.append("chatSession", chatSession);
formdata.append("filename", filename);
formdata.append("filesize", filesize);
xtajax.post({
'data':formdata,
'contentType':false,
'processData': false,
'success': function (data) {
console.log('update img:', data)
if (data.code === 200){
socket_app.emit('chatUploadFile', {'image': data.message, 'chatSession': chatSession, 'chatUsid': chatUsid, 'uoloadCode': uoloadCode, 'action': 'upload_image'});
}else{
$("#"+uoloadCode).parent().parent().parent().remove();
return alert(data.message);
}
}
})
}
// 发送视频
function snd_chat_video(imgfile, chatUsid, chatSession, filename, filesize) {
let crr_time = new Date();
let crr_timeC = Date.parse(crr_time);
let daTime = formatDate(crr_time, 'MM-dd hh:mm');
let uoloadCode = getRandomString(6) + crr_timeC;
let chatMeassgeObj = $(".chatMeassge");
let html = '';
html += '
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
\n' +
' \n' +
'
\n' +
'
\n' +
'
' + filename + '
\n' +
'
'+filesize+'B
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
'
chatMeassgeObj.append(html);
chatMeassgeObj.scrollTop(chatMeassgeObj[0].scrollHeight);
var send_showprogress = function (evt) {
var loaded = evt.loaded;
var tot = evt.total;
var percent = Math.floor(100*loaded/tot);
var progressbar = $('#'+uoloadCode+' .progress-bar');
// progressbar.html(percent+'%');
// progressbar.attr('aria-valuenow',percent);
progressbar.css('width',percent +'%');
}
var send_hideprogressbar = function () {
var progressbar = $('#'+uoloadCode).find('.progress');
progressbar.html('0%');
progressbar.attr('aria-valuenow',0);
progressbar.css('width','0%');
progressbar.remove();
}
var formdata = new FormData();
formdata.append("upload", imgfile);
formdata.append("action",'chatUploadVideo');
formdata.append("chatUsid", chatUsid);
formdata.append("chatSession", chatSession);
formdata.append("filename", filename);
formdata.append("filesize", filesize);
xtajax.post({
'data':formdata,
'contentType':false,
'processData': false,
'progress': send_showprogress,
'success': function (data) {
console.log('update video:', data)
if (data.code === 200){
socket_app.emit('chatUploadFile', {'video': data.message, 'chatSession': chatSession, 'chatUsid': chatUsid, 'uoloadCode': uoloadCode, 'action': 'upload_video', 'filename': filename, 'filesize': filesize});
let ssst = setTimeout(function () {
send_hideprogressbar();
}, 1000)
}else{
$("#"+uoloadCode).parent().parent().parent().remove();
return alert(data.message);
}
}
})
}