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 @@
<div class="content_div">
<div class="notice_left 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 class="notice_right boxsiz">
<textarea id="chat_textarea" style="display: none;" class="chat_textarea"></textarea>
<div class="title clr">
<div class="fr btn btn_border">
<span class="icon iconfont iconjuxing23"></span>
<i>15012479484</i>
</div>
<h3 class="bold boxsiz">深圳市猎芯科技有限公司</h3>
</div>
<div class="notice_list boxsiz">
<div class="chat_item_content">
<!-- <div class="chat_item">
<div class="title clr">
<div class="fr btn btn_border">
<span class="icon iconfont iconjuxing23"></span>
<i>15012479484</i>
</div>
<h3 class="bold boxsiz">深圳市猎芯科技有限公司</h3>
<!-- <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 class="notice_list boxsiz"></div>
</div> -->
</div>
</div>
</div>
</div>
......@@ -151,7 +113,45 @@
fileInputId: 'image'
}, 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，添加回调函数;
conn.listen({
onOpened: function (message) {
......@@ -168,27 +168,80 @@
// },
onTextMessage: function (message) {
var reg = /<img[^>]*>/ig;
var regContent = message.data.replace(reg,'[图片]')
var str = '<div class="notice_classify ">' +
'<img src="__PUBLIC__/images/test.jpg" alt="" class="user_logo">' +
var regContent = message.data.replace(reg, '[图片]');
var len = $('.notice_classify').length;
var userSigleStr = '<img src="__PUBLIC__/images/test.jpg" alt="" class="user_logo">' +
'<div class="user_right">' +
'<div class="clr">' +
'<span class="num fr">23</span>' +
'<span class="num fr">0</span>' +
'<h3 class="boxsiz ellipsis">' + message.from + '</h3>' +
'</div>' +
'<div class="message">' + regContent + '</div>' +
'</div>' +
'</div>'
$('.notice_left_content').html(str);
var str1 = '<div class="notice_item left clr">' +
'<img src="__PUBLIC__/images/test.jpg" alt="" class="fl user_logo">' +
'<div class="notice_content">' +
message.data +
'<div>' + CurentTime() + '</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, message.data) +
'</div>' +
'</div>';
$('.notice_list').append(str1);
'</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)
}
}
})
}
}, //收到文本消息;
onPictureMessage: function (message) {
......@@ -201,7 +254,82 @@
};
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!');
};
......@@ -231,8 +359,8 @@
// open，登录;
var options = {
apiUrl: WebIM.config.apiURL,
user: "myy4",
pwd: "m",
user: "18271408717",
pwd: "123456",
appKey: WebIM.config.appkey
};
try {
......@@ -243,21 +371,20 @@
// 私聊发送文本消息，发送表情同发送文本消息，只是会在对方客户端将表情文本进行解析成图片;
var sendPrivateText = function (content) {
var userId = $('.notice_left ').find('.active').attr('userid')
var id = conn.getUniqueId();
var msg = new WebIM.message('txt', id);
msg.set({
msg: content, // 消息内容;
to: 'myy5', // 接收消息对象;
to: userId, // 接收消息对象;
roomType: false,
success: function (id, serverMsgId) {
var str = '<div class="notice_item right clr">' +
'<img src="__PUBLIC__/images/test.jpg" alt="" class="fr user_logo">' +
'<div class="notice_content">' +
content +
'<div>' + CurentTime() + '</div>' +
'</div>' +
'</div>';
$('.notice_list').append(str);
$('#' + userId).find('.notice_item_content').append(messageHtml(1,
content));
var contentHeight = $('#' + userId).find('.notice_item_content')
.height();
$('#' + userId).find('.notice_list').scrollTop(contentHeight);
layedit.setContent(1, '', false)
},
......@@ -299,8 +426,8 @@
success: function () {
console.log(file);
}
// flashUpload: WebIM.flashUpload // 意义待查;
},
flashUpload: WebIM.flashUpload // 意义待查;
};
msg.set(option);
conn.send(msg.body);
......@@ -393,7 +520,21 @@
});
};
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>
</body>
......
dist/css/chat.css
......@@ -86,6 +86,12 @@
right: 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 {
position: absolute;
bottom: 0;
......
dist/css/chat.less
......@@ -105,7 +105,12 @@
left: 248px;
right: 0;
bottom: 0;
.chat_item{
display: none;
&.active{
display: block
}
}
.layui-layedit {
position: absolute;
bottom: 0;
......@@ -143,7 +148,7 @@
bottom: 244px;
overflow: auto;
padding: 10px 20px;
&::-webkit-scrollbar {
width: 2px;
}
......
dist/js/chat/webim.config.js
......@@ -18,7 +18,7 @@ WebIM.config = {
/*
* Application AppKey
*/
appkey: 'easemob-demo#chatdemoui',
appkey: '1113190618181018#icsales',
/*
* Whether to use wss
* @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