找回密码

src/views/student/password/index.vue

@@ -1,33 +1,40 @@
 <template>
 	<a-card>
-		<a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
-			<a-form-item label="旧密码：" name="password" has-feedback>
-				<a-input
-					v-model:value="formState.password"
-					placeholder="请输入原密码"
-					type="password"
-					allow-clear
-					autocomplete="off"
-				/>
-			</a-form-item>
-			<a-form-item label="新密码：" name="newPassword" has-feedback>
-				<a-input
-					v-model:value="formState.newPassword"
-					placeholder="请输入新密码"
-					type="password"
-					allow-clear
-					autocomplete="off"
-				/>
-			</a-form-item>
-		</a-form>
-		<a-button type="primary" :loading="submitLoading" @click="onSubmit">保存</a-button>
+		<a-steps :current="stepVal">
+			<a-step title="验证身份" description="发送验证码" />
+			<a-step title="接收验证码" description="填写验证码确认邮箱" />
+			<a-step title="设置新密码" description="填写新密码" />
+		</a-steps>
+		<div class="fcc mt-4">
+			<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-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-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-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-form-item>
+				</a-form>
+				<div>
+					<a-button type="primary" @click="previousStep" v-if="stepVal != 0" class="mr-4">上一步</a-button>
+					<a-button type="primary" @click="nextStep" v-if="stepVal != 2" class="mr-4">下一步</a-button>
+					<a-button type="primary" :loading="submitLoading" @click="onSubmit" v-if="stepVal == 2">保存</a-button>
+				</div>
+			</div>
+		</div>
 	</a-card>
 </template>
 
 <script setup name="updatePassword">
 	import { required } from '@/utils/formRules'
 	import userCenterApi from '@/api/sys/userCenterApi'
-
+	const stepVal = ref(0)
 	const formRef = ref()
 	// 表单数据
 	const formState = ref({})
@@ -35,8 +42,9 @@
 
 	// 默认要校验的
 	const rules = {
-		password: [required('请输入原密码')],
-		checkPassword: [required('请再次输入原密码')],
+		name: [required('请输入账号')],
+		email: [required('请输入邮箱')],
+		emailCode: [required('请输入邮箱验证码')],
 		newPassword: [required('请输入新密码')]
 	}
 
@@ -54,4 +62,24 @@
 				submitLoading.value = false
 			})
 	}
+	//上一步
+	const previousStep = async () => {
+		const values = await formRef.value.validateFields()
+		stepVal.value -= 1
+	}
+	//下一步
+	const nextStep = async () => {
+		const values = await formRef.value.validateFields()
+		stepVal.value += 1
+	}
 </script>
+<style scoped lang="less">
+	.fcc {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.formBox {
+		width: 400px;
+	}
+</style>