|
...
|
...
|
@@ -13,77 +13,11 @@ var $ = require('yoho-jquery'), |
|
|
|
require('bootstrap');
|
|
|
|
require('../common');
|
|
|
|
|
|
|
|
config.conversationMessage.userId = 15575902; // todo 暂时写死
|
|
|
|
config.conversationMessage.userId = 15575902; // todo userId 暂时写死
|
|
|
|
|
|
|
|
var conversationMessage = config.conversationMessage;
|
|
|
|
var cM = config.conversationMessage;
|
|
|
|
|
|
|
|
socketChat.init(Object.assign(config, {
|
|
|
|
|
|
|
|
onOpen: function (e) {
|
|
|
|
console.log('websocket opened!')
|
|
|
|
},
|
|
|
|
|
|
|
|
onMessage: function (e) {
|
|
|
|
var jsonString = e.data;
|
|
|
|
var received = JSON.parse(jsonString);
|
|
|
|
conversationMessage.conversationId = received.conversationId;
|
|
|
|
console.log('监听到消息时：received=', received);
|
|
|
|
},
|
|
|
|
|
|
|
|
onClose: function() {
|
|
|
|
console.log('websocket closed!')
|
|
|
|
}
|
|
|
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
// 调整窗口位置
|
|
|
|
$(window).on('resize', function() {
|
|
|
|
var vh = $(this).height(),
|
|
|
|
vw = $(this).width();
|
|
|
|
|
|
|
|
$('.chat-panel').css({
|
|
|
|
width: vw - (vh - (70 + 950) / 1.7),
|
|
|
|
'margin-left': (vh - (70 + 950) / 1.7) / 2
|
|
|
|
}).show();
|
|
|
|
}).trigger('resize');
|
|
|
|
|
|
|
|
// 获取鼠标位置
|
|
|
|
$.fn.getCursorPosition = function() {
|
|
|
|
var el = $(this).get(0);
|
|
|
|
var pos = 0;
|
|
|
|
|
|
|
|
if ('selectionStart' in el) {
|
|
|
|
pos = el.selectionStart;
|
|
|
|
} else if ('selection' in document) {
|
|
|
|
el.focus();
|
|
|
|
var Sel = document.selection.createRange();
|
|
|
|
var SelLength = document.selection.createRange().text.length;
|
|
|
|
|
|
|
|
Sel.moveStart('character', -el.value.length);
|
|
|
|
pos = Sel.text.length - SelLength;
|
|
|
|
}
|
|
|
|
return pos;
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// // 图片上传
|
|
|
|
// $('#sendImg').fileupload({
|
|
|
|
// dataType: 'json',
|
|
|
|
// url: 'test',
|
|
|
|
// done: function(e, data) {
|
|
|
|
// $.each(data.result.files, function(index, file) {
|
|
|
|
// $('<p/>').text(file.name).appendTo(document.body);
|
|
|
|
// });
|
|
|
|
// }
|
|
|
|
// });
|
|
|
|
|
|
|
|
// enter提交 ctrl+enter换行
|
|
|
|
$('.msg-edit .msg-area').on('keydown', msgEnterAction);
|
|
|
|
|
|
|
|
// 常见问题
|
|
|
|
$('.qa-list .q').on('click', toggleAnswer);
|
|
|
|
|
|
|
|
$('.send-order').on('click', sendOrderInfo);
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
...
|
...
|
@@ -180,6 +114,10 @@ function dispatchUtil(e) { |
|
|
|
$('#makeEvaluation').modal({
|
|
|
|
show: true
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
3: function() {
|
|
|
|
connectService();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
...
|
...
|
@@ -369,7 +307,7 @@ function msgEnterAction(e) { |
|
|
|
|
|
|
|
if (!ctrlLike) {
|
|
|
|
e.preventDefault();
|
|
|
|
sendMsg(e);
|
|
|
|
_sendMessage(e);
|
|
|
|
} else {
|
|
|
|
var tag = $(e.target),
|
|
|
|
pos = tag.getCursorPosition(),
|
|
...
|
...
|
@@ -385,22 +323,6 @@ function msgEnterAction(e) { |
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 发送消息
|
|
|
|
* @param e
|
|
|
|
*/
|
|
|
|
function sendMsg(e) {
|
|
|
|
var tag = $(e.target),
|
|
|
|
msg = tag.val();
|
|
|
|
|
|
|
|
if (!msg) return;
|
|
|
|
conversationMessage.type = 3;
|
|
|
|
conversationMessage.message.content = msg;
|
|
|
|
// conversationMessage.uuid = uuid.randomUUID();
|
|
|
|
console.log('消息发送时conversationMessage=', conversationMessage);
|
|
|
|
socketChat.send(JSON.stringify(Object.assign(conversationMessage)));
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 常见问题
|
|
|
|
* @param e
|
|
|
|
*/
|
|
...
|
...
|
@@ -423,16 +345,199 @@ function sendOrderInfo(e) { |
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 连接客服
|
|
|
|
* @param e
|
|
|
|
* 连线客服
|
|
|
|
* @param
|
|
|
|
*/
|
|
|
|
function connectService() {
|
|
|
|
conversationMessage.type = 2;
|
|
|
|
console.log('连线客服时：', conversationMessage);
|
|
|
|
socketChat.send(JSON.stringify(conversationMessage));
|
|
|
|
cM.type = 2;
|
|
|
|
socketChat.send(JSON.stringify(cM));
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 处理收到消息
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
function _getMessage(received) {
|
|
|
|
console.log('客户收到消息！', received);
|
|
|
|
|
|
|
|
var recType = received.type,
|
|
|
|
message = received.message,
|
|
|
|
msgType = message.type,
|
|
|
|
allTypes = config.receivedType;
|
|
|
|
|
|
|
|
// 请求人工/接入人工成功/接入人工失败
|
|
|
|
var tipTpl;
|
|
|
|
|
|
|
|
if (recType === 2) {
|
|
|
|
switch(msgType) {
|
|
|
|
case 0: // 0是没上班
|
|
|
|
tipTpl = `<div class="list-item">
|
|
|
|
<p class="push-tip">
|
|
|
|
<span class="tip">${message.content}</span>
|
|
|
|
</p>
|
|
|
|
</div>`;
|
|
|
|
break;
|
|
|
|
case 1: // 1是需要排队
|
|
|
|
tipTpl = `<div class="list-item">
|
|
|
|
<p class="push-tip">
|
|
|
|
<span class="tip">${message.content}您也可以选择<a class="leave-msg">留言</a>！</span>
|
|
|
|
</p>
|
|
|
|
</div>`;
|
|
|
|
break;
|
|
|
|
case 2: // 2是接入人工成功
|
|
|
|
tipTpl = `<div class="list-item">
|
|
|
|
<p class="push-tip">
|
|
|
|
<span class="tip">${message.content}</span>
|
|
|
|
</p>
|
|
|
|
</div>`;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 待重构
|
|
|
|
if(recType === 3 || recType === 103 || recType === 10003) {
|
|
|
|
|
|
|
|
message.newContent = message.newContent.replace(/src="(\d{3}).gif"/g, 'src="/img/service/emoji/$1.gif"');
|
|
|
|
message.content = message.content.replace(/src="(\d{3}).gif"/g, 'src="/img/service/emoji/$1.gif"');
|
|
|
|
if(recType === 3) {
|
|
|
|
tipTpl = `<div class="list-item host">
|
|
|
|
<img src="/img/service/cus-avatar.png" class="avatar">
|
|
|
|
<div class="item-detail">
|
|
|
|
<span class="time">18823562175 10:14:37</span>
|
|
|
|
<div class="msg-bubble">
|
|
|
|
<div>${message.newContent}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>`
|
|
|
|
}
|
|
|
|
|
|
|
|
if(recType === 103) {
|
|
|
|
|
|
|
|
tipTpl = `<div class="list-item guest">
|
|
|
|
<img src="/img/service/agent-avatar.png" class="avatar">
|
|
|
|
<div class="item-detail">
|
|
|
|
<span class="time">客服机器人 10:14:37</span>
|
|
|
|
<div class="msg-bubble">
|
|
|
|
<div>${message.newContent}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>`
|
|
|
|
}
|
|
|
|
|
|
|
|
if(recType === 10003) {
|
|
|
|
|
|
|
|
tipTpl = `<div class="list-item guest">
|
|
|
|
<img src="/img/service/agent-avatar.png" class="avatar">
|
|
|
|
<div class="item-detail">
|
|
|
|
<span class="time">客服助手 10:14:37</span>
|
|
|
|
<div class="msg-bubble">
|
|
|
|
<div>${message.newContent}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if(recType === 999999999) {
|
|
|
|
tipTpl = `<div class="list-item">
|
|
|
|
<p class="push-tip">
|
|
|
|
<span class="tip">${message.content}<a class="red-tip reconnect">连线客服</a></span>
|
|
|
|
</p>
|
|
|
|
</div>`;
|
|
|
|
}
|
|
|
|
|
|
|
|
$('.msg-list').append(tipTpl);
|
|
|
|
|
|
|
|
$('.panel-main .main-body').scrollTop($('.panel-main .main-body')[0].scrollHeight);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 处理发送消息
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
function _sendMessage(e, msgType) {
|
|
|
|
var tag = $('.msg-area'),
|
|
|
|
msg = tag.val().trim();
|
|
|
|
|
|
|
|
if (!msg) return;
|
|
|
|
cM.type = 3;
|
|
|
|
cM.message.content = msg;
|
|
|
|
cM.message.type = msgType || 1;
|
|
|
|
cM.uuid = uuid.v4(); // 用于标示当条消息
|
|
|
|
socketChat.send(JSON.stringify(Object.assign(cM)));
|
|
|
|
tag.val('');
|
|
|
|
}
|
|
|
|
|
|
|
|
socketChat.init(Object.assign(config, {
|
|
|
|
|
|
|
|
onOpen: function (e) {
|
|
|
|
console.log('websocket opened!')
|
|
|
|
},
|
|
|
|
|
|
|
|
onMessage: function (e) {
|
|
|
|
var jsonString = e.data;
|
|
|
|
var received = JSON.parse(jsonString);
|
|
|
|
|
|
|
|
cM.conversationId = received.conversationId;
|
|
|
|
_getMessage(received);
|
|
|
|
},
|
|
|
|
|
|
|
|
onClose: function() {
|
|
|
|
console.log('websocket closed!')
|
|
|
|
}
|
|
|
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
// 调整窗口位置
|
|
|
|
$(window).on('resize', function() {
|
|
|
|
var vh = $(this).height(),
|
|
|
|
vw = $(this).width();
|
|
|
|
|
|
|
|
$('.chat-panel').css({
|
|
|
|
width: vw - (vh - (70 + 950) / 1.7),
|
|
|
|
'margin-left': (vh - (70 + 950) / 1.7) / 2
|
|
|
|
}).show();
|
|
|
|
}).trigger('resize');
|
|
|
|
|
|
|
|
// 获取鼠标位置
|
|
|
|
$.fn.getCursorPosition = function() {
|
|
|
|
var el = $(this).get(0);
|
|
|
|
var pos = 0;
|
|
|
|
|
|
|
|
if ('selectionStart' in el) {
|
|
|
|
pos = el.selectionStart;
|
|
|
|
} else if ('selection' in document) {
|
|
|
|
el.focus();
|
|
|
|
var Sel = document.selection.createRange();
|
|
|
|
var SelLength = document.selection.createRange().text.length;
|
|
|
|
|
|
|
|
Sel.moveStart('character', -el.value.length);
|
|
|
|
pos = Sel.text.length - SelLength;
|
|
|
|
}
|
|
|
|
return pos;
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// // 图片上传
|
|
|
|
// $('#sendImg').fileupload({
|
|
|
|
// dataType: 'json',
|
|
|
|
// url: 'test',
|
|
|
|
// done: function(e, data) {
|
|
|
|
// $.each(data.result.files, function(index, file) {
|
|
|
|
// $('<p/>').text(file.name).appendTo(document.body);
|
|
|
|
// });
|
|
|
|
// }
|
|
|
|
// });
|
|
|
|
|
|
|
|
// enter提交 ctrl+enter换行
|
|
|
|
$('.msg-edit .msg-area').on('keydown', msgEnterAction);
|
|
|
|
|
|
|
|
// 常见问题
|
|
|
|
$('.qa-list .q').on('click', toggleAnswer);
|
|
|
|
|
|
|
|
$('.send-order').on('click', sendOrderInfo);
|
|
|
|
|
|
|
|
// 订单信息、常见问题
|
|
|
|
$('.right-head .tab').click('click', switchTab);
|
|
|
|
|
|
...
|
...
|
@@ -451,6 +556,9 @@ $('.emoji-component .emoji').on('click', setEmoji); |
|
|
|
// 连线客服
|
|
|
|
$('.push-tip .reconnect').on('click', connectService);
|
|
|
|
|
|
|
|
// 发送
|
|
|
|
$('.msg-edit .send').on('click', _sendMessage);
|
|
|
|
|
|
|
|
// 记录鼠标位置
|
|
|
|
var cursorPo;
|
|
|
|
$('.msg-area').on('blur', function() {
|
...
|
...
|
|
