first commit
This commit is contained in:
那些花儿
@@ -0,0 +1,313 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<t-dropdown-menu @menu-opened="handleMenuOpened" @menu-closed="handleMenuClosed">
|
||||
<t-dropdown-item :options="actOptions" :value="pageForm.actId" @change="actChange" />
|
||||
</t-dropdown-menu>
|
||||
|
||||
<div class="content-area">
|
||||
<!-- 团队信息卡片 -->
|
||||
<div class="team-card">
|
||||
<div class="team-banner">
|
||||
<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-info">
|
||||
<div class="team-name">{{ team.name }}</div>
|
||||
<div class="team-meta">创建于 {{ team.createdDate }}</div>
|
||||
<div class="team-id">团队ID: {{ team.id }}</div>
|
||||
</div>
|
||||
<div class="event-name">{{ team.eventName }}</div>
|
||||
</div>
|
||||
|
||||
<div class="team-detail">
|
||||
<div class="team-stat-row">
|
||||
<div class="team-stat-item">
|
||||
<div class="team-stat-value">{{ team.memberCount }}</div>
|
||||
<div class="team-stat-label">团队成员</div>
|
||||
</div>
|
||||
<div class="team-stat-item">
|
||||
<div class="team-stat-value">{{ team.rank }}</div>
|
||||
<div class="team-stat-label">当前排名</div>
|
||||
</div>
|
||||
<div class="team-stat-item">
|
||||
<div class="team-stat-value">{{ team.score }}</div>
|
||||
<div class="team-stat-label">团队积分</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="font-size: 14px; color: #666; line-height: 1.6;">
|
||||
{{ team.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 团队成员 -->
|
||||
<div class="team-section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">
|
||||
<i class="bi bi-people"></i>团队成员
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="member-list">
|
||||
<div class="member-item" v-for="member in team.members" :key="member.id">
|
||||
<div class="member-avatar">
|
||||
<img :src="member.avatar" :alt="member.name" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2YwZjBmMCIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LXNpemU9IjIwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBhbGlnbm1lbnQtYmFzZWxpbmU9Im1pZGRsZSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmaWxsPSIjNTU1Ij57eyBtZW1iZXIubmFtZS5jaGFyQXQoMCkgfX08L3RleHQ+PC9zdmc+'">
|
||||
</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">
|
||||
{{ member.name }}
|
||||
<span class="member-role" v-if="member.role === 'leader'">队长</span>
|
||||
<span class="member-role" v-else-if="member.role === 'admin'" style="background-color: #ff9a5a;">管理员</span>
|
||||
</div>
|
||||
<div class="member-detail">
|
||||
<div class="member-detail-item">
|
||||
<i class="bi bi-gender-ambiguous"></i>
|
||||
<span>{{ member.gender }}</span>
|
||||
</div>
|
||||
<div class="member-detail-item">
|
||||
<i class="bi bi-building"></i>
|
||||
<span>{{ member.organization }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-actions">
|
||||
<i class="bi bi-three-dots-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 当前角色与申请队长 -->
|
||||
<div v-if="currentUserRole !== 'leader'">
|
||||
<div class="role-notice" v-if="currentUserRole === 'admin'">
|
||||
<i class="bi bi-info-circle"></i>
|
||||
您当前是管理员身份，拥有团队管理权限
|
||||
</div>
|
||||
<div class="role-notice" v-else>
|
||||
<i class="bi bi-info-circle"></i>
|
||||
您当前是普通成员身份
|
||||
</div>
|
||||
<button class="apply-leader-btn" @click="showLeaderConfirm">
|
||||
<i class="bi bi-award"></i>申请成为队长
|
||||
</button>
|
||||
</div>
|
||||
<div class="role-notice" v-else>
|
||||
<i class="bi bi-check-circle"></i>
|
||||
您当前是队长身份，拥有团队所有权限
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 项目报名按钮 -->
|
||||
<div class="team-section">
|
||||
<button class="register-btn" @click="goToEventRegistration">
|
||||
<i class="bi bi-calendar-check"></i>
|
||||
项目报名
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref,reactive} from "vue";
|
||||
|
||||
const actOptions = ref([])
|
||||
|
||||
const pageForm = reactive({
|
||||
actId: null,
|
||||
})
|
||||
|
||||
const teamId = ''
|
||||
|
||||
const team = reactive({
|
||||
id: teamId,
|
||||
name: '江苏健康跑团',
|
||||
logoUrl: null,
|
||||
createdDate: '2023-10-15',
|
||||
eventId: '',
|
||||
eventName: '',
|
||||
memberCount: 12,
|
||||
rank: 5,
|
||||
score: 256,
|
||||
description: '我们是一支来自江苏省的健康跑团队，致力于推广健康跑步文化，鼓励大家积极参与体育活动，共同展现江苏的活力风采。',
|
||||
|
||||
// 团队成员
|
||||
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
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
function handleMenuOpened(){
|
||||
|
||||
}
|
||||
|
||||
function handleMenuClosed(){}
|
||||
|
||||
function actChange(val){
|
||||
console.log(val)
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
/* 主体内容区 */
|
||||
.content-area {
|
||||
}
|
||||
|
||||
/* 团队信息卡片 */
|
||||
.team-card {
|
||||
background-color: white;
|
||||
margin: 15px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.team-banner {
|
||||
position: relative;
|
||||
height: 120px;
|
||||
background: linear-gradient(135deg, #e74c3c, #ff7675);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.team-logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 15px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.team-logo img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.team-logo i {
|
||||
font-size: 40px;
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.team-info {
|
||||
flex: 1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.team-name {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.team-meta {
|
||||
font-size: 13px;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.team-id {
|
||||
display: inline-block;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.event-name {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 15px;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
padding: 3px 10px;
|
||||
border-radius: 15px;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 团队详情内容 */
|
||||
.team-detail {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.team-stat-row {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.team-stat-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.team-stat-value {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #e74c3c;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.team-stat-label {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user