From 07e147a390275f5f2c3847918c3021a63fa66720 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E6=A2=93=E5=BD=AD?= <tianbohe0@163.com>
Date: Tue, 31 Mar 2026 17:49:42 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=90=E5=8A=A8=E5=91=98=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E7=9F=AD=E4=BF=A1=E9=AA=8C=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/team/athlete/index.vue | 177 +++++++++++++++++++++++--------
 1 file changed, 134 insertions(+), 43 deletions(-)

diff --git a/src/views/team/athlete/index.vue b/src/views/team/athlete/index.vue
index f62900c..56e3640 100644
--- a/src/views/team/athlete/index.vue
+++ b/src/views/team/athlete/index.vue
@@ -160,13 +160,21 @@
 
 				<!-- 联系电话 -->
 				<el-form-item label="联系电话" prop="mobile">
-					<el-input v-model="formData.mobile" placeholder="请输入联系电话" class="fee-input">
-						<!-- <template #append>
-						<el-button type="primary" @click="onSendCode" >
-							{{ isSendCode ? '已发送' : '发送验证码' }}
-						</el-button>
-					</template> -->
-					</el-input>
+					<el-input v-model="formData.mobile" placeholder="请输入联系电话" style="width: 360px;"></el-input>
+					<el-button 
+						v-if="needVerificationCode" 
+						type="text" 
+						@click="onSendCode" 
+						style="margin-left: 8px;"
+						:disabled="sending || !isPhoneValid">
+						{{ sending ? `${sendTimer}s` : '获取验证码' }}
+					</el-button>
+					<el-tag v-else type="info" style="margin-left: 8px;">手机号未变更</el-tag>
+				</el-form-item>
+
+				<!-- 验证码 -->
+				<el-form-item label="验证码" prop="verificationCode" v-if="needVerificationCode">
+					<el-input v-model="formData.verificationCode" placeholder="请输入验证码" maxlength="6" style="width: 360px;"></el-input>
 				</el-form-item>
 
 			</el-form>
@@ -181,14 +189,14 @@
 </template>
 
 <script setup name="sysMenu">
-import { defineAsyncComponent, ref, reactive, nextTick } from 'vue';
+import { defineAsyncComponent, ref, reactive, nextTick, computed } from 'vue';
 import { ElMessage, ElForm } from 'element-plus';
 import SysMenuApi from '/@/api/SysMenuApi';
 import { auths } from '/@/utils/authFunction';
 import ProTable from '/@/components/ProTable/index.vue';
 import { teamPageGet, teamDetailGet, teamAddPost, teamDeleteDelete, teamUpdatePut } from '/@/api/match/unitUser';
 import { appuserAthletePageGet, appuserAthleteAddPost, appuserAthleteUpdatePut, appuserLeaderPageGet, appuserCoachPageGet } from '/@/api/match/appuser';
-import { commonOcrRecognizeIdcardPost, commonOcrRecognizePassportPost } from '/@/api/match/common';
+import { commonOcrRecognizeIdcardPost, commonOcrRecognizePassportPost, commonSmsSendVerificationCodePost } from '/@/api/match/common';
 // 定义表单引用类型
 const formRef = ref();
 const activeTab = ref('first')
@@ -200,6 +208,7 @@ const getDefaultFormData = () => ({
 	idCardImageUrl: '',
 	birthDate: '',
 	mobile: '',
+	verificationCode: '',
 });
 const statusList = ref({
 	1: 'info',
@@ -216,25 +225,46 @@ const initParam = ref({
 	refresh: true,
 })
 
-const formRules = ref({
-	name: [
-		{ required: true, message: '请输入运动员姓名', trigger: 'blur' }
-	],
-	idCardNumber: [
-		{ required: true, message: '请输入身份证号', trigger: 'change' }
-	],
-	gender: [
-		{ required: true, message: '请选择性别', trigger: 'change' }
-	],
-	mobile: [
-		{ required: true, message: '请输入联系电话', trigger: 'blur' }
-	],
-	idCardImageUrl: [
-		{ required: true, message: '请上传身份证照片', trigger: 'change' }
-	],
-	birthDate: [
-		{ required: true, message: '请选择出生日期', trigger: 'change' }
-	],
+const formRules = computed(() => {
+	const baseRules = {
+		name: [
+			{ required: true, message: '请输入运动员姓名', trigger: 'blur' }
+		],
+		idCardNumber: [
+			{ required: true, message: '请输入身份证号', trigger: 'change' }
+		],
+		gender: [
+			{ required: true, message: '请选择性别', trigger: 'change' }
+		],
+		mobile: [
+			{ required: true, message: '请输入联系电话', trigger: 'blur' },
+			{ 
+				validator: (rule, value, cb) => { 
+					const reg = /^1[3-9]\d{9}$/; 
+					if (!value) return cb(new Error('请输入联系电话')); 
+					if (!reg.test(value)) return cb(new Error('请输入正确的手机号')); 
+					cb(); 
+				}, 
+				trigger: 'blur' 
+			}
+		],
+		idCardImageUrl: [
+			{ required: true, message: '请上传身份证照片', trigger: 'change' }
+		],
+		birthDate: [
+			{ required: true, message: '请选择出生日期', trigger: 'change' }
+		],
+	};
+	
+	// 只在需要验证码时添加验证码验证规则
+	if (needVerificationCode.value) {
+		baseRules.verificationCode = [
+			{ required: true, message: '请输入验证码', trigger: 'blur' },
+			{ len: 6, message: '验证码长度为6位', trigger: 'blur' }
+		];
+	}
+	
+	return baseRules;
 });
 
 const columns = ref([
@@ -272,6 +302,24 @@ const isShowDialog = ref(false);
 const dialogTitle = ref('新增');
 const tableRefteam = ref(null);
 
+// 验证码相关
+const sending = ref(false);
+const sendTimer = ref(0);
+const sendInterval = ref(null);
+
+const originalMobile = ref('');
+const isPhoneValid = computed(() => { 
+	const reg = /^1[3-9]\d{9}$/; 
+	return reg.test(formData.value.mobile); 
+});
+const isMobileChanged = computed(() => {
+	if (!formData.value.id) return true;
+	return formData.value.mobile !== originalMobile.value;
+});
+const needVerificationCode = computed(() => {
+	return isMobileChanged.value;
+});
+
 // 团队新增弹窗相关
 const isShowTeamDialog = ref(false);
 const teamFormRef = ref();
@@ -475,9 +523,21 @@ const onTeamSubmit = () => {
 };
 
 const onOpenMenu = (row) => {
+	// 重置验证码相关状态
+	if (sendInterval.value) {
+		clearInterval(sendInterval.value);
+		sendInterval.value = null;
+	}
+	sending.value = false;
+	sendTimer.value = 0;
+	
 	dialogTitle.value = row ? '编辑' : '新增';
 	formData.value = getDefaultFormData();
 	ocrType.value = 'idcard';
+	
+	// 保存原始手机号
+	originalMobile.value = '';
+	
 	if (row && typeof row === 'object') {
 		formData.value = {
 			...getDefaultFormData(),
@@ -489,6 +549,7 @@ const onOpenMenu = (row) => {
 			birthDate: row.birthDate ?? '',
 			mobile: row.mobile ?? row.mobile ?? '',
 		};
+		originalMobile.value = row.mobile ?? row.mobile ?? '';
 	}
 	isShowDialog.value = true;
 };
@@ -528,21 +589,37 @@ const onDeleteTeam = async (id) => {
 
 
 
-// const isSendCode = ref(false)
-// const timer = ref(null)
-// const second = ref(60)
-// const onSendCode = async () => {
-// 	if (second.value != 60) return ElMessage.error(`请${second.value}秒重新发送`)
-// 	timer.value = setInterval(() => {
-// 		if (second.value > 0) {
-// 			second.value--
-// 		} else {
-// 			clearInterval(timer.value)
-// 			isSendCode.value = false
-// 			second.value = 60
-// 		}
-// 	}, 1000)
-// }
+const onSendCode = async () => {
+	if (!isPhoneValid.value) {
+		ElMessage.error('请输入正确的手机号');
+		return;
+	}
+	if (!isMobileChanged.value) {
+		ElMessage.warning('手机号未变更，无需获取验证码');
+		return;
+	}
+	sending.value = true;
+	sendTimer.value = 60;
+	try {
+		const res = await commonSmsSendVerificationCodePost({ phone: formData.value.mobile });
+		if (res.succeeded) {
+			ElMessage.success('验证码已发送');
+			sendInterval.value = setInterval(() => {
+				sendTimer.value -= 1;
+				if (sendTimer.value <= 0) {
+					clearInterval(sendInterval.value);
+					sending.value = false;
+				}
+			}, 1000);
+		} else {
+			ElMessage.error(res.errors || res.msg || '发送验证码失败');
+			sending.value = false;
+		}
+	} catch (err) {
+		sending.value = false;
+		ElMessage.error(err && err.message ? err.message : '发送验证码失败');
+	}
+};
 
 const handleAvatarSuccess = async (response,
 	uploadFile) => {
@@ -601,6 +678,13 @@ const onSubmit = () => {
 				ElMessage.success(dialogTitle.value + '成功');
 				isShowDialog.value = false;
 				initParam.value.refresh = !initParam.value.refresh;
+				// 清理计时器
+				if (sendInterval.value) {
+					clearInterval(sendInterval.value);
+					sendInterval.value = null;
+				}
+				sending.value = false;
+				sendTimer.value = 0;
 			} else {
 				ElMessage.error(res.errors || res.msg || dialogTitle.value + '失败');
 			}
@@ -613,6 +697,13 @@ const onSubmit = () => {
 
 // 取消
 const onCancel = () => {
+	// 清理计时器
+	if (sendInterval.value) {
+		clearInterval(sendInterval.value);
+		sendInterval.value = null;
+	}
+	sending.value = false;
+	sendTimer.value = 0;
 	isShowDialog.value = false;
 };
 </script>