Skip to content

施宇 / icsales

Go to a project
Commit b89a323c by 施宇
Options

1111

parent 6801f737
Inline Side-by-side
Showing with 231 additions and 79 deletions
Application/Home/View/Chat/index.html
...@@ -16,62 +16,24 @@ ...@@ -16,62 +16,24 @@
<div class="content_div"> <div class="content_div">
<div class="notice_left boxsiz"> <div class="notice_left boxsiz">
<div class="notice_left_content boxsiz"> <div class="notice_left_content boxsiz">
<!-- <div class="notice_classify ">
<img src="__PUBLIC__/images/test.jpg" alt="" class="user_logo">
<div class="user_right">
<div class="clr">
<span class="num fr">23</span>
<h3 class="boxsiz ellipsis">深圳市猎芯科技有限公司</h3>
</div>
<p class="ellipsis">最快什么时候能出库。</p>
</div>
</div> -->
</div> </div>
</div> </div>
<div class="notice_right boxsiz"> <div class="notice_right boxsiz">
<textarea id="chat_textarea" style="display: none;" class="chat_textarea"></textarea> <textarea id="chat_textarea" style="display: none;" class="chat_textarea"></textarea>
<div class="title clr"> <div class="chat_item_content">
<div class="fr btn btn_border"> <!-- <div class="chat_item">
<span class="icon iconfont iconjuxing23"></span> <div class="title clr">
<i>15012479484</i> <div class="fr btn btn_border">
</div> <span class="icon iconfont iconjuxing23"></span>
<h3 class="bold boxsiz">深圳市猎芯科技有限公司</h3> <i>15012479484</i>
</div>
</div> <h3 class="bold boxsiz">深圳市猎芯科技有限公司</h3>
<div class="notice_list boxsiz">
<!-- <div class="notice_item left clr">
<img src="__PUBLIC__/images/test.jpg" alt="" class="fl">
<div class="notice_content">
<p>今天就能出库。今天就能出库。</p>
<div>2019-05-30 14:21</div>
</div>
</div>
<div class="notice_item right clr">
<img src="__PUBLIC__/images/test.jpg" alt="" class="fr">
<div class="notice_content">
<p>今天就能出库。今天就能出库。</p>
<div>2019-05-30 14:21</div>
</div> </div>
<div class="notice_list boxsiz"></div>
</div> --> </div> -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -151,7 +113,45 @@ ...@@ -151,7 +113,45 @@
fileInputId: 'image' fileInputId: 'image'
}, conn).flashUpload; }, conn).flashUpload;
function userHtml(num, user, message) {
if (num == 0) {
return '<img src="__PUBLIC__/images/test.jpg" alt="" class="user_logo">' +
'<div class="user_right">' +
'<div class="clr">' +
'<h3 class="boxsiz ellipsis">' + user + '</h3>' +
'</div>' +
'<div class="message">' + message + '</div>' +
'</div>'
} else {
return '<img src="__PUBLIC__/images/test.jpg" alt="" class="user_logo">' +
'<div class="user_right">' +
'<div class="clr">' +
'<span class="num fr">' + num + '</span>' +
'<h3 class="boxsiz ellipsis">' + user + '</h3>' +
'</div>' +
'<div class="message">' + message + '</div>' +
'</div>'
}
};
function messageHtml(leftOrRight, html) {
if (leftOrRight == 1) { //左边
return '<div class="notice_item right clr">' +
'<img src="__PUBLIC__/images/test.jpg" alt="" class="fr user_logo">' +
'<div class="notice_content">' +
html +
'<div>' + CurentTime() + '</div>' +
'</div>'
} else {
return '<div class = "notice_item left clr" > ' +
'<img src="__PUBLIC__/images/test.jpg" alt="" class="fl user_logo">' +
'<div class="notice_content">' +
html +
'<div>' + CurentTime() + '</div>' +
'</div>'
}
}
// listern，添加回调函数; // listern，添加回调函数;
conn.listen({ conn.listen({
onOpened: function (message) { onOpened: function (message) {
...@@ -168,27 +168,80 @@ ...@@ -168,27 +168,80 @@
// }, // },
onTextMessage: function (message) { onTextMessage: function (message) {
var reg = /<img[^>]*>/ig; var reg = /<img[^>]*>/ig;
var regContent = message.data.replace(reg,'[图片]') var regContent = message.data.replace(reg, '[图片]');
var str = '<div class="notice_classify ">' + var len = $('.notice_classify').length;
'<img src="__PUBLIC__/images/test.jpg" alt="" class="user_logo">' + var userSigleStr = '<img src="__PUBLIC__/images/test.jpg" alt="" class="user_logo">' +
'<div class="user_right">' + '<div class="user_right">' +
'<div class="clr">' + '<div class="clr">' +
'<span class="num fr">23</span>' + '<span class="num fr">0</span>' +
'<h3 class="boxsiz ellipsis">' + message.from + '</h3>' + '<h3 class="boxsiz ellipsis">' + message.from + '</h3>' +
'</div>' + '</div>' +
'<div class="message">' + regContent + '</div>' + '<div class="message">' + regContent + '</div>' +
'</div>' +
'</div>' '</div>'
$('.notice_left_content').html(str); var messageSigleStr =
var str1 = '<div class="notice_item left clr">' + '<div class="title clr">' +
'<img src="__PUBLIC__/images/test.jpg" alt="" class="fl user_logo">' + '<div class="fr btn btn_border">' +
'<div class="notice_content">' + '<span class="icon iconfont iconjuxing23"></span>' +
message.data + '<i>' + message.from + '</i>' +
'<div>' + CurentTime() + '</div>' + '</div>' +
'<h3 class="bold boxsiz">' + message.from + '</h3>' +
'</div>' +
'<div class="notice_list boxsiz">' +
'<div class="notice_item_content">' +
messageHtml(2, message.data) +
'</div>' + '</div>' +
'</div>'; '</div>' +
$('.notice_list').append(str1); '</div>'
if (!len) {
//新用户
var userStr = '<div class="notice_classify active" userid="' + message.from + '">' +
userHtml(0, message.from, regContent) + '</div>';
var messageStr = '<div class="chat_item active" id="' + message.from + '">' +
messageSigleStr + '</div>'
$('.notice_left_content').html(userStr);
$('.chat_item_content').html(messageStr)
} else {
$('.notice_classify').each(function (index) {
var userId = $(this).attr('userid');
var isNowChat = $('.notice_classify').eq(index).hasClass('active');
if (userId == message.from) {
//已有用户
if (isNowChat) {
//当前用户
$(this).html(userHtml(0, message.from, regContent));
$('#' + userId).find('.notice_item_content').append(messageHtml(2,
message
.data));
var contentHeight = $('#' + userId).find('.notice_item_content')
.height();
$('#' + userId).find('.notice_list').scrollTop(contentHeight);
} else {
//非当前用户
var num = Number($(this).find('.num').text());
$(this).html(userHtml(num + 1, message.from, regContent));
$('#' + userId).find('.notice_item_content').append(messageHtml(2,
message
.data));
}
return false;
} else {
if (index == len - 1) {
//新用户
var userStr = '<div class="notice_classify" userid="' +
message.from + '">' +
userHtml(1, message.from, regContent) + '</div>';
var messageStr = '<div class="chat_item" id="' +
message.from + '">' +
messageSigleStr + '</div>'
$('.notice_left_content').append(userStr);
$('.chat_item_content').append(messageStr)
}
}
})
}
}, //收到文本消息; }, //收到文本消息;
onPictureMessage: function (message) { onPictureMessage: function (message) {
...@@ -201,7 +254,82 @@ ...@@ -201,7 +254,82 @@
}; };
options.onFileDownloadComplete = function () { options.onFileDownloadComplete = function () {
// 图片下载成功; // 图片下载成功;
var regContent ='[图片]';
var len = $('.notice_classify').length;
var htmlStr = '<img src ="'+message.url+'"/>'
var userSigleStr = '<img src="__PUBLIC__/images/test.jpg" alt="" class="user_logo">' +
'<div class="user_right">' +
'<div class="clr">' +
'<span class="num fr">0</span>' +
'<h3 class="boxsiz ellipsis">' + message.from + '</h3>' +
'</div>' +
'<div class="message">' + regContent + '</div>' +
'</div>'
var messageSigleStr =
'<div class="title clr">' +
'<div class="fr btn btn_border">' +
'<span class="icon iconfont iconjuxing23"></span>' +
'<i>' + message.from + '</i>' +
'</div>' +
'<h3 class="bold boxsiz">' + message.from + '</h3>' +
'</div>' +
'<div class="notice_list boxsiz">' +
'<div class="notice_item_content">' +
messageHtml(2, htmlStr) +
'</div>' +
'</div>' +
'</div>'
if (!len) {
//新用户
var userStr = '<div class="notice_classify active" userid="' + message.from + '">' +
userHtml(0, message.from, regContent) + '</div>';
var messageStr = '<div class="chat_item active" id="' + message.from + '">' +
messageSigleStr + '</div>'
$('.notice_left_content').html(userStr);
$('.chat_item_content').html(messageStr)
} else {
$('.notice_classify').each(function (index) {
var userId = $(this).attr('userid');
var isNowChat = $('.notice_classify').eq(index).hasClass('active');
if (userId == message.from) {
//已有用户
if (isNowChat) {
//当前用户
$(this).html(userHtml(0, message.from, regContent));
$('#' + userId).find('.notice_item_content').append(messageHtml(2,
message
.data));
var contentHeight = $('#' + userId).find('.notice_item_content')
.height();
$('#' + userId).find('.notice_list').scrollTop(contentHeight);
} else {
//非当前用户
var num = Number($(this).find('.num').text());
$(this).html(userHtml(num + 1, message.from, regContent));
$('#' + userId).find('.notice_item_content').append(messageHtml(2,
message
.data));
}
return false;
} else {
if (index == len - 1) {
//新用户
var userStr = '<div class="notice_classify" userid="' +
message.from + '">' +
userHtml(1, message.from, regContent) + '</div>';
var messageStr = '<div class="chat_item" id="' +
message.from + '">' +
messageSigleStr + '</div>'
$('.notice_left_content').append(userStr);
$('.chat_item_content').append(messageStr)
}
}
})
}
console.log('Image download complete!'); console.log('Image download complete!');
}; };
...@@ -231,8 +359,8 @@ ...@@ -231,8 +359,8 @@
// open，登录; // open，登录;
var options = { var options = {
apiUrl: WebIM.config.apiURL, apiUrl: WebIM.config.apiURL,
user: "myy4", user: "18271408717",
pwd: "m", pwd: "123456",
appKey: WebIM.config.appkey appKey: WebIM.config.appkey
}; };
try { try {
...@@ -243,21 +371,20 @@ ...@@ -243,21 +371,20 @@
// 私聊发送文本消息，发送表情同发送文本消息，只是会在对方客户端将表情文本进行解析成图片; // 私聊发送文本消息，发送表情同发送文本消息，只是会在对方客户端将表情文本进行解析成图片;
var sendPrivateText = function (content) { var sendPrivateText = function (content) {
var userId = $('.notice_left ').find('.active').attr('userid')
var id = conn.getUniqueId(); var id = conn.getUniqueId();
var msg = new WebIM.message('txt', id); var msg = new WebIM.message('txt', id);
msg.set({ msg.set({
msg: content, // 消息内容; msg: content, // 消息内容;
to: 'myy5', // 接收消息对象; to: userId, // 接收消息对象;
roomType: false, roomType: false,
success: function (id, serverMsgId) { success: function (id, serverMsgId) {
var str = '<div class="notice_item right clr">' +
'<img src="__PUBLIC__/images/test.jpg" alt="" class="fr user_logo">' + $('#' + userId).find('.notice_item_content').append(messageHtml(1,
'<div class="notice_content">' + content));
content + var contentHeight = $('#' + userId).find('.notice_item_content')
'<div>' + CurentTime() + '</div>' + .height();
'</div>' + $('#' + userId).find('.notice_list').scrollTop(contentHeight);
'</div>';
$('.notice_list').append(str);
layedit.setContent(1, '', false) layedit.setContent(1, '', false)
}, },
...@@ -299,8 +426,8 @@ ...@@ -299,8 +426,8 @@
success: function () { success: function () {
console.log(file); console.log(file);
} },
// flashUpload: WebIM.flashUpload // 意义待查; flashUpload: WebIM.flashUpload // 意义待查;
}; };
msg.set(option); msg.set(option);
conn.send(msg.body); conn.send(msg.body);
...@@ -393,7 +520,21 @@ ...@@ -393,7 +520,21 @@
}); });
}; };
layedit.hotkey(function () { layedit.hotkey(function () {
sendPrivateText(layedit.getContent(1)) var content = layedit.getContent(1);
if(content !== '<p><br></p>'){
sendPrivateText(content)
}else{
return
}
});
$('.notice_left').on('click', '.notice_classify', function () {
var id = $(this).attr('userid');
$('#' + id).addClass('active').siblings('.chat_item').removeClass('active');
$(this).find('.num').remove();
$(this).addClass('active').siblings('.notice_classify').removeClass('active');
var contentHeight = $('#' + id).find('.notice_item_content').height();
$('#' + id).find('.notice_list').scrollTop(contentHeight);
}) })
</script> </script>
</body> </body>
......
dist/css/chat.css
...@@ -86,6 +86,12 @@ ...@@ -86,6 +86,12 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
.chat_content .content .content_div .notice_right .chat_item {
display: none;
}
.chat_content .content .content_div .notice_right .chat_item.active {
display: block;
}
.chat_content .content .content_div .notice_right .layui-layedit { .chat_content .content .content_div .notice_right .layui-layedit {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
......
dist/css/chat.less
...@@ -105,7 +105,12 @@ ...@@ -105,7 +105,12 @@
left: 248px; left: 248px;
right: 0; right: 0;
bottom: 0; bottom: 0;
.chat_item{
display: none;
&.active{
display: block
}
}
.layui-layedit { .layui-layedit {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
...@@ -143,7 +148,7 @@ ...@@ -143,7 +148,7 @@
bottom: 244px; bottom: 244px;
overflow: auto; overflow: auto;
padding: 10px 20px; padding: 10px 20px;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 2px; width: 2px;
} }
......
dist/js/chat/webim.config.js
...@@ -18,7 +18,7 @@ WebIM.config = { ...@@ -18,7 +18,7 @@ WebIM.config = {
/* /*
* Application AppKey * Application AppKey
*/ */
appkey: 'easemob-demo#chatdemoui', appkey: '1113190618181018#icsales',
/* /*
* Whether to use wss * Whether to use wss
* @parameter {Boolean} true or false * @parameter {Boolean} true or false
......
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