From 1c36e46c4f6c876fb5ad0e1d7ccbdccd5e61361d Mon Sep 17 00:00:00 2001
From: ltx <1006158920@qq.com>
Date: Wed, 3 Jun 2026 16:10:49 +0800
Subject: [PATCH] =?UTF-8?q?update=EF=BC=9A=E8=B5=9B=E4=BA=8B=E6=8A=A5?=
 =?UTF-8?q?=E5=90=8D=E5=85=88=E9=80=89=E6=8B=A9=E5=9B=A2=E9=98=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user/registration/index.vue | 202 +++++++++++++++++++++-----
 1 file changed, 169 insertions(+), 33 deletions(-)

diff --git a/src/views/user/registration/index.vue b/src/views/user/registration/index.vue
index c23aee5..2ec51bd 100644
--- a/src/views/user/registration/index.vue
+++ b/src/views/user/registration/index.vue
@@ -357,18 +357,59 @@
 			</template>
 		</el-dialog>
 
-		<!-- 赛事报名三步弹窗 -->
+		<!-- 赛事报名四步弹窗 -->
 		<el-dialog title="赛事报名" v-model="isShowRegisterDialog" width="900px" :close-on-click-modal="false"
 			@closed="clearRegisterState">
 			<el-steps :active="activeStep" finish-status="success" align-center>
+				<el-step title="选择团队" />
 				<el-step title="选择报名项目" />
 				<el-step title="分配队员" />
 				<el-step title="预览支付" />
 			</el-steps>
 
 			<div class="register-step-content">
-				<!-- Step 1 -->
+				<!-- Step 1: 选择团队 -->
 				<div v-if="activeStep === 0">
+					<el-skeleton v-if="teamListLoading" :rows="6" animated />
+					<template v-else>
+						<div class="team-select-section">
+							<div class="team-select-label">请选择您的团队：</div>
+							<el-select v-model="selectedTeamId" placeholder="请选择团队" style="width: 100%; max-width: 400px;"
+								@change="onTeamChange" filterable>
+								<el-option v-for="t in teamList" :key="t.id" :label="t.name" :value="t.id" />
+							</el-select>
+						</div>
+						<!-- 团队成员详情 -->
+						<template v-if="selectedTeamId">
+							<el-skeleton v-if="teamMemberLoading" :rows="4" animated style="margin-top: 20px;" />
+							<template v-else>
+								<div class="team-members-detail" v-if="teamMembers.length > 0">
+									<div class="team-members-detail-title">团队成员（{{ teamMembers.length }} 人）</div>
+									<div class="team-members-detail-grid">
+										<div v-for="m in teamMembers" :key="m.userId ?? m.id" class="team-member-detail-card">
+											<div class="team-member-detail-name">{{ m.name }}</div>
+											<div class="team-member-detail-info">{{ formatGender(m.gender) }}</div>
+											<div class="team-member-detail-info" v-if="m.birthDate">{{ m.birthDate.slice(0, 10) }}</div>
+											<div class="team-member-detail-mobile" v-if="m.mobile">{{ m.mobile }}</div>
+										</div>
+									</div>
+								</div>
+								<el-empty v-else description="该团队暂无运动员" :image-size="60" style="margin-top: 20px;" />
+							</template>
+						</template>
+						<el-empty v-else description="请先选择团队，查看团队成员" :image-size="60" style="margin-top: 20px;" />
+						<!-- 底部操作区域 -->
+						<div class="step-footer" style="display: flex; justify-content: flex-end; margin-top: 20px;">
+							<el-button @click="isShowRegisterDialog = false" style="margin-right: 10px;">取消</el-button>
+							<el-button type="primary" @click="handleStep0Next" :disabled="!selectedTeamId || teamMemberLoading">
+								下一步
+							</el-button>
+						</div>
+					</template>
+				</div>
+
+				<!-- Step 2: 选择报名项目 -->
+				<div v-else-if="activeStep === 1">
 					<el-empty v-if="!registerLoading && !(projects?.length ?? 0)" description="暂无报名项目" />
 					<el-skeleton v-else-if="registerLoading" :rows="8" animated />
 					<template v-else>
@@ -412,6 +453,7 @@
 						<!-- 底部操作区域 -->
 						<div class="step-footer" style="display: flex; justify-content: flex-end; margin-top: 20px;">
 							<el-button @click="isShowRegisterDialog = false" style="margin-right: 10px;">取消</el-button>
+							<el-button @click="handlePrevious" style="margin-right: 10px;">上一步</el-button>
 							<el-button type="primary" @click="handleStep1Next" :loading="registerLoading">
 								下一步
 							</el-button>
@@ -419,8 +461,8 @@
 					</template>
 				</div>
 
-				<!-- Step 2 -->
-				<div v-else-if="activeStep === 1">
+				<!-- Step 3: 分配队员 -->
+				<div v-else-if="activeStep === 2">
 					<div class="step2-layout">
 						<!-- 左侧：已选组别，每个组别可分配队员 -->
 						<div class="step2-left">
@@ -508,18 +550,12 @@
 							<el-empty v-if="!selectedGroupItems.length" description="请先在第一步选择报名组别" />
 						</div>
 
-						<!-- 右侧：团队选择器 + 成员列表 -->
+						<!-- 右侧：成员列表 -->
 						<div class="step2-right">
-							<div class="team-selector">
-								<el-select v-model="selectedTeamId" placeholder="请选择团队" style="width: 100%;"
-									@change="onTeamChange" :loading="teamListLoading" filterable>
-									<el-option v-for="t in teamList" :key="t.id" :label="t.name" :value="t.id" />
-								</el-select>
-							</div>
 							<div class="team-members-panel">
 								<el-skeleton v-if="teamMemberLoading" :rows="6" animated />
 								<el-empty v-else-if="!teamMembers.length"
-									:description="selectedTeamId ? '该团队暂无运动员' : '请先选择团队'" :image-size="60" />
+									:description="'该团队暂无运动员'" :image-size="60" />
 								<template v-else>
 									<div v-for="m in teamMembers" :key="m.userId ?? m.id" class="team-member-tag"
 										:class="{ 'team-member-tag-assigned': isMemberAssignedToActive(m.userId ?? m.id) }"
@@ -562,8 +598,8 @@
 					</div>
 				</div>
 
-				<!-- Step 3 -->
-				<div v-else-if="activeStep === 2">
+				<!-- Step 4: 预览支付 -->
+				<div v-else-if="activeStep === 3">
 					<el-skeleton :rows="10" animated v-if="previewLoading" />
 					<template v-else>
 						<!-- 银行转账信息显示区域 -->
@@ -1227,7 +1263,7 @@ const toggleGroupSelection = (id) => {
 		// 取消选中
 		selectedGroupIds.value.splice(idx, 1);
 		// 若在第二步删除了组别，清理该组别的验证缓存并重新触发验证
-		if (activeStep.value === 1) {
+		if (activeStep.value === 2) {
 			// 清理被删除组别的队员验证缓存
 			Object.keys(memberValidationMap.value).forEach(key => {
 				if (key.startsWith(`${id}_`)) {
@@ -1239,14 +1275,14 @@ const toggleGroupSelection = (id) => {
 		}
 	} else {
 		// 选中新组别：先找出这个组别属于哪个项目，然后取消该项目的其他组别
-		const clickedGroup = allGroups.value.find(g => g.id === id);
-		if (clickedGroup && clickedGroup.projectId) {
-			// 移除同一项目下的其他组别
-			selectedGroupIds.value = selectedGroupIds.value.filter(selectedId => {
-				const selectedGroup = allGroups.value.find(g => g.id === selectedId);
-				return selectedGroup?.projectId !== clickedGroup.projectId;
-			});
-		}
+		// const clickedGroup = allGroups.value.find(g => g.id === id);
+		// if (clickedGroup && clickedGroup.projectId) {
+		// 	// 移除同一项目下的其他组别
+		// 	selectedGroupIds.value = selectedGroupIds.value.filter(selectedId => {
+		// 		const selectedGroup = allGroups.value.find(g => g.id === selectedId);
+		// 		return selectedGroup?.projectId !== clickedGroup.projectId;
+		// 	});
+		// }
 		// 添加新选中的组别
 		selectedGroupIds.value.push(id);
 	}
@@ -1475,6 +1511,8 @@ const openRegistrationDialog = async (row) => {
 		paymentMethod.value = 1;
 		isShowRegisterDialog.value = true;
 		activeStep.value = 0;
+		// 加载团队列表（第一步需要展示）
+		fetchTeamList();
 	} catch (error) {
 		console.error('打开报名弹窗失败:', error);
 		ElMessage.error('项目加载失败');
@@ -1531,7 +1569,8 @@ const onTeamChange = async (teamId) => {
 					mobile: m.mobile ?? '',
 					gender: m.gender ?? '',
 					role: m.role ?? '',
-					teamId: teamId, // 添加团队ID
+					birthDate: m.birthDate ?? m.birthday ?? '',
+					teamId: teamId,
 				}));
 		}
 	} catch {
@@ -1590,7 +1629,7 @@ const validateMemberForGroup = async (member, group) => {
 
 // 实时验证所有已选择的队员
 const validateAllMembers = async () => {
-	if (!currentEventId.value || activeStep.value !== 1) {
+	if (!currentEventId.value || activeStep.value !== 2) {
 		return;
 	}
 
@@ -2050,16 +2089,21 @@ const fetchMembers = async () => {
 };
 
 const handlePrevious = () => {
-	if (activeStep.value === 2) {
-		activeStep.value = 1;
+	if (activeStep.value === 3) {
+		activeStep.value = 2;
 		previewData.value = null;
 		previewLoading.value = false;
 		draftRegistrationId.value = null;
 		return;
 	}
+	if (activeStep.value === 2) {
+		activeStep.value = 1;
+		resetAssignMembersAndBeyond();
+		return;
+	}
 	if (activeStep.value === 1) {
 		activeStep.value = 0;
-		resetStep2AndBeyond();
+		selectedGroupIds.value = [];
 		return;
 	}
 };
@@ -2185,20 +2229,42 @@ const checkRegistrationLimit = async () => {
 	}
 };
 
+// 重置第三步（分配队员）及之后的状态，保留团队选择数据
+const resetAssignMembersAndBeyond = () => {
+	activeAssignGroupId.value = null;
+	groupMemberMap.value = {};
+	usedTeamId.value = null;
+	groupTeamsMap.value = {};
+	activeTeamKey.value = null;
+	groupMaxTeamsMap.value = {};
+	previewData.value = null;
+	previewLoading.value = false;
+	draftRegistrationId.value = null;
+	memberValidationMap.value = {};
+	registrationLimitCheckResult.value = null;
+};
+
+const handleStep0Next = () => {
+	if (!selectedTeamId.value) {
+		ElMessage.warning('请先选择团队');
+		return;
+	}
+	activeStep.value = 1;
+};
+
 const handleStep1Next = async () => {
 	if (!(selectedGroupIds.value?.length ?? 0)) {
 		ElMessage.warning('请先选择报名组别');
 		return;
 	}
 
-	activeStep.value = 1;
-	resetStep2AndBeyond();
+	activeStep.value = 2;
+	resetAssignMembersAndBeyond();
 	// 默认激活第一个组别
 	if (selectedGroupItems.value.length > 0) {
 		activeAssignGroupId.value = selectedGroupItems.value[0].id;
 	}
-	// 加载团队列表
-	await fetchTeamList();
+	// 团队已在第一步选择，无需再次加载团队列表
 	// 加载队伍限制配置
 	await fetchGroupTeamLimit();
 
@@ -2334,7 +2400,7 @@ const handleStep2Next = async () => {
 		}
 		draftRegistrationId.value = data;
 
-		activeStep.value = 2;
+		activeStep.value = 3;
 		previewLoading.value = true;
 		try {
 			const { succeeded: pOk, data: pData } = await usereventregistrationPreviewGet(data);
@@ -4006,4 +4072,74 @@ const handleCreateOrderAndPay = async () => {
 		text-align: center;
 	}
 }
+
+/* ---- 第一步：选择团队 ---- */
+.team-select-section {
+	display: flex;
+	align-items: center;
+	gap: 14px;
+	padding: 20px 0 8px;
+}
+
+.team-select-label {
+	font-size: 14px;
+	font-weight: 600;
+	color: #303133;
+	flex-shrink: 0;
+}
+
+.team-members-detail {
+	margin-top: 20px;
+	border: 1px solid #e0ecfd;
+	border-radius: 10px;
+	overflow: hidden;
+}
+
+.team-members-detail-title {
+	padding: 10px 16px;
+	background: linear-gradient(90deg, #eef5ff 0%, #f8fbff 100%);
+	border-bottom: 1px solid #e0ecfd;
+	font-size: 14px;
+	font-weight: 600;
+	color: #1a3c6e;
+}
+
+.team-members-detail-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+	gap: 10px;
+	padding: 14px 16px;
+	background: #fff;
+}
+
+.team-member-detail-card {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 10px 12px;
+	border: 1px solid #e0ecfd;
+	border-radius: 8px;
+	background: #f8fbff;
+	transition: box-shadow 0.2s;
+
+	&:hover {
+		box-shadow: 0 2px 8px rgba(64, 158, 255, 0.12);
+	}
+}
+
+.team-member-detail-name {
+	font-size: 14px;
+	font-weight: 600;
+	color: #303133;
+}
+
+.team-member-detail-info {
+	font-size: 12px;
+	color: #909399;
+}
+
+.team-member-detail-mobile {
+	font-size: 12px;
+	color: #909399;
+}
 </style>
\ No newline at end of file