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

242 lines
8.1 KiB
HTML
Executable File

<!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;
}
.margin_top_30px {
margin-top: 30px;
}
.basic-color {
background-color: #1E88E5;
color: #FFFFFF;
}
.basic-weui-btn {
background-color: #1E88E5;
color: #FFFFFF;
}
.basic-weui-btn:hover {
background-color: #1E88E5;
color: #FFFFFF;
}
.basic-weui-btn:active {
background-color: #1E88E5 !important;
color: #FFFFFF;
}
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-cells weui-cells_form margin_top_30px">
<div class="weui-cell">
<div class="weui-cell__hd">
<label class="weui-label">群名称</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input group_name" type="text" pattern="[^'\x22]+" th:value="${groupName}"
placeholder="请输入群名称">
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__bd">
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">图片上传</p>
<div class="weui-uploader__info" th:if="${groupPhoto}!=null">1/1</div>
<div class="weui-uploader__info" th:unless="${groupPhoto}!=null">0/1</div>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles">
<li class="weui-uploader__file group_icon" id="group_icon"
th:attr="group-icon=${groupPhoto}"></li>
</ul>
<div class="weui-uploader__input-box">
<input id="uploaderInput" class="weui-uploader__input uploaderInput" type="file"
accept="image/*" multiple="">
</div>
</div>
</div>
</div>
</div>
<div class="weui-btn-area">
<a class="weui-btn basic-weui-btn weui-btn_primary basic-color setGroupInfoButton" href="javascript:"
th:attr="group-id=${siteGroupId}" url-data="/group/updateProfile" id="setGroupInfoButton">确定</a>
</div>
</div>
<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">
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", "#setGroupInfoButton", function () {
var groupId = $(this).attr('group-id');
var reqUri = $(this).attr('url-data');
var groupNotice = $('.group_notice').val();
var groupName = $('.group_name').val();
var groupIcon = $('.group_icon').attr('group-icon');
$('#group_info_id').attr('group-id', groupId);
$('#group_info_id').attr('group-name', groupName);
$.confirm({
title: '修改群信息',
text: '确定修改群信息?',
onOK: function () {
var params = {
"siteGroupId": groupId,
"groupName": groupName,
"groupNotice": groupNotice,
"groupPhoto": groupIcon
};
reqUrl(reqUri, JSON.stringify(params), "setGroupInfo");
$.closeModal();
},
onCancel: function () {
console.log('cancle');
toast('取消操作');
$.closeModal();
}
});
});
$(document).on("click", '.uploaderInput', function () {
reqImageUpload("jsimageUpload");
});
function jsimageUpload(result, imageId, imageLocalPath) {
var type = getOsType();
if (result == 1) {
if (type == 'Android') {
var img = '<li class="weui-uploader__file group_icon" group-icon="' + imageId + '"><img src="http://akaxin/img' + imageLocalPath + '" style="height:75px; width:75px;" /></li>';
} else {
var img = '<li class="weui-uploader__file group_icon" group-icon="' + imageId + '"><img src="' + imageLocalPath + '" style="height:75px; width:75px;" /></li>';
}
$('#uploaderFiles').html(img);
$('.pic_num').html('1/1');
} else {
$.toast('上传图片失败', 'forbidden');
}
}
$(window).load(function () {
var imageid = $('.group_icon').attr('group-icon');
reqImageDownload(imageid, "jsimageDownload");
});
function jsimageDownload(result, imageid, imageLocalPath) {
var type = getOsType();
if (type == 'Android') {
var html = '<img src="http://akaxin/img' + imageLocalPath + '" style="height:75px; width:75px;" />';
} else {
var html = '<img src="' + imageLocalPath + '" style="height:75px; width:75px;" />';
}
$('.group_icon').html(html);
}
function setGroupInfo(result) {
if (result == 'success') {
$.toast("修改成功");
} else {
$.toast("修改失败", "forbidden");
}
}
</script>
</body>
</html>