WindChat/windchat-admin/src/main/resources/webapp/views/group/index.html

240 lines
8.1 KiB
HTML
Raw Normal View History

2019-07-29 23:42:16 +08:00
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>群组管理</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.css"/>
<style type="text/css">
body, html {
height: 100%;
background-color: #f4f4f4;
-webkit-tap-highlight-color: transparent;
}
footer {
text-align: center;
font-size: 14px;
padding: 20px;
}
.weui-loadmore_line .weui-loadmore__tips {
background-color: #f4f4f4;
}
footer a {
color: #999;
text-decoration: none;
}
</style>
</head>
<body ontouchstart="">
<div class="weui-pull-to-refresh__layer">
<div class='weui-pull-to-refresh__arrow'></div>
<div class='weui-pull-to-refresh__preloader'></div>
<div class="down">下拉刷新</div>
<div class="up">释放刷新</div>
<div class="refresh">正在刷新</div>
</div>
<div class="defaultGroup">
<div class="weui-cells__title weui-cell default_group_lists" th:unless="${groupDefaultSize} == 0">
默认群列表
</div>
<div class="weui-cells demos-content-padded default_group_lists" id='default_group_lists'
th:unless="${groupDefaultSize} == 0">
<a class="weui-cell weui-cell_access group-info" th:each="group:${groupList}"
th:attr="id=${group.groupId},group-id=${group.groupId},group-name=${group.groupName}"
href="javascript:;" url-data="/group/manage">
<div class="weui-cell__bd"><p th:text="${group.groupName}"></p></div>
<div class="weui-cell__ft"></div>
</a>
</div>
</div>
<div class="weui-cells__title weui-cell ">
群列表
</div>
<div class="weui-cells" id="group-lists">
</div>
<div class="weui-loadmore weui-loadmore_line loadmore_group">
<span class="weui-loadmore__tips"></span>
</div>
<input type='hidden' id='init_url' url-data="/group/list"/>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.js"></script>
<!-- <script type="text/javascript" src="<?php echo $host_name;?>/public/js/manage-group-list.js<?php echo $static_version?>"> </script> -->
<script type="text/javascript">
//页面加载,执行
$(function () {
$('#group-lists').html("");
loadGroupList();
});
//定义全局变量
var page = 0;//
var loading = false;
//定义选择器,滚动使用
$(document.body).infinite().on("infinite", function () {
if(page == 0){
$('#group-lists').html("");
}
loadGroupList()
});
function getOsType() {
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 || u.indexOf('Windows Phone') > -1) {
return 'Android';
} else if (u.indexOf('iPhone') > -1) {
return 'IOS';
} else {
return 'PC';
}
}
function reqUrl(reqUri, params, callbackName) {
reqUri = "/akaxin" + reqUri;
var type = getOsType();
if (type == 'Android') {
Android.requestPost(reqUri, params, callbackName);
} else if (type == 'IOS') {
ios_requestPost(reqUri, params, callbackName);
} else {
$.toast('暂时不支持该设备');
}
}
function reqHtml(reqUri, params) {
reqUri = "/akaxin" + reqUri;
var type = getOsType();
if (type == 'Android') {
Android.requestPage(reqUri, params)
} else if (type == 'IOS') {
ios_requestPage(reqUri, params);
} else {
$.toast('暂时不支持该设备');
}
}
function reqImageUpload(callback) {
var type = getOsType();
if (type == 'Android') {
Android.imageUpload(callback);
} else if (type == 'IOS') {
ios_imageUpload(callback);
} else {
$.toast('暂时不支持该设备');
}
}
function reqImageDownload(imageid, callback) {
var type = getOsType();
if (type == 'Android') {
Android.imageDownload(imageid, callback);
} else if (type == 'IOS') {
ios_imageDownload(imageid, callback);
} else {
$.toast('暂时不支持该设备');
}
}
function toast(msg) {
var type = getOsType();
if (type == 'Android') {
Android.showToast(msg);
} else if (type == 'IOS') {
$.toast(msg);
} else {
$.toast('暂时不支持该设备');
}
}
$(document).on("click", ".group-info", function () {
var groupId = $(this).attr('group-id');
var groupName = $(this).attr('group-name');
console.log(groupId);
var reqUri = $(this).attr('url-data');
var params = {
"group_id": groupId,
"group_name": groupName,
};
reqHtml(reqUri, JSON.stringify(params));
});
//加载群聊列表
function loadGroupList() {
if (loading) {
$('.loadmore_group').addClass('weui-loadmore_line');
$('.loadmore_group span').html('到底啦');
return;
}
page = page + 1;
var reqUri = $('#init_url').attr('url-data');
var params = {
"page": page.toString()
};
reqUrl(reqUri, JSON.stringify(params), 'addGroupToList');
}
function addGroupToList(results) {
results = eval("(" + results + ")");
var data = results.groupData;
var html = '';
$.each(data, function (index, group) {
var html = '<a class="weui-cell weui-cell_access group-info" id="' + group.siteGroupId + '" group-id="' + group.siteGroupId + '" href="javascript:;" group-name="' + group.groupName + '" url-data="/group/manage"> <div class="weui-cell__bd"> <p>' + group.groupName + '</p> </div> <div class="weui-cell__ft"> </div> </a>';
$('#group-lists').append(html);
});
loading = results.loading;
if (loading == true) {
$(".weui-loadmore__tips").html("没有更多数据了");
} else {
$(".weui-loadmore__tips").html("加载更多");
}
}
$(document.body).pullToRefresh(function () {
reqUrl("/group/refresh", null, "doRefresh");
$('#group-lists').html("");
page = 0;
loading = false;
loadGroupList();
$(document.body).pullToRefreshDone();
});
function doRefresh(results) {
results = eval("(" + results + ")");
var size = results.size;
if (size <= 0) {
$('.defaultGroup').html("");
} else {
$('.defaultGroup').html("");
var defHtml = '<div class="weui-cells__title weui-cell default_group_lists" th:unless="${groupDefaultSize} == 0">\n' +
' 默认群列表\n' +
' </div>\n' +
' <div class="weui-cells demos-content-padded default_group_lists" id=\'default_group_lists\'\n' +
' th:unless="${groupDefaultSize} == 0"></div>';
$('.defaultGroup').append(defHtml);
var data = results.data;
var html = '';
$.each(data, function (index, group) {
var html = '<a class="weui-cell weui-cell_access group-info" group-id="' + group.siteGroupId + '" href="javascript:;" group-name="' + group.groupName + '" url-data="/group/manage"> <div class="weui-cell__bd"> <p>' + group.groupName + '</p> </div> <div class="weui-cell__ft"> </div> </a>';
$('#' + group.siteGroupId).remove();
$('#default_group_lists').append(html);
});
}
}
</script>
</body>
</html>