团队代码

2021年6月5日：

社团添加代码：

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="/index_head.jsp">
<jsp:param name="title" value="创建社团" />
<jsp:param name="needCropper" value="true" />
</jsp:include>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>
创建社团 <small>different form elements</small>
</h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<br>
<form action="${pageContext.request.contextPath}/club/add.html"
method="post" id="myform" class="form-horizontal form-label-left">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">社团名称
<span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="name" name="name" required
class="form-control col-md-7 col-xs-12"> <input
type="hidden" name="user_name" value="${user.true_name}" /> <input
type="hidden" name="renshu" id="people" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">社团分类
<span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select id="heard" name="type_id" class="form-control" required>
<c:forEach items="${types}" var="type">
<option value="${type.id}">${type.name}</option>
</c:forEach>
</select>
</div>
</div>

<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">社团logo
<span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<button type="button" class="btn btn-success"
onclick="uploadLogo()">上传logo</button>
<input type="hidden" name="imgData" id="imgData" />
</div>
</div>

<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12"
for="introduce">简介 <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<textarea id="introduce" name="introduce"
class="form-control col-md-7 col-xs-12" required></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12"
for="slogan">口号 </label>
<div class="col-md-6 col-sm-6 col-xs-12">
<textarea id="slogan" name="slogan"
class="form-control col-md-7 col-xs-12" required></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12"
for="purpose">理念 </label>
<div class="col-md-6 col-sm-6 col-xs-12">
<textarea id="purpose" name="purpose"
class="form-control col-md-7 col-xs-12" required></textarea>
</div>
</div>
<div class="form-group">
<label for="groupCode"
class="control-label col-md-3 col-sm-3 col-xs-12">QQ群号</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="groupCode" maxlength="11"
class="form-control col-md-7 col-xs-12" type="text"
name="group_code" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">部门
<span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<button type="button" class="btn btn-success"
onclick="creatempty()">创建部门</button>
</div>
</div>
<div class="form-group">
<div
class="col-md-6 col-sm-6 col-xs-12 col-sm-offset-3 col-md-offset-3">
<button type="submit" class="btn btn-primary">保存</button>
</div>
</div>
</form>
</div>
</div>
</div>
<jsp:include page="/index_foot.jsp">
<jsp:param name="needAlert" value="true" />
<jsp:param name="needCropper" value="true" />
</jsp:include>
<script type="text/javascript">
var count=0;
$(function() {
$("#myform").submit(function () {
if($("#imgData").val().length==0){
Swal.fire(
'选择图片',
'请选择社团logo',
'error'
)
return false;
}
return true;
})
$("#save").on("click", function() {
var emptyname = $("#bumenname").val();
var renshu = parseInt($("#renshu").val());
count+=renshu;
if (emptyname && renshu) {
$("#clubname").val($("#name").val());
$.ajax({
url : "${pageContext.request.contextPath}/club/empty",
type : "post",
data : $("#biaodan").serialize(),
success : function(data) {
if (data.msg.indexOf("成功") >= 0) {
if (confirm("添加成功,是否继续添加?") == true) {
$("#myModal form")[0].reset();
} else {
$("#myModal").modal('hide');
$("#people").val(count.toString());
}
}
}
})
} else {
alert("请完善你的部门信息");
}
})
})
function creatempty() {
count=0;
$("#myModal form")[0].reset();
$("#myModal").modal({
backdrop : "static"
})
}
var msg = "${msg}";
if (msg.length > 0) {
alert(msg);
if (msg.indexOf("成功") >= 0) {
window.location = "${pageContext.request.contextPath}/index.jsp";
}
}
function uploadLogo(){
Swal.fire({
title: '上传社团logo',
width: 800,
allowOutsideClick:false,
showConfirmButton: false,
html:`<input type="file" id="fileHead" onchange="show(this)" />
<button type="button" class="btn btn-success" onclick="$('#imgTeset').cropper('setDragMode','move')">移动</button>
<button type="button" class="btn btn-success" onclick="horizontal()">水平翻转</button>
<button type="button" class="btn btn-success" onclick="vertical()">垂直翻转</button>
<button type="button" class="btn btn-success" onclick="cut()">裁剪</button>
<div style="width: 600px;height: 600px;">
<img id="imgTeset" src="">
</div>`
})
}

function show(a){
var $file = $(a);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL = null;
if (!fileObj || !fileObj.files || !fileObj.files[0]){//没有选择图片
return;
}
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$("#imgTeset").attr('src', dataURL);
$('#imgTeset').cropper({
aspectRatio: 1 / 1,//长款1比1的比例
viewMode: 1
});
$("#imgTeset").cropper('replace', dataURL);
}
var currentHorizontal=1;
var currentVertical=1;

function horizontal(){
currentHorizontal*=-1;
$('#imgTeset').cropper('scaleX',currentHorizontal);
}

function vertical(){
currentVertical*=-1;
$('#imgTeset').cropper('scaleY',currentVertical);
}

function cut(){
var size={width:220,height:220};
var cas = $('#imgTeset').cropper('getCroppedCanvas',size);
if(cas == null || cas.tagName==null){
alert("请选择图片");
}else{
var base64url = cas.toDataURL('image/jpeg');
$("#imgData").val(base64url);
alert("logo上传成功");
Swal.close();
}
}
</script>

社团首页代码：

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="/index_head.jsp">
<jsp:param name="title" value="社团主页" />
</jsp:include>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>
社团主页 <small>different form elements</small>
</h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="col-md-3 col-sm-3 col-xs-12 profile_left">
<div class="profile_img">
<div id="crop-avatar">
<img class="img-responsive avatar-view"
src="${pageContext.request.contextPath}/statics/images/<c:if test="${empty club.logo}">img.jpg</c:if><c:if test="${not empty club.logo}">club/${club.logo}</c:if>">
</div>
</div>
<h3>${club.name}</h3>
<ul class="list-unstyled user_data">
<li>社团人数:${club.renshu}</li>
<li>当前人数:${club.peoplecount}</li>
<li>社团简介:${club.introduce}</li>
<li>社团理念:${club.purpose}</li>
<li>社团类型: <span id="type"></span></li>
<li>社长姓名:${club.user_name}</li>
<li>社团口号:${club.slogan}</li>
<li>社团QQ群:${club.group_code}</li>
<li>社团创建时间:<span id="time"></span></li>
</ul>
</div>
<div class="col-md-9 col-sm-9 col-xs-12">
<div class="" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
<li role="presentation" class="active"><a
href="#tab_content1" id="home-tab" role="tab" data-toggle="tab"
aria-expanded="true">成员列表</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade active in"
id="tab_content1" aria-labelledby="home-tab"
style="height: 320px;">
<div style="height: 320px;">
<ul class="list-unstyled user_data" id="ul">
</ul>
</div>
<ul class="nav nav-pills"
style="margin-left: 720px; display: none;" id="page">
<li class="active" id="prev"><a href="" data-toggle="tab"
onclick="prev()">上一页</a></li>
<li style="margin-left: 10px;" id="next"><a href=""
data-toggle="tab" onclick="next()">下一页</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<jsp:include page="/index_foot.jsp"></jsp:include>
<script type="text/javascript">
Date.prototype.toLocaleString = function() {
return this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate();
};
$(function(){
var time=new Date(${club.create_time.time}).toLocaleString();
$("#time").text(time);
var type=${club.type_id};
switch(type){
case 1:$("#type").text("才艺");break;
case 2:$("#type").text("心理");break;
case 3:$("#type").text("读书");break;
case 4:$("#type").text("娱乐");break;
case 5:$("#type").text("其他");break;
}
})
var page=1;
var l=1;
var pa;
$(function() {
$("#prev").attr("style","visibility:hidden");
$.ajax({
url : "${pageContext.request.contextPath}/user/page",
data : "page=1&id="+${club.id},
type : "get",
success : function(data) {
$.each(data,function(){
var li=$("<li style='float: left; margin-right: 35px; width: 140px; margin-bottom: 50px;'></li>");
var a=$("<a class='user-profile dropdown-toggle'></a>").attr("href","javaScript:;");
var img=$("<img>").attr("src","${pageContext.request.contextPath}/statics/images/user/"+this.head_img);
if(this.user_type==2){
$("#ul").append(li.append(a.append(img).append(this.true_name+"(社长)")));
}else
{
$("#ul").append(li.append(a.append(img).append(this.true_name)));
}
})
}
})
})
var users = ${users};
if(users.length > 1){
$("#page").show();
}
function prev() {
$("#next").attr("style","visibility:visible");
page--;
if(page==1){
$("#prev").attr("style","visibility:hidden");
}
$.ajax({
url : "${pageContext.request.contextPath}/user/page",
data : "page=" + page+"&id="+${club.id},
type : "get",
success : function(data) {
l-=pa;
pa=data.length;
$("#ul").empty();
$.each(data,function(){
var li=$("<li style='float: left; margin-right: 35px; width: 140px; margin-bottom: 50px;'></li>");
var a=$("<a class='user-profile dropdown-toggle'></a>").attr("href","javaScript:;");
var img=$("<img>").attr("src","${pageContext.request.contextPath}/statics/images/user/"+this.head_img);
if(this.user_type==2){
$("#ul").append(li.append(a.append(img).append(this.true_name+"(社长)")));
}else
{
$("#ul").append(li.append(a.append(img).append(this.true_name)));
}
})
}
})
}
function next() {
page++;
$("#prev").attr("style","visibility:visible");
$.ajax({
url : "${pageContext.request.contextPath}/user/page",
data : "page=" + page+"&id="+${club.id},
type : "get",
success : function(data) {
pa=data.length;
l+=data.length;
if(l==users.length){
$("#next").attr("style","visibility:hidden");
}
$("#ul").empty();
$.each(data,function(){
var li=$("<li style='float: left; margin-right: 35px; width: 140px; margin-bottom: 50px;'></li>");
var a=$("<a class='user-profile dropdown-toggle'></a>").attr("href","javaScript:;");
var img=$("<img>").attr("src","${pageContext.request.contextPath}/statics/images/user/"+this.head_img);
if(this.user_type==2){
$("#ul").append(li.append(a.append(img).append(this.true_name+"(社长)")));
}else
{
$("#ul").append(li.append(a.append(img).append(this.true_name)));
}
})
}
})
}
</script>

搜索社团的页面代码：

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="/index_head.jsp">
<jsp:param name="title" value="社团搜索" />
<jsp:param name="needTable" value="true" />
</jsp:include>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>
社团搜索 <small>different form elements</small>
</h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="row">
<div class="col-md-12">
<form class="form-inline">
<div class="form-group">
<label for="clubId">社团编号</label> <input type="text"
class="form-control" id="clubId">
</div>
<div class="form-group">
<label for="clubName">社团名称</label> <input type="text"
class="form-control" id="clubName">
</div>
<div class="form-group">
<label for="clubName">社团分类</label> <select id="clubType"
class="form-control" required>
<option value="0">全部</option>
<c:forEach items="${types}" var="type">
<option value="${type.id}">${type.name}</option>
</c:forEach>
</select>
</div>
<button type="button" onclick="search()" class="btn btn-info">
<span class="glyphicon glyphicon-search" aria-hidden="true">搜索</span>
</button>
</form>
</div>
</div>
<div class="row">
<table id="table" data-toggle="table" data-pagination="true"
data-side-pagination="server" data-sort-name="id"
data-content-type="application/x-www-form-urlencoded"
data-sort-order="asc" data-method="post" data-ajax="ajaxRequest"
data-page-size="2" data-page-list="[2,3,5]"
data-url="${pageContext.request.contextPath}/club/list.json">
<thead>
<tr>
<th data-field="" data-formatter="rowNumber">序号</th>
<th data-field="id">社团id</th>
<th data-field="name" data-sortable="false">社团名称</th>
<th data-field="user_name" data-sortable="false">社长</th>
<th data-field="type_id" data-sortable="false"
data-formatter="clubtype">分类</th>
<th data-field="create_time" data-sortable="true">创建日期</th>
<th data-field="name" data-formatter="apply">操作</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<jsp:include page="/index_foot.jsp">
<jsp:param name="needTable" value="true" />
</jsp:include>
<script type="text/javascript">
function rowNumber(value, row, index) {
var options = $('#table').bootstrapTable('getOptions');
return options.pageSize * (options.pageNumber - 1) + index + 1;
}
function check(value) {
window.location.href = '${pageContext.request.contextPath}/club/lookclub?name='
+ value;
}
function apply(value, row, index) {
return '<button type="button" class="btn btn-primary" onclick="check(\''
+ value
+ '\')">详情</button>'
+ "\n"
+ '<button type="button" class="btn btn-success shenqing" data-name="'
+ value + '" onclick="apply1(\''+ value + '\',\'' + row.user_name + '\')">申请</button>';
}
$(function(){
setTimeout(function(){}, 20);
})
function apply1(value,value1) {
window.location.href = '${pageContext.request.contextPath}/club/apply1?name='+ value+"&username="+value1;
}
function clubtype(value, row, index) {
var a;
$.ajax({
url : "${pageContext.request.contextPath}/club/clubtype",
data : "typeid=" + value,
type : "get",
dataType : "text",
async : false,
success : function(data) {
a = data;
}
})
return a;
}
function ajaxRequest(params) {
var club = {};
club.id = $("#clubId").val().trim();
club.name = $("#clubName").val().trim();
if ($("#clubType").val() > 0) {
club.type_id = $("#clubType").val();
}
params.data.obj = club;
$.ajax({
url : params.url,
data : JSON.stringify(params.data),
type : "POST",
contentType : "application/json",
dataType : "json",
success : function(data) {
params.success(data);
$.each($(".shenqing"), function(i,a) {
$.each(data.rows,function(i,v){
if(v.name==$(a).attr("data-name")){
if(v.renshu==v.peoplecount){
$(a).text("社团已满").attr("disabled",true).removeClass("btn-success").addClass("btn-secondary");
}
$.each(${applylist},function(){
if(this.club_name==$(a).attr("data-name")){
if(this.status==0){
if(v.renshu==v.peoplecount){
$(a).text("社团已满").attr("disabled",true).removeClass("btn-success").addClass("btn-secondary");
}
else
{
$(a).remove();
}
}
if(this.status==2){
$(a).text("已加").attr("disabled",true).removeClass("btn-success").addClass("btn-secondary");
}
}
})
}
})
})
}
})
}
function search() {
$("#table").bootstrapTable('refresh');
}
</script>