c-chengc1/hmc_gbhd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
c-zhouhf1
2025-04-29 15:53:56 +08:00
parent e3c2051c29
commit 12f54fb7e9
8 changed files with 368 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/activity/team-form/index.vue
+65 -51
View File
@@ -16,7 +16,7 @@
v-for="project in itemOptions"
:key="project.id"
class="project-card"
:class="{'project-card--registered': registrationStatus[project.id]?.length}"
:class="{'project-card--registered': registrationStatus.get(project.id)?.length}"
@click="selectProject(project.id)"
>
<view class="project-card__content">
@@ -24,14 +24,14 @@
<view class="project-card__desc">{{ project.description }}</view>
</view>
<view class="project-card__status">
<t-tag v-if="registrationStatus[project.id]?.length" theme="success" variant="light-outline">
已报名 {{ registrationStatus[project.id]?.length }}人
<t-tag v-if="registrationStatus.get(project.id)?.length" theme="success" variant="light-outline">
已报名 {{ registrationStatus.get(project.id)?.length }}人
</t-tag>
<view v-else class="project-card__action">
<t-icon name="chevron-right" color="#999"/>
</view>
</view>
<view v-if="registrationStatus[project.id]?.length" class="project-card__checkmark">
<view v-if="registrationStatus.get(project.id)?.length" class="project-card__checkmark">
<t-icon name="check" color="#52c41a"/>
</view>
</view>
@@ -53,24 +53,19 @@
<t-checkbox-group v-model="selectedMemberIds">
<view
v-for="member in teamMembers"
:key="member.id"
:key="member.userId"
>
<t-checkbox
:value="member.id"
:label="member.userName"
:value="member.userId"
:label="member.userName+'-'+member.sex"
:content="member.unitName"
:disabled="registrationStatus[selectedItemId]?.includes(member.id)"
icon-size="20px"
/>
<view class="member-status" v-if="registrationStatus[selectedItemId]?.includes(member.id)">
已报名
</view>
</view>
</t-checkbox-group>
</view>
<view class="picker-footer">
<t-button block theme="primary" @click="submitRegistration" :disabled="!selectedMemberIds.length">
<t-button block theme="primary" @click="submitRegistration" >
确认报名 ({{ selectedMemberIds.length }}人)
</t-button>
</view>
@@ -116,14 +111,15 @@ const teamMembers = ref([]);
onLoad((option) => {
if (option.id) {
selectActId.value = option.id;
selectActId.value = Number(option.id);
}
});
onMounted(async () => {
await listActs()
await listItems();
listTeamUser()
// fetchRegistrationStatus();
await listTeamUser();
await getApplyUsers();
fetchRegistrationStatus();
});
// 选中的团队成员
@@ -132,8 +128,7 @@ const selectedMemberIds = ref([]);
// 成员选择弹窗显示状态
const showMemberPicker = ref(false);
// 当前项目的报名状态
const registrationStatus = ref({});
// 获取活动列表
async function listActs() {
@@ -146,9 +141,9 @@ async function listActs() {
label: item.title
}
})
if(selectActId.value === null && data.length){
selectActId.value = data[0].id
}
// if(selectActId.value === null && data.length){
// selectActId.value = data[0].id
// }
} else {
Toast.error(msg)
}
@@ -171,61 +166,80 @@ async function listItems() {
}
// 获取团队成员
async function listTeamUser(){
async function listTeamUser() {
try {
const {code, data, msg} = await request.get('/client/item/list-team-user/'+selectActId.value)
const {code, data, msg} = await request.get('/client/item/list-team-user/' + selectActId.value)
if (code === 0) {
teamMembers.value = data;
}else{
} else {
Toast.error(msg)
}
}catch (e){
} catch (e) {
Toast.error(msg)
console.error(e)
}
}
// 当前项目的报名状态
const registrationStatus = ref(new Map());
// 获取报名状态 - 使用静态数据
const fetchRegistrationStatus = async () => {
const fetchRegistrationStatus = () => {
const resultMap = selectedMemberList.value.reduce((acc, item) => {
const key = item.itemId;
if (!acc.has(key)) {
acc.set(key, []);
}
acc.get(key).push(item);
return acc;
}, new Map());
registrationStatus.value = resultMap;
};
// 选择项目
const selectProject = (projectId) => {
selectedItemId.value = projectId;
selectedMemberIds.value = [];
selectedMemberIds.value = selectedMemberList.value.filter(v => v.itemId === projectId).map(v => v.userId)
showMemberPicker.value = true;
};
const selectedMemberList = ref([])
// 每个项目报名的user
const getApplyUsers = async () => {
try {
const {code, data, msg} = await useRequest().post('/client/item/list-apply-user/' + selectActId.value)
if (code === 0) {
selectedMemberList.value = data
} else {
Toast.error(msg)
}
} catch (e) {
Toast.error(e.message)
}
}
// 提交报名 - 使用静态数据模拟
const submitRegistration = async () => {
if (!selectedMemberIds.value.length) {
Toast.warning('请选择团队成员');
return;
}
try {
console.log(selectedMemberIds.value)
console.log(selectedItemId.value)
console.log(selectActId.value)
const teamUser = teamMembers.value.filter(v=>selectedMemberIds.value.includes(v.id))
// const {code, msg} = await request.post('/client/item/sign-up', {
// activityId: selectActId.value,
// itemId: selectedItemId.value,
// userList: selectedMemberIds.value
// })
// if (code === 0) {
// Toast.success('报名成功')
// showMemberPicker.value = false;
// selectedMemberIds.value = []
// }else{
// Toast.error(msg)
// }
}catch (e){
let data = {}
data.activityId = selectActId.value
data.itemId = selectedItemId.value
data.userList = selectedMemberIds.value
const {code, msg} = await useRequest().post('/client/item/sign-up', {...data})
if (code === 0) {
Toast.success('报名成功')
showMemberPicker.value = false;
selectedMemberIds.value = []
await getApplyUsers();
fetchRegistrationStatus();
} else {
Toast.error(msg)
}
} catch (e) {
Toast.error(e.message)
console.error(e)
}
};
frontend/src/pages/activity/team/index.vue
+164 -149
View File
@@ -1,118 +1,109 @@
<template>
<view class="page-container" :style="{ backgroundColor: '#f7f7f9' }">
<t-sticky>
<t-dropdown-menu class="top-dropdown-menu">
<t-dropdown-item :options="actOptions" :value="pageForm.actId" @change="actChange" />
</t-dropdown-menu>
</t-sticky>
<view class="page-container">
<view v-if="actList&&actList?.length>0">
<t-sticky>
<t-dropdown-menu class="top-dropdown-menu">
<t-dropdown-item :options="actOptions" :value="pageForm.actId" @change="actChange"/>
</t-dropdown-menu>
</t-sticky>
<!-- 团队卡片 -->
<div class="content-area">
<div class="team-card">
<div class="team-header">
<div class="team-logo">
<i class="bi bi-people-fill" v-if="!team.logoUrl"></i>
<img :src="team.logoUrl" alt="团队logo" v-if="team.logoUrl">
</div>
<!-- 团队卡片 -->
<div class="content-area">
<div class="team-card">
<div class="team-header">
<div class="team-logo">
<i class="bi bi-people-fill" v-if="!team.logoUrl"></i>
<img :src="team.logoUrl" alt="团队logo" v-if="team.logoUrl">
</div>
<div class="team-basic-info">
<div class="team-name">{{ team.name }}</div>
<div class="team-meta">创建于 {{ team.createdDate }}</div>
</div>
</div>
<div class="team-stats">
<div class="stat-item">
<div class="stat-icon"><i class="bi bi-people"></i></div>
<div class="stat-content">
<div class="stat-value">{{ team.memberCount }}</div>
<div class="stat-label">成员</div>
<div class="team-basic-info">
<div class="team-name">{{ team.groupName }}</div>
<div class="team-meta">创建于 {{moment(team.createdAt).format("YYYY-MM-DD HH:mm")}}</div>
</div>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<div class="stat-icon"><i class="bi bi-trophy"></i></div>
<div class="stat-content">
<div class="stat-value">{{ team.rank }}</div>
<div class="stat-label">排名</div>
<div class="team-stats">
<div class="stat-item">
<div class="stat-icon"><i class="bi bi-people"></i></div>
<div class="stat-content">
<div class="stat-value">{{ team.groupUsers?.length }}</div>
<div class="stat-label">成员</div>
</div>
</div>
</div>
</div>
<div v-if="team.description" class="team-desc-toggle" @click="showDesc = !showDesc">
<span>团队介绍</span>
<i class="bi" :class="showDesc ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
</div>
<div v-if="showDesc && team.description" class="team-desc">
<i class="bi bi-quote"></i>
{{ team.description }}
</div>
</div>
<!-- 项目报名按钮 -->
<div class="action-section">
<t-button block theme="danger" size="large" class="register-btn" @click="goToEventRegistration">
参与项目报名
</t-button>
</div>
<!-- 团队成员列表 -->
<div class="members-section">
<div class="section-header">
<div class="section-title">
<i class="bi bi-people-fill"></i>
团队成员
</div>
<div class="section-badge">{{ team.memberCount }}</div>
</div>
<div class="member-grid">
<div class="member-grid-item" v-for="member in team.members" :key="member.id">
<div class="member-name">
{{ member.name }}
<t-tag theme="danger" size="small" v-if="member.role === 'leader'">队长</t-tag>
</div>
<div class="member-details">
<span><i class="bi bi-gender-ambiguous"></i> {{ member.gender }}</span>
<span><i class="bi bi-building"></i> {{ member.organization }}</span>
<div class="stat-divider"></div>
<div class="stat-item">
<div class="stat-icon"><i class="bi bi-trophy"></i></div>
<div class="stat-content">
<div class="stat-value">{{ team.totalRank ? team.totalRank : '--' }}</div>
<div class="stat-label">排名</div>
</div>
</div>
</div>
</div>
<!-- 当前角色与申请队长 -->
<div class="role-section">
<div class="role-card" v-if="currentUserRole === 'leader'">
<div class="role-icon">
<i class="bi bi-trophy"></i>
<!-- 项目报名按钮 -->
<div class="action-section" v-if="team.isSelfLeader">
<t-button block theme="danger" size="large" class="register-btn" @click="goToEventRegistration">
参与项目报名
</t-button>
</div>
<!-- 团队成员列表 -->
<div class="members-section">
<div class="section-header">
<div class="section-title">
<i class="bi bi-people-fill"></i>
团队成员
</div>
<div class="role-info">
<div class="role-title">您是队长</div>
<div class="role-desc">拥有团队所有管理权限</div>
<div class="section-badge">{{ team.groupUsers.length }}</div>
</div>
<div class="member-grid">
<div class="member-grid-item" v-for="member in team.groupUsers" :key="member.id">
<div class="member-name">
{{ member.userName }}
<t-tag theme="danger" size="small" v-if="member.isLeader">队长</t-tag>
</div>
<div class="member-details">
<span><i class="bi bi-gender-ambiguous"></i>{{ member.sex }}</span>
<span><i class="bi bi-building"></i>{{ member.unitName }}</span>
</div>
</div>
</div>
<div v-else>
<div class="role-card">
<!-- 当前角色与申请队长 -->
<div class="role-section">
<div class="role-card" v-if="team.isSelfLeader">
<div class="role-icon">
<i class="bi bi-person"></i>
<i class="bi bi-trophy"></i>
</div>
<div class="role-info">
<div class="role-title">您是普通成员</div>
<div class="role-desc">申请成为队长可获得更多权限</div>
<div class="role-title">您是队长</div>
<div class="role-desc">拥有团队所有管理权限</div>
</div>
</div>
<t-button block
class="leader-apply-btn"
theme="danger"
variant="outline"
@click="leaderConfirmVisible = true">
申请成为队长
</t-button>
<div v-else>
<div class="role-card">
<div class="role-icon">
<i class="bi bi-person"></i>
</div>
<div class="role-info">
<div class="role-title">您是普通成员</div>
<div class="role-desc">申请成为队长可获得更多权限</div>
</div>
</div>
<t-button block
class="leader-apply-btn"
theme="danger"
variant="outline"
@click="leaderConfirmVisible = true">
申请成为队长
</t-button>
</div>
</div>
</div>
</div>
</div>
</view>
<view v-else>暂无团队</view>
</view>
<t-dialog
@@ -135,21 +126,36 @@
</div>
</template>
</t-dialog>
</template>
<script setup>
import {ref, reactive} from "vue";
import {ref, reactive, onMounted, computed} from 'vue';
import {Dialog, Toast} from 'tdesign-mobile-vue';
import {useRequest} from "@/utils/request";
import moment from "moment";
import {onLoad} from "@dcloudio/uni-app";
const actOptions = ref([])
const actList = ref([])
const showDesc = ref(false)
const actOptions = computed(() => {
return actList.value.map(item => {
return {
value: item.id,
label: item.title
}
})
})
const pageForm = reactive({
actId: null,
})
const teamId = ''
const team = reactive({
let team = ref({
id: teamId,
name: 'xx队',
logoUrl: null,
@@ -162,70 +168,79 @@ const team = reactive({
description: 'xxxxxxxxxxxxxxxxxxx',
// 团队成员
members: [
{
id: '101',
name: '张伟',
role: 'leader',
gender: '男',
organization: '江苏体育学院',
avatar: null
},
{
id: '102',
name: '李娜',
role: 'admin',
gender: '女',
organization: '南京体育局',
avatar: null
},
{
id: '103',
name: '王强',
role: 'member',
gender: '男',
organization: '南京体育学院',
avatar: null
},
{
id: '104',
name: '刘芳',
role: 'member',
gender: '女',
organization: '江苏大学',
avatar: null
},
{
id: '105',
name: '陈明',
role: 'member',
gender: '男',
organization: '苏州体育中心',
avatar: null
}
]
groupUsers: []
});
const currentUserRole = ref('')
// 申请成为队长弹框提示
const leaderConfirmVisible = ref(false)
function handleMenuOpened(){
const handleMenuOpened = () => {
}
function handleMenuClosed(){}
const handleMenuClosed = () => {
}
function actChange(val){
console.log(val)
const actChange = (val) => {
getListAct()
}
// 申请成为队长
function onLeaderConfirm(){
const onLeaderConfirm = async () => {
try {
pageForm.groupId = team.value.id
const {code, msg} = await useRequest().post('/client/group/apply-leader/' + team.value.id);
if (code === 0) {
Toast({message: '申请成功', theme: 'success'});
leaderConfirmVisible.value = false
} else {
Toast({message: msg, theme: 'error'});
}
} catch (e) {
Toast({message: e, theme: 'error'});
}
}
function goToEventRegistration(){}
// 点击参与项目报名
const goToEventRegistration = () => {
uni.navigateTo({url: '/pages/activity/team-form/index?id=' + pageForm.actId})
};
// 根据活动查询队伍信息
const getTeamInfo = async () => {
try {
const {code, msg, data} = await useRequest().post('/client/group/info/' + pageForm.actId);
if (code === 0) {
team.value = data
} else {
Toast({message: msg, theme: 'error'});
}
} catch (e) {
Toast({message: e, theme: 'error'});
}
};
// 查询自己已经签到的活动
const getListAct = async () => {
try {
const {code, msg, data} = await useRequest().post('/client/group/list-act');
if (code === 0) {
actList.value = data;
if (data.length > 0) {
pageForm.actId = data[0].id;
await getTeamInfo();
}
}
} catch (error) {
Toast({message: error, theme: 'error'});
}
};
// 初始化
onLoad(() => {
getListAct();
});
</script>
<style scoped lang="less">