密码找回页面样式处理

src/views/student/password/index.vue

@@ -9,16 +9,29 @@
 			<div class="formBox">
 				<a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
 					<a-form-item label="账号：" name="name" has-feedback v-if="stepVal == 0">
-						<a-input v-model:value="formState.name" placeholder="请输入账号" allow-clear show-count :maxlength="10"/>
+						<a-input v-model:value="formState.name" placeholder="请输入账号" allow-clear show-count :maxlength="10" />
 					</a-form-item>
 					<a-form-item label="邮箱：" name="email" has-feedback v-if="stepVal == 0">
-						<a-input v-model:value="formState.email" placeholder="请输入邮箱" allow-clear show-count :maxlength="200"/>
+						<a-input v-model:value="formState.email" placeholder="请输入邮箱" allow-clear show-count :maxlength="200" />
 					</a-form-item>
 					<a-form-item label="邮箱验证码：" name="emailCode" has-feedback v-if="stepVal == 1">
-						<a-input v-model:value="formState.emailCode" placeholder="请输入邮箱验证码" allow-clear show-count :maxlength="4"/>
+						<a-input
+							v-model:value="formState.emailCode"
+							placeholder="请输入邮箱验证码"
+							allow-clear
+							show-count
+							:maxlength="4"
+						/>
 					</a-form-item>
 					<a-form-item label="新密码：" name="newPassword" has-feedback v-if="stepVal == 2">
-						<a-input v-model:value="formState.newPassword" placeholder="请输入新密码" type="password" allow-clear show-count :maxlength="20"/>
+						<a-input
+							v-model:value="formState.newPassword"
+							placeholder="请输入新密码"
+							type="password"
+							allow-clear
+							show-count
+							:maxlength="20"
+						/>
 					</a-form-item>
 				</a-form>
 				<div>
@@ -33,9 +46,9 @@
 
 <script setup name="updatePassword">
 	import { required } from '@/utils/formRules'
-	import userCenterApi from '@/api/sys/userCenterApi'
 	const stepVal = ref(0)
 	const formRef = ref()
+	const params = ref({})
 	// 表单数据
 	const formState = ref({})
 	const submitLoading = ref(false)
@@ -43,7 +56,14 @@
 	// 默认要校验的
 	const rules = {
 		name: [required('请输入账号')],
-		email: [required('请输入邮箱')],
+		email: [
+			required('请输入邮箱'),
+			{
+				pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
+				message: '请填写正确的邮箱号',
+				trigger: 'blur'
+			}
+		],
 		emailCode: [required('请输入邮箱验证码')],
 		newPassword: [required('请输入新密码')]
 	}
@@ -52,24 +72,27 @@
 	const onSubmit = async () => {
 		const values = await formRef.value.validateFields()
 		submitLoading.value = true
-		userCenterApi
-			.userUpdatePassword(values)
-			.then(() => {
-				formRef.value.resetFields()
-				visible.value = false
-			})
-			.finally(() => {
-				submitLoading.value = false
-			})
+		setTimeout(() => {
+			params.value = {
+				...formState.value,
+				...params.value
+			}
+			console.log('🚀 ~ onSubmit ~ params.value:', params.value)
+			// formRef.value.resetFields()
+			submitLoading.value = false
+		}, 1000)
 	}
 	//上一步
 	const previousStep = async () => {
-		const values = await formRef.value.validateFields()
 		stepVal.value -= 1
 	}
 	//下一步
 	const nextStep = async () => {
 		const values = await formRef.value.validateFields()
+		params.value = {
+			...formState.value,
+			...params.value
+		}
 		stepVal.value += 1
 	}
 </script>