Skip to content

施宇 / icsales

Go to a project
Commit aa8b2c8a by 施宇
Options

111111

parent f1af298f
Inline Side-by-side
Showing with 796 additions and 428 deletions
Application/Home/View/Chat/index.html
...@@ -69,7 +69,58 @@ ...@@ -69,7 +69,58 @@
</div> </div>
</div> </div>
<div class="chat_item_content"> <div class="chat_item_content">
<!-- <div class="chat_item active" id="18664936975">
<div class="title clr">
<div class="fr btn btn_border"><span
class="icon iconfont iconjuxing23"></span><i>18664936975</i></div>
<h3 class="bold boxsiz">18664936975</h3>
</div>
<div class="notice_list boxsiz">
<div class="notice_item_content">
<div class="notice_item left clr">
<img src="http://resic.liexin.com/images/test.jpg" alt=""
class="fl user_logo">
<div class="notice_content">
<div class="template lineBlock boxsiz">
<img src="http://resic.liexin.com/images/test.jpg" alt="">
<div class="template_right">
<div class="template_right_top clr">
<h3 class="bold fl ">
STM32F103ZE</h3>
<div class="price bold fr">¥67.9800</div>
</div>
<div class="template_right_bottom">
<div class="desc1 clr">
<div class="brand fl">品牌：<i>Texas
Instruments</i></div>
<div class="hq fl">货期：<i>
现货</i></div>
</div>
<div class="desc2 clr">
<div class="num fl">数量：<i class="bold">
100,000PCS</i></div>
<div class="time fl">时间：<i>
2019-05-23 15:57 </i></div>
</div>
</div>
</div>
</div>
<div>2019-06-25 14:18:09</div>
</div>
</div>
<div class="notice_item right clr"><img
src="http://resic.liexin.com/images/test.jpg" alt=""
class="fr user_logo">
<div class="notice_content">
<p>23213123</p>
<div>2019-06-25 14:18:15</div>
</div>
</div>
</div>
</div>
</div> -->
</div> </div>
</div> </div>
...@@ -85,413 +136,7 @@ ...@@ -85,413 +136,7 @@
<script src="__PUBLIC__/js/chat/swfupload.js"></script> <script src="__PUBLIC__/js/chat/swfupload.js"></script>
<script src="__PUBLIC__/js/chat/swfupload.cookie.js"></script> <script src="__PUBLIC__/js/chat/swfupload.cookie.js"></script>
<script src="__PUBLIC__/js/chat/uploadShim.js"></script> <script src="__PUBLIC__/js/chat/uploadShim.js"></script>
<script src="__PUBLIC__/js/chat/index.js"></script>
<script>
var browser = navigator.appName;
var b_version = navigator.appVersion;
var version = b_version.split(";");
var trim_Version = version[1].replace(/[ ]/g, "");
if (browser == "Microsoft Internet Explorer" &&
(trim_Version == "MSIE6.0" || trim_Version == "MSIE7.0" || trim_Version == "MSIE8.0" || trim_Version ==
"MSIE9.0")) {
$('.pic').hide(); //ie9和ie9以下不能上传图片
}
var CurentTime = function () {
var now = new Date();
var year = now.getFullYear(); //年
var month = now.getMonth() + 1; //月
var day = now.getDate(); //日
var hh = now.getHours(); //时
var mm = now.getMinutes(); //分
var ss = now.getSeconds(); //秒
var clock = year + "-";
if (month < 10)
clock += "0";
clock += month + "-";
if (day < 10)
clock += "0";
clock += day + " ";
if (hh < 10)
clock += "0";
clock += hh + ":";
if (mm < 10) clock += '0';
clock += mm + ":";
if (ss < 10) clock += '0';
clock += ss;
return (clock);
}
var conn = {};
conn = new WebIM.connection({
isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol ===
'https:',
url: WebIM.config.xmppURL,
isAutoLogin: true,
heartBeatWait: WebIM.config.heartBeatWait,
autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
autoReconnectInterval: WebIM.config.autoReconnectInterval
});
// 初始化上传组件 fileInputId对应页面上的file组件id
WebIM.flashUpload = UploadShim({
fileInputId: 'image'
}, conn).flashUpload;
WebIM.Emoji = {
path: '__PUBLIC__/faces/',
map: {
'[):]': 'ee_1.png',
'[:D]': 'ee_2.png',
'[;)]': 'ee_3.png',
'[:-o]': 'ee_4.png',
'[:p]': 'ee_5.png',
'[(H)]': 'ee_6.png',
'[:@]': 'ee_7.png',
'[:s]': 'ee_8.png',
'[:$]': 'ee_9.png',
'[:(]': 'ee_10.png',
'[:"(]': 'ee_11.png',
'[:|]': 'ee_12.png',
'[(a)]': 'ee_13.png',
'[8o|]': 'ee_14.png',
'[|]': 'ee_15.png',
'[+o(]': 'ee_16.png',
'[o)]': 'ee_17.png',
'[|-)]': 'ee_18.png',
'[*-)]': 'ee_19.png',
'[:-#]': 'ee_20.png',
'[:-*]': 'ee_21.png',
'[^o)]': 'ee_22.png',
'[8-)]': 'ee_23.png',
'[(|)]': 'ee_24.png',
'[(u)]': 'ee_25.png',
'[(S)]': 'ee_26.png',
'[(*)]': 'ee_27.png',
'[(#)]': 'ee_28.png',
'[(R)]': 'ee_29.png',
'[({)]': 'ee_30.png',
'[(})]': 'ee_31.png',
'[(k)]': 'ee_32.png',
'[(F)]': 'ee_33.png',
'[(W)]': 'ee_34.png',
'[(D)]': 'ee_35.png'
}
};
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">' +
'<p>' +
html +
'</p>' +
'<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">' +
'<p>' +
html +
'</p>' +
'<div>' + CurentTime() + '</div>' +
'</div>'
}
}
function receiveData(type, message) { //1 文字 2 图片 3 表情
var regContent = "";
var htmlStr = "";
if (type == 1) {
regContent = message.data;
htmlStr = message.data;
} else if (type == 2) {
regContent = '[图片]';
htmlStr = '<img src ="' + message.url + '" class="edit_img"/>';
} else {
var data = message.data;
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].type == 'emoji') {
regContent += '[表情]';
htmlStr += '<img src ="' + data[i].data + '" width=25 height=25/>';
} else {
regContent += data[i].data;
htmlStr += data[i].data;
}
};
}
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">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').append(userStr);
$('.chat_item_content').append(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,
htmlStr));
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,
htmlStr));
}
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)
}
}
})
}
}
// listern，添加回调函数;
conn.listen({
onOpened: function (message) {
console.log(message);
console.log('opend')
},
onTextMessage: function (message) {
receiveData(1, message)
console.log(message)
}, //收到文本消息;
onEmojiMessage: function (message) {
receiveData(3, message)
}, //收到表情消息;
onPictureMessage: function (message) {
var options = {
url: message.url
};
options.onFileDownloadComplete = function () {
// 图片下载成功;
receiveData(2, message)
console.log('Image download complete!');
};
options.onFileDownloadError = function () {
// 图片下载失败
// console.log('Image download failed!');
};
WebIM.utils.download.call(conn, options); // 意义待查;
}, //收到图片消息;
onOnline: function () {
// console.log('onLine');
}, //本机网络连接成功;
onOffline: function () {
// console.log('offline');
}, //本机网络掉线;
onError: function (message) {
// console.log('Error', WebIM.utils.stringify(message));
console.log("Error: " + WebIM.utils.stringify(message));
}, //失败回调;
});
// open，登录;
var options = {
apiUrl: WebIM.config.apiURL,
user: "18271408717",
pwd: "123456",
appKey: WebIM.config.appkey
};
try {
conn.open(options);
} catch (e) {
console.log(WebIM.config.apiURL)
// alert('open fail' + e.message)
}
// 私聊发送文本消息，发送表情同发送文本消息，只是会在对方客户端将表情文本进行解析成图片;
var sendPrivateText = function (content) {
var userId = $('.notice_left ').find('.active').attr('userid')
var id = conn.getUniqueId();
var msg = new WebIM.message('txt', id);
var emojiMessage = WebIM.utils.parseEmoji(content); //表情解析工具
msg.set({
msg: content, // 消息内容;
to: userId, // 接收消息对象;
roomType: false,
success: function (id, serverMsgId) {
$('#' + userId).find('.notice_item_content').append(messageHtml(1,
emojiMessage));
var contentHeight = $('#' + userId).find('.notice_item_content')
.height();
$('#' + userId).find('.notice_list').scrollTop(contentHeight);
$('#chat_textarea').val('');
},
fail: function () {
console.log("Send private text failed");
}
});
conn.send(msg.body);
};
// 私聊发送图片消息;
var sendPrivateImg = function () {
var id = conn.getUniqueId();
var msg = new WebIM.message('img', id);
var input = $('#img_upload')[0]; // 选择图片的input;
var file = WebIM.utils.getFileUrl(input); // 将图片转化为二进制文件;
var userId = $('.notice_left').find('.active').attr('userid');
console.log('xixiixixiiiixixix')
try {
console.log(input.files[0])
} catch (e) {
console.log('GetFile Error:', e);
}
var allowType = {
'jpg': true,
'gif': true,
'png': true,
'bmp': true
};
var option = {
apiUrl: WebIM.config.apiURL,
file: file,
to: '18664936975',
roomType: false,
chatType: 'singleChat',
flashUpload: WebIM.flashUpload,
onFileUploadError: function () {
console.log(file);
console.log('失败')
},
onFileUploadComplete: function () {},
success: function () {
var htmlStr = '<img src ="' + file.url + '" class="edit_img"/>';
$('#' + userId).find('.notice_item_content').append(messageHtml(1,
htmlStr));
var contentHeight = $('#' + userId).find('.notice_item_content')
.height();
$('#' + userId).find('.notice_list').scrollTop(contentHeight);
$('#img_upload').val('');
},
};
msg.set(option);
conn.send(msg.body);
};
$('#chat_textarea').on('keydown', function (e) {
var et = e || window.event;
var keycode = et.charCode || et.keyCode;
var val = $(this).val();
if ((keycode === 13)) {
if (window.event) {
window.event.returnValue = false;
} else {
e.preventDefault();
}
if (val) {
sendPrivateText(val)
}
}
});
$('.pic').on('click', function () {
$('#img_upload').click();
});
$('.face').on('click', function (event) {
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
$('.face_ul').show();
});
$('.face_ul').on('click', 'li', function () {
var text = $(this).find('img').attr('data-text');
var val = $('#chat_textarea').val();
$('#chat_textarea').val(val + text)
});
$(document).on('click', function () {
$('.face_ul').hide()
})
$('#img_upload').on('change', function () {
if ($(this).val()) {
sendPrivateImg();
} 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);
});
$('.notice_right ').on('click', '.edit_img', function () {
})
</script>
</body> </body>
</html> </html>
\ No newline at end of file
Application/Home/View/QuotePrice/inquirydetail.html
...@@ -130,6 +130,11 @@ ...@@ -130,6 +130,11 @@
</div> </div>
<include file="public/foot" /> <include file="public/foot" />
<script>
$('.gt_div ').on('click',function(){
window.location.href = '/chat?test=1'
})
</script>
</body> </body>
</html> </html>
\ No newline at end of file
Application/Home/View/public/header.html
...@@ -15,7 +15,8 @@ ...@@ -15,7 +15,8 @@
so = 'soapi', so = 'soapi',
user = 'userapi', user = 'userapi',
goods = 'goodsapi', goods = 'goodsapi',
inquiry = 'inquiryapi'; inquiry = 'inquiryapi',
dist = '__PUBLIC__';
</script> </script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/js/layui/css/layui.css"> <link rel="stylesheet" type="text/css" href="__PUBLIC__/js/layui/css/layui.css">
\ No newline at end of file
Application/Home/View/public/navleft.html
...@@ -11,21 +11,21 @@ ...@@ -11,21 +11,21 @@
</div> </div>
<div class="nav_left_content"> <div class="nav_left_content">
<ul class="content_ul"> <ul class="content_ul">
<li class="content_ul_li <if condition="(ACTION_NAME eq 'homes')">active</if>"> <li class="content_ul_li <if condition="(ACTION_NAME eq 'home')">active</if>">
<a href="/homes" class="out"> <a href="/homes" class="out">
<span class="li_icon icon iconfont iconjuxing4"></span> <span class="li_icon icon iconfont iconjuxing4"></span>
<span class="li_title">首页</span> <span class="li_title">首页</span>
</a> </a>
</li> </li>
<li class="content_ul_li <if condition="(ACTION_NAME eq 'inquiry') || (ACTION_NAME eq 'quote') || (ACTION_NAME eq 'releaseinquiry') || (ACTION_NAME eq 'inquirydetail') || (ACTION_NAME eq 'quotedetail')">active</if>"> <li class="content_ul_li xbj_li <if condition="(ACTION_NAME eq 'inquiry') || (ACTION_NAME eq 'quote') || (ACTION_NAME eq 'releaseinquiry') || (ACTION_NAME eq 'inquirydetail') || (ACTION_NAME eq 'quotedetail')">active</if>">
<a href="javascript:;" class="out"> <a href="javascript:;" class="out">
<span class="li_icon icon iconfont iconjuxing5"></span> <span class="li_icon icon iconfont iconjuxing5"></span>
<span class="li_title">询报价</span> <span class="li_title">询报价</span>
<span class="li_right icon iconfont iconjuxing12"> <span class="li_right icon iconfont">
</a> </a>
<dl> <dl <if condition="(ACTION_NAME eq 'inquiry') || (ACTION_NAME eq 'releaseinquiry') || (ACTION_NAME eq 'inquirydetail') || (ACTION_NAME eq 'quote') || (ACTION_NAME eq 'quotedetail')">style="display:block"</if>>
<dd <if condition="(ACTION_NAME eq 'inquiry') || (ACTION_NAME eq 'releaseinquiry') || (ACTION_NAME eq 'inquirydetail')">class="active"</if>"><a href="/inquiry">我的询价</a></dd> <dd <if condition="(ACTION_NAME eq 'inquiry') || (ACTION_NAME eq 'releaseinquiry') || (ACTION_NAME eq 'inquirydetail')">class="active"</if>><a href="/inquiry">我的询价</a></dd>
<dd <if condition="(ACTION_NAME eq 'quote') || (ACTION_NAME eq 'quotedetail')">class="active"</if>"><a href="/quote">我的报价</a></dd> <dd <if condition="(ACTION_NAME eq 'quote') || (ACTION_NAME eq 'quotedetail')">class="active"</if>><a href="/quote">我的报价</a></dd>
</dl> </dl>
</li> </li>
<li class="content_ul_li <if condition="(ACTION_NAME eq 'roborder')">active</if>"> <li class="content_ul_li <if condition="(ACTION_NAME eq 'roborder')">active</if>">
......
dist/css/chat.css
...@@ -196,6 +196,70 @@ ...@@ -196,6 +196,70 @@
.chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content p { .chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content p {
background-color: #DFECFC; background-color: #DFECFC;
} }
.chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content .template {
background-color: #F5F9FC;
border: 1px solid #E6ECF2;
border-radius: 4px;
padding: 20px;
position: relative;
min-width: 520px;
}
.chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content .template img {
height: 80px;
width: 80px;
position: absolute;
top: 20px;
left: 20px;
}
.chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content .template .template_right {
padding: 0;
margin-left: 100px;
}
.chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content .template .template_right .template_right_top {
padding: 0;
}
.chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content .template .template_right .template_right_top h3 {
color: #2E3033;
font-size: 20px;
padding-right: 15px;
}
.chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content .template .template_right .template_right_top .price {
color: #EA1717;
padding: 0;
font-size: 20px;
text-align: right;
}
.chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content .template .template_right .template_right_bottom {
padding: 0;
font-size: 14px;
}
.chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content .template .template_right .template_right_bottom .desc1 {
padding: 0;
margin-top: 15px;
}
.chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content .template .template_right .template_right_bottom .desc1 div {
width: 60%;
}
.chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content .template .template_right .template_right_bottom .desc1 div.hq {
width: 40%;
}
.chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content .template .template_right .template_right_bottom .desc2 {
padding: 0;
margin-top: 15px;
}
.chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content .template .template_right .template_right_bottom .desc2 div {
width: 60%;
}
.chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content .template .template_right .template_right_bottom .desc2 div.time {
width: 40%;
}
.chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content .template .template_right .template_right_bottom div {
color: #ADB6BF;
padding: 0;
}
.chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content .template .template_right .template_right_bottom div i {
color: #515559;
}
.chat_content .content .content_div .notice_right .notice_list .notice_item.right { .chat_content .content .content_div .notice_right .notice_list .notice_item.right {
text-align: right; text-align: right;
} }
......
dist/css/chat.less
...@@ -131,16 +131,18 @@ ...@@ -131,16 +131,18 @@
box-shadow: 0 0 4px 0 rgba(173, 185, 193, 0.5); box-shadow: 0 0 4px 0 rgba(173, 185, 193, 0.5);
display: none; display: none;
position: absolute; position: absolute;
left:0; left: 0;
top:-140px; top: -140px;
z-index:99; z-index: 99;
background-color: #fff; background-color: #fff;
li { li {
height: 25px; height: 25px;
width: 25px; width: 25px;
padding: 5px; padding: 5px;
cursor: pointer; cursor: pointer;
border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;
&:hover { &:hover {
background-color: #ebfaf4; background-color: #ebfaf4;
} }
...@@ -233,8 +235,83 @@ ...@@ -233,8 +235,83 @@
margin-left: 60px; margin-left: 60px;
p { p {
background-color: #DFECFC background-color: #DFECFC;
} }
.template {
background-color: #F5F9FC;
border: 1px solid #E6ECF2;
border-radius: 4px;
padding: 20px;
position: relative;
min-width: 520px;
img {
height: 80px;
width: 80px;
position: absolute;
top: 20px;
left: 20px;
}
.template_right {
padding: 0;
margin-left: 100px;
.template_right_top {
padding: 0;
h3 {
color: #2E3033;
font-size: 20px;
padding-right:15px;
}
.price {
color: #EA1717;
padding: 0;
font-size: 20px;
text-align: right;
}
}
.template_right_bottom {
padding: 0;
font-size: 14px;
.desc1 {
padding: 0;
margin-top: 15px;
div{
width:60%;
&.hq{
width:40%;
}
}
}
.desc2 {
padding: 0;
margin-top: 15px;
div{
width:60%;
&.time{
width:40%;
}
}
}
div {
color: #ADB6BF;
padding: 0;
i {
color: #515559
}
}
}
}
}
} }
} }
......
dist/css/common/base.css
...@@ -720,6 +720,7 @@ body { ...@@ -720,6 +720,7 @@ body {
} }
.nav_left .nav_content .nav_left_content .content_ul .content_ul_li dl { .nav_left .nav_content .nav_left_content .content_ul .content_ul_li dl {
padding-left: 59px; padding-left: 59px;
display: none;
} }
.nav_left .nav_content .nav_left_content .content_ul .content_ul_li dl dd { .nav_left .nav_content .nav_left_content .content_ul .content_ul_li dl dd {
line-height: 40px; line-height: 40px;
...@@ -821,4 +822,3 @@ body { ...@@ -821,4 +822,3 @@ body {
color: #ADB6BF; color: #ADB6BF;
cursor: pointer; cursor: pointer;
} }
/*# sourceMappingURL=base.css.map */
\ No newline at end of file
dist/css/common/navleft.css 0 → 100644
.nav_left {
width: 177px;
background: #fff;
box-shadow: 2px 2px 10px 0px rgba(230, 236, 242, 0.5);
position: absolute;
top: 0;
left: 0;
bottom: 0;
overflow: auto;
z-index: 1;
}
.nav_left::-webkit-scrollbar {
width: 2px;
}
.nav_left .li_title {
font-size: 16px;
}
.nav_left .li_icon {
font-size: 24px;
margin: 0 16px 0 20px;
vertical-align: sub;
color: #ADB6BF;
}
.nav_left .nav_content {
min-height: 100%;
position: relative;
padding-bottom: 52px;
}
.nav_left .nav_content .nav_left_header {
border-bottom: 1px solid #F5F9FC;
text-align: center;
border-top: 1px solid transparent;
}
.nav_left .nav_content .nav_left_header .nav_logo {
margin: 22px 0 9px;
}
.nav_left .nav_content .nav_left_header .nav_logo img {
height: 80px;
width: 80px;
}
.nav_left .nav_content .nav_left_header .nav_title {
height: 25px;
font-size: 18px;
font-weight: 600;
color: #3F3A3A;
line-height: 25px;
margin-bottom: 5px;
}
.nav_left .nav_content .nav_left_header .nav_desc {
font-size: 12px;
color: #9F9FA0;
margin-bottom: 19px;
}
.nav_left .nav_content .nav_left_content .content_ul {
margin-top: 22px;
}
.nav_left .nav_content .nav_left_content .content_ul .content_ul_li {
line-height: 40px;
margin-bottom: 12px;
cursor: pointer;
position: relative;
transition: all 0.2s ease-in-out;
}
.nav_left .nav_content .nav_left_content .content_ul .content_ul_li .out {
display: block;
color: #686E73;
transition: all 0.2s ease-in-out;
}
.nav_left .nav_content .nav_left_content .content_ul .content_ul_li .out .li_right {
font-size: 10px;
position: absolute;
right: 20px;
}
.nav_left .nav_content .nav_left_content .content_ul .content_ul_li dl {
padding-left: 59px;
display: none;
}
.nav_left .nav_content .nav_left_content .content_ul .content_ul_li dl dd {
line-height: 40px;
}
.nav_left .nav_content .nav_left_content .content_ul .content_ul_li dl dd a {
display: block;
font-size: 16px;
color: #686e73;
transition: all 0.2s ease-in-out;
}
.nav_left .nav_content .nav_left_content .content_ul .content_ul_li dl dd.active a,
.nav_left .nav_content .nav_left_content .content_ul .content_ul_li dl dd:hover a {
color: #0d84d1;
}
.nav_left .nav_content .nav_left_content .content_ul .content_ul_li.active a.out,
.nav_left .nav_content .nav_left_content .content_ul .content_ul_li:hover a.out {
background-color: #0D84D1;
color: #fff;
}
.nav_left .nav_content .nav_left_content .content_ul .content_ul_li.active a.out .iconfont,
.nav_left .nav_content .nav_left_content .content_ul .content_ul_li:hover a.out .iconfont {
color: #fff;
}
.nav_left .nav_content .nav_end {
position: absolute;
height: 40px;
bottom: 0;
left: 0;
right: 0;
line-height: 40px;
font-size: 16px;
cursor: pointer;
color: #686E73;
border-top: 1px solid #E6ECF2;
box-shadow: 2px 2px 10px 0px rgba(230, 236, 242, 0.5);
}
dist/css/common/navleft.less
...@@ -80,6 +80,7 @@ ...@@ -80,6 +80,7 @@
} }
dl{ dl{
padding-left: 59px; padding-left: 59px;
display: none;
dd{ dd{
line-height: 40px; line-height: 40px;
a{ a{
......
dist/css/home.css
...@@ -137,7 +137,7 @@ ...@@ -137,7 +137,7 @@
margin-top: 46px; margin-top: 46px;
} }
.home_content .my_xj .my_xj_list { .home_content .my_xj .my_xj_list {
max-height: 420px; max-height: 415px;
overflow: hidden; overflow: hidden;
} }
.home_content .my_xj .my_xj_list .my_xj_item .item_top .type { .home_content .my_xj .my_xj_list .my_xj_item .item_top .type {
...@@ -237,4 +237,3 @@ ...@@ -237,4 +237,3 @@
.home_content .new_xj .new_xj_list .new_xj_item:hover { .home_content .new_xj .new_xj_list .new_xj_item:hover {
box-shadow: 0px 5px 10px 0px rgba(216, 223, 230, 0.5); box-shadow: 0px 5px 10px 0px rgba(216, 223, 230, 0.5);
} }
/*# sourceMappingURL=home.css.map */
\ No newline at end of file
dist/css/home.less
...@@ -171,7 +171,7 @@ ...@@ -171,7 +171,7 @@
margin-top: 46px; margin-top: 46px;
.my_xj_list { .my_xj_list {
max-height: 420px; max-height: 415px;
overflow: hidden; overflow: hidden;
.my_xj_item { .my_xj_item {
.item_top { .item_top {
......
dist/js/chat/index.js 0 → 100644
$(function () {
var chatObj = {
conn: {},
init: function () {
this.ieFun()
this.connection();
this.connListen();
this.login();
this.bindFunction();
},
defaultUser: function () {
//默认客服
var message = {
from: "18664936975",
data: ''
}
this.receiveData(1, message);
},
singleChat: function () {
var type = Util.getRequest('test');
if (type == 1) {
var id = '18589050841';
var message = {
from: "18589050841",
data: ''
};
this.receiveData(1, message);
$(".notice_classify[userid=" + id + "]").click();
this.sendPrivateText('1')
}
},
connection: function () {
//建立聊天链接
this.conn = new WebIM.connection({
isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol ===
'https:',
url: WebIM.config.xmppURL,
isAutoLogin: true,
heartBeatWait: WebIM.config.heartBeatWait,
autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
autoReconnectInterval: WebIM.config.autoReconnectInterval
});
// 初始化上传组件 fileInputId对应页面上的file组件id
WebIM.flashUpload = UploadShim({
fileInputId: 'image'
}, this.conn).flashUpload;
//增加表情
WebIM.Emoji = {
path: dist + '/faces/',
map: {
'[):]': 'ee_1.png',
'[:D]': 'ee_2.png',
'[;)]': 'ee_3.png',
'[:-o]': 'ee_4.png',
'[:p]': 'ee_5.png',
'[(H)]': 'ee_6.png',
'[:@]': 'ee_7.png',
'[:s]': 'ee_8.png',
'[:$]': 'ee_9.png',
'[:(]': 'ee_10.png',
'[:"(]': 'ee_11.png',
'[:|]': 'ee_12.png',
'[(a)]': 'ee_13.png',
'[8o|]': 'ee_14.png',
'[|]': 'ee_15.png',
'[+o(]': 'ee_16.png',
'[o)]': 'ee_17.png',
'[|-)]': 'ee_18.png',
'[*-)]': 'ee_19.png',
'[:-#]': 'ee_20.png',
'[:-*]': 'ee_21.png',
'[^o)]': 'ee_22.png',
'[8-)]': 'ee_23.png',
'[(|)]': 'ee_24.png',
'[(u)]': 'ee_25.png',
'[(S)]': 'ee_26.png',
'[(*)]': 'ee_27.png',
'[(#)]': 'ee_28.png',
'[(R)]': 'ee_29.png',
'[({)]': 'ee_30.png',
'[(})]': 'ee_31.png',
'[(k)]': 'ee_32.png',
'[(F)]': 'ee_33.png',
'[(W)]': 'ee_34.png',
'[(D)]': 'ee_35.png'
}
};
},
ieFun: function () {
//ie9和ie9以下不能上传图片
var browser = navigator.appName;
var b_version = navigator.appVersion;
var version = b_version.split(";");
var trim_Version = version[1].replace(/[ ]/g, "");
if (browser == "Microsoft Internet Explorer" &&
(trim_Version == "MSIE6.0" || trim_Version == "MSIE7.0" || trim_Version == "MSIE8.0" || trim_Version ==
"MSIE9.0")) {
$('.pic').hide();
}
},
curentTime: function () {
var now = new Date();
var year = now.getFullYear(); //年
var month = now.getMonth() + 1; //月
var day = now.getDate(); //日
var hh = now.getHours(); //时
var mm = now.getMinutes(); //分
var ss = now.getSeconds(); //秒
var clock = year + "-";
if (month < 10)
clock += "0";
clock += month + "-";
if (day < 10)
clock += "0";
clock += day + " ";
if (hh < 10)
clock += "0";
clock += hh + ":";
if (mm < 10) clock += '0';
clock += mm + ":";
if (ss < 10) clock += '0';
clock += ss;
return (clock);
},
userHtml: function (num, user, message) {
//左边用户的dom拼接
if (num == 0) {
return '<img src="' + dist + '/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="' + dist + '/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>'
}
},
messageHtml: function (leftOrRight, html) {
//右边消息的dom拼接
if (leftOrRight == 1) { //右边
if (html) {
return '<div class="notice_item right clr">' +
'<img src="' + dist + '/images/test.jpg" alt="" class="fr user_logo">' +
'<div class="notice_content">' +
'<p>' +
html +
'</p>' +
'<div>' + this.curentTime() + '</div>' +
'</div>'
} else {
return ''
}
} else { //左边
if (html) {
return '<div class = "notice_item left clr" > ' +
'<img src="' + dist + '/images/test.jpg" alt="" class="fl user_logo">' +
'<div class="notice_content">' +
'<p>' +
html +
'</p>' +
'<div>' + this.curentTime() + '</div>' +
'</div>'
} else {
return ''
}
}
},
receiveData: function (type, message) {
//接收到消息后处理数据 1 文字 2 图片 3 表情
var regContent = "";
var htmlStr = "";
var self = this;
if (type == 1) {
regContent = message.data;
htmlStr = message.data;
} else if (type == 2) {
regContent = '[图片]';
htmlStr = '<img src ="' + message.url + '" class="edit_img"/>';
} else {
var data = message.data;
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].type == 'emoji') {
regContent += '[表情]';
htmlStr += '<img src ="' + data[i].data + '" width=25 height=25/>';
} else {
regContent += data[i].data;
htmlStr += data[i].data;
}
};
}
var len = $('.notice_classify').length;
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">' +
self.messageHtml(2, htmlStr) +
'</div>' +
'</div>' +
'</div>';
if (!len) {
//新用户
var userStr = '<div class="notice_classify active" userid="' + message.from + '">' +
self.userHtml(0, message.from, regContent) + '</div>';
var messageStr = '<div class="chat_item active" id="' + message.from + '">' +
messageSigleStr + '</div>'
$('.notice_left_content').append(userStr);
$('.chat_item_content').append(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(self.userHtml(0, message.from, regContent));
$('#' + userId).find('.notice_item_content').append(self.messageHtml(2,
htmlStr));
var contentHeight = $('#' + userId).find('.notice_item_content')
.height();
$('#' + userId).find('.notice_list').scrollTop(contentHeight);
} else {
//非当前用户
var num = Number($(this).find('.num').text());
$(this).html(self.userHtml(num + 1, message.from, regContent));
$('#' + userId).find('.notice_item_content').append(self.messageHtml(2,
htmlStr));
}
return false;
} else {
if (index == len - 1) {
//新用户
var userStr = '<div class="notice_classify" userid="' +
message.from + '">' +
self.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)
}
}
})
}
},
connListen: function () {
var self = this;
// listern，添加回调函数;
self.conn.listen({
onOpened: function (message) {
self.defaultUser();
self.singleChat();
},
onTextMessage: function (message) {
self.receiveData(1, message)
}, //收到文本消息;
onEmojiMessage: function (message) {
self.receiveData(3, message)
}, //收到表情消息;
onPictureMessage: function (message) {
var options = {
url: message.url
};
options.onFileDownloadComplete = function () {
// 图片下载成功;
self.receiveData(2, message)
};
options.onFileDownloadError = function () {
// 图片下载失败
// console.log('Image download failed!');
};
WebIM.utils.download.call(self.conn, options); // 意义待查;
}, //收到图片消息;
onOnline: function () {
// console.log('onLine');
}, //本机网络连接成功;
onOffline: function () {
// console.log('offline');
}, //本机网络掉线;
onError: function (message) {
// console.log('Error', WebIM.utils.stringify(message));
console.log("Error: " + WebIM.utils.stringify(message));
}, //失败回调;
});
},
login: function () {
// open，登录;
let self = this;
var options = {
apiUrl: WebIM.config.apiURL,
user: "18271408717",
pwd: "123456",
appKey: WebIM.config.appkey
};
try {
this.conn.open(options);
} catch (e) {
console.log(WebIM.config.apiURL)
// alert('open fail' + e.message)
}
},
sendPrivateText: function (content) {
var self = this;
// 私聊发送文本消息，发送表情同发送文本消息，只是会在对方客户端将表情文本进行解析成图片;
var userId = $('.notice_left ').find('.active').attr('userid');
var id = this.conn.getUniqueId();
var msg = new WebIM.message('txt', id);
var emojiMessage = WebIM.utils.parseEmoji(content); //表情解析工具
msg.set({
msg: content, // 消息内容;
to: userId, // 接收消息对象;
roomType: false,
success: function (id, serverMsgId) {
$('#' + userId).find('.notice_item_content').append(self.messageHtml(1,
emojiMessage));
var contentHeight = $('#' + userId).find('.notice_item_content')
.height();
$('#' + userId).find('.notice_list').scrollTop(contentHeight);
$('#chat_textarea').val('');
},
fail: function () {
console.log("Send private text failed");
}
});
this.conn.send(msg.body);
},
sendPrivateImg: function () {
// 私聊发送图片消息;
var self = this;
var id = this.conn.getUniqueId();
var msg = new WebIM.message('img', id);
var input = $('#img_upload')[0]; // 选择图片的input;
var file = WebIM.utils.getFileUrl(input); // 将图片转化为二进制文件;
var userId = $('.notice_left').find('.active').attr('userid');
var option = {
apiUrl: WebIM.config.apiURL,
file: file,
to: '18664936975',
roomType: false,
chatType: 'singleChat',
flashUpload: WebIM.flashUpload,
onFileUploadError: function () {
console.log(file);
console.log('失败')
},
onFileUploadComplete: function () {},
success: function () {
var htmlStr = '<img src ="' + file.url + '" class="edit_img"/>';
$('#' + userId).find('.notice_item_content').append(self.messageHtml(1,
htmlStr));
var contentHeight = $('#' + userId).find('.notice_item_content')
.height();
$('#' + userId).find('.notice_list').scrollTop(contentHeight);
$('#img_upload').val('');
},
};
msg.set(option);
this.conn.send(msg.body);
},
bindFunction: function () {
//事件绑定的方法
var self = this;
$('#chat_textarea').on('keydown', function (e) {
var et = e || window.event;
var keycode = et.charCode || et.keyCode;
var val = $(this).val();
if ((keycode === 13)) {
if (window.event) {
window.event.returnValue = false;
} else {
e.preventDefault();
}
if (val) {
self.sendPrivateText(val)
}
}
});
$('.pic').on('click', function () {
$('#img_upload').click();
});
$('.face').on('click', function (event) {
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
$('.face_ul').show();
});
$('.face_ul').on('click', 'li', function () {
var text = $(this).find('img').attr('data-text');
var val = $('#chat_textarea').val();
$('#chat_textarea').val(val + text)
});
$(document).on('click', function () {
$('.face_ul').hide()
})
$('#img_upload').on('change', function () {
if ($(this).val()) {
self.sendPrivateImg();
} 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);
});
$('.notice_right ').on('click', '.edit_img', function () {
})
}
};
chatObj.init();
})
\ No newline at end of file
dist/js/global/global.min.js
...@@ -43,12 +43,27 @@ ...@@ -43,12 +43,27 @@
}); });
}, },
mounted: function (opt) { mounted: function (opt) {
var isShow = $('.xbj_li').find('dl').css('display');
if(isShow == 'none'){
$('.xbj_li').find('.li_right').removeClass('iconjuxing15').addClass('iconjuxing12')
}else{
$('.xbj_li').find('.li_right').removeClass('iconjuxing12').addClass('iconjuxing15')
}
return this; return this;
}, },
handleBind: function (opt) { handleBind: function (opt) {
$('.xbj_li').on('click',function(){
var isShow = $(this).find('dl').css('display');
if(isShow == 'none'){
$(this).find('dl').slideDown();
$('.xbj_li').find('.li_right').removeClass('iconjuxing12').addClass('iconjuxing15')
}else{
$(this).find('dl').slideUp();
$('.xbj_li').find('.li_right').removeClass('iconjuxing15').addClass('iconjuxing12')
}
$ })
return this; return this;
}, },
......
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