Skip to content

施宇 / icsales

Go to a project
Commit df3c95cb by 施宇
Options

11

parent abb452f9
Inline Side-by-side
Showing with 521 additions and 133 deletions
dist/js/chat/index.js
...@@ -3,91 +3,168 @@ $(function () { ...@@ -3,91 +3,168 @@ $(function () {
conn: {}, conn: {},
orgName: "1113190618181018", orgName: "1113190618181018",
appName: "icsales", appName: "icsales",
defaultName: "18664936975",
templateObj: JSON.parse(Util.getCookie('template') || "{}"),
customerText: Util.getCookie('customer') || "",
isLoginSuccess: false,
img: "",
name: "",
id: "",
init: function () { init: function () {
this.ieFun() this.getUserInfo();
// this.ieFun();
this.connection(); this.connection();
this.connListen(); this.connListen();
this.login();
this.bindFunction(); this.bindFunction();
var data = JSON.stringify({
"grant_type": "client_credentials",
"client_id": "YXA6UWJlUJGNEemA0XUSlr6mDA",
"client_secret": "YXA6n8pckF065e7FPtukjJHAoa-4G74"
}, )
$.ajax({
type: 'post',
url: 'http://a1.easemob.com/1113190618181018/icsales/token',
data: data,
contentType: "application/json",
success: function (data) {
var token = data.access_token;
$.ajax({
type: 'get',
url: 'http://a1.easemob.com/1113190618181018/icsales/chatmessages/2019062513',
headers: {
Authorization: 'Bearer ' + token
}, },
success: function (data) { deleteCookie: function () {
Util.delCookie('template', cookieHostname);
Util.delCookie('templateBoolean', cookieHostname);
Util.delCookie('customer', cookieHostname);
},
getUserInfo: function () { //获取用户的基本信息
var self = this;
IcController.getData(apis.authme, 'GET', {
"token": Util.getCookie('token') || '',
}, function (res) {
if (res.err_code == 0) {
self.img = res.data.avatar;
self.name = res.data.company_name || '--';
self.id = res.data.user_id + '';
self.getHistoryUsers(res.data.im_username, res.data.im_password);
} else {
console.log('获取用户名失败');
layer.msg('聊天系统出错');
self.deleteCookie()
}
}, true, false)
}, },
error: function () { getHistoryUsers: function (name, password) {
layer.msg('网络出现问题，请重试！'); //获取用户聊天的成员记录
var self = this;
IcController.getData(apis.listrecord, 'GET', {
"token": Util.getCookie('token') || '',
}, function (res) {
if (res.errcode === 0) {
self.rendChatSection(res.data);
self.login(name, password);
} else {
layer.msg('获取历史纪录失败');
self.deleteCookie()
} }
}); });
},
addChatMember: function (id) {
IcController.getData(apis.addrecord, 'GET', {
"token": Util.getCookie('token') || '',
"user_id": id
}, function (res) {
if (res.errcode === 0) {
} else {
console.log('添加聊天成员失败')
}
}, false);
}, },
error: function () { rendChatSection: function (data) {
layer.msg('网络出现问题，请重试！'); console.log('获取成员')
this.addUser({}, true);
for (var i = 0; i < data.length; i++) {
this.addUser(data[i])
} }
});
}, },
defaultUser: function () { singleChat: function () {
//默认客服 if (JSON.stringify(this.templateObj) == '{}') {
var message = { $(".notice_classify[userid=" + this.defaultName + "]").click();
from: "18664936975", } else {
data: '' Util.delCookie('template', cookieHostname);
this.addUser({}, false, true);
var html = $(".notice_classify[userid=" + this.templateObj.userId + "]").clone();
$(".notice_classify[userid=" + this.templateObj.userId + "]").remove();
$(".notice_classify[userid=" + this.defaultName + "]").after(html);
$(".notice_classify[userid=" + this.templateObj.userId + "]").attr('isTemplate', true); //先获取历史纪录再发送模板，否则可能出现发送的消息显示两条
$(".notice_classify[userid=" + this.templateObj.userId + "]").click();
} }
this.receiveData(1, message, false);
}, },
singleChat: function () { customerChat: function () {
var templateStr = Util.getCookie('template'); if (Util.getCookie('customer')) {
var templateObj = {}; Util.delCookie('customer', cookieHostname);
if (templateStr) { $(".notice_classify[userid=" + this.defaultName + "]").attr('isCustomer', true);
templateObj = JSON.parse(templateStr)
} }
if (JSON.stringify(templateObj) !== '{}') {
var message = {
from: templateObj.userId,
data: ''
};
this.receiveData(1, message, false);
$(".notice_classify[userid=" + templateObj.userId + "]").click();
this.sendCmd(templateObj);
Util.delCookie('template');
},
addUser: function (obj, isDefault, isFirst) {
var id, name, img, touserid;
if (isDefault) {
id = this.defaultName;
name = 'IC助手客服';
touserid = "";
img = dist + "/images/timg.jpg";
} else {
if (isFirst) {
id = this.templateObj.userId;
touserid = this.templateObj.touserid;
name = this.templateObj.userName;
img = this.templateObj.userImg || (dist + "/images/default.jpg");
} else {
id = obj.im_username;
name = obj.company_name || '--';
touserid = obj.user_id;
img = obj.avatar || (dist + "/images/default.jpg")
} }
}
var userLen = $('.chat_item_content').find('#' + id).length;
if (userLen) { //用户存在
return;
} else { //用户不存在
var lefthtml = '<div class="notice_classify" userid="' + id + '" firstClick="true" touserid=' + touserid + '>' + this.userHtml(0, {
name: name,
id: id,
img: img
}, '') + '</div>';;
var righthtml = '<div class="chat_item" id="' + id + '">' +
'<div class="title clr">' +
// '<div class="fr btn btn_border">' +
// '<span class="icon iconfont iconjuxing23"></span>' +
// '<i>' + id + '</i>' +
// '</div>' +
'<h3 class="bold boxsiz">' + name + '</h3>' +
'</div>' +
'<div class="notice_list boxsiz">' +
'<div class="notice_item_content">' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$('.notice_left_content').append(lefthtml);
$('.chat_item_content').append(righthtml)
}
}, },
connection: function () { connection: function () {
WebIM.config = config;
//建立聊天链接 //建立聊天链接
this.conn = new WebIM.connection({ this.conn = WebIM.conn = new WebIM.default.connection({
appKey: WebIM.config.appkey,
isHttpDNS: WebIM.config.isHttpDNS,
isMultiLoginSessions: WebIM.config.isMultiLoginSessions, isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === host: WebIM.config.Host,
'https:', https: WebIM.config.https,
url: WebIM.config.xmppURL, url: WebIM.config.xmppURL,
apiUrl: WebIM.config.apiURL,
isAutoLogin: true, isAutoLogin: true,
heartBeatWait: WebIM.config.heartBeatWait, heartBeatWait: WebIM.config.heartBeatWait,
autoReconnectNumMax: WebIM.config.autoReconnectNumMax, autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
autoReconnectInterval: WebIM.config.autoReconnectInterval autoReconnectInterval: WebIM.config.autoReconnectInterval,
isStropheLog: WebIM.config.isStropheLog,
delivery: WebIM.config.delivery
}); });
// 初始化上传组件 fileInputId对应页面上的file组件id
WebIM.flashUpload = UploadShim({
fileInputId: 'image'
}, this.conn).flashUpload;
//增加表情 //增加表情
WebIM.Emoji = { WebIM.Emoji = {
path: dist + '/faces/', path: dist + '/faces/',
...@@ -166,47 +243,48 @@ $(function () { ...@@ -166,47 +243,48 @@ $(function () {
clock += ss; clock += ss;
return (clock); return (clock);
}, },
userHtml: function (num, user, message) { userHtml: function (num, obj, message) {
//左边用户的dom拼接 //左边用户的dom拼接
if (num == 0) { if (num == 0) {
return '<img src="' + dist + '/images/test.jpg" alt="" class="user_logo">' + return '<img src="' + obj.img + '" alt="" class="user_logo">' +
'<div class="user_right">' + '<div class="user_right">' +
'<div class="clr">' + '<div class="clr">' +
'<h3 class="boxsiz ellipsis">' + user + '</h3>' + '<h3 class="boxsiz ellipsis">' + obj.name + '</h3>' +
'</div>' + '</div>' +
'<div class="message ellipsis">' + message + '</div>' + '<div class="message ellipsis">' + message + '</div>' +
'</div>' '</div>'
} else { } else {
return '<img src="' + dist + '/images/test.jpg" alt="" class="user_logo">' + return '<img src="' + obj.img + '" alt="" class="user_logo">' +
'<div class="user_right">' + '<div class="user_right">' +
'<div class="clr">' + '<div class="clr">' +
'<span class="num fr">' + num + '</span>' + '<span class="num fr">' + num + '</span>' +
'<h3 class="boxsiz ellipsis">' + user + '</h3>' + '<h3 class="boxsiz ellipsis">' + obj.name + '</h3>' +
'</div>' + '</div>' +
'<div class="message ellipsis">' + message + '</div>' + '<div class="message ellipsis">' + message + '</div>' +
'</div>' '</div>'
} }
}, },
messageHtml: function (leftOrRight, html, isTemplate) { messageHtml: function (leftOrRight, html, isTemplate, isHistory, time) {
//右边消息的dom拼接 isTemplate 是否是模板 //右边消息的dom拼接 isTemplate 是否是模板
var htmlp = '<p>' + html + '</p>'; var htmlp = '<p>' + html.message + '</p>';
var img = html.img || (dist + '/images/default.jpg')
if (isTemplate) { if (isTemplate) {
var htmlp = '<div class="template lineBlock boxsiz">' + var htmlp = '<div class="template lineBlock boxsiz">' +
'<img src="http://resic.liexin.com/images/test.jpg" alt="">' + '<img src="' + (html.goodImage || dist + "/images/defaultgood.png") + '" alt="">' +
'<div class="template_right">' + '<div class="template_right">' +
'<div class="template_right_top clr">' + '<div class="template_right_top clr">' +
'<h3 class="bold fl">'+html.type+'</h3>' + '<h3 class="bold fl">' + html.type + '</h3>' +
'<div class="price bold fr">'+html.price+'</div>' + '<div class="price bold fr">' + html.price + '</div>' +
'</div>' + '</div>' +
'<div class="template_right_bottom">' + '<div class="template_right_bottom">' +
'<div class="desc1 clr">' + '<div class="desc1 clr">' +
'<div class="brand fl">品牌：<i>'+html.brand+'</i></div>' + '<div class="brand fl">品牌：<i>' + html.brand + '</i></div>' +
'<div class="hq fl">货期：<i>'+html.hq+'</i></div>' + '<div class="hq fl">货期：<i>' + html.hq + '</i></div>' +
'</div>' + '</div>' +
'<div class="desc2 clr">' + '<div class="desc2 clr">' +
'<div class="num fl">数量：<i class="bold">'+html.num+'PCS</i></div>' + '<div class="num fl">数量：<i class="bold">' + html.num + '</i></div>' +
'<div class="time fl">时间：<i>2019-05-23 15:57 </i></div>' + '<div class="time fl">时间：<i>' + html.time + '</i></div>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
...@@ -215,22 +293,23 @@ $(function () { ...@@ -215,22 +293,23 @@ $(function () {
if (leftOrRight == 1) { //右边 if (leftOrRight == 1) { //右边
if (html) { if (html) {
return '<div class="notice_item right clr">' + return '<div class="notice_item right clr">' +
'<img src="' + dist + '/images/test.jpg" alt="" class="fr user_logo">' + '<img src="' + img + '" alt="" class="fr user_logo">' +
'<div class="notice_content">' + '<div class="notice_content">' +
htmlp + htmlp +
'<div>' + this.curentTime() + '</div>' + '<div>' + (isHistory ? time : this.curentTime()) + '</div>' +
'</div>' +
'</div>' '</div>'
} else { } else {
return '' return ''
} }
} else { //左边 } else { //左边
if (html) { if (html) {
return '<div class = "notice_item left clr" > ' + return '<div class = "notice_item left clr" > ' +
'<img src="' + dist + '/images/test.jpg" alt="" class="fl user_logo">' + '<img src="' + img + '" alt="" class="fl user_logo">' +
'<div class="notice_content">' + '<div class="notice_content">' +
htmlp + htmlp +
'<div>' + this.curentTime() + '</div>' + '<div>' + (isHistory ? time : this.curentTime()) + '</div>' +
'</div>' +
'</div>' '</div>'
} else { } else {
return '' return ''
...@@ -243,87 +322,126 @@ $(function () { ...@@ -243,87 +322,126 @@ $(function () {
var regContent = ""; var regContent = "";
var htmlStr = ""; var htmlStr = "";
var self = this; var self = this;
var emojiTxt = ""
if (type == 1) { if (type == 1) {
if (isTemplate) { if (isTemplate) {
regContent = message.ext.type + ' ' + message.ext.price; regContent = message.type + ' ' + message.price;
htmlStr = message.ext; htmlStr = message;
} else { } else {
regContent = message.data; regContent = message.message;
htmlStr = message.data; htmlStr = message;
} }
} else if (type == 2) { } else if (type == 2) {
regContent = '[图片]'; regContent = '[图片]';
htmlStr = '<img src ="' + message.url + '" class="edit_img"/>'; htmlStr = {
message: '<img src ="' + message.url + '" class="edit_img"/>',
name: message.name,
img: message.img,
id: message.id
}
} else { } else {
var data = message.data; var data = message.message;
for (var i = 0, l = data.length; i < l; i++) { for (var i = 0, l = data.length; i < l; i++) {
if (data[i].type == 'emoji') { if (data[i].type == 'emoji') {
regContent += '[表情]'; regContent += '[表情]';
htmlStr += '<img src ="' + data[i].data + '" width=25 height=25/>'; emojiTxt += '<img src ="' + data[i].data + '" width=25 height=25/>';
} else { } else {
regContent += data[i].data; regContent += data[i].data;
htmlStr += data[i].data; emojiTxt += data[i].data;
} }
}; };
htmlStr = {
message: emojiTxt,
name: message.name,
img: message.img,
id: message.id
}
} }
var len = $('.notice_classify').length; var len = $('.notice_classify').length;
var messageSigleStr = var messageSigleStr =
'<div class="title clr">' + '<div class="title clr">' +
'<div class="fr btn btn_border">' + // '<div class="fr btn btn_border">' +
'<span class="icon iconfont iconjuxing23"></span>' + // '<span class="icon iconfont iconjuxing23"></span>' +
'<i>' + message.from + '</i>' + // '<i>' + message.to + '</i>' +
'</div>' + // '</div>' +
'<h3 class="bold boxsiz">' + message.from + '</h3>' + '<h3 class="bold boxsiz">' + message.name + '</h3>' +
'</div>' + '</div>' +
'<div class="notice_list boxsiz">' + '<div class="notice_list boxsiz">' +
'<div class="notice_item_content">' + '<div class="notice_item_content">' +
self.messageHtml(2, htmlStr, isTemplate) + self.messageHtml(2, message, isTemplate) +
'</div>' + '</div>' +
'</div>' + '</div>' +
'</div>'; '</div>';
if (!len) { if (!len) {
//新用户 //新用户
var userStr = '<div class="notice_classify active" userid="' + message.from + '">' + Util.delCookie('templateBoolean', cookieHostname);
self.userHtml(0, message.from, regContent) + '</div>'; var userStr = '<div class="notice_classify active" userid="' + message.from + '" firstClick="true" newMember="true" touserid=' + message.touserid + '>' +
self.userHtml(0, message, regContent) + '</div>';
var messageStr = '<div class="chat_item active" id="' + message.from + '">' + var messageStr = '<div class="chat_item active" id="' + message.from + '">' +
messageSigleStr + '</div>' messageSigleStr + '</div>'
$('.notice_left_content').append(userStr); $(".notice_classify[userid=" + self.defaultName + "]").after(userStr);
// $('.notice_left_content').append(userStr);
$('.chat_item_content').append(messageStr) $('.chat_item_content').append(messageStr)
} else { } else {
$('.notice_classify').each(function (index) { $('.notice_classify').each(function (index) {
var userId = $(this).attr('userid'); var userId = $(this).attr('userid');
var isNowChat = $('.notice_classify').eq(index).hasClass('active'); var isNowChat = $('.notice_classify').eq(index).hasClass('active');
var firstClick = $(this).attr('firstClick');
if (userId == message.from) { if (userId == message.from) {
//已有用户 //已有用户
if (isNowChat) { if (isNowChat) {
//当前用户 //当前用户
$(this).html(self.userHtml(0, message.from, regContent)); $(this).html(self.userHtml(0, message, regContent));
if (Util.getCookie('templateBoolean')) {
Util.delCookie('templateBoolean', cookieHostname);
} else {
$('#' + userId).find('.notice_item_content').append(self.messageHtml(2, $('#' + userId).find('.notice_item_content').append(self.messageHtml(2,
htmlStr, isTemplate)); htmlStr, isTemplate));
}
var imgLen = $('#' + userId).find('img').length;
if (!imgLen) {
setTimeout(function () {
var contentHeight = $('#' + userId).find('.notice_item_content')
.height();
$('#' + userId).find('.notice_list').scrollTop(contentHeight);
}, 200)
} else {
$('#' + userId).find('img:last').load(function () {
setTimeout(function () {
var contentHeight = $('#' + userId).find('.notice_item_content') var contentHeight = $('#' + userId).find('.notice_item_content')
.height(); .height();
$('#' + userId).find('.notice_list').scrollTop(contentHeight); $('#' + userId).find('.notice_list').scrollTop(contentHeight);
}, 200)
})
}
} else { } else {
//非当前用户 //非当前用户
Util.delCookie('templateBoolean', cookieHostname);
var num = Number($(this).find('.num').text()); var num = Number($(this).find('.num').text());
$(this).html(self.userHtml(num + 1, message.from, regContent)); $(this).html(self.userHtml(num + 1, message, regContent));
var html = $(this).clone();
$(this).remove();
$(".notice_classify[userid=" + self.defaultName + "]").after(html);
if (!firstClick) {
$('#' + userId).find('.notice_item_content').append(self.messageHtml(2, $('#' + userId).find('.notice_item_content').append(self.messageHtml(2,
htmlStr, isTemplate)); htmlStr, isTemplate));
} }
}
return false; return false;
} else { } else {
if (index == len - 1) { if (index == len - 1) {
//新用户 //新用户
Util.delCookie('templateBoolean', cookieHostname);
var userStr = '<div class="notice_classify" userid="' + var userStr = '<div class="notice_classify" userid="' +
message.from + '">' + message.from + '" newMember="true" touserid=' + message.touserid + '>' +
self.userHtml(1, message.from, regContent) + '</div>'; self.userHtml(1, message, regContent) + '</div>';
var messageStr = '<div class="chat_item" id="' + var messageStr = '<div class="chat_item" id="' +
message.from + '">' + message.from + '">' +
messageSigleStr + '</div>' messageSigleStr + '</div>';
$('.notice_left_content').append(userStr); $(".notice_classify[userid=" + self.defaultName + "]").after(userStr);
$('.chat_item_content').append(messageStr) $('.chat_item_content').append(messageStr)
} }
} }
...@@ -335,19 +453,50 @@ $(function () { ...@@ -335,19 +453,50 @@ $(function () {
// listern，添加回调函数; // listern，添加回调函数;
self.conn.listen({ self.conn.listen({
onOpened: function (message) { onOpened: function (message) {
self.defaultUser(); console.log('登入成功')
self.isLoginSuccess = true;
self.customerChat();
self.singleChat(); self.singleChat();
}, },
onTextMessage: function (message) { onTextMessage: function (message) {
self.receiveData(1, message, false) self.receiveData(1, {
name: message.ext.name || '--',
id: message.ext.id,
img: message.ext.img || (dist + "/images/default.jpg"),
message: message.data,
from: message.from,
touserid: message.ext.touserid
}, false)
}, //收到文本消息; }, //收到文本消息;
onEmojiMessage: function (message) { onEmojiMessage: function (message) {
self.receiveData(3, message, false) self.receiveData(3, {
name: message.ext.name || '--',
id: message.ext.id,
img: message.ext.img || (dist + "/images/default.jpg"),
message: message.data,
from: message.from,
touserid: message.ext.touserid
}, false)
}, //收到表情消息; }, //收到表情消息;
onCmdMessage: function (message) { onCmdMessage: function (message) {
// console.log('CMD'); console.log(message)
self.receiveData(1, message, true) self.receiveData(1, {
name: message.ext.name || '--',
id: message.ext.id,
img: message.ext.img || (dist + "/images/default.jpg"),
from: message.from,
type: message.ext.type,
price: message.ext.price,
goodImage: message.ext.goodImage,
brand: message.ext.brand,
hq: message.ext.hq,
num: message.ext.num,
hq: message.ext.hq,
time: message.ext.time,
touserid: message.ext.touserid
}, true);
self.addChatMember(message.ext.id)
}, //收到命令消息; }, //收到命令消息;
onPictureMessage: function (message) { onPictureMessage: function (message) {
var options = { var options = {
...@@ -355,7 +504,14 @@ $(function () { ...@@ -355,7 +504,14 @@ $(function () {
}; };
options.onFileDownloadComplete = function () { options.onFileDownloadComplete = function () {
// 图片下载成功; // 图片下载成功;
self.receiveData(2, message, false) self.receiveData(2, {
name: message.ext.name || '--',
id: message.ext.id,
img: message.ext.img || (dist + "/images/default.jpg"),
from: message.from,
url: message.url,
touserid: message.ext.touserid
}, false)
}; };
...@@ -363,7 +519,7 @@ $(function () { ...@@ -363,7 +519,7 @@ $(function () {
// 图片下载失败 // 图片下载失败
// console.log('Image download failed!'); // console.log('Image download failed!');
}; };
WebIM.utils.download.call(self.conn, options); // 意义待查; WebIM.default.utils.download.call(self.conn, options); // 意义待查;
}, //收到图片消息; }, //收到图片消息;
...@@ -375,24 +531,26 @@ $(function () { ...@@ -375,24 +531,26 @@ $(function () {
}, //本机网络掉线; }, //本机网络掉线;
onError: function (message) { onError: function (message) {
// console.log('Error', WebIM.utils.stringify(message)); // console.log('Error', WebIM.utils.stringify(message));
console.log("Error: " + WebIM.utils.stringify(message)); console.log('onError: ', message);
// layer.msg('聊天系统出错');
}, //失败回调; }, //失败回调;
}); });
}, },
login: function () { login: function (user, password) {
// open，登录; // open，登录;
var options = { var options = {
apiUrl: WebIM.config.apiURL, apiUrl: WebIM.config.apiURL,
user: "18589050841", user: user,
pwd: "123456", pwd: password,
appKey: WebIM.config.appkey appKey: WebIM.config.appkey
}; };
try { try {
this.conn.open(options); this.conn.open(options);
} catch (e) { } catch (e) {
console.log(WebIM.config.apiURL) console.log(e);
// alert('open fail' + e.message) layer.msg('登入失败');
this.deleteCookie();
} }
}, },
...@@ -400,84 +558,165 @@ $(function () { ...@@ -400,84 +558,165 @@ $(function () {
var self = this; var self = this;
// 私聊发送文本消息，发送表情同发送文本消息，只是会在对方客户端将表情文本进行解析成图片; // 私聊发送文本消息，发送表情同发送文本消息，只是会在对方客户端将表情文本进行解析成图片;
var userId = $('.notice_left ').find('.active').attr('userid'); var userId = $('.notice_left ').find('.active').attr('userid');
var touserid = $('.notice_left ').find('.active').attr('touserid');
var id = this.conn.getUniqueId(); var id = this.conn.getUniqueId();
var msg = new WebIM.message('txt', id); var msg = new WebIM.default.message('txt', id);
var emojiMessage = WebIM.utils.parseEmoji(content); //表情解析工具 var emojiMessage = WebIM.default.utils.parseEmoji(content); //表情解析工具
var ext = {
timer: self.curentTime(),
id: self.id,
name: self.name,
img: self.img,
touserid: touserid
};
msg.set({ msg.set({
msg: content, // 消息内容; msg: content, // 消息内容;
to: userId, // 接收消息对象; to: userId, // 接收消息对象;
roomType: false, ext: ext,
success: function (id, serverMsgId) { success: function (id, serverMsgId) {
$('#' + userId).find('.notice_item_content').append(self.messageHtml(1, $('#' + userId).find('.notice_item_content').append(self.messageHtml(1, {
emojiMessage, false)); message: emojiMessage,
name: self.name,
img: self.img,
id: self.id
}, false));
var imgLen = $('#' + userId).find('img').length;
if (!imgLen) {
setTimeout(function () {
var contentHeight = $('#' + userId).find('.notice_item_content')
.height();
$('#' + userId).find('.notice_list').scrollTop(contentHeight);
}, 200)
} else {
$('#' + userId).find('img:last').load(function () {
setTimeout(function () {
var contentHeight = $('#' + userId).find('.notice_item_content') var contentHeight = $('#' + userId).find('.notice_item_content')
.height(); .height();
$('#' + userId).find('.notice_list').scrollTop(contentHeight); $('#' + userId).find('.notice_list').scrollTop(contentHeight);
}, 200)
})
}
$('#chat_textarea').val(''); $('#chat_textarea').val('');
}, },
fail: function () { fail: function (e) {
console.log("Send private text failed"); console.log("Send private text failed", e);
layer.msg('消息发送失败');
} }
}); });
// console.log(msg.body)
this.conn.send(msg.body); this.conn.send(msg.body);
}, },
sendCmd: function (templateObj) { sendCmd: function (templateObj) {
var self = this; var self = this;
var userId = $('.notice_left ').find('.active').attr('userid'); var userId = $('.notice_left ').find('.active').attr('userid');
var touserid = $('.notice_left ').find('.active').attr('touserid');
var id = this.conn.getUniqueId(); var id = this.conn.getUniqueId();
var msg = new WebIM.message('cmd', id); var msg = new WebIM.default.message('cmd', id);
var params = $.extend({}, templateObj, {
timer: self.curentTime(),
name: self.name,
id: self.id,
img: self.img,
touserid: touserid
});
msg.set({ msg.set({
msg: 'template', msg: 'template',
to: userId, to: userId,
roomType: false,
action: "template", action: "template",
ext: templateObj, ext: params,
success: function (id, serverMsgId) { success: function () {
self.addChatMember(templateObj.targetId);
$('#' + userId).find('.notice_item_content').append(self.messageHtml(1, $('#' + userId).find('.notice_item_content').append(self.messageHtml(1,
templateObj, true)); params, true));
var imgLen = $('#' + userId).find('img').length;
if (!imgLen) {
setTimeout(function () {
var contentHeight = $('#' + userId).find('.notice_item_content') var contentHeight = $('#' + userId).find('.notice_item_content')
.height(); .height();
$('#' + userId).find('.notice_list').scrollTop(contentHeight); $('#' + userId).find('.notice_list').scrollTop(contentHeight);
}, 200)
} else {
$('#' + userId).find('img:last').load(function () {
setTimeout(function () {
var contentHeight = $('#' + userId).find('.notice_item_content')
.height();
$('#' + userId).find('.notice_list').scrollTop(contentHeight);
}, 200)
})
}
}, },
fail: function () { fail: function () {
console.log("Send Cmd failed"); console.log("Send Cmd failed");
layer.msg('消息发送失败');
} }
}); });
this.conn.send(msg.body); this.conn.send(msg.body);
Util.delCookie('templateBoolean', cookieHostname);
}, },
sendPrivateImg: function () { sendPrivateImg: function () {
// 私聊发送图片消息; // 私聊发送图片消息;
var self = this; var self = this;
var id = this.conn.getUniqueId(); var id = this.conn.getUniqueId();
var msg = new WebIM.message('img', id); var msg = new WebIM.default.message('img', id);
var input = $('#img_upload')[0]; // 选择图片的input; var input = $('#img_upload')[0]; // 选择图片的input;
var file = WebIM.utils.getFileUrl(input); // 将图片转化为二进制文件; var file = WebIM.default.utils.getFileUrl(input); // 将图片转化为二进制文件;
var userId = $('.notice_left').find('.active').attr('userid'); var userId = $('.notice_left').find('.active').attr('userid');
var touserid = $('.notice_left ').find('.active').attr('touserid');
var option = { var option = {
apiUrl: WebIM.config.apiURL, apiUrl: WebIM.config.apiURL,
file: file, file: file,
to: '18664936975', to: userId,
roomType: false, ext: {
// chatType: 'singleChat', timer: self.curentTime(),
id: self.id,
name: self.name,
img: self.img,
touserid: touserid
},
flashUpload: WebIM.flashUpload, flashUpload: WebIM.flashUpload,
onFileUploadError: function () { onFileUploadError: function () {
console.log(file);
console.log('失败') console.log('失败')
}, },
onFileUploadComplete: function () {}, onFileUploadComplete: function () {
console.log('消息上传成功')
},
success: function () { success: function () {
var htmlStr = '<img src ="' + file.url + '" class="edit_img"/>'; var htmlStr = '<img src ="' + file.url + '" class="edit_img"/>';
$('#' + userId).find('.notice_item_content').append(self.messageHtml(1, $('#' + userId).find('.notice_item_content').append(self.messageHtml(1, {
htmlStr, false)); message: htmlStr,
name: self.name,
img: self.img,
id: self.id
}, false));
var imgLen = $('#' + userId).find('img').length;
if (!imgLen) {
setTimeout(function () {
var contentHeight = $('#' + userId).find('.notice_item_content')
.height();
$('#' + userId).find('.notice_list').scrollTop(contentHeight);
}, 200)
} else {
$('#' + userId).find('img:last').load(function () {
setTimeout(function () {
var contentHeight = $('#' + userId).find('.notice_item_content') var contentHeight = $('#' + userId).find('.notice_item_content')
.height(); .height();
$('#' + userId).find('.notice_list').scrollTop(contentHeight); $('#' + userId).find('.notice_list').scrollTop(contentHeight);
}, 200)
})
}
$('#img_upload').val(''); $('#img_upload').val('');
}, },
fail: function () {
console.log("Send Image failed");
layer.msg('消息发送失败');
}
}; };
msg.set(option); msg.set(option);
console.log(msg.body)
this.conn.send(msg.body); this.conn.send(msg.body);
}, },
...@@ -523,18 +762,166 @@ $(function () { ...@@ -523,18 +762,166 @@ $(function () {
}) })
$('.notice_left').on('click', '.notice_classify', function () { $('.notice_left').on('click', '.notice_classify', function () {
var id = $(this).attr('userid'); var id = $(this).attr('userid');
var isTemplate = $(this).attr('isTemplate');
var isCustomer = $(this).attr('iscustomer');
var firstClick = $(this).attr('firstClick');
var newMember = $(this).attr('newMember');
$('#' + id).addClass('active').siblings('.chat_item').removeClass('active'); $('#' + id).addClass('active').siblings('.chat_item').removeClass('active');
$(this).find('.num').remove(); $(this).find('.num').remove();
$(this).addClass('active').siblings('.notice_classify').removeClass('active'); $(this).addClass('active').siblings('.notice_classify').removeClass('active');
var contentHeight = $('#' + id).find('.notice_item_content').height(); if (isCustomer) {
$(this).removeAttr('iscustomer');
if (self.isLoginSuccess) { //登入成功 获取聊天记录
self.getHistoryData(id, false, true)
} else {
layer.msg('聊天系统出错');
return;
}
return;
}
if (isTemplate) {
$(this).removeAttr('isTemplate');
$(this).removeAttr('firstClick');
if (self.isLoginSuccess) { //登入成功 获取聊天记录
self.getHistoryData(id, true)
} else {
layer.msg('聊天系统出错');
return;
}
} else {
if (newMember) {
setTimeout(function () {
var contentHeight = $('#' + id).find('.notice_item_content')
.height();
$('#' + id).find('.notice_list').scrollTop(contentHeight);
}, 200)
return
}
if (firstClick) {
$(this).removeAttr('firstClick');
if (self.isLoginSuccess) { //登入成功 获取聊天记录
self.getHistoryData(id);
} else {
layer.msg('聊天系统出错');
return;
}
} else {
setTimeout(function () {
var contentHeight = $('#' + id).find('.notice_item_content')
.height();
$('#' + id).find('.notice_list').scrollTop(contentHeight); $('#' + id).find('.notice_list').scrollTop(contentHeight);
}, 200)
}
}
}); });
$('.notice_right ').on('click', '.edit_img', function () { $('.notice_right ').on('click', '.edit_img', function () {
}) })
},
getHistoryData: function (id, isTemplate, isCustomer) {
var self = this;
this.conn.fetchHistoryMessages({
queue: id,
count: '50',
success: function (data) {
self.rendHistoryMessage(id, data, isTemplate)
if (isTemplate) {
self.sendCmd(self.templateObj);
}
if (isCustomer) {
if (self.customerText) {
self.sendPrivateText(self.customerText)
} else {
return
}
}
},
fail: function (e) {
console.log(e)
layer.msg('获取历史纪录失败');
if (isTemplate) {
self.sendCmd(self.templateObj);
}
if (isCustomer) {
if (self.customerText) {
self.sendPrivateText(self.customerText)
} else {
return
}
}
}
})
},
rendHistoryMessage: function (id, data, isTemplate) {
var chatCon = "";
for (var i = 0; i < data.length; i++) {
var fromId = data[i].from;
var rightOrLeft = 1; //默认右边
var emojiTxt = "";
if (fromId == id) { //接收的 左边
rightOrLeft = 2;
}
if (data[i].data) { //消息或者表情
if (typeof (data[i].data) == 'string') {
chatCon += this.messageHtml(rightOrLeft, {
message: data[i].data,
name: data[i].ext.name,
img: data[i].ext.img,
id: data[i].ext.id
}, false, true, data[i].ext.timer);
} else {
for (var j = 0; j < data[i].data.length; j++) {
if (data[i].data[j].type == "txt") {
emojiTxt += data[i].data[j].data
} else {
emojiTxt += '<img src ="' + data[i].data[j].data + '" width=25 height=25/>';
}
}
chatCon += this.messageHtml(rightOrLeft, {
message: emojiTxt,
name: data[i].ext.name,
img: data[i].ext.img,
id: data[i].ext.id
}, false, true, data[i].ext.timer);
}
} else if (data[i].url) { //图片
chatCon += this.messageHtml(rightOrLeft, {
message: '<img src ="' + data[i].url + '" class="edit_img"/>',
name: data[i].ext.name,
img: data[i].ext.img,
id: data[i].ext.id
}, false, true, data[i].ext.timer);
} else if (data[i].action == 'template') { //模板
chatCon += this.messageHtml(rightOrLeft, data[i].ext, true, true, data[i].ext.timer);
}
}
$('#' + id).find('.notice_item_content').prepend(chatCon);
if (!isTemplate) {
var imgLen = $('#' + id).find('img').length;
if (!imgLen) {
setTimeout(function () {
var contentHeight = $('#' + id).find('.notice_item_content')
.height();
$('#' + id).find('.notice_list').scrollTop(contentHeight);
}, 200)
} else {
$('#' + id).find('img:last').load(function () {
setTimeout(function () {
var contentHeight = $('#' + id).find('.notice_item_content')
.height();
$('#' + id).find('.notice_list').scrollTop(contentHeight);
}, 200)
})
} }
}
},
}; };
chatObj.init(); chatObj.init();
}) })
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment