118 lines
4.0 KiB
Vue
118 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import type { FormInstanceFunctions, FormProps } from 'tdesign-vue-next';
|
|
const store = useLoginStore();
|
|
const { currentType, resetForm } = storeToRefs(store);
|
|
const form = ref<FormInstanceFunctions>();
|
|
const rules: FormProps['rules'] = {
|
|
usernameOrEmail: [
|
|
{ required: true, message: '请输入邮箱或用户名', trigger: 'blur' },
|
|
],
|
|
identifyingCode: [
|
|
{ required: true, message: '请输入验证码', trigger: 'blur' },
|
|
],
|
|
password: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
|
|
passwordRepeat: [
|
|
{ required: true, message: '请再次输入密码', trigger: 'blur' },
|
|
{
|
|
validator: (val) => val === resetForm.value.password,
|
|
message: '两次输入密码不一致',
|
|
trigger: 'change',
|
|
},
|
|
],
|
|
};
|
|
async function submit() {
|
|
if (!form.value) return;
|
|
const result = await form.value.validate();
|
|
if (typeof result === 'boolean' && result) form.value.submit();
|
|
}
|
|
const coldTime = ref(0);
|
|
async function sendIdentifyingCode() {
|
|
if (await store.sendResetIdentifyingCode()) {
|
|
coldTime.value = 60;
|
|
const timer: NodeJS.Timeout = setInterval(() => {
|
|
if (coldTime.value > 0) coldTime.value--;
|
|
else {
|
|
clearInterval(timer);
|
|
}
|
|
}, 1000);
|
|
}
|
|
}
|
|
|
|
function backToLogin() {
|
|
form.value?.reset();
|
|
currentType.value = PageType.login;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full">
|
|
<t-form
|
|
ref="form"
|
|
:label-width="10"
|
|
:data="resetForm"
|
|
:rules="rules"
|
|
class="flex flex-col items-center gap-4"
|
|
@submit="store.reset()"
|
|
>
|
|
<div
|
|
class="flex md:flex-row items-center md:justify-center w-full flex-col gap-4 md:gap-0"
|
|
>
|
|
<div class="flex flex-col items-center gap-4 w-full">
|
|
<!-- <TInput class="w-56" placeholder="请输入邮箱" />-->
|
|
<!-- <TButton class="w-56">发送验证码</TButton>-->
|
|
<!-- <TInput class="w-56" placeholder="请输入验证码" />-->
|
|
<!-- <TInput class="w-56" type="password" placeholder="请输入新密码" />-->
|
|
<!-- <TButton class="w-56">确认</TButton>-->
|
|
<t-form-item name="usernameOrEmail" class="w-64 md:w-60">
|
|
<div class="flex flex-row items-center gap-2 w-full">
|
|
<TInput
|
|
v-model="resetForm.usernameOrEmail"
|
|
placeholder="邮箱 / 用户名"
|
|
class="max-w-32 md:max-w-28"
|
|
/>
|
|
<TButton
|
|
:disabled="coldTime > 0"
|
|
class="w-32"
|
|
@click="sendIdentifyingCode"
|
|
>{{ coldTime > 0 ? coldTime : '发送验证码' }}</TButton
|
|
>
|
|
</div>
|
|
</t-form-item>
|
|
<t-form-item name="identifyingCode" class="w-64 md:w-60">
|
|
<TInput v-model="resetForm.identifyingCode" placeholder="验证码" />
|
|
</t-form-item>
|
|
</div>
|
|
<div
|
|
class="hidden md:flex flex-col items-center gap-4 w-2/5 max-w-16 select-none"
|
|
>
|
|
<div class="w-1 h-44 bg-gray-200"></div>
|
|
</div>
|
|
<div class="flex flex-col items-center gap-4 w-full">
|
|
<t-form-item name="password" class="w-64 md:w-60">
|
|
<TInput v-model="resetForm.password" placeholder="新密码" />
|
|
</t-form-item>
|
|
<t-form-item name="passwordRepeat" class="w-64 md:w-60">
|
|
<TInput
|
|
v-model="resetForm.passwordRepeat"
|
|
class="w-56"
|
|
placeholder="确认新密码"
|
|
/>
|
|
</t-form-item>
|
|
</div>
|
|
</div>
|
|
</t-form>
|
|
|
|
<div
|
|
class="flex flex-row items-center bg-gray-600 w-full h-10 justify-around rounded-b-md mt-4"
|
|
>
|
|
<button class="text-white" @click="submit">修改密码</button>
|
|
<button class="text-white" @click="backToLogin">返回登录 </button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="less">
|
|
:deep(.t-form__item) {
|
|
@apply mb-0;
|
|
}
|
|
</style>
|