fe / yohobuy-node · Commits

Go to a project

Authored by 李奇
Commit 19d6b162efd7aad84eaa4d8718bf7934789cef4c 1 parent d22ba699

代码优化

Inline Side-by-side
Showing 10 changed files with 252 additions and 170 deletions
... ... @@ -29,7 +29,7 @@ const getClientData = (type, encryptedUid, imgSize) => {
.then(res => {
let history = res[1].data;
let hasHistory = history && history.length > 0 || false;
let csSetting = res[0].data.config;
let csSetting = res[0].data && res[0].data.config;
csSetting.windowLogo = csSetting.windowLogo.replace(regExp, logoSize);
csSetting.qrCode = csSetting.qrCode.replace(regExp, qcSize);
... ...
... ... @@ -29,13 +29,9 @@ module.exports = {
search: 'http://192.168.102.216:8080/yohosearch/',
// imSocket: 'ws://socket.yohobuy.com:10240',
// imCs: 'http://im.yohobuy.com/api',
// imServer: 'http://im.yohobuy.com/server'
imSocket: 'ws://imsocket.yohobuy.com:10000',
imCs: 'http://imhttp.yohobuy.com/api',
imServer: 'http://imhttp.yohobuy.com/server'
imSocket: 'ws://socket.yohobuy.com:10240',
imCs: 'http://im.yohobuy.com/api',
imServer: 'http://im.yohobuy.com/server'
},
subDomains: {
host: '.yohobuy.com',
... ...
<div class="list-item guest">
<img src="{{csHead}}" class="avatar">
<div class="item-detail">
<span class="time">{{csName}} {{sendTimeShort}}</span>
<div class="msg-bubble">
<div>{{{newContent}}}</div>
</div>
</div>
</div>
... ...
<div class="list-item host">
<img src="{{userHead}}" class="avatar">
<div class="item-detail">
<span class="time">{{userName}} {{sendTimeShort}}</span>
<div class="msg-bubble">
<div>{{{newContent}}}</div>
</div>
</div>
</div>
... ...
{{#if isDouble}}
<div class="dis-row">
<span class="type" data-id="{{id1}}" data-content="{{id1Content}}">
{{id1Content}}
</span>
<span class="type" data-id="{{id2}}" data-content="{{id2Content}}">
{{id2Content}}
</span>
</div>
{{else}}
<div class="dis-row">
<span class="type" data-id="{{id}}" data-content="{{idContent}}">
{{idContent}}
</span>
</div>
{{/if}}
... ...
<div class="list-item guest">
<img src="{{assetsPrefix}}/img/service/robot-avatar.png" class="avatar">
<div class="item-detail">
<span class="time">{{csName}} {{sendTimeShort}}</span>
<div class="msg-bubble">
<div>{{{newContent}}}</div>
</div>
</div>
</div>
... ...
<div class="list-item">
<p class="push-tip">
<span class="tip">
{{{content}}}
</span>
</p>
</div>
... ...
... ... @@ -26,6 +26,7 @@ var allRTs,
hasMore = true,
titleInterval,
$html = $('html'),
$window = $(window),
$document = $(document),
$msgList = $('.msg-list'),
docTitle = document.title,
... ... @@ -42,6 +43,12 @@ var allRTs,
$assetsPrefix = $('input[name=assetsPrefix]'),
$panelMainBody = $('.panel-main .main-body');
var tipTpl = require('hbs/service/tip.hbs'),
csTpl = require('hbs/service/cs-msg.hbs'),
cusTpl = require('hbs/service/cus-msg.hbs'),
robotTpl = require('hbs/service/robot-msg.hbs'),
disTpl = require('hbs/service/discontent-row.hbs');
var processInfo = {
scrollLoad: false,
manual: false,
... ... @@ -53,8 +60,8 @@ var key,
urls = {
makeEval: '/evalute/saveEvalute',
leaveMsg: '/leavemessage/saveLeavemessage',
evalReason: '/evalute/queryReasonByConversationId',
msgHistory: '/conversationMessage/pageList'
msgHistory: '/conversationMessage/pageList',
evalReason: '/evalute/queryReasonByConversationId'
};
require('bootstrap');
... ... @@ -99,25 +106,31 @@ function pageInit() {
}
/**
* 添加新的消息
*/
function msgAppend(dom) {
$msgList.append(dom);
$panelMainBody.scrollTop($panelMainBody[0].scrollHeight);
}
/**
* 表情设置
* @param e
*/
function setEmoji(e) {
var i,
len,
pos,
var pos,
start,
end,
newVal,
emojiText,
textDom,
emojiText,
tag = $(e.target),
area = $('.msg-area'),
val = area.val(),
emojiId = tag.data('id'),
comp = $('.emoji-component');
for (i = 0, len = emojiMap.length; i < len; i++) {
for (var i = 0, len = emojiMap.length; i < len; i++) {
if (emojiMap[i].file === emojiId.toString()) {
emojiText = emojiMap[i].text;
}
... ... @@ -142,25 +155,17 @@ function pageInit() {
/**
* 系统通知
* @param type 通知类型
* @param msg 具体消息
* @param tip 具体消息
*/
function systemTip(type, msg) {
var tip, liHtml;
var tipMap = {};
function systemTip(tip) {
var dom;
if (type) {
tip = tipMap[type];
} else {
tip = msg;
}
liHtml = '<div class="list-item">\n <p class="push-tip">\n <span class="tip">' + tip + '</span>\n </p>\n </div>';
dom = tipTpl({
content: tip
});
// 添加消息
$msgList.append(liHtml);
$panelMainBody.scrollTop($panelMainBody[0].scrollHeight);
msgAppend(dom);
}
/**
... ... @@ -186,7 +191,7 @@ function pageInit() {
var $area = $('.msg-area'),
msg = $area.val().trim();
// 发送前共通处理清除计时器和title提示
// 发送前共通处理
beforeSendMsg();
if (!msgContent) {
... ... @@ -260,7 +265,7 @@ function pageInit() {
*/
function csChatting(message) {
// 系统通知
systemTip('', message.newContent);
systemTip(message.newContent);
}
/**
... ... @@ -271,49 +276,35 @@ function pageInit() {
socketChat.close();
// 系统通知
systemTip('', message.content);
systemTip(message.content);
}
/**
* 留言
*/
function leaveMsg() {
var lMsg = $('#leaveMsg'),
txt = lMsg.find('textarea');
lMsg.find('.leave-msg-tip').addClass('hide');
txt.val('');
var $lm = $('#leaveMsg'),
$ta = $lm.find('textarea');
lMsg.modal({
$lm.find('.leave-msg-tip').addClass('hide');
$ta.val('');
$lm.modal({
show: true
});
}
/**
*校验评价输入内容是否为空
*/
$('#leaveMsg').find('textarea').bind('change', function() {
var lMsg = $('#leaveMsg'),
val = $(this).val();
if (val === '') {
lMsg.find('.leave-msg-tip').removeClass('hide');
} else {
lMsg.find('.leave-msg-tip').addClass('hide');
}
});
/**
* 成功进入在线客服
* @param message 消息对象
*/
function enterSuccess(message) {
var $iconMs = $('.icon.manual-service');
var $ms = $('.icon.manual-service');
// 系统通知
systemTip('', message.content);
systemTip(message.content);
// 进入成功显示人工客服
$iconMs.show();
// 显示人工客服
$ms.show();
}
/**
... ... @@ -329,44 +320,53 @@ function pageInit() {
MANUAL_SERVICE = 2,
ADMIN_MANUAL_SERVICE = 3;
var liHtml,
var dom,
tipText,
$iconEval = $('.icon.evaluate'),
$iconMs = $('.icon.manual-service');
switch (msgType) {
case OUT_SERVICE:
// 0是没上班
liHtml = '<div class="list-item">\n <p class="push-tip">\n <span class="tip">' + message.content + '\u60A8\u4E5F\u53EF\u4EE5\u9009\u62E9<a class="leave-msg">\u7559\u8A00</a></span>\n </p>\n </div>';
case OUT_SERVICE: // 0是没上班
tipText = message.content +
'您也可以选择<a class="leave-msg">留言</a>';
dom = tipTpl({
content: tipText
});
break;
case LINE_UP:
// 1是需要排队
liHtml = '<div class="list-item">\n <p class="push-tip">\n <span class="tip">\n ' + message.content + '\u60A8\u4E5F\u53EF\u4EE5\u9009\u62E9<a class="leave-msg">\u7559\u8A00</a>\uFF01\n </span>\n </p>\n </div>';
case LINE_UP: // 1是需要排队
tipText = message.content +
'您也可以选择<a class="leave-msg">留言</a>';
dom = tipTpl({
content: tipText
});
// 隐藏人工
$iconMs.hide();
break;
case MANUAL_SERVICE:
// 2是接入人工成功
liHtml = '<div class="list-item">\n <p class="push-tip">\n <span class="tip">' + message.content + '</span>\n </p>\n </div>';
case MANUAL_SERVICE: // 2是接入人工成功
tipText = message.content;
dom = tipTpl({
content: tipText
});
// 接入人工客服需要评价
processInfo.manual = true;
// 显示评价&隐藏人工
$iconEval.show();
$iconMs.hide();
break;
case ADMIN_MANUAL_SERVICE:
// 3是管理员分配客服成功
liHtml = '<div class="list-item">\n <p class="push-tip">\n <span class="tip">' + message.content + '</span>\n </p>\n </div>';
case ADMIN_MANUAL_SERVICE: // 3是管理员分配客服成功
tipText = message.content;
dom = tipTpl({
content: tipText
});
// 接入人工客服需要评价
processInfo.manual = true;
// 显示评价&隐藏人工
$iconEval.show();
$iconMs.hide();
... ... @@ -377,8 +377,7 @@ function pageInit() {
}
// 添加消息
liHtml && $msgList.append(liHtml);
liHtml && $panelMainBody.scrollTop($panelMainBody[0].scrollHeight);
msgAppend(dom);
}
/**
... ... @@ -399,7 +398,7 @@ function pageInit() {
* @private
*/
function handleCusMsg(rec, msgType, message) {
var liHtml;
var dom;
message.newContent = emojiPrefix(message.newContent);
... ... @@ -413,10 +412,14 @@ function pageInit() {
message.newContent = '<img class="img-msg" src="' + message.content + '">';
}
liHtml = '<div class="list-item host">\n <img src="' + rec.userHead + '" class="avatar">\n <div class="item-detail">\n <span class="time">' + rec.userName + ' ' + rec.sendTimeShort + '</span>\n <div class="msg-bubble">\n <div>' + message.newContent + '</div>\n </div>\n </div>\n </div>';
dom = cusTpl({
userHead: rec.userHead,
userName: rec.userName,
sendTimeShort: rec.sendTimeShort,
newContent: message.newContent
});
$msgList.append(liHtml);
$panelMainBody.scrollTop($panelMainBody[0].scrollHeight);
msgAppend(dom);
}
/**
... ... @@ -424,12 +427,18 @@ function pageInit() {
* @private
*/
function breakCountdown(message) {
var liHtml;
var dom,
tip;
liHtml = '<div class="list-item">\n <p class="push-tip">\n <span class="tip">\n ' + message.content + '\n <span class="countdown"></span>\n </span>\n </p>\n </div>';
tip = message.content +
'<span class="countdown"></span>';
$msgList.append(liHtml);
$panelMainBody.scrollTop($panelMainBody[0].scrollHeight);
dom = tipTpl({
content: tip
});
// 消息添加
msgAppend(dom);
// 倒计时信息
countdown(message.newContent, $('.tip .countdown'));
... ... @@ -440,17 +449,21 @@ function pageInit() {
* @private
*/
function handleCsMsg(rec, msgType, message) {
var liHtml;
var dom;
message.newContent = emojiPrefix(message.newContent);
if (msgType === 2) {
message.newContent = '<img class="img-msg" src="' + message.content + '">';
}
liHtml = '<div class="list-item guest">\n <img src="' + rec.csHead + '" class="avatar">\n <div class="item-detail">\n <span class="time">' + rec.csName + ' ' + rec.sendTimeShort + '</span>\n <div class="msg-bubble">\n <div>' + message.newContent + '</div>\n </div>\n </div>\n </div>';
$msgList.append(liHtml);
$panelMainBody.scrollTop($panelMainBody[0].scrollHeight);
dom = csTpl({
csHead: rec.csHead,
csName: rec.csName,
sendTimeShort: rec.sendTimeShort,
newContent: message.newContent
});
msgAppend(dom);
}
/**
... ... @@ -466,28 +479,31 @@ function pageInit() {
// 评价原因
function discontentHtml(len, data) {
var i,
r,
html = '',
var dom = '',
ceilRows = Math.ceil(len / 2),
floorRows = Math.floor(len / 2);
if (ceilRows === floorRows) {
for (r = 1, i = 0; r <= ceilRows; r++) {
html += '<div class="dis-row">\n <span class="type" data-id="' + data[i].id + '" data-content="' + data[i].content + '">\n ' + data[i].content + '\n </span>\n <span class="type" data-id="' + data[i + 1].id + '" data-content="' + data[i].content + '">\n ' + data[i + 1].content + '\n </span>\n </div>';
if (ceilRows >= floorRows) {
for (var r = 1, i = 0; r <= ceilRows; r++) {
dom += disTpl({
isDouble: true,
id1: data[i].id,
id1Content: data[i].content,
id2: data[i+1].id,
id2Content: data[i+1].content
});
i += 2;
}
} else {
for (r = 1, i = 0; r <= ceilRows - 1; r++) {
html += '<div class="dis-row">\n <span class="type" data-id="' + data[i].id + '" data-content="' + data[i].content + '">\n ' + data[i].content + '\n </span>\n <span class="type" data-id="' + data[i + 1].id + '" data-content="' + data[i].content + '">\n ' + data[i + 1].content + '\n </span>\n </div>';
i += 2;
}
html += '<div class="dis-row">\n <span class="type" data-id="' + data[len - 1].id + '" data-content="' + data[i].content + '">\n ' + data[len - 1].content + '\n </span>\n </div>';
}
$evalModal.find('.discontent').empty().append(html);
if(ceilRows > floorRows) {
dom += disTpl({
id: data[len-1].id,
idContent: data[len-1].content,
});
}
$evalModal.find('.discontent').empty().append(dom);
}
// 拉取评价原因
... ... @@ -519,13 +535,15 @@ function pageInit() {
* 处理收到消息
*/
function getMessage(rec) {
var tipTpl,
var dom,
tipContent,
recType = rec.type,
message = rec.message,
msgType = message.type,
isHidden = tab.tabIsHidden(),
allTypes = socketConf.recType;
console.log('客户收到消息！', rec);
// 删除上个定时器
... ... @@ -561,11 +579,15 @@ function pageInit() {
case allTypes.ROBOT_SEND:
rec.csName = rec.csName || '客服机器人';
tipTpl = '<div class="list-item guest">\n <img src="' + assetsPrefix + '/img/service/robot-avatar.png" class="avatar">\n <div class="item-detail">\n <span class="time">' + rec.csName + ' ' + rec.sendTimeShort + '</span>\n <div class="msg-bubble">\n <div>' + message.newContent + '</div>\n </div>\n </div>\n </div>';
dom = robotTpl({
assetsPrefix: assetsPrefix,
csName: rec.csName,
sendTimeShort: rec.sendTimeShort,
newContent: message.newContent
});
break;
case allTypes.CS_SEND:
// 处理客服消息
handleCsMsg(rec, msgType, message);
break;
... ... @@ -578,17 +600,19 @@ function pageInit() {
break;
case allTypes.CS_CHATTING:
// 正在人工会话
csChatting(message);
break;
// 对方离开
case allTypes.OP_LEAVE:
csOffline(message);
break;
case allTypes.OFFLINE:
tipTpl = '<div class="list-item">\n <p class="push-tip">\n <span class="tip">\n ' + message.content + '\n <a class="red-tip reconnect">\u8FDE\u7EBF\u5BA2\u670D</a>\n </span>\n </p>\n </div>';
tipContent = message.content +
'<a class="red-tip reconnect">连线客服</a>';
dom = tipTpl({
content: tipContent
});
break;
default:
... ... @@ -596,8 +620,8 @@ function pageInit() {
}
$msgList.append(tipTpl);
$panelMainBody.scrollTop($panelMainBody[0].scrollHeight);
// 添加新消息到消息列表
dom && msgAppend(dom);
}
/**
... ... @@ -614,7 +638,9 @@ function pageInit() {
var jsonString = e.data;
var received = JSON.parse(jsonString);
socketConfCM.conversationId = received.newConversationId !== 0 ? received.newConversationId : received.conversationId;
socketConfCM.conversationId = received.newConversationId !== 0 ?
received.newConversationId :
received.conversationId;
// 保存会话id
window.setCookie('conversationId', socketConfCM.conversationId, {expires: 60 * 15});
... ... @@ -647,7 +673,7 @@ function pageInit() {
var item,
heightBefore,
heightAfter,
msgTpl = '';
dom = '';
msgList = msgList.reverse();
... ... @@ -658,59 +684,54 @@ function pageInit() {
endTime = msgList[0].sendTime;
if (hasMore) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = msgList[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
item = _step.value;
item.message.newContent = emojiPrefix(item.message.newContent);
if (item.message.type === 2) {
item.message.newContent = ['<img class="img-msg" src="', item.message.newContent, '">'].join('');
}
switch (item.type) {
case allRTs.CU_SEND:
// 用户头像处理
if (!item.userHead) {
item.userHead = assetsPrefix + socketConf.defaultUserHead;
}
msgTpl += '<div class="list-item host">\n <img src="' + item.userHead + '" class="avatar">\n <div class="item-detail">\n <span class="time">' + item.userName + ' ' + item.sendTimeShort + '</span>\n <div class="msg-bubble">\n <div>' + item.message.newContent + '</div>\n </div>\n </div>\n </div>';
break;
case allRTs.ROBOT_SEND:
item.csName = item.csName || '客服机器人';
msgTpl = '<div class="list-item guest">\n <img src="' + assetsPrefix + '/img/service/robot-avatar.png" class="avatar">\n <div class="item-detail">\n <span class="time">' + item.csName + ' ' + item.sendTimeShort + '</span>\n <div class="msg-bubble">\n <div>' + item.message.newContent + '</div>\n </div>\n </div>\n </div>';
break;
case allRTs.CS_SEND:
msgTpl += '<div class="list-item guest">\n <img src="' + item.csHead + '" class="avatar">\n <div class="item-detail">\n <span class="time">' + item.csName + ' ' + item.sendTimeShort + '</span>\n <div class="msg-bubble">\n <div>' + item.message.newContent + '</div>\n </div>\n </div>\n </div>';
break;
default:
break;
}
for(var i = 0, len = msgList.length; i < len; i++) {
item = msgList[i];
item.message.newContent = emojiPrefix(item.message.newContent);
if (item.message.type === 2) {
item.message.newContent =
['<img class="img-msg" src="', item.message.newContent, '">'].join('');
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
switch (item.type) {
case allRTs.CU_SEND:
if (!item.userHead) {
item.userHead = assetsPrefix + socketConf.defaultUserHead;
}
dom = cusTpl({
userHead: item.userHead,
userName: item.userName,
sendTimeShort: item.sendTimeShort,
newContent: item.message.newContent
});
break;
case allRTs.ROBOT_SEND:
item.csName = item.csName || '客服机器人';
dom = robotTpl({
assetsPrefix: assetsPrefix,
csName: item.csName,
sendTimeShort: item.sendTimeShort,
newContent: item.message.newContent
});
break;
case allRTs.CS_SEND:
dom = csTpl({
csHead: item.csHead,
csName: item.csName,
sendTimeShort: item.sendTimeShort,
newContent: item.message.newContent
});
break;
default:
break;
}
}
heightBefore = $msgList.height();
$msgList.prepend(msgTpl);
$msgList.prepend(dom);
heightAfter = $msgList.height();
$panelMainBody.scrollTop(heightAfter - heightBefore);
}
... ... @@ -731,7 +752,7 @@ function pageInit() {
type: 'GET',
url: urls.msgHistory,
data: data,
success: function success(res) {
success: function (res) {
if (res && res.code === 200) {
hasMore && msgResolve(res.data);
$history.hide();
... ... @@ -765,11 +786,22 @@ function pageInit() {
// tab页title重置
tab.tabVisible(function() {
console.log('reset tab');
document.title = docTitle;
clearInterval(titleInterval);
});
// 校验留言输入内容
$leaveMsg.find('textarea').bind('change', function() {
var $lm = $('#leaveMsg'),
val = $(this).val();
if (val === '') {
$lm.find('.leave-msg-tip').removeClass('hide');
} else {
$lm.find('.leave-msg-tip').addClass('hide');
}
});
// 提交留言
$leaveMsg.find('.submit').click(function() {
var lMsg = $('#leaveMsg'),
... ... @@ -845,7 +877,7 @@ function pageInit() {
processInfo.savedEval = true;
if (res && res.code === 200) {
socketConfCM.type = 10; // 评价后通知客服
socketConfCM.type = allRTs.EVAL_NOTICE; // 评价后通知客服
socketConfCM.uuid = uuid.v4();
socketChat.send(socketConfCM);
}
... ... @@ -915,7 +947,7 @@ function pageInit() {
res = res.result;
if (res && res.code === 200) {
// 上传成功后发送图片消息
socketConfCM.type = 3;
socketConfCM.type = allRTs.CU_SEND;
socketConfCM.message.content = res.data.filePath;
socketConfCM.message.type = 2;
socketConfCM.uuid = uuid.v4();
... ... @@ -1100,10 +1132,14 @@ function pageInit() {
// 消息图片放大显示
$msgList.on('click', '.msg-bubble .img-msg', function(e) {
var msgZoomIn = $('.img-zoom-in');
msgZoomIn.find('img').attr('src', $(e.target).attr('src'));
msgZoomIn.fadeIn();
var $et = $(e.target);
var $zoom = $('.img-zoom-in');
var $img = $zoom.find('img');
var maxH = $window.height() - 100;
$img.css('max-height', maxH);
$img.attr('src', $et.attr('src'));
$zoom.fadeIn();
});
$document.on('click', '.img-zoom-in', function() {
... ...
... ... @@ -14,6 +14,7 @@ var config = {
MANUAL_SERVICE: 2, // 连线人工客服
CU_SEND: 3, // 用户发消息
BREAK_TIME: 5, // 断链倒计时
EVAL_NOTICE: 10, // 评价后通知客服
ROBOT_SEND: 103, // 机器人消息
TRANSFER: 1006, // 会话转移
CS_ENTER: 10001, // 客服进入
... ...
... ... @@ -21,10 +21,9 @@
img {
position: relative;
display: block;
max-width: 500px;
height: auto;
margin: 0 auto;
margin-top: 100px;
margin-top: 50px;
cursor: pointer;
}
... ...