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/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">