285 lines
8.0 KiB
HTML
285 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-cn">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>微聊</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-touch-fullscreen" content="yes">
|
||
<meta http-equiv="Access-Control-Allow-Origin" content="*">
|
||
<link rel="stylesheet" href="css/reset.css" />
|
||
<link rel="stylesheet" href="css/animate.css" />
|
||
<link rel="stylesheet" href="css/swiper-3.4.1.min.css" />
|
||
<link rel="stylesheet" href="css/layout.css" />
|
||
|
||
<script src="js/jquery-1.9.1.min.js"></script>
|
||
<script src="js/zepto.min.js"></script>
|
||
<script src="js/fontSize.js"></script>
|
||
<script src="js/swiper-3.4.1.min.js"></script>
|
||
<script src="js/wcPop/wcPop.js"></script>
|
||
|
||
<script>
|
||
|
||
var GetQueryString = function (name) {
|
||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||
var r = window.location.search.substr(1).match(reg);
|
||
if (r !== null){
|
||
return unescape(r[2]);
|
||
}
|
||
return null;
|
||
};
|
||
var token = GetQueryString("token");
|
||
if(token !== null && token !== '' ){
|
||
var tempStorage=localStorage.getItem('user')|| '';
|
||
if(tempStorage){
|
||
localStorage.removeItem('user')
|
||
}
|
||
localStorage.setItem("user", token);
|
||
|
||
}else{
|
||
token=localStorage.getItem('user');
|
||
}
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "http://muchang.bbscodes.com/home/web/index.php?r=friend/chatlist",
|
||
data: {token:token},
|
||
dataType: "json",
|
||
success: function(data){
|
||
console.log(data);
|
||
$("#zuixin").html(data.data.html);
|
||
}
|
||
});
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "http://muchang.bbscodes.com/home/web/index.php?r=friend/ajaxfriends",
|
||
data: {token:token},
|
||
dataType: "json",
|
||
success: function(data){
|
||
console.log(data);
|
||
$("#pengyou").html(data.data.html);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<!-- <>微聊主容器 -->
|
||
<div class="wechat__panel clearfix">
|
||
<div class="wc__home-wrapper flexbox flex__direction-column">
|
||
<!-- //顶部 -->
|
||
<div class="wc__headerBar fixed">
|
||
<div class="inner flexbox">
|
||
<h2 class="barTit barTitLg flex1">微聊</h2>
|
||
<!--<a class="barIco sear" href="javascript:;" id="J__topbarSear"></a>
|
||
<a class="barIco add" href="javascript:;" id="J__topbarAdd"></a>-->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- //4个tabBar滑动切换 -->
|
||
<div class="wc__swiper-tabBar flex1">
|
||
<div class="swiper-container">
|
||
<div class="swiper-wrapper">
|
||
<!-- //1、）微聊主页-->
|
||
<div class="swiper-slide">
|
||
<div class="wc__scrolling-panel">
|
||
<!-- //聊天记录信息 -->
|
||
<div class="wc__recordChat-list" id="J__recordChatList">
|
||
<ul class="clearfix" id="zuixin">
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- //2、通讯录-->
|
||
<div class="swiper-slide">
|
||
<div class="wc__scrolling-panel">
|
||
<div class="wc__addrFriend-list" id="J__addrFriendList">
|
||
<ul class="clearfix">
|
||
<li id="pengyou">
|
||
<!--<div class="row flexbox flex-alignc wc__material-cell">
|
||
<img class="uimg" src="img/icon__addrFriend-img01.jpg" /><span class="name flex1">新的朋友</span>
|
||
</div>-->
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="swiper-slide">
|
||
|
||
</div>
|
||
<div class="swiper-slide">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- //底部tabbar -->
|
||
<div class="wechat__tabBar">
|
||
<div class="bottomfixed wc__borT">
|
||
<ul class="flexbox flex-alignc wechat-pagination">
|
||
<li class="flex1 on"><i class="ico i1"><em class="wc__badge">12</em></i><span>微聊</span></li>
|
||
<li class="flex1"><i class="ico i2"></i><span>通讯录</span></li>
|
||
<li class="flex1" ><i class="ico i3"><em class="wc__badge wc__badge-dot"></em></i><span>牧场</span></li>
|
||
<li class="flex1" onclick=""><i class="ico i4"></i><span>用户中心</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 左右滑屏切换.Start -->
|
||
<script type="text/javascript">
|
||
function muchang(id){
|
||
if(id==2){
|
||
window.location.href='/farm/?token='+localStorage.getItem('user');
|
||
}
|
||
if(id==3){
|
||
window.location.href='/web/?token='+localStorage.getItem('user')+'#/userCenter/';
|
||
}
|
||
}
|
||
|
||
var chatSwiper = new Swiper('.swiper-container',{
|
||
pagination: '.wechat-pagination',
|
||
paginationClickable: true,
|
||
paginationBulletRender: function (chatSwiper, index, className) {
|
||
switch (index) {
|
||
case 0:
|
||
name='<i class="ico i1"><em class="wc__badge">12</em></i><span>微聊</span>';
|
||
break;
|
||
case 1:
|
||
name='<i class="ico i2"></i><span>通讯录</span>';
|
||
break;
|
||
case 2:
|
||
name='<i class="ico i3"><em class="wc__badge wc__badge-dot"></em></i><span>牧场</span>';
|
||
break;
|
||
case 3:
|
||
name='<i class="ico i4"></i><span>用户中心</span>';
|
||
break;
|
||
//case 2:
|
||
//window.location,href='/farm/?token='+localStorage.getItem('user');
|
||
//break;
|
||
//case 3:
|
||
// window.location,href='/web/?token='+localStorage.getItem('user')+'#/userCenter/';
|
||
//break;
|
||
default: name='';
|
||
}
|
||
return '<li class="flex1 ' + className + '" onclick="muchang('+index+');">' + name + '</li>';
|
||
}
|
||
})
|
||
</script>
|
||
<!-- 左右滑屏切换 end -->
|
||
|
||
<script type="text/javascript">
|
||
/** __公共函数 */
|
||
$(function(){
|
||
// 顶部添加按钮
|
||
$(".wc__headerBar").on("click", "#J__topbarAdd", function () {
|
||
$("#J__popupTopBar").show();
|
||
});
|
||
$("#J__popupTopBar").on("click", ".wrap__topbar-mask", function () {
|
||
$(this).parent().hide();
|
||
});
|
||
// 禁止长按弹出系统菜单
|
||
$(".wechat__panel").on("contextmenu", function(e){
|
||
//e.preventDefault();
|
||
});
|
||
});
|
||
|
||
/** __自定函数 */
|
||
$(function(){
|
||
//***1、微聊-------------------------
|
||
// 聊天记录页面（长按操作）
|
||
$("#J__recordChatList").on("longTap", "li", function(e){
|
||
return false;
|
||
var _this = $(this);
|
||
wcPop({
|
||
skin: 'androidSheet',
|
||
shadeClose: true,
|
||
|
||
btns: [
|
||
{text: '标为未读', style: 'line-height:50px;'},
|
||
{text: '置顶聊天', style: 'line-height:50px;'},
|
||
{
|
||
text: '删除该聊天',
|
||
style: 'line-height:50px;',
|
||
onTap() {
|
||
wcPop({
|
||
skin: 'android',
|
||
content: '删除后，将会清空该聊天记录',
|
||
|
||
btns: [
|
||
{
|
||
text: '取消',
|
||
onTap() {
|
||
wcPop.close();
|
||
}
|
||
},
|
||
{
|
||
text: '删除',
|
||
style: 'color:#ffba00',
|
||
onTap() {
|
||
_this.remove();
|
||
wcPop.close();
|
||
}
|
||
}
|
||
]
|
||
});
|
||
}
|
||
}
|
||
]
|
||
});
|
||
});
|
||
// 跳转链接
|
||
$(".wechat__panel").on("click", "*[routeUrl]", function(e){
|
||
var routeurl = $(this).attr('routeUrl');
|
||
if(!routeurl) return;
|
||
window.location.href = routeurl;
|
||
});
|
||
|
||
//***2、通讯录-------------------------
|
||
// 右侧浮动条
|
||
$(".wc__addrFriend-floatletter").on("click", "em", function() {
|
||
var letter = $(this).text();
|
||
if($("#" + letter).length > 0){
|
||
// 滚动到指定位置
|
||
//$("#J__addrFriendList").parent().animate({ scrollTop: $("#" + letter).position().top}, 300);
|
||
document.getElementById(letter).scrollIntoView();
|
||
}
|
||
$(".wc__addrFriend-showletter").text(letter).fadeIn(300);
|
||
|
||
setTimeout(function(){
|
||
$(".wc__addrFriend-showletter").fadeOut(300);
|
||
}, 500);
|
||
});
|
||
|
||
// 通讯录（长按操作）
|
||
$("#J__addrFriendList li:not(:first-child)").on("longTap", ".row", function(e){
|
||
return false;
|
||
var _this = $(this);
|
||
wcPop({
|
||
skin: 'androidSheet',
|
||
shadeClose: true,
|
||
|
||
btns: [
|
||
{
|
||
text: '设置备注及标签',
|
||
style: 'line-height:50px;',
|
||
onTap() {
|
||
wcPop.close();
|
||
}
|
||
}
|
||
]
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|