634 lines
15 KiB
Vue
634 lines
15 KiB
Vue
<template>
|
|
<view class="page-container">
|
|
<t-dropdown-menu class="top-dropdown">
|
|
<t-dropdown-item :options="actOptions" :value="selectActId"/>
|
|
</t-dropdown-menu>
|
|
|
|
<template v-if="actOptions && actOptions.length > 0 && teamMembers.length > 0">
|
|
<view class="content-container">
|
|
<!-- <view class="page-header">-->
|
|
<!-- <text class="page-title">团队报名</text>-->
|
|
<!-- <text class="page-subtitle">点击项目报名</text>-->
|
|
<!-- </view>-->
|
|
|
|
<!-- 项目列表 -->
|
|
<view class="project-cards">
|
|
<view
|
|
v-for="project in itemOptions"
|
|
:key="project.id"
|
|
class="project-card"
|
|
:class="{'project-card--registered': registrationStatus.get(project.id)?.length}"
|
|
|
|
>
|
|
<view class="project-card__content">
|
|
<t-image :src=config.fileDomain+project.img shape="round"
|
|
class="project-card__image" fit="fill"/>
|
|
<view class="project-card__title">{{ project.name }}</view>
|
|
|
|
<div style="display: flex;justify-content: flex-end;margin-top: 10px;">
|
|
<t-button theme="primary" size="small" class="project-card__button" @click="openDesc(project)">
|
|
项目介绍
|
|
</t-button>
|
|
<t-button theme="primary" size="small" @click="selectProject(project)" class="project-card__button">
|
|
活动报名 {{
|
|
registrationStatus.get(project.id)?.length ? registrationStatus.get(project.id)?.length : 0
|
|
}}人
|
|
</t-button>
|
|
</div>
|
|
<!-- <t-tag v-if="registrationStatus.get(project.id)?.length" theme="success" variant="light-outline">
|
|
已报名 {{ registrationStatus.get(project.id)?.length }}人
|
|
</t-tag>-->
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<view v-else style="flex: 1;display: flex;justify-content: center;align-items: center">
|
|
<t-empty
|
|
image="/static/img/empty.png"
|
|
description="活动还没有自由组队，组队后方可项目报名！"
|
|
style="flex: 1">
|
|
</t-empty>
|
|
</view>
|
|
|
|
<t-popup v-model:visible="showDescPicker" placement="bottom" destroy-on-close style="max-height: 80vh;overflow-y: auto">
|
|
<view class="member-picker">
|
|
<view class="picker-header">
|
|
<text class="picker-title">项目介绍</text>
|
|
<t-icon name="close" @click="showDescPicker = false"/>
|
|
</view>
|
|
<view>
|
|
<view class="event-item-header">
|
|
<text class="event-item-name">{{ team.name }}</text>
|
|
</view>
|
|
|
|
<view class="event-item-content">
|
|
<t-image :src=config.fileDomain+team.img shape="round"
|
|
class="event-item-image" fit="fill"/>
|
|
|
|
<!-- 项目信息区域 -->
|
|
<view class="event-item-info">
|
|
<view class="event-item-section">
|
|
<view class="event-item-section-title">
|
|
<t-icon name="flag" size="16px" color="var(--td-brand-color-5)"/>
|
|
<text>比赛方法</text>
|
|
</view>
|
|
<view class="event-item-section-content">{{ team.form }}</view>
|
|
</view>
|
|
|
|
<view class="event-item-section">
|
|
<view class="event-item-section-title">
|
|
<t-icon name="flag" size="16px" color="var(--td-brand-color-5)"/>
|
|
<text>评分标准</text>
|
|
</view>
|
|
<view class="event-item-section-content">{{ team.rule }}</view>
|
|
</view>
|
|
|
|
<view class="event-item-section">
|
|
<view class="event-item-section-title">
|
|
<t-icon name="chart-bar" size="16px" color="var(--td-brand-color-5)"/>
|
|
<text>比赛规则</text>
|
|
</view>
|
|
<view class="event-item-section-content">{{ team.ruleForm }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</t-popup>
|
|
|
|
<t-popup v-model:visible="showMemberPicker" placement="bottom" destroy-on-close>
|
|
<view class="member-picker">
|
|
<view class="picker-header">
|
|
<text class="picker-title">选择项目参与成员</text>
|
|
<t-icon name="close" @click="showMemberPicker = false"/>
|
|
</view>
|
|
|
|
<view class="picker-subtitle" v-if="selectedItemId">
|
|
{{ itemOptions.find(p => p.id === selectedItemId)?.name }}
|
|
|
|
<view v-if="itemOptions.find(p => p.id === selectedItemId)?.isTeamApply">
|
|
此项目是团队协作需要全体成员参与
|
|
</view>
|
|
<view v-else>
|
|
此项目需【{{ itemOptions.find(p => p.id === selectedItemId)?.num }}】名成员参与
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="member-list">
|
|
<t-checkbox-group v-model="selectedMemberIds">
|
|
<view
|
|
v-for="member in teamMembers"
|
|
:key="member.userId"
|
|
>
|
|
<t-checkbox
|
|
:value="member.userId"
|
|
:label="member.userName+'-'+member.sex"
|
|
:content="member.unitName"
|
|
:disabled="!isSelfLeader||team.isTeamApply"
|
|
icon-size="20px"
|
|
/>
|
|
</view>
|
|
</t-checkbox-group>
|
|
</view>
|
|
<view class="picker-footer" v-if="isSelfLeader">
|
|
<t-row gutter="20">
|
|
<t-col span="12">
|
|
<t-button block theme="primary" @click="cancelRegistration"
|
|
:disabled="!selectedMemberList.filter(v => v.itemId === team.id).map(v => v.userId).length">
|
|
取消报名
|
|
</t-button>
|
|
</t-col>
|
|
<t-col span="12">
|
|
<t-button block theme="primary" style="margin-left: 5px;" @click="submitRegistration">
|
|
确认报名 ({{ selectedMemberIds.length }}人)
|
|
</t-button>
|
|
</t-col>
|
|
</t-row>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</t-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref, onMounted, computed} from 'vue';
|
|
import {useRequest} from '@/utils/request';
|
|
import {Dialog, Toast} from 'tdesign-mobile-vue';
|
|
import {onLoad} from '@dcloudio/uni-app';
|
|
import {useUserStore} from "@/store";
|
|
import {config} from "@/utils/config";
|
|
|
|
const request = useRequest();
|
|
const userStore = useUserStore();
|
|
|
|
// 活动数据
|
|
const actOptions = ref([])
|
|
// 选中的活动ID
|
|
const selectActId = ref(null);
|
|
// 项目列表数据
|
|
const itemOptions = ref([]);
|
|
// 选中的项目ID
|
|
const selectedItemId = ref(null);
|
|
// 团队成员列表
|
|
const teamMembers = ref([]);
|
|
|
|
onLoad((option) => {
|
|
if (option.id) {
|
|
selectActId.value = Number(option.id);
|
|
}
|
|
});
|
|
onMounted(async () => {
|
|
await listActs()
|
|
await listItems();
|
|
await listTeamUser();
|
|
await getApplyUsers();
|
|
fetchRegistrationStatus();
|
|
});
|
|
|
|
// 选中的团队成员
|
|
const selectedMemberIds = ref([]);
|
|
|
|
// 成员选择弹窗显示状态
|
|
const showMemberPicker = ref(false);
|
|
|
|
// 描述选择弹窗显示状态
|
|
const showDescPicker = ref(false);
|
|
|
|
const openDesc = (project) => {
|
|
team.value = project
|
|
showDescPicker.value = true
|
|
}
|
|
|
|
|
|
// 获取活动列表
|
|
async function listActs() {
|
|
try {
|
|
const {data, code, msg} = await request.get('/client/activity/list-mine-act')
|
|
if (code === 0) {
|
|
actOptions.value = data && data.map(item => {
|
|
return {
|
|
value: item.id,
|
|
label: item.title
|
|
}
|
|
})
|
|
if (selectActId.value === null && data.length) {
|
|
selectActId.value = data[0].id
|
|
}
|
|
} else {
|
|
Toast.error(msg)
|
|
}
|
|
} catch (e) {
|
|
console.error(e)
|
|
Toast.error(e.message)
|
|
}
|
|
}
|
|
|
|
// 获取项目列表
|
|
async function listItems() {
|
|
try {
|
|
const {code, data, msg} = await request.get('/client/item/list/' + selectActId.value)
|
|
if (code === 0) {
|
|
itemOptions.value = data;
|
|
}
|
|
} catch (e) {
|
|
console.error(e)
|
|
}
|
|
}
|
|
|
|
// 自己是否是队长
|
|
const isSelfLeader = ref(false)
|
|
|
|
// 获取团队成员
|
|
async function listTeamUser() {
|
|
try {
|
|
const {code, data, msg} = await request.get('/client/item/list-team-user/' + selectActId.value)
|
|
if (code === 0) {
|
|
teamMembers.value = data;
|
|
isSelfLeader.value = data.find(t => t.userId === userStore?.userInfo.id)?.isLeader
|
|
} else {
|
|
}
|
|
} catch (e) {
|
|
Toast.error(e)
|
|
console.error(e)
|
|
}
|
|
}
|
|
|
|
// 当前项目的报名状态
|
|
const registrationStatus = ref(new Map());
|
|
// 获取报名状态 - 使用静态数据
|
|
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 team = ref({})
|
|
// 选择项目
|
|
const selectProject = (project) => {
|
|
selectedItemId.value = project.id;
|
|
team.value = project
|
|
if (project.isTeamApply) {
|
|
selectedMemberIds.value = teamMembers.value.map(v => v.userId)
|
|
} else {
|
|
selectedMemberIds.value = selectedMemberList.value.filter(v => v.itemId === project.id).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 {
|
|
}
|
|
} catch (e) {
|
|
Toast.error(e.message)
|
|
}
|
|
}
|
|
// 取消报名
|
|
const cancelRegistration = async () => {
|
|
try {
|
|
let data = {}
|
|
data.activityId = selectActId.value
|
|
data.itemId = selectedItemId.value
|
|
const {code, msg} = await useRequest().post('/client/item/cancel-team-sign-up/', {...data})
|
|
if (code === 0) {
|
|
Toast.success('取消报名成功')
|
|
showMemberPicker.value = false;
|
|
await getApplyUsers();
|
|
fetchRegistrationStatus();
|
|
}
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
};
|
|
|
|
// 提交报名 - 使用静态数据模拟
|
|
const submitRegistration = async () => {
|
|
|
|
try {
|
|
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)
|
|
}
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.top-dropdown {
|
|
flex-shrink: 0;
|
|
z-index: 10;
|
|
position: relative;
|
|
}
|
|
|
|
.content-container {
|
|
padding: 15px;
|
|
z-index: 9;
|
|
position: relative;
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: 24px;
|
|
padding: 0 4px;
|
|
|
|
.page-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 8px;
|
|
display: block;
|
|
}
|
|
|
|
.page-subtitle {
|
|
font-size: 14px;
|
|
color: #999;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.project-cards {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.event-item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx 24rpx;
|
|
background-color: #f9f9f9;
|
|
border-left: 8rpx solid var(--td-brand-color-5);
|
|
position: relative;
|
|
}
|
|
|
|
.event-item-name {
|
|
color: #333333;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
flex: 1;
|
|
margin-right: 8rpx;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.event-item-content {
|
|
padding: 0;
|
|
}
|
|
|
|
.event-item-image {
|
|
height: 300rpx;
|
|
display: block;
|
|
}
|
|
|
|
.event-item-info {
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.event-item-section {
|
|
margin-bottom: 24rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.event-item-section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
|
|
.t-icon {
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.event-item-section-content {
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
line-height: 1.5;
|
|
word-break: break-all;
|
|
padding-left: 32rpx;
|
|
}
|
|
|
|
|
|
.project-card {
|
|
background-color: #fff;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.project-card__image {
|
|
height: 150px !important;
|
|
}
|
|
|
|
.project-card__title {
|
|
font-size: 15px !important;
|
|
margin: 10px;
|
|
}
|
|
|
|
.project-card__button {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
&--registered {
|
|
background: #fff;
|
|
|
|
.project-card__title,
|
|
.project-card__desc {
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
&__title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-bottom: 4px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&__desc {
|
|
font-size: 14px;
|
|
color: #666;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&__status {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
&__action {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
&__checkmark {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
color: #52c41a;
|
|
}
|
|
}
|
|
|
|
.member-picker {
|
|
background-color: #fff;
|
|
border-radius: 16px 16px 0 0;
|
|
padding: 20px;
|
|
|
|
.picker-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
|
|
.picker-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.picker-subtitle {
|
|
font-size: 14px;
|
|
color: #ff5f5c;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.member-list {
|
|
max-height: 50vh;
|
|
overflow-y: auto;
|
|
margin-bottom: 20px;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.member-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&--disabled {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.member-status {
|
|
font-size: 12px;
|
|
color: #52c41a;
|
|
}
|
|
|
|
:deep(.t-checkbox) {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.picker-footer {
|
|
padding-top: 12px;
|
|
}
|
|
}
|
|
|
|
// 添加动画效果
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.project-card {
|
|
animation: fadeIn 0.3s ease-out;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.project-card:nth-child(1) {
|
|
animation-delay: 0.05s;
|
|
}
|
|
|
|
.project-card:nth-child(2) {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.project-card:nth-child(3) {
|
|
animation-delay: 0.15s;
|
|
}
|
|
|
|
.project-card:nth-child(4) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.project-card:nth-child(5) {
|
|
animation-delay: 0.25s;
|
|
}
|
|
</style>
|
|
|