kira
6 years ago
parent
64fea0ebfe
commit
cc623b1a21
@ -0,0 +1,146 @@
|
|||||||
|
<html>
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
|
||||||
|
<script src="https://g.alicdn.com/aliww/ww/json/json.js" charset="utf-8"></script>
|
||||||
|
<![endif]-->
|
||||||
|
<!-- 自动适配移动端与pc端 -->
|
||||||
|
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
|
||||||
|
<script src="https://g.alicdn.com/aliww/??h5.openim.sdk/1.0.6/scripts/wsdk.js,h5.openim.kit/0.4.0/scripts/kit.js"
|
||||||
|
charset="utf-8"></script>
|
||||||
|
<script src="https://g.alicdn.com/aliww/h5.openim.sdk/1.0.6/scripts/wsdk.js"></script>
|
||||||
|
<script>
|
||||||
|
window.onload = function () {
|
||||||
|
$.ajax({
|
||||||
|
url: '/sys/openim/check',
|
||||||
|
method: 'PUT',
|
||||||
|
contentType: 'application/json',
|
||||||
|
success: function (resp) {
|
||||||
|
console.log(resp);
|
||||||
|
window.uid = resp.user_id;
|
||||||
|
window.touid = resp.user_id;
|
||||||
|
window.password = resp.password;
|
||||||
|
window.appKey = resp.appkey;
|
||||||
|
loginOpenim();
|
||||||
|
},
|
||||||
|
error: function (jqXHR) {
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
function loginOpenim() {
|
||||||
|
WKIT.init({
|
||||||
|
container: document.getElementById('J_demo'),
|
||||||
|
width: 700,
|
||||||
|
height: 500,
|
||||||
|
uid: window.uid,
|
||||||
|
appkey: window.appKey,
|
||||||
|
credential: window.password,
|
||||||
|
touid: window.touid,
|
||||||
|
onLoginSuccess: function (data) {
|
||||||
|
initLayout();
|
||||||
|
WKIT.Conn.sdk.Event.on('MSG_RECEIVED', function (data) {
|
||||||
|
updateContractList(data.data);
|
||||||
|
});
|
||||||
|
initUnreadMsgAndContact();
|
||||||
|
WKIT.Conn.sdk.Base.startListenAllMsg();
|
||||||
|
window.sdk = document.getElementById("J_wkitPluginFrame").contentWindow;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function switchTouid(touid) {
|
||||||
|
window.uid = touid;
|
||||||
|
WKIT.switchTouid({
|
||||||
|
touid: touid
|
||||||
|
});
|
||||||
|
WKIT.Conn.sdk.Chat.setReadState({
|
||||||
|
touid: touid,
|
||||||
|
timestamp: Math.floor((+new Date()) / 1000),
|
||||||
|
success: function (data) {
|
||||||
|
},
|
||||||
|
error: function (error) {
|
||||||
|
console.log('set read state fail', error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
window.sdk.unreadMap[touid].msgCount = 0;
|
||||||
|
window.sdk.showContactList(window.sdk.unreadMap);
|
||||||
|
}
|
||||||
|
|
||||||
|
function initUnreadMsgAndContact() {
|
||||||
|
WKIT.Conn.sdk.Base.getRecentContact({
|
||||||
|
count: 40,
|
||||||
|
success: function (data) {
|
||||||
|
var cnts = data.data.cnts;
|
||||||
|
for (var i = cnts.length - 1; i >= 0; i--) {
|
||||||
|
var unreadmapEle = {msgCount: 0};
|
||||||
|
window.sdk.unreadMap[WKIT.Conn.sdk.Base.getNick(
|
||||||
|
cnts[i].from)] = unreadmapEle;
|
||||||
|
}
|
||||||
|
getUnreadMsgCount();
|
||||||
|
},
|
||||||
|
error: function (error) {
|
||||||
|
console.log('get contact msg count fail',
|
||||||
|
error);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function getUnreadMsgCount() {
|
||||||
|
WKIT.Conn.sdk.Base.getUnreadMsgCount({
|
||||||
|
count: 40,
|
||||||
|
success: function (data) {
|
||||||
|
console.log(data);
|
||||||
|
var unreads = data.data;
|
||||||
|
var uids = "";
|
||||||
|
for (var i = unreads.length - 1; i >= 0; i--) {
|
||||||
|
if (window.sdk.unreadMap[WKIT.Conn.sdk.Base.getNick(
|
||||||
|
unreads[i].contact)]) {
|
||||||
|
|
||||||
|
}
|
||||||
|
window.sdk.unreadMap[WKIT.Conn.sdk.Base.getNick(
|
||||||
|
unreads[i].contact)].msgCount =
|
||||||
|
unreads[i].msgCount;
|
||||||
|
var nick = WKIT.Conn.sdk.Base.getNick(
|
||||||
|
unreads[i].contact)
|
||||||
|
uids +=
|
||||||
|
nick.substr(0, nick.length - 6) + ",";
|
||||||
|
}
|
||||||
|
window.sdk.loadContactList(uids);
|
||||||
|
},
|
||||||
|
error: function (error) {
|
||||||
|
console.log('get recent contact fail', error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateContractList(data) {
|
||||||
|
var msg = data.msgs[0];
|
||||||
|
var msg_uid = WKIT.Conn.sdk.Base.getNick(msg.from);
|
||||||
|
if (window.sdk.unreadMap[msg_uid]) {
|
||||||
|
window.sdk.unreadMap[msg_uid].msgCount = window.sdk.unreadMap[msg_uid].msgCount + 1;
|
||||||
|
} else {
|
||||||
|
var unreadMapEle = {msgCount: 1}
|
||||||
|
window.sdk.unreadMap[msg_uid] = unreadMapEle;
|
||||||
|
}
|
||||||
|
window.sdk.loadContactList(msg_uid.substr(0, msg_uid - 6));
|
||||||
|
}
|
||||||
|
|
||||||
|
function initLayout() {
|
||||||
|
$("#J_wkitUserInfo").hide();
|
||||||
|
$("#J_wkitPluginFrameWrap").height("100%");
|
||||||
|
$("#J_wkitPluginFrameWrap").css("margin", "0 0 0 0");
|
||||||
|
}
|
||||||
|
|
||||||
|
function getQueryString(name) {
|
||||||
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||||||
|
var r = window.location.search.substr(1).match(reg);
|
||||||
|
if (r != null) {
|
||||||
|
return unescape(r[2]);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
<html>
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
|
||||||
|
<script src="https://g.alicdn.com/aliww/ww/json/json.js" charset="utf-8"></script>
|
||||||
|
<link href="static/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
|
||||||
|
<![endif]-->
|
||||||
|
<!-- 自动适配移动端与pc端 -->
|
||||||
|
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
|
||||||
|
<script src="https://g.alicdn.com/aliww/??h5.openim.sdk/1.0.6/scripts/wsdk.js,h5.openim.kit/0.4.0/scripts/kit.js"
|
||||||
|
charset="utf-8"></script>
|
||||||
|
<script src="https://g.alicdn.com/aliww/h5.openim.sdk/1.0.6/scripts/wsdk.js"></script>
|
||||||
|
<script>
|
||||||
|
window.onload = function () {
|
||||||
|
$('#submit').bind("click", function () {
|
||||||
|
var data = {};
|
||||||
|
data.loginId = $("#uid").val();
|
||||||
|
data.password = $("#pwd").val();
|
||||||
|
data.verifyCode = 'jhd7';
|
||||||
|
$.ajax({
|
||||||
|
url: '/sys/openim/signin',
|
||||||
|
method: 'POST',
|
||||||
|
data: JSON.stringify(data),
|
||||||
|
contentType: 'application/json',
|
||||||
|
success: function () {
|
||||||
|
window.subPage = document.getElementById("subPage").contentWindow;
|
||||||
|
window.subPageList =
|
||||||
|
document.getElementById("subPageList").contentWindow;
|
||||||
|
window.subPage.location.href = "/service_client_app.html";
|
||||||
|
window.subPageList.location.href = "/service_contact_list_app.html";
|
||||||
|
$("#loginInput").hide();
|
||||||
|
$("#subPageListDiv").hide();
|
||||||
|
},
|
||||||
|
error: function (jqXHR) {
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="loginInput" class="col-xs-12 login-box-body login-box-bg">
|
||||||
|
<form action="" method="post">
|
||||||
|
<div class="form-group has-feedback">
|
||||||
|
<input type="text" id="uid" class="form-control" placeholder="账号">
|
||||||
|
<span class="glyphicon glyphicon-user form-control-feedback"></span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group has-feedback">
|
||||||
|
<input type="password" id="pwd" class="form-control" placeholder="密码">
|
||||||
|
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12 margin-bottom">
|
||||||
|
<button type="button" id="submit" style="background-color: #f06010" class="btn btn-warning btn-block btn-flat">Sign In</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div id="subPageDiv">
|
||||||
|
<iframe id="subPage">
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
|
<div id="subPageListDiv">
|
||||||
|
<iframe id="subPageList">
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<html>
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<script src="https://g.alicdn.com/aliww/ww/json/json.js" charset="utf-8"></script>
|
||||||
|
<![endif]-->
|
||||||
|
<!-- 自动适配移动端与pc端 -->
|
||||||
|
<script src="https://g.alicdn.com/aliww/h5.openim.sdk/1.0.6/scripts/wsdk.js"
|
||||||
|
charset="UTF-8"></script>
|
||||||
|
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
li {
|
||||||
|
float: left;
|
||||||
|
list-style-type: none;
|
||||||
|
transition: background-color .1s;
|
||||||
|
margin-bottom: 13px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-div {
|
||||||
|
height: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-div input {
|
||||||
|
background: #D8D8D8;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover {
|
||||||
|
color: black;
|
||||||
|
background-color: rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: red;
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headimg {
|
||||||
|
float: left;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
border: 1px solid #000;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headimg-img {
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding-left: 27px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
line-height: 15px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #f00;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: relative;
|
||||||
|
right: -16px;
|
||||||
|
top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frm_search {
|
||||||
|
width: 133px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 2px;
|
||||||
|
-moz-border-radius: 2px;
|
||||||
|
-webkit-border-radius: 2px;
|
||||||
|
background-color: #D8D8D8;
|
||||||
|
color: #fff;
|
||||||
|
padding-left: 30px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_bar {
|
||||||
|
position: relative;
|
||||||
|
width: 137px;
|
||||||
|
margin: 0 auto 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.web_wechat_search {
|
||||||
|
background: url(/static/images/search.png) no-repeat;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 25px;
|
||||||
|
height: 30px;
|
||||||
|
position: absolute;
|
||||||
|
line-height: 1.6;
|
||||||
|
background-size: 16px;
|
||||||
|
background-position: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
var unreadMap = {};
|
||||||
|
function searchContact() {
|
||||||
|
var uid = $('#searchText').val();
|
||||||
|
var searchContactList = {};
|
||||||
|
for (var key in unreadMap) {
|
||||||
|
if (key.search(uid) > -1) {
|
||||||
|
searchContactList[key] = unreadMap[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var param = {clientMoniker: uid};
|
||||||
|
$.ajax({
|
||||||
|
url: '/sys/openim/list',
|
||||||
|
method: 'GET',
|
||||||
|
data: param,
|
||||||
|
contentType: 'application/json',
|
||||||
|
dataType: 'json',
|
||||||
|
success: function (resp) {
|
||||||
|
for (var i = 0; i <= resp.length - 1; i++) {
|
||||||
|
resp[i].msgCount = 0;
|
||||||
|
searchContactList[resp[i].nick] = resp[i];
|
||||||
|
unreadMap[resp[i].nick] = resp[i];
|
||||||
|
}
|
||||||
|
showContactList(searchContactList);
|
||||||
|
},
|
||||||
|
error: function () {
|
||||||
|
showContactList(searchContactList);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadContactList(uids) {
|
||||||
|
var param = {userNames: uids};
|
||||||
|
$.ajax({
|
||||||
|
url: '/sys/openim/list',
|
||||||
|
method: 'GET',
|
||||||
|
data: param,
|
||||||
|
contentType: 'application/json',
|
||||||
|
dataType: 'json',
|
||||||
|
success: function (resp) {
|
||||||
|
for (var i = 0; i <= resp.length - 1; i++) {
|
||||||
|
unreadMap[resp[i].nick].headimg = resp[i].headimg;
|
||||||
|
}
|
||||||
|
showContactList(unreadMap);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
function showContactList(map) {
|
||||||
|
var contact_list = '';
|
||||||
|
for (var key in map) {
|
||||||
|
var css = 'hover';
|
||||||
|
if (key == parent.window.uid) {
|
||||||
|
css = 'active';
|
||||||
|
}
|
||||||
|
var headImUrl = '';
|
||||||
|
if (map[key].headimg) {
|
||||||
|
headImUrl = map[key].headimg;
|
||||||
|
} else {
|
||||||
|
headImUrl = "/static/images/act/encourage_money/default_headimg.png";
|
||||||
|
}
|
||||||
|
contact_list +=
|
||||||
|
"<li " + " class=\"" + css + "\" onclick=switchToUser('" + key
|
||||||
|
+ "')>"
|
||||||
|
+ "<div class=\"headimg\" style='background-image:url(" + headImUrl
|
||||||
|
+ "')>"
|
||||||
|
+ "<div class=\"notice\">" + map[key].msgCount + "</div>"
|
||||||
|
+ "</div>"
|
||||||
|
+ "<div class=\"avatar\">" + key + "</div>"
|
||||||
|
+ "</li>"
|
||||||
|
}
|
||||||
|
$("#contact_list").html(contact_list);
|
||||||
|
}
|
||||||
|
|
||||||
|
function switchToUser(touid) {
|
||||||
|
parent.switchTouid(touid);
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<body>
|
||||||
|
<div class="search_bar">
|
||||||
|
<i class="web_wechat_search"></i>
|
||||||
|
<input id="searchText" class="frm_search" type="text" onchange="searchContact()">
|
||||||
|
</div>
|
||||||
|
<div class="list">
|
||||||
|
<ul id="contact_list">
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,23 +0,0 @@
|
|||||||
<html>
|
|
||||||
<!--[if lt IE 9]>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<script src="https://g.alicdn.com/aliww/ww/json/json.js" charset="utf-8"></script>
|
|
||||||
<![endif]-->
|
|
||||||
<!-- 自动适配移动端与pc端 -->
|
|
||||||
<script src="https://g.alicdn.com/aliww/??h5.openim.sdk/1.0.6/scripts/wsdk.js,h5.openim.kit/0.3.3/scripts/kit.js"
|
|
||||||
charset="utf-8"></script>
|
|
||||||
<script>
|
|
||||||
window.onload = function () {
|
|
||||||
WKIT.init({
|
|
||||||
container: document.getElementById('J_demo'),
|
|
||||||
width: 700,
|
|
||||||
height: 500,
|
|
||||||
uid: 'kira1',
|
|
||||||
appkey: 24980715,
|
|
||||||
credential: 'xxxxxx',
|
|
||||||
touid: 'dalong',
|
|
||||||
logo: 'http://img.alicdn.com/tps/i3/TB12LD9IFXXXXb3XpXXSyFWJXXX-82-82.png',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in new issue