fe / yohobuy-node · Commits

Go to a project

Authored by 李奇
Commit 015e71d50a6c06d816ed53ee827ab7d087031654 1 parent 64f34467

评价优化

Inline Side-by-side
Showing 9 changed files with 326 additions and 214 deletions
... ... @@ -22,7 +22,7 @@
</div>
</div>
<div class="cus-footer">
<button class="btn dark submit">提交</button>
<button class="btn dark submit">提交并关闭</button>
<input type="hidden" name="promoter" value="1">
</div>
</div>
... ...
... ... @@ -9,17 +9,18 @@
var $ = require('yoho-jquery'),
uuid = require('uuid'),
editArea = require('./edit-area'),
serviceApi = require('./service-api'),
broswer = require('./broswer'),
cursor = require('./cursor'),
view = require('./view'),
send = require('./socket/send'),
edit = require('./socket/edit'),
receive = require('./socket/receive'),
util = require('./utility'),
clipPaste = require('./clip-paste'),
socketChat = require('./socket/chat'),
socketConf = require('./socket/config'),
clipPaste = require('./clip-paste');
processInfo = require('./view').processInfo;
var allRTs,
endTime,
... ... @@ -52,16 +53,6 @@ var tipTpl = require('hbs/service/tip.hbs'),
robotTpl = require('hbs/service/robot-msg.hbs'),
disTpl = require('hbs/service/discontent-row.hbs');
var processInfo = {
scrollLoad: false,
loadingHistory: false,
hasMore: true,
manual: false,
completeClose: false, // 评价完成后关闭
promoter: 1, // 评论发起者 1：客户自己 2：客服
savedEval: false // 是否保存过评论
};
require('bootstrap');
require('../common');
require('blueimp-file-upload/js/jquery.iframe-transport');
... ... @@ -74,12 +65,17 @@ encryptedUid = $encryptedUid.val();
assetsPrefix = $assetsPrefix.val();
socketConfCM = socketConf.conversationMessage;
socketConfCM.encryptedUid = encryptedUid;
processInfo.encryptedUid = encryptedUid;
// 原始配置信息用于重新连线
originConf = JSON.parse(JSON.stringify(socketConf));
// 页面初始化
var _loadPage = function() {
// 客服评价
var evalView = new view.Evaluate();
/**
* 添加新的消息
*/
... ... @@ -144,7 +140,6 @@ var _loadPage = function() {
var $area = $('.msg-area'),
msg = $area.val().trim();
// 发送前共通处理
beforeSendMsg();
if (!msgContent) {
... ... @@ -220,7 +215,7 @@ var _loadPage = function() {
systemTip(message.content);
// 显示人工客服
editArea.setIcons({
edit.setIcons({
'manual-service': true
});
}
... ... @@ -258,7 +253,7 @@ var _loadPage = function() {
});
// 隐藏人工
editArea.setIcons({
edit.setIcons({
'manual-service': false
});
break;
... ... @@ -273,7 +268,7 @@ var _loadPage = function() {
processInfo.manual = true;
// 显示评价&隐藏人工
editArea.setIcons({
edit.setIcons({
emoji: true,
image: true,
evaluate: true,
... ... @@ -287,11 +282,10 @@ var _loadPage = function() {
content: tipText
});
// 接入人工客服需要评价
processInfo.manual = true;
// 显示评价&隐藏人工
editArea.setIcons({
edit.setIcons({
emoji: true,
image: true,
evaluate: true,
... ... @@ -401,53 +395,6 @@ var _loadPage = function() {
}
/**
* 显示评价弹框
*/
function showEvalModal(cptClose) {
var $evalModal = $('#makeEvaluation');
// 评价完成后关闭
processInfo.completeClose = cptClose;
// 没有接入人工
if (!processInfo.manual) {
return;
}
// 评价原因
function discontentHtml(len, data) {
var i,
dom = '';
for (i = 0; i < len; i = i + 2) {
dom += disTpl({
id1: data[i].id,
id1Content: data[i].content,
id2: data[i + 1] && data[i + 1].id,
id2Content: data[i + 1] && data[i + 1].content
});
}
$evalModal.find('.discontent').empty().append(dom);
}
// 拉取评价原因
serviceApi.reason({
conversationId: socketConfCM.conversationId
})
.done(function(res) {
var data = res.data,
len = data.length;
if (res && res.code === 200) {
// 评价原因
len && discontentHtml(len, data);
}
$evalModal.modal('show');
});
}
/**
* 处理收到消息
*/
function getMessage(rec) {
... ... @@ -465,7 +412,7 @@ var _loadPage = function() {
if (isHidden) {
titleInterval = setInterval(function() {
document.title = '您有新消息！';
document.title = '您有新消息';
setTimeout(function() {
document.title = docTitle;
}, 300);
... ... @@ -511,10 +458,9 @@ var _loadPage = function() {
break;
case allTypes.EVAL_INVITE:
// 客服发起
if (!processInfo.savedEval) {
processInfo.promoter = 2;
showEvalModal();
evalView.open();
}
break;
... ... @@ -524,7 +470,7 @@ var _loadPage = function() {
case allTypes.OP_LEAVE:
socketChat.clear();
editArea.setIcons({
edit.setIcons({
emoji: false,
image: false
});
... ... @@ -533,7 +479,7 @@ var _loadPage = function() {
case allTypes.OFFLINE:
socketChat.clear();
editArea.setIcons({
edit.setIcons({
emoji: false,
image: false
});
... ... @@ -578,14 +524,14 @@ var _loadPage = function() {
},
onOpen: function() {
editArea.setIcons({
edit.setIcons({
evaluate: false,
'manual-service': false
});
},
onClose: function() {
editArea.setIcons({
edit.setIcons({
emoji: false,
image: false,
evaluate: false,
... ... @@ -783,57 +729,57 @@ var _loadPage = function() {
});
});
// 提交评价
$makeEvalModal.find('.submit').click(function() {
var $btnEval = $('.icon.evaluate'),
mEval = $('#makeEvaluation'),
reason = mEval.find('textarea').val().trim(),
star = mEval.find('.star.positive').length,
reasonTypes = mEval.find('.dis-row .type.chosen');
var data = {
conversationId: socketConfCM.conversationId,
encryptedUid: encryptedUid,
promoter: processInfo.promoter,
stars: star
};
var reasonIds,
idArray = [];
if (star < 4) {
$.each(reasonTypes, function(index, item) {
idArray.push($(item).data('id'));
});
reasonIds = idArray.join(':');
data.reasonIds = reasonIds;
data.reasonMsg = reason;
}
serviceApi.evaluate(data)
.done(function(res) {
processInfo.promoter = 1;
$btnEval.hide();
processInfo.savedEval = true;
if (res && res.code === 200) {
// 评价后通知客服
socketConfCM.type = allRTs.EVAL_NOTICE;
socketConfCM.uuid = uuid.v4();
socketChat.send(socketConfCM);
// 完成后关闭
if (processInfo.completeClose) {
window.close();
}
}
})
.always(function() {
mEval.modal('hide');
});
});
// // 提交评价
// $makeEvalModal.find('.submit').click(function() {
// var $btnEval = $('.icon.evaluate'),
// mEval = $('#makeEvaluation'),
// reason = mEval.find('textarea').val().trim(),
// star = mEval.find('.star.positive').length,
// reasonTypes = mEval.find('.dis-row .type.chosen');
// var data = {
// conversationId: socketConfCM.conversationId,
// encryptedUid: encryptedUid,
// promoter: processInfo.promoter,
// stars: star
// };
// var reasonIds,
// idArray = [];
// if (star < 4) {
// $.each(reasonTypes, function(index, item) {
// idArray.push($(item).data('id'));
// });
// reasonIds = idArray.join(':');
// data.reasonIds = reasonIds;
// data.reasonMsg = reason;
// }
// serviceApi.evaluate(data)
// .done(function(res) {
// processInfo.promoter = 1;
// $btnEval.hide();
// processInfo.savedEval = true;
// if (res && res.code === 200) {
// // 评价后通知客服
// socketConfCM.type = allRTs.EVAL_NOTICE;
// socketConfCM.uuid = uuid.v4();
// socketChat.send(socketConfCM);
// // 完成后关闭
// if (processInfo.completeClose) {
// window.close();
// }
// }
// })
// .always(function() {
// mEval.modal('hide');
// });
// });
// 根节点高度设置
$html.css({
... ... @@ -944,41 +890,6 @@ var _loadPage = function() {
}
});
// 星评
$document.on('click', '.make-eval .star', function() {
var el,
i,
len,
tag = $(this),
index = tag.index(),
$detailReason = $('.detail-reason'),
textEl = $('.make-eval .star-text'),
startList = $('.make-eval .stars .star');
var starText = {
0: '非常不满意',
1: '不满意',
2: '一般',
3: '满意',
4: '非常满意'
};
for (i = 0, len = startList.length; i < len; i++) {
el = $(startList[i]);
el.index() <= index && el.addClass('positive');
el.index() > index && el.removeClass('positive');
}
index < 3 && $detailReason.show();
index >= 3 && $detailReason.hide();
textEl.text(starText[index]);
});
// 选择不满意类型
$document.on('click', '.dis-row .type', function(e) {
$(e.target).toggleClass('chosen');
});
// 留言
$msgList.on('click', '.leave-msg', leaveMsg);
... ... @@ -1008,7 +919,7 @@ var _loadPage = function() {
},
2: function() {
showEvalModal();
evalView.open();
},
3: function() {
... ... @@ -1051,7 +962,7 @@ var _loadPage = function() {
$close.click(function() {
if (processInfo.manual && !processInfo.savedEval) {
// 没有保存过评论
showEvalModal(true);
evalView.open(true);
} else {
window.close();
}
... ...
... ... @@ -28,14 +28,14 @@ var $view = '<div class="mask-dialog preview-dialog">' +
'</div>';
var $viewHbs = Handlebars.compile($view);
/**
* 粘贴事件
* @param sl 事件元素选择器
* @param cb 上传成功的回调
*/
function Paste(sl, cb) {
if(typeof sl !== 'string') { return };
if (typeof sl !== 'string') { return; }
this.$el = document.querySelector(sl);
this.formData = null;
this.uploadCb = cb;
... ... @@ -47,33 +47,33 @@ Paste.prototype = {
bindEvents: function() {
var self = this;
this.$el.addEventListener("paste", function (e) {
this.$el.addEventListener('paste', function(e) {
var cbd = e.clipboardData;
var ua = window.navigator.userAgent;
// 如果是 Safari 直接 return
if ( !(e.clipboardData && e.clipboardData.items) ) {
if (!(e.clipboardData && e.clipboardData.items)) {
return;
}
// Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
if (cbd.items && cbd.items.length === 2 && cbd.items[0].kind === 'string' && cbd.items[1].kind === 'file' &&
cbd.types && cbd.types.length === 2 && cbd.types[0] === 'text/plain' && cbd.types[1] === 'Files' &&
ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49) {
return;
}
for(var i = 0; i < cbd.items.length; i++) {
for (var i = 0; i < cbd.items.length; i++) {
var item = cbd.items[i];
if(item.kind == "file"){
var file = item.getAsFile();
if (item.kind == 'file') {
var file = item.getAsFile();
if (file.size === 0) { return; }
self.formData = new FormData();
self.formData.append('files[]', file, 'clip.jpg');
var _upload = function() {
if(self.isSending) return;
if (self.isSending) return;
self.isSending = true;
$.ajax({
... ... @@ -103,14 +103,14 @@ Paste.prototype = {
$prev.on('click', '.head-close, .cancel-btn', self.close.bind(self))
.on('click', '.confirm-btn', _upload);
}
};
var _drawPreview = function(url) {
var $prev = $('.preview-dialog');
var $prev = $('.preview-dialog');
var $img = $prev.find('.clip-img');
var len = $img.length;
if(len) {
if (len) {
$img.attr('src', url);
self.$preview = $prev;
return;
... ... @@ -127,14 +127,14 @@ Paste.prototype = {
var reader = new FileReader();
reader.onload = function(e) {
var base64 = e.target.result;
var base64 = e.target.result;
var image = new Image();
image.src = base64;
image.onload = function() {
_drawPreview(base64);
self.open();
}
}
self.open();
};
};
reader.readAsDataURL(file);
}
... ... @@ -147,10 +147,9 @@ Paste.prototype = {
},
close: function() {
console.log(this);
this.$preview.hide();
}
}
};
Paste.prototype.constructor = Paste;
... ...
/**
* 消息编辑区
* @author: liqi <qi.li@yoho.cn>
* @date: 2016/11/26
*/
var $ = require('yoho-jquery');
module.exports = {
/**
* 消息编辑区图标显示
* true: 显示 false: 隐藏
*/
setIcons: function(opt) {
var $util = $('.msg-edit .util');
$.each(opt, function(key, val) {
var $el = $util.find('.' + key);
if (!$el.length || !val && val !== false) {
return;
}
val === true && $el.show();
val === false && $el.hide();
});
}
};
... ... @@ -18,7 +18,10 @@ var _ajax = function(method, reqUrl, params) {
type: method || 'GET',
url: reqUrl,
data: params
});
})
.fail(function() {
alert('服务器开小差了，请稍后重试。');
});
};
/**
... ...
... ... @@ -89,7 +89,7 @@ function sendMsg(msg) {
return;
}
if (socket.readyState === WebSocket.OPEN) {
if (socket && socket.readyState === WebSocket.OPEN) {
socket.send(JSON.stringify(msg));
} else {
options.socketClosedCb();
... ... @@ -97,6 +97,14 @@ function sendMsg(msg) {
}
/**
* 链接可用
* @returns {*|boolean}
*/
function isOpen() {
return socket && socket.readyState === WebSocket.OPEN;
}
/**
* 关闭socket
*/
function clearSocket() {
... ... @@ -109,6 +117,7 @@ module.exports = {
socket: socket,
init: socketInit,
clear: clearSocket,
send: sendMsg
send: sendMsg,
isOpen: isOpen
};
... ...
... ... @@ -13,7 +13,7 @@ exports.setEmoji = function(e) {
var $em = $('.emoji-component');
$.each(emMap, function(i, v) {
if(v.file === emId + "") {
if (v.file === emId + '') {
emText = v.text;
}
});
... ... @@ -21,3 +21,21 @@ exports.setEmoji = function(e) {
$em.hide();
};
/**
* 消息编辑区图标控制
* true: 显示 false: 隐藏
*/
exports.setIcons = function(opt) {
var $util = $('.msg-edit .util');
$.each(opt, function(key, val) {
var $el = $util.find('.' + key);
if (!$el.length || !val && val !== false) {
return;
}
val === true && $el.show();
val === false && $el.hide();
});
};
... ...
... ... @@ -28,3 +28,14 @@ exports.image = function(path) {
conMSG.uuid = uuid.v4();
_send(conMSG);
};
/**
* 评价完成
*/
exports.completeEval = function() {
if (chat.isOpen()) {
conMSG.type = recTypes.EVAL_NOTICE;
conMSG.uuid = uuid.v4();
_send(conMSG);
}
};
... ...
var $ = require('yoho-jquery');
var send = require('./socket/send');
var serviceApi = require('./service-api');
var socketConf = require('./socket/config');
var conMsg = socketConf.conversationMessage;
// 过程标示
var processSign = {
encryptedUid: '',
hasMore: true, // 更多消息
manual: false, // 人工客服
promoter: 1, // 评论发起者 1：客户自己 2：客服
savedEval: false, // 是否保存过评论
scrollLoad: false, // 滚动加载
completeClose: false, // 评价完成后关闭
loadingHistory: false // 加载消息
};
/**
* 评价客服view
* @constructor
*/
function Evaluate() {
this.$view = $('#makeEvaluation');
this.disTpl = require('hbs/service/discontent-row.hbs');
this.bindEvents();
}
/**
* 获取评价原因
*/
var _fetchReason = (function() {
var cache;
return function(render) {
if (cache) return render(cache);
serviceApi.reason({
conversationId: conMsg.conversationId
})
.done(function(res) {
if (res.code === 200) {
cache = res.data;
render(cache);
} else {
alert(res.message);
}
});
};
})();
/**
* 星评
*/
var _starChange = function(e) {
var self = this,
$ct = $(e.currentTarget),
index = $ct.index(),
$reason = self.$view.find('.detail-reason'),
$text = self.$view.find('.star-text'),
$list = self.$view.find('.star');
var starText = {
0: '非常不满意',
1: '不满意',
2: '一般',
3: '满意',
4: '非常满意'
};
for (var i = 0, len = $list.length; i < len; i++) {
var $el = $($list[i]);
$el.index() <= index && $el.addClass('positive');
$el.index() > index && $el.removeClass('positive');
}
index < 3 && $reason.show();
index >= 3 && $reason.hide();
$text.text(starText[index]);
};
/**
* 评价提交
*/
var _evalSubmit = function() {
var $btnEval = $('.icon.evaluate'),
mEval = $('#makeEvaluation'),
reason = mEval.find('textarea').val().trim(),
star = mEval.find('.star.positive').length,
reasonTypes = mEval.find('.dis-row .type.chosen');
var data = {
conversationId: conMsg.conversationId,
encryptedUid: processSign.encryptedUid,
promoter: processSign.promoter,
stars: star
};
var reasonIds,
idArray = [];
if (star < 4) {
$.each(reasonTypes, function(index, item) {
idArray.push($(item).data('id'));
});
reasonIds = idArray.join(':');
data.reasonIds = reasonIds;
data.reasonMsg = reason;
}
serviceApi.evaluate(data)
.done(function(res) {
$btnEval.hide();
processSign.savedEval = true;
if (res && res.code === 200) {
send.completeEval();
// 完成后关闭
if (processSign.completeClose) {
window.close();
}
}
})
.always(function() {
mEval.modal('hide');
});
};
Evaluate.prototype = {
bindEvents: function() {
var self = this;
this.$view.on('click', '.star', _starChange.bind(self))
.on('click', '.submit', _evalSubmit)
.on('click', '.dis-row .type', function(e) {
$(e.target).toggleClass('chosen');
});
},
open: function(close) {
var self = this;
processSign.completeClose = close;
if (!processSign.manual) {
return;
}
var _resetEval = function() {
self.$view.find('.star-text').html('非常满意');
self.$view.find('.star').addClass('positive');
self.$view.find('.other-reason').val('');
self.$view.find('.detail-reason').hide();
};
var _show = function(data) {
var dom = '';
_resetEval();
if (!data || !data.length) return self.$view.modal('show');
for (var i = 0, len = data.length; i < len; i = i + 2) {
dom += self.disTpl({
id1: data[i].id,
id1Content: data[i].content,
id2: data[i + 1] && data[i + 1].id,
id2Content: data[i + 1] && data[i + 1].content
});
}
self.$view.find('.discontent').empty().append(dom);
self.$view.modal('show');
};
_fetchReason(_show);
},
close: function() {
this.$view.modal('hide');
}
};
Evaluate.prototype.constructor = Evaluate;
module.exports = {
processInfo: processSign,
Evaluate: Evaluate
};
... ...