You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
information-system/echarts/views/weixinchat/welcome.php

245 lines
11 KiB
PHTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>微信会话存档</title>
<link rel="stylesheet" href="/css/information-system3.css?v=201508112" type="text/css"/>
<script type="text/javascript" src="/min/?f=/js/information-system3.min.js,/js/common.js&v=20190128"></script>
<link rel="shortcut icon" href="/bootstrap/img/glyphicons_290_skull.png">
<style type="text/css">
<?php echo empty($userid)?'':'.useridandhidden{display:none;}'; ?>
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-5 useridandhidden">
<h4>成员列表</h4>
<div class="list-group" id="permit_user_list">
</div>
</div>
<div class="col-md-5 useridandhidden">
<H4>客户列表 <span class="badge" id="externalcontact_count">0</span> <small class="pull-right">
<a>私聊信息</a> |
<a>群聊信息</a>
</small></h4>
<div class="well well-sm">
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="contact_search_username" placeholder="搜索客人">
</div>
<button type="button" class="btn btn-default"
onclick="get_externalcontact_list(0,$('#contact_search_username').val());">搜索
</button>
</form>
</div>
<div class="list-group" id="externalcontact_list" style="overflow-y: scroll;max-height: 680px;">
</div>
</div>
<div class="col-md-14">
<h4>聊天记录</h4>
<div class="well well-sm useridandhidden">
<form class="form-inline">
<a>近一周</a> |
<a>近一月</a>
<div class="form-group">
<input name="potential_customers_ApplydateStart" id="potential_customers_ApplydateStart"
type="text"
placeholder="开始日期"
class="form-control ShowMeTheDatePicker_cn"
value="<?php echo date('Y-m-d', strtotime('-1 week last monday')); ?>">
</div>
<div class="form-group">
<input name="potential_customers_ApplydateStart" id="potential_customers_ApplydateStart"
type="text"
placeholder="结束时间"
class="form-control ShowMeTheDatePicker_cn"
value="<?php echo date('Y-m-d', strtotime('-1 week last monday')); ?>">
</div>
<div class="form-group">
<input type="text" class="form-control" id="exampleInputName2" placeholder="搜索关键词">
</div>
<button type="button" class="btn btn-default" disabled>搜索</button>
</form>
</div>
<div id="chat_msg_list" class="row" style="overflow-y: scroll;max-height: 680px;">
</div>
<nav aria-label="Page navigation" class="text-center">
<ul class="pagination" id="chat_msg_list_page_nav">
</ul>
</nav>
</div>
</div>
</div>
<script type="text/javascript">
//ES6转ES5HT只能调用IE来显示 https://babeljs.io/repl
$(document).ready(function () {
<?php echo empty($userid) ? 'get_permit_user_list();' : "get_chat_msg_list('{$userid}',0);" ?>
});
let g_permit_user = '';//当前选择的顾问
let g_externalcontact_user = '';//当前选中的客人
//获取会话存档的用户列表
function get_permit_user_list() {
$.ajax({
type: "post",
dataType: "json",
url: "<?php echo site_url('weixinchat/show_me_the_data')?>",
data: {
"url": '/weixin/wxwork/get_permit_user_list'
},
success: function (data, textStatus) {
document.getElementById('permit_user_list').innerHTML = '';
permit_user_list = '';
data.Result && data.errcode == '0' && data.Result.forEach(function (item) {
permit_user_list += `
<a href="javascript:void(0);" onclick="get_externalcontact_list('${item.userid}');g_permit_user='${item.userid}';" class="list-group-item">
<div class="row">
<div class="col-md-4" style="padding: 0 0 0 15px;">
<img src="${item.avatar}" class="img-responsive">
</div>
<div class="col-md-20">
<div>
<div class="list-group-item-heading">${item.username}</div>
<p class="list-group-item-text">${item.userid}</p>
</div>
</div>
</div>
</a>
`;
})
document.getElementById('permit_user_list').innerHTML = permit_user_list;
},
error: function () {
$.modaldialog.error("\u53d1\u751f\u9519\u8bef\uff0c\u8bf7\u8054\u7cfbYCC")
}
})
}
//获取客户列表
function get_externalcontact_list(permit_user, username = '') {
if (!permit_user && g_permit_user) {
permit_user = g_permit_user;
}
$.ajax({
type: "post",
dataType: "json",
url: "<?php echo site_url('weixinchat/show_me_the_data')?>",
data: {
"url": '/weixin/wxwork/get_externalcontact_list?userid=' + permit_user + '&searchstr=' + username,
},
success: function (data, textStatus) {
document.getElementById('chat_msg_list').innerHTML = '';
document.getElementById('externalcontact_count').innerHTML = '0';
externalcontact_list = '';
data.Result && data.errcode == '0' && data.Result.forEach(item => {
externalcontact_list += `
<a href="javascript:void(0);" onclick="get_chat_msg_list('${item.userid}',0);g_externalcontact_user='${item.userid}';" class="list-group-item">
<div class="row">
<div class="col-md-4" style="padding: 0 0 0 15px;">
<img src="${item.avatar}" class="img-responsive">
</div>
<div class="col-md-20">
<div>
<div class="list-group-item-heading">${item.username}</div>
<p class="list-group-item-text"></p>
</div>
</div>
</div>
</a>
`;
})
document.getElementById('externalcontact_list').innerHTML = externalcontact_list;
document.getElementById('externalcontact_count').innerHTML = data.Result.length;
},
error: function () {
$.modaldialog.error("\u53d1\u751f\u9519\u8bef\uff0c\u8bf7\u8054\u7cfbYCC")
}
})
}
//获取聊天记录
const chat_page_count = 20;//每页消息数
function get_chat_msg_list(user_id, chat_page) {
$.ajax({
type: "post",
dataType: "json",
url: "<?php echo site_url('weixinchat/show_me_the_data')?>",
data: {
"url": `/weixin/wxwork/GetChatmsg?external_userid=${user_id}&Page_count=${chat_page_count}&curr_page=${chat_page}`,
},
success: function (data, textStatus) {
//消息框内容
document.getElementById('chat_msg_list').innerHTML = '';
let chat_msg_list = '';
data.chatmsg && data.errcode == '0' && data.chatmsg.forEach(item => {
let content = '';//消息内容
switch (item.msgtype) {
case 'image':
content = `<img src="${item.content.imageurl}" class="img-responsive">`;
break;
case 'text':
content = item.content.text;
break;
default://未识别的内容,提示识别
content = '未识别的消息类型:' + item.msgtype;
}
chat_msg_list += `
<div class="col-md-2" style="padding: 0 0 0 10px;">
<img src="${item.from_avatar}"
class="img-responsive">
</div>
<div class="col-md-22">
<p class="ptext-muted">${item.from_name} <small>${timestamp_to_date(item.msgtime)}</small></p>
<div class="panel panel-default">
<div class="panel-body">
${content}
</div>
</div>
</div>
`;
})
document.getElementById('chat_msg_list').innerHTML = chat_msg_list;
//分页导航
let chat_msg_list_page_nav = '';
document.getElementById('chat_msg_list_page_nav').innerHTML = '';
if (data.chatpage && data.errcode == '0') {
let external_userid = data.external_userid;
let chat_page_curr = data.chatpage.currpage;
let chat_page_total = data.chatpage.totalpage;
for (let page_nav_index = 0; page_nav_index < chat_page_total; page_nav_index++) {
chat_msg_list_page_nav += `<li class="${chat_page_curr == page_nav_index + 1 ? 'active' : ''}"><a href="javascript:void(0);" onclick="get_chat_msg_list('${external_userid}',${page_nav_index + 1})">${page_nav_index + 1}</a></li>`;
}
document.getElementById('chat_msg_list_page_nav').innerHTML = chat_msg_list_page_nav;
}
},
error: function () {
$.modaldialog.error("\u53d1\u751f\u9519\u8bef\uff0c\u8bf7\u8054\u7cfbYCC")
}
})
}
function timestamp_to_date(timestamp) {
let date = new Date(timestamp);
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
}
</script>
</body>
</html>