Authored by 李奇

客户端评价修改

... ... @@ -9,7 +9,6 @@
let config = require('../../../config/common');
//
let api = new global.yoho.ApiBase(config.domains.bjIm, {
name: 'bjIm',
cache: global.yoho.cache,
... ... @@ -18,9 +17,9 @@ let api = new global.yoho.ApiBase(config.domains.bjIm, {
// api urls
let urls = {
lastTen: 'cs/queryUserLastTenOrdersNgoodsInfo',
csSetting: 'cs/queryByType',
msgHistory: 'cs/queryByType', // TODO 历史消息接口未提供
lastTen: '/api/cs/queryUserLastTenOrdersNgoodsInfo',
csSetting: '/api/cs/queryByType',
msgHistory: '/api/cs/queryByType', // TODO 历史消息接口未提供
qas: '' // TODO 接口未提供
};
... ...
... ... @@ -47,7 +47,7 @@
<textarea class="text msg-area" placeholder="请描述您遇到的问题" spellcheck="false" maxlength="500"></textarea>
</div>
<span class="send">发送</span>
<input id="sendImg" type="file" name="files[]" accept="image/bmp,image/jpeg,image/png" multiple>
<input id="sendImg" type="file" name="files[]" accept="image/bmp,image/jpeg,image/jpg,image/png" multiple>
</div>
</div>
</div>
... ...
... ... @@ -14,17 +14,7 @@
<span class="star"></span>
<p class="star-text">一般</p>
</div>
<div class="discontent">
<div class="dis-row">
<span class="type">问题没有得到解决</span>
<span class="type">对客服态度不满意</span>
</div>
<div class="dis-row">
<span class="type">客服对业务不熟悉</span>
<span class="type">话语不明确</span>
</div>
</div>
<div class="discontent"></div>
<textarea class="other-reason" maxlength="50" placeholder="请您输入不满意的其他原因" spellcheck="false"></textarea>
</div>
<div class="cus-footer">
... ...
... ... @@ -20,8 +20,9 @@ module.exports = {
api: 'http://api.yoho.cn/',
service: 'http://service.yoho.cn/',
search: 'http://192.168.102.216:8080/yohosearch/',
bjSocket: 'http://192.168.102.18:10240',
bjIm: 'http://192.168.102.18:60101'
bjSocket: 'http://socket.yohobuy.com',
bjIm: 'http://im.yohobuy.com/api',
bjImUploadImg: 'http://im.yohobuy.com/server'
},
subDomains: {
host: '.yohobuy.com',
... ...
... ... @@ -32,6 +32,7 @@
"license": "MIT",
"dependencies": {
"bluebird": "^3.4.0",
"blueimp-file-upload": "^9.14.0",
"body-parser": "^1.15.0",
"bootstrap": "^3.3.7",
"captchapng": "0.0.1",
... ... @@ -39,6 +40,7 @@
"cookie-parser": "^1.4.3",
"cookie-session": "^1.2.0",
"express": "^4.13.1",
"jquery-ui": "^1.12.1",
"lodash": "^4.13.1",
"md5": "^2.1.0",
"moment": "^2.14.1",
... ...
... ... @@ -10,27 +10,41 @@ var $ = require('yoho-jquery'),
socketChat = require('./socket-chat'),
common = require('../../../config/common'),
countdown = require('./countdown'),
emojiMap = require('./emoji-map'),
uuid = require('uuid');
require('bootstrap');
require('../common');
require('../plugins/jquery.qupload');
require('blueimp-file-upload/js/jquery.iframe-transport');
require('blueimp-file-upload/js/jquery.fileupload');
// 记录鼠标位置
var cursorPo;
var uid,
cursorPo;
var $sendOrder = $('.send-order'),
$rightHeadTab = $('.right-head .tab'),
$panelMainBody = $('.panel-main .main-body'),
$msgList = $('.msg-list'),
$leaveMsg = $('#leaveMsg'),
$sendImgInput = $('#sendImg');
var operation = {
savedEval: false
};
var uid = $('input[name=uid]').val();
uid = $('input[name=uid]').val();
socketConf.conversationMessage.userId = uid;
var cM = socketConf.conversationMessage;
var urls = {
leaveMsg: '/leavemessage/saveLeavemessage',
evalReason: '/evalute/queryEvaluteReason',
makeEval: '/evalute/saveEvalute'
};
... ... @@ -38,114 +52,6 @@ for (var key in urls) {
urls[key] = common.domains.bjIm + urls[key];
}
/**
* 切换显示
*/
function switchTab(e) {
var tag = $(e.target);
if (tag.hasClass('active')) return;
var actOrder = tag.hasClass('order');
if (actOrder) {
$('.right-head .tab.order').toggleClass('active');
$('.right-head .tab.qa').toggleClass('active');
$('.right-body' + '.order').show();
$('.right-body' + '.qa').hide();
$('.right-footer' + '.qa').hide();
} else {
$('.right-head .tab.order').toggleClass('active');
$('.right-head .tab.qa').toggleClass('active');
$('.right-body' + '.order').hide();
$('.right-body' + '.qa').show();
$('.right-footer' + '.qa').show();
}
}
/**
* 打星评论
* @param e
*/
function starComment(e) {
var tag = $(e.target);
var index = tag.index();
var list = $('.make-eval .stars .star');
var el;
for (var i = 0, len = list.length; i < len; i++) {
el = $(list[i]);
el.index() <= index && el.addClass('positive');
el.index() > index && el.removeClass('positive');
}
var starText = {
0: '非常不满意',
1: '不满意',
2: '一般',
3: '满意',
4: '非常满意'
};
var textEl = $('.make-eval .star-text');
textEl.text(starText[index]);
}
/**
* 选择不满意的类型
* @param e
*/
function typeComment(e) {
$(e.target).toggleClass('chosen');
}
/**
* 消息编辑框功能区
* @param e
*/
function dispatchUtil(e) {
var cTa = $(e.currentTarget),
index = cTa.index(),
comp = $('.emoji-component');
var utilMap = {
0: function() {
var topPo = cTa.offset().top,
leftPo = cTa.offset().left,
cTaHeight = cTa.height();
var isNone = comp.css('display') === 'none';
comp.css({display: 'inline-block'});
var compHeight = comp.height();
isNone && comp.css({
top: topPo - cTaHeight - compHeight - 5,
left: leftPo
});
!isNone && comp.hide();
},
2: function() {
$('#makeEvaluation').modal({
show: true
});
},
3: function() {
connectService();
}
};
if (index === 1) return;
utilMap[index](e);
}
/**
* 设置
* @param e
... ... @@ -159,114 +65,6 @@ function setEmoji(e) {
emojiId = tag.data('id'),
comp = $('.emoji-component');
var emojiMap = [
{file: '100', text: '/微笑', code: '/::)'},
{file: '101', text: '/撇嘴', code: '/::~'},
{file: '102', text: '/色', code: '/::B'},
{file: '103', text: '/发呆', code: '/::|'},
{file: '104', text: '/得意', code: '/:8-)'},
{file: '105', text: '/流泪', code: '/::<'},
{file: '106', text: '/害羞', code: '/::$'},
{file: '107', text: '/闭嘴', code: '/::X'},
{file: '108', text: '/睡', code: '/::Z'},
{file: '109', text: '/大哭', code: '/::\'('},
{file: '110', text: '/尴尬', code: '/::-|'},
{file: '111', text: '/发怒', code: '/::@'},
{file: '112', text: '/调皮', code: '/::P'},
{file: '113', text: '/呲牙', code: '/::D'},
{file: '114', text: '/惊讶', code: '/::O'},
{file: '115', text: '/难过', code: '/::('},
{file: '116', text: '/酷', code: '/::+'},
{file: '117', text: '/冷汗', code: '/:--b'},
{file: '118', text: '/抓狂', code: '/::Q'},
{file: '119', text: '/吐', code: '/::T'},
{file: '120', text: '/偷笑', code: '/:,@P'},
{file: '121', text: '/愉快', code: '/:,@-D'},
{file: '122', text: '/白眼', code: '/::d'},
{file: '123', text: '/傲慢', code: '/:,@o'},
{file: '124', text: '/饥饿', code: '/::g'},
{file: '125', text: '/困', code: '/:|-)'},
{file: '126', text: '/惊恐', code: '/::!'},
{file: '127', text: '/流汗', code: '/::L'},
{file: '128', text: '/憨笑', code: '/::>'},
{file: '129', text: '/悠闲', code: '/::,@'},
{file: '130', text: '/奋斗', code: '/:,@f'},
{file: '131', text: '/咒骂', code: '/::-S'},
{file: '132', text: '/疑问', code: '/:?'},
{file: '133', text: '/嘘', code: '/:,@x'},
{file: '134', text: '/晕', code: '/:,@@'},
{file: '135', text: '/疯了', code: '/::8'},
{file: '136', text: '/衰', code: '/:,@!'},
{file: '137', text: '/骷髅', code: '/:!!!'},
{file: '138', text: '/敲打', code: '/:xx'},
{file: '139', text: '/再见', code: '/:bye'},
{file: '140', text: '/擦汗', code: '/:wipe'},
{file: '141', text: '/抠鼻', code: '/:dig'},
{file: '142', text: '/鼓掌', code: '/:handclap'},
{file: '143', text: '/糗大了', code: '/:&-('},
{file: '144', text: '/坏笑', code: '/:B-)'},
{file: '145', text: '/左哼哼', code: '/:<@'},
{file: '146', text: '/右哼哼', code: '/:@>'},
{file: '147', text: '/哈欠', code: '/::-O'},
{file: '148', text: '/鄙视', code: '/:>-|'},
{file: '149', text: '/委屈', code: '/:P-('},
{file: '150', text: '/快哭了', code: '/::\'|'},
{file: '151', text: '/阴险', code: '/:X-)'},
{file: '152', text: '/亲亲', code: '/::*'},
{file: '153', text: '/吓', code: '/:@x'},
{file: '154', text: '/可怜', code: '/:8*'},
{file: '155', text: '/菜刀', code: '/:pd'},
{file: '156', text: '/西瓜', code: '/:<W>'},
{file: '157', text: '/啤酒', code: '/:beer'},
{file: '158', text: '/篮球', code: '/:basketb'},
{file: '159', text: '/乒乓', code: '/:oo'},
{file: '160', text: '/咖啡', code: '/:coffee'},
{file: '161', text: '/饭', code: '/:eat'},
{file: '162', text: '/猪头', code: '/:pig'},
{file: '163', text: '/玫瑰', code: '/:rose'},
{file: '164', text: '/凋谢', code: '/:fade'},
{file: '165', text: '/嘴唇', code: '/:showlove'},
{file: '166', text: '/爱心', code: '/:heart'},
{file: '167', text: '/心碎', code: '/:break'},
{file: '168', text: '/蛋糕', code: '/:cake'},
{file: '169', text: '/闪电', code: '/:li'},
{file: '170', text: '/炸弹', code: '/:bome'},
{file: '171', text: '/刀', code: '/:kn'},
{file: '172', text: '/足球', code: '/:footb'},
{file: '173', text: '/瓢虫', code: '/:ladybug'},
{file: '174', text: '/便便', code: '/:shit'},
{file: '175', text: '/月亮', code: '/:moon'},
{file: '176', text: '/太阳', code: '/:sun'},
{file: '177', text: '/礼物', code: '/:gift'},
{file: '178', text: '/拥抱', code: '/:hug'},
{file: '179', text: '/强', code: '/:strong'},
{file: '180', text: '/弱', code: '/:weak'},
{file: '181', text: '/握手', code: '/:share'},
{file: '182', text: '/胜利', code: '/:v'},
{file: '183', text: '/抱拳', code: '/:@)'},
{file: '184', text: '/勾引', code: '/:jj'},
{file: '185', text: '/拳头', code: '/:@@'},
{file: '186', text: '/差劲', code: '/:bad'},
{file: '187', text: '/爱你', code: '/:lvu'},
{file: '188', text: '/NO', code: '/:no'},
{file: '189', text: '/OK', code: '/:ok'},
{file: '190', text: '/爱情', code: '/:love'},
{file: '191', text: '/飞吻', code: '/:<L>'},
{file: '192', text: '/跳跳', code: '/:jump'},
{file: '193', text: '/发抖', code: '/:shake'},
{file: '194', text: '/怄火', code: '/:<O>'},
{file: '195', text: '/转圈', code: '/:circle'},
{file: '196', text: '/磕头', code: '/:kotow'},
{file: '197', text: '/回头', code: '/:turn'},
{file: '198', text: '/跳绳', code: '/:skip'},
{file: '199', text: '/投降', code: '/:oY'},
{file: '200', text: '/激动', code: '/:#-O'},
{file: '201', text: '/乱舞', code: '/:hiphot'},
{file: '202', text: '/献吻', code: '/:kiss'},
{file: '203', text: '/左太极', code: '/:<&'},
{file: '204', text: '/右太极', code: '/:&>'}
];
for (var i = 0, len = emojiMap.length; i < len; i++) {
if (emojiMap[i].file === emojiId.toString()) {
emojiText = emojiMap[i].text;
... ... @@ -361,19 +159,7 @@ function toggleAnswer(e) {
* 发送订单
*/
function sendOrderInfo(e) {
var tag = $(e.currentTarget),
no = tag.data('no'),
nm = tag.data('nm'),
time = tag.data('time'),
status = tag.data('status');
var msgContent = ['单号:', no,
'金额:', '¥' + nm,
'下单时间:', time,
'状态:', status];
_sendMessage(e, 10, msgContent);
}
/**
... ... @@ -389,108 +175,79 @@ function connectService() {
* 处理收到消息
* @private
*/
function _getMessage(received) {
console.log('客户收到消息!', received);
function _getMessage(rec) {
console.log('客户收到消息!', rec);
var recType = received.type,
time = received.sendTimeShort,
message = received.message,
var recType = rec.type,
time = rec.sendTimeShort,
message = rec.message,
msgType = message.type,
allTypes = socketConf.receivedType;
allTypes = socketConf.recType;
// 请求人工/接入人工成功/接入人工失败
var tipTpl;
if (recType === 10005) { // 客服评价邀请
$('input[name=promoter]').val(2);
$('#makeEvaluation').modal('show');
}
if (recType === 2) {
switch (msgType) {
case 0: // 0是没上班
tipTpl = `<div class="list-item">
<p class="push-tip">
<span class="tip">${message.content}<a class="leave-msg">留言</a>!</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;
}
}
switch(recType) {
// 待重构
if (recType === 3 || recType === 103 || recType === 10003) {
case allTypes.LINK_SUCCESS:
if (recType === 3 || 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"');
}
_linkSuccess(msgType, message);
break;
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 ${time}</span>
<div class="msg-bubble">
<div>${message.newContent}</div>
</div>
</div>
</div>`;
}
case allTypes.CU_SEND:
if (recType === 103) {
_handleCusMsg(rec, msgType, message);
break;
case allTypes.ROBOT_SEND:
rec.csName = rec.csName || '客服机器人';
message.newContent = message.newContent || '机器人暂时无法提供服务';
tipTpl = `<div class="list-item guest">
<img src="/img/service/agent-avatar.png" class="avatar">
<div class="item-detail">
<span class="time">客服机器人 ${time}</span>
<div class="msg-bubble">
<div>${message.newContent}</div>
</div>
<img src="${rec.csHead}" class="avatar">
<div class="item-detail">
<span class="time">${rec.csName} ${rec.sendTimeShort}</span>
<div class="msg-bubble">
<div>${message.newContent}</div>
</div>
</div>`;
}
</div>
</div>`;
if (recType === 10003) {
break;
tipTpl = `<div class="list-item guest">
<img src="/img/service/agent-avatar.png" class="avatar">
<div class="item-detail">
<span class="time">客服助手 ${time}</span>
<div class="msg-bubble">
<div>${message.newContent}</div>
</div>
</div>
</div>`;
}
}
case allTypes.CS_SEND:
_handleCsMsg(rec, msgType, message);
break;
case allTypes.EVAL_INVITE:
$('input[name=promoter]').val(2);
if (recType === 999999999) {
tipTpl = `<div class="list-item">
showEvalModal();
break;
case allTypes.OFFLINE:
tipTpl =
`<div class="list-item">
<p class="push-tip">
<span class="tip">${message.content}<a class="red-tip reconnect">连线客服</a></span>
<span class="tip">${message.content}<a class="red-tip reconnect">连线客服</a></span>
</p>
</div>`;
break;
default:
break;
}
$('.msg-list').append(tipTpl);
$msgList.append(tipTpl);
$('.panel-main .main-body').scrollTop($('.panel-main .main-body')[0].scrollHeight);
$panelMainBody.scrollTop($panelMainBody[0].scrollHeight);
}
/**
... ... @@ -518,7 +275,7 @@ function _sendMessage(e, msgType, msgContent) {
cM.message.type = msgType || 1;
cM.uuid = uuid.v4(); // 用于标示当条消息
console.log(cM)
console.log(cM);
socketChat.send(JSON.stringify(Object.assign(cM)));
}
}
... ... @@ -562,7 +319,7 @@ socketChat.init(Object.assign(socketConf, {
}));
// 提交留言
$('#leaveMsg .submit').click(function() {
$leaveMsg.find('.submit').click(function() {
var lMsg = $('#leaveMsg'),
val = lMsg.find('textarea').val().trim();
... ... @@ -599,7 +356,7 @@ $('#makeEvaluation .submit').click(function() {
var reasonIds,
idArray = [];
$.each(reasonTypes, function(item) {
$.each(reasonTypes, function(index, item) {
idArray.push($(item).data('id'));
});
... ... @@ -613,7 +370,7 @@ $('#makeEvaluation .submit').click(function() {
csId: cM.csId,
pid: cM.platId,
promoter: promoter,
reasonIds: reasonIds,
reasonIds: reasonIds || '',
reasonMsgs: reason,
stars: star,
uid: uid
... ... @@ -671,28 +428,137 @@ $('.msg-edit .msg-area').on('keydown', msgEnterAction);
$('.qa-list .q').on('click', toggleAnswer);
// 发送订单信息
$('.send-order').on('click', sendOrderInfo);
$sendOrder.on('click', function(e) {
var tag = $(e.currentTarget),
no = tag.data('no'),
nm = tag.data('nm'),
time = tag.data('time'),
status = tag.data('status');
var msgContent = ['单号:', no,
'金额:', '¥' + nm,
'下单时间:', time,
'状态:', status];
_sendMessage(e, 10, msgContent);
});
// 发送图片
$sendImgInput.fileupload({
dataType: 'json',
url: common.domains.bjImUploadImg + '/fileManage/uploadFile',
done: function (e, res) {
res = res.result;
if(res && res.code === 200) {
// 上传成功后发送图片消息
cM.type = 3;
cM.message.content = res.data.filePath;
cM.message.type = 2;
cM.uuid = uuid.v4(); // 用于标示当条消息
socketChat.send(JSON.stringify(Object.assign(cM)));
}
}
});
// 订单信息、常见问题
$('.right-head .tab').on('click', switchTab);
$rightHeadTab.on('click', function(e) {
var $tt = $(e.target),
actOrder = $tt.hasClass('order');
if ($tt.hasClass('active')) return;
if (actOrder) {
$('.right-head .tab.order').toggleClass('active');
$('.right-head .tab.qa').toggleClass('active');
$('.right-body' + '.order').show();
$('.right-body' + '.qa').hide();
$('.right-footer' + '.qa').hide();
} else {
$('.right-head .tab.order').toggleClass('active');
$('.right-head .tab.qa').toggleClass('active');
$('.right-body' + '.order').hide();
$('.right-body' + '.qa').show();
$('.right-footer' + '.qa').show();
}
});
// 星评
$('.make-eval .stars .star').on('click', starComment);
$('.make-eval .stars .star').on('click', function (e) {
var tag = $(e.target);
var index = tag.index();
var list = $('.make-eval .stars .star');
var el;
for (var i = 0, len = list.length; i < len; i++) {
el = $(list[i]);
el.index() <= index && el.addClass('positive');
el.index() > index && el.removeClass('positive');
}
var starText = {
0: '非常不满意',
1: '不满意',
2: '一般',
3: '满意',
4: '非常满意'
};
var textEl = $('.make-eval .star-text');
textEl.text(starText[index]);
});
// 选择不满意类型
$('.discontent .dis-row .type').on('click', typeComment);
$(document).on('click', '.dis-row .type', function (e) {
$(e.target).toggleClass('chosen');
});
// 留言
$('.msg-list').on('click', '.leave-msg', leaveMsg);
$msgList.on('click', '.leave-msg', leaveMsg);
// 消息编辑框功能区
$('.msg-edit .util .icon').on('click', dispatchUtil);
$('.msg-edit .util .icon').on('click', function (e) {
var cTa = $(e.currentTarget),
index = cTa.index(),
comp = $('.emoji-component');
var utilMap = {
0: function() {
var topPo = cTa.offset().top,
leftPo = cTa.offset().left,
cTaHeight = cTa.height();
var isNone = comp.css('display') === 'none';
comp.css({display: 'inline-block'});
var compHeight = comp.height();
isNone && comp.css({
top: topPo - cTaHeight - compHeight - 5,
left: leftPo
});
!isNone && comp.hide();
},
2: function() {
showEvalModal();
},
3: function() {
connectService();
}
};
if (index === 1) return;
utilMap[index](e);
});
// 设置表情
$('.emoji-component .emoji').on('click', setEmoji);
// 重新连线
$('.msg-list').on('click', '.reconnect', function() {
$msgList.on('click', '.reconnect', function() {
socketChat.init(Object.assign(socketConf, {
... ... @@ -721,7 +587,7 @@ $('.msg-edit .send').on('click', _sendMessage);
// 关闭聊天窗口
$('.header .close').click(function() {
if (!operation.savedEval) { // 没有保存过评论
$('#makeEvaluation').modal('show');
showEvalModal();
} else {
window.close();
}
... ... @@ -734,7 +600,7 @@ $('.msg-area').on('blur', function() {
// 消息图片放大显示
$('.msg-list').on('click', '.msg-bubble img', function(e) {
$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();
... ... @@ -749,29 +615,244 @@ $('.about-his.has-his').click(function(e) {
$(e.currentTarget).hide();
$('.list-item.his-msg').show();
$('.panel-main .main-body').scrollTop($('.panel-main .main-body')[0].scrollHeight);
$panelMainBody.scrollTop($panelMainBody[0].scrollHeight);
});
// $('.panel-main .main-body').scrollTop(10);
});
/**
* 链接建立
* @param msgType 内部消息类型
* @param message 内部消息对象
* @private
*/
function _linkSuccess(msgType, message) {
var OUT_SERVICE = 0,
LINE_UP = 1,
MANUAL_SERVICE = 2;
$('.panel-main .main-body').scroll(function(e) {
console.log($(e.target)[0].scrollHeight);
var liHtml;
});
var $msgList = $('.msg-list'),
$mainBody = $('.panel-main .main-body');
switch(msgType) {
case OUT_SERVICE: // 0是没上班
liHtml =
`<div class="list-item">
<p class="push-tip">
<span class="tip">${message.content}</span>
</p>
</div>`;
break;
case LINE_UP: // 1是需要排队
liHtml =
`<div class="list-item">
<p class="push-tip">
<span class="tip">
${message.content}您也可以选择<a class="leave-msg">留言</a>
</span>
</p>
</div>`;
break;
case MANUAL_SERVICE: // 2是接入人工成功
liHtml =
`<div class="list-item">
<p class="push-tip">
<span class="tip">${message.content}</span>
</p>
</div>`;
break;
default:
break;
}
// 添加消息
liHtml && $msgList.append(liHtml);
liHtml && $mainBody.scrollTop($mainBody[0].scrollHeight);
}
/**
* 处理客户消息
* @private
*/
function _handleCusMsg(rec, msgType, message) {
var liHtml,
$msgList = $('.msg-list'),
$mainBody = $('.panel-main .main-body');
message.newContent = _emojiPrefix(message.newContent);
// 图片添加标签
if(msgType === 2) {
message.newContent =
'<img class="img-msg" src="${message.newContent}">'
}
liHtml = `<div class="list-item host">
<img src="${rec.userHead}" class="avatar">
<div class="item-detail">
<span class="time">${rec.userName} ${rec.sendTimeShort}</span>
<div class="msg-bubble">
<div>${message.newContent}</div>
</div>
</div>
</div>`;
// $('#sendImg').qupload({
// upload_url: common.domains.bjIm,
// file_post_name: 'fileData',
// button_text: '<span class="btn_upload_text">上传图片</span>',
// button_action: window.SWFUpload.BUTTON_ACTION.SELECT_FILE,
// file_size_limit: '5120',
// file_types: '*.jpg;*.jpeg;*.png;*.bmp',
// uploadSuccessed: function(data) {
// console.log(data)
// }
// });
$msgList.append(liHtml);
$mainBody.scrollTop($mainBody[0].scrollHeight);
}
/**
* 处理客服消息
* @private
*/
function _handleCsMsg(rec, msgType, message) {
var liHtml,
$msgList = $('.msg-list'),
$mainBody = $('.panel-main .main-body');
message.newContent = _emojiPrefix(message.newContent);
if(msgType === 2) {
message.content =
'<img class="img-msg" src="${message.content}">'
}
liHtml = `<div class="list-item guest">
<img src="${rec.csHead}" class="avatar">
<div class="item-detail">
<span class="time">${rec.csName} ${rec.sendTimeShort}</span>
<div class="msg-bubble">
<div>${message.newContent}</div>
</div>
</div>
</div>`;
$msgList.append(liHtml);
$mainBody.scrollTop($mainBody[0].scrollHeight);
}
/**
* 返回表情路径处理
* @param text 文本
* @private
*/
function _emojiPrefix(text) {
if(typeof text === "string") {
return text.replace(/src="(\d{3}).gif"/g, 'src="/img/service/emoji/$1.gif"');
}
return text;
}
/**
* 显示评价弹框
*/
function showEvalModal() {
var $evalModal = $('#makeEvaluation');
$.ajax({
type: 'GET',
url: urls.evalReason,
data: {
customerSettingId: 0 // todo
},
success: function(res) {
if (res && res.code === 200) {
var data = res.data,
len = data.length;
data = [
{
createTime: 1477657047,
customerSettingId: 40,
id: 26,
content: 123451,
status: 2
},
{
createTime: 1477657047,
customerSettingId: 40,
id: 28,
content: 123551,
status: 2
},
{
createTime: 1477657047,
customerSettingId: 40,
id: 28,
content: 123551,
status: 2
}
];
len = data.length;
if(len) {
var html = '',
ceilRows = Math.ceil(len / 2),
floorRows = Math.floor(len / 2);
if(ceilRows === floorRows) {
for(var r = 1, i = 0; r <= ceilRows; r++) {
html =
`<div class="dis-row">
<span class="type"data-id="${data[i].id}">
${data[i].content}
</span>
<span class="type"data-id="${data[i+1].id}">
${data[i+1].content}
</span>
</div>`;
i += 2;
}
} else {
for(var r = 1, i = 0; r <= ceilRows - 1; r++) {
html +=
`<div class="dis-row">
<span class="type"data-id="${data[i].id}">
${data[i].content}
</span>
<span class="type"data-id="${data[i+1].id}">
${data[i+1].content}
</span>
</div>`;
i += 2;
}
html +=
`<div class="dis-row">
<span class="type" data-id="${data[len-1].id}">
${data[len-1].content}
</span>
</div>`;
}
}
$evalModal.find('.discontent').empty().append(html);
}
$evalModal.modal('show');
}
});
}
... ...
/**
* 表情映射
*
* @author: liqi <qi.li@yoho.cn>
* @date: 2016/10/21
*/
var emojiMap = [
{file: '100', text: '/微笑', code: '/::)'},
{file: '101', text: '/撇嘴', code: '/::~'},
{file: '102', text: '/色', code: '/::B'},
{file: '103', text: '/发呆', code: '/::|'},
{file: '104', text: '/得意', code: '/:8-)'},
{file: '105', text: '/流泪', code: '/::<'},
{file: '106', text: '/害羞', code: '/::$'},
{file: '107', text: '/闭嘴', code: '/::X'},
{file: '108', text: '/睡', code: '/::Z'},
{file: '109', text: '/大哭', code: '/::\'('},
{file: '110', text: '/尴尬', code: '/::-|'},
{file: '111', text: '/发怒', code: '/::@'},
{file: '112', text: '/调皮', code: '/::P'},
{file: '113', text: '/呲牙', code: '/::D'},
{file: '114', text: '/惊讶', code: '/::O'},
{file: '115', text: '/难过', code: '/::('},
{file: '116', text: '/酷', code: '/::+'},
{file: '117', text: '/冷汗', code: '/:--b'},
{file: '118', text: '/抓狂', code: '/::Q'},
{file: '119', text: '/吐', code: '/::T'},
{file: '120', text: '/偷笑', code: '/:,@P'},
{file: '121', text: '/愉快', code: '/:,@-D'},
{file: '122', text: '/白眼', code: '/::d'},
{file: '123', text: '/傲慢', code: '/:,@o'},
{file: '124', text: '/饥饿', code: '/::g'},
{file: '125', text: '/困', code: '/:|-)'},
{file: '126', text: '/惊恐', code: '/::!'},
{file: '127', text: '/流汗', code: '/::L'},
{file: '128', text: '/憨笑', code: '/::>'},
{file: '129', text: '/悠闲', code: '/::,@'},
{file: '130', text: '/奋斗', code: '/:,@f'},
{file: '131', text: '/咒骂', code: '/::-S'},
{file: '132', text: '/疑问', code: '/:?'},
{file: '133', text: '/嘘', code: '/:,@x'},
{file: '134', text: '/晕', code: '/:,@@'},
{file: '135', text: '/疯了', code: '/::8'},
{file: '136', text: '/衰', code: '/:,@!'},
{file: '137', text: '/骷髅', code: '/:!!!'},
{file: '138', text: '/敲打', code: '/:xx'},
{file: '139', text: '/再见', code: '/:bye'},
{file: '140', text: '/擦汗', code: '/:wipe'},
{file: '141', text: '/抠鼻', code: '/:dig'},
{file: '142', text: '/鼓掌', code: '/:handclap'},
{file: '143', text: '/糗大了', code: '/:&-('},
{file: '144', text: '/坏笑', code: '/:B-)'},
{file: '145', text: '/左哼哼', code: '/:<@'},
{file: '146', text: '/右哼哼', code: '/:@>'},
{file: '147', text: '/哈欠', code: '/::-O'},
{file: '148', text: '/鄙视', code: '/:>-|'},
{file: '149', text: '/委屈', code: '/:P-('},
{file: '150', text: '/快哭了', code: '/::\'|'},
{file: '151', text: '/阴险', code: '/:X-)'},
{file: '152', text: '/亲亲', code: '/::*'},
{file: '153', text: '/吓', code: '/:@x'},
{file: '154', text: '/可怜', code: '/:8*'},
{file: '155', text: '/菜刀', code: '/:pd'},
{file: '156', text: '/西瓜', code: '/:<W>'},
{file: '157', text: '/啤酒', code: '/:beer'},
{file: '158', text: '/篮球', code: '/:basketb'},
{file: '159', text: '/乒乓', code: '/:oo'},
{file: '160', text: '/咖啡', code: '/:coffee'},
{file: '161', text: '/饭', code: '/:eat'},
{file: '162', text: '/猪头', code: '/:pig'},
{file: '163', text: '/玫瑰', code: '/:rose'},
{file: '164', text: '/凋谢', code: '/:fade'},
{file: '165', text: '/嘴唇', code: '/:showlove'},
{file: '166', text: '/爱心', code: '/:heart'},
{file: '167', text: '/心碎', code: '/:break'},
{file: '168', text: '/蛋糕', code: '/:cake'},
{file: '169', text: '/闪电', code: '/:li'},
{file: '170', text: '/炸弹', code: '/:bome'},
{file: '171', text: '/刀', code: '/:kn'},
{file: '172', text: '/足球', code: '/:footb'},
{file: '173', text: '/瓢虫', code: '/:ladybug'},
{file: '174', text: '/便便', code: '/:shit'},
{file: '175', text: '/月亮', code: '/:moon'},
{file: '176', text: '/太阳', code: '/:sun'},
{file: '177', text: '/礼物', code: '/:gift'},
{file: '178', text: '/拥抱', code: '/:hug'},
{file: '179', text: '/强', code: '/:strong'},
{file: '180', text: '/弱', code: '/:weak'},
{file: '181', text: '/握手', code: '/:share'},
{file: '182', text: '/胜利', code: '/:v'},
{file: '183', text: '/抱拳', code: '/:@)'},
{file: '184', text: '/勾引', code: '/:jj'},
{file: '185', text: '/拳头', code: '/:@@'},
{file: '186', text: '/差劲', code: '/:bad'},
{file: '187', text: '/爱你', code: '/:lvu'},
{file: '188', text: '/NO', code: '/:no'},
{file: '189', text: '/OK', code: '/:ok'},
{file: '190', text: '/爱情', code: '/:love'},
{file: '191', text: '/飞吻', code: '/:<L>'},
{file: '192', text: '/跳跳', code: '/:jump'},
{file: '193', text: '/发抖', code: '/:shake'},
{file: '194', text: '/怄火', code: '/:<O>'},
{file: '195', text: '/转圈', code: '/:circle'},
{file: '196', text: '/磕头', code: '/:kotow'},
{file: '197', text: '/回头', code: '/:turn'},
{file: '198', text: '/跳绳', code: '/:skip'},
{file: '199', text: '/投降', code: '/:oY'},
{file: '200', text: '/激动', code: '/:#-O'},
{file: '201', text: '/乱舞', code: '/:hiphot'},
{file: '202', text: '/献吻', code: '/:kiss'},
{file: '203', text: '/左太极', code: '/:<&'},
{file: '204', text: '/右太极', code: '/:&>'}
];
module.exports = emojiMap;
... ...
... ... @@ -7,15 +7,23 @@
var config = {
servers: [{host: '192.168.102.18', port: 10240}],
receivedType: {
1: '用户进入聊天',
2: '连线客服成功',
3: '用户发消息',
103: '机器人消息',
10003: '客服发送消息',
10005:'客服推送评价',
999999999: '断线'
recType: {
ENTER: 1, // 用户进入聊天
LINK_SUCCESS: 2, // 连线客服成功
CU_SEND: 3, // 用户发消息
ROBOT_SEND: 103, // 机器人消息
TRANSFER: 1006, // 会话转移
CS_CHANGE_STATE: 10002, // 客服更改状态
CS_SEND: 10003, // 客服发送消息
NEW_CU: 10004, // 新用户接入
EVAL_INVITE: 10005, // 客服评价邀请
TRANSFER_REQ: 10006, // 收到他人的转移的请求
TRANS_REQ_ANSWER: 10007, // 收到他人对自己转移请求的反馈
SUC_DISTRIBUTE: 10009, // 客服管理员收到会话分配成功的回执
OFFLINE:999999999, // 断线
OP_LEAVE: 999999998, // 对方离开
},
conversationMessage: {
objectId: '',
sendTime: 0,
... ... @@ -25,8 +33,8 @@ var config = {
conversationId: 0,
sessionId: '',
userId: 0,
userHead: '', // 用户头像
userName: '', // 用户昵称
userHead: 'http://img03.static.yohobuy.com/thumb/2016/10/28/20/01250f1e320b9941719635176db6205664-0050x0050-2-goodsimg.jpg', // 用户头像
userName: '18551982891', // 用户昵称
csId: 0,
type: 1,
serviceSortId: 0,
... ...
... ... @@ -17,7 +17,7 @@ $color-3a3a3a: #3a3a3a;
// bootstrap relevant style reset px($px)
.btn {
padding: 0;
padding: 0!important;
}
.input-group-addon {
... ... @@ -273,6 +273,7 @@ $color-3a3a3a: #3a3a3a;
padding: 9px;
color: #ffffff;
line-height: 1.5;
word-break: break-all;
background-color: #3a3a3a;
border-radius: 3px;
border-top-left-radius: 0;
... ... @@ -467,6 +468,12 @@ $color-3a3a3a: #3a3a3a;
background-image: url('/img/service/human-service.png');
}
}
.send-img {
margin-right: 17px;
color: #bcbcbc;
font-size: 12px;
}
}
.text {
... ...
... ... @@ -30,6 +30,12 @@ shelljs.ls(path.join(__dirname, '/js/**/*.page.js')).forEach((f) => {
});
module.exports = {
resolve: {
alias: {
jquery: 'yoho-jquery',
'jquery-ui/widget': 'jquery-ui/ui/widget'
}
},
entry: entries,
output: {
path: path.join(__dirname, 'bundle'), // absolute path
... ...