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