...
|
...
|
@@ -5,10 +5,17 @@ |
|
|
|
|
|
'use strict';
|
|
|
|
|
|
import {time} from './time';
|
|
|
import {tip} from './tip';
|
|
|
import {ChatRole, Customer, Employee, Robot} from './role';
|
|
|
import {RatingView, LeaveMSGView, OrderListView} from './view';
|
|
|
import { time } from './time';
|
|
|
import { tip } from './tip';
|
|
|
import { Customer, Employee} from './role';
|
|
|
import { RatingView, LeaveMSGView, OrderListView } from './view';
|
|
|
|
|
|
require('../../home/jquery.upload');
|
|
|
var saveImage = require('../../home/save-image');
|
|
|
|
|
|
var socket = require('./socket-chat'),
|
|
|
socketConf = require('./socket-config'),
|
|
|
cmEntity = socketConf.conversationMessage;
|
|
|
|
|
|
const chatBox = $('#chat-window');
|
|
|
|
...
|
...
|
@@ -16,9 +23,9 @@ const append = (html) => { |
|
|
chatBox.append(html);
|
|
|
};
|
|
|
|
|
|
let gg = new Customer(),
|
|
|
mm = new Employee();
|
|
|
let gg, mm;
|
|
|
|
|
|
// 聊天调整footer位置
|
|
|
const resizeFooter = () => {
|
|
|
let bottom = $('#chat-footer').height();
|
|
|
|
...
|
...
|
@@ -26,20 +33,146 @@ const resizeFooter = () => { |
|
|
chatBox[0].scrollTop = chatBox[0].scrollHeight;
|
|
|
};
|
|
|
|
|
|
$('.text-in').on('keydown', function(e) {
|
|
|
if (e.keyCode === 13) {
|
|
|
append(tip('奥巴马').offLine());
|
|
|
|
|
|
var chat = {
|
|
|
// 初始化websocket
|
|
|
init: function() {
|
|
|
const self = this;
|
|
|
|
|
|
socket.init(Object.assign(socketConf, {
|
|
|
onMessage: function(e) {
|
|
|
var received = JSON.parse(e.data);
|
|
|
console.log(received);
|
|
|
cmEntity.conversationId = received.newConversationId > 0 ?
|
|
|
received.newConversationId :
|
|
|
received.conversationId;
|
|
|
|
|
|
gg = new Customer(cmEntity.userHead);
|
|
|
mm = new Employee(cmEntity.userHead);
|
|
|
// 保存过程中信息
|
|
|
self.getMessage(received);
|
|
|
}
|
|
|
}));
|
|
|
},
|
|
|
|
|
|
// 处理收到的消息
|
|
|
getMessage: function(rec) {
|
|
|
var tipTpl,
|
|
|
recType = rec.type,
|
|
|
message = rec.message,
|
|
|
msgType = message.type,
|
|
|
allTypes = socketConf.recType;
|
|
|
|
|
|
switch (recType) {
|
|
|
|
|
|
case allTypes.ENTER:
|
|
|
this.enterSuccess(message);
|
|
|
break;
|
|
|
|
|
|
case allTypes.LINK_SUCCESS:
|
|
|
this.linkSuccess(msgType, message);
|
|
|
break;
|
|
|
|
|
|
case allTypes.CU_SEND:
|
|
|
this.handleCusMsg(rec, msgType, message);
|
|
|
break;
|
|
|
|
|
|
// case allTypes.BREAK_TIME:
|
|
|
// breakCountdown(message);
|
|
|
// break;
|
|
|
|
|
|
case allTypes.ROBOT_SEND:
|
|
|
rec.csName = rec.csName || '客服机器人';
|
|
|
append(mm.sendMsg(message.content));
|
|
|
resizeFooter();
|
|
|
|
|
|
break;
|
|
|
|
|
|
// case allTypes.CS_SEND:
|
|
|
// // 处理客服消息
|
|
|
// handleCsMsg(rec, msgType, message);
|
|
|
// break;
|
|
|
|
|
|
// case allTypes.EVAL_INVITE:
|
|
|
// // 客服发起
|
|
|
// processInfo.promoter = 2;
|
|
|
// showEvalModal();
|
|
|
// break;
|
|
|
|
|
|
// case allTypes.CS_CHATTING:
|
|
|
// // 正在人工会话
|
|
|
// csChatting(message);
|
|
|
// 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>
|
|
|
// </p>
|
|
|
// </div>`;
|
|
|
// break;
|
|
|
|
|
|
default:
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 刚进入提示
|
|
|
enterSuccess: function() {
|
|
|
append(time(Date.now()).show());
|
|
|
append(gg.sendMsg($(this).val(), true));
|
|
|
append(gg.sendImg('http://img2.imgtn.bdimg.com/it/u=3492499187,4068539923&fm=11&gp=0.jpg'));
|
|
|
$(this).val('');
|
|
|
append(tip().offLine());
|
|
|
},
|
|
|
|
|
|
// 连线人工客服
|
|
|
linkSuccess: function(type, message) {
|
|
|
var status = $('.chat-status'),
|
|
|
name = $('.service-name');
|
|
|
|
|
|
if (type === 2 || type === 3) {
|
|
|
status.css('background', '#85be4a');
|
|
|
name.text('YOHO!客服');
|
|
|
append(tip(message.content).onLine());
|
|
|
} else {
|
|
|
name.text('YOHO!客服');
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 用户发消息
|
|
|
handleCusMsg: function(rec, msgType, message) {
|
|
|
if (msgType === 2) {
|
|
|
append(gg.sendImg(message.content, true));
|
|
|
} else {
|
|
|
append(gg.sendMsg(message.content, true));
|
|
|
}
|
|
|
resizeFooter();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
chat.init();
|
|
|
|
|
|
// 用户发送消息
|
|
|
const sendMsg = function(type, content) {
|
|
|
if (!content) {
|
|
|
return;
|
|
|
} else {
|
|
|
cmEntity.type = 3;
|
|
|
cmEntity.message.content = content;
|
|
|
cmEntity.message.type = type || 1;
|
|
|
socket.send(JSON.stringify(cmEntity));
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 客户端接受消息
|
|
|
|
|
|
setTimeout(function() {
|
|
|
append(mm.sendMsg('想要玩的好,法老之鹰不可少!'));
|
|
|
append(mm.sendImg('http://www.027zpw.com/zimeiti/uploads/allimg/160525/09301R521-0.jpg'));
|
|
|
resizeFooter();
|
|
|
}, 1000);
|
|
|
$('.text-in').on('keydown', function(e) {
|
|
|
if (e.keyCode === 13) {
|
|
|
sendMsg(1, $(this).val());
|
|
|
$(this).val('');
|
|
|
}
|
|
|
});
|
|
|
|
...
|
...
|
@@ -54,6 +187,29 @@ $('.menu-trigger').on('touchend', function() { |
|
|
$menu.hide();
|
|
|
resizeFooter();
|
|
|
}
|
|
|
|
|
|
$('.upload-img').upload({
|
|
|
auto: true,
|
|
|
fileType: 'image/*',
|
|
|
uploadScript: '/api/upload/image',
|
|
|
fileObjName: 'filename',
|
|
|
fileSizeLimit: 999999,
|
|
|
height: '100%',
|
|
|
width: '100%',
|
|
|
multi: false,
|
|
|
formData: {
|
|
|
bucket: 'suggest'
|
|
|
},
|
|
|
onUploadComplete: function(file, data) {
|
|
|
let url;
|
|
|
|
|
|
data = saveImage.saveImage(data);
|
|
|
url = data.imgList[0].imgRelUrl + '?imageView2/2/w/640/q/90';
|
|
|
url = 'http://img11.static.yhbimg.com/suggest' + url;
|
|
|
sendMsg(2, url);
|
|
|
}
|
|
|
});
|
|
|
$('.uploadifive-button').css('position', 'absolute');
|
|
|
});
|
|
|
|
|
|
// 评论
|
...
|
...
|
@@ -87,12 +243,4 @@ $('#chat-window').on('click', '.chat-image', function() { |
|
|
fake.on('click', function() {
|
|
|
fake.fadeOut();
|
|
|
});
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
\ No newline at end of file |
...
|
...
|
|