初始化

src/views/_builtin/login/modules/reset-pwd.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useRouterPush } from '@/hooks/common/router';
+import { useForm, useFormRules } from '@/hooks/common/form';
+import { $t } from '@/locales';
+
+defineOptions({ name: 'ResetPwd' });
+
+const { toggleLoginModule } = useRouterPush();
+const { formRef, validate } = useForm();
+
+interface FormModel {
+  phone: string;
+  code: string;
+  password: string;
+  confirmPassword: string;
+}
+
+const model = ref<FormModel>({
+  phone: '',
+  code: '',
+  password: '',
+  confirmPassword: ''
+});
+
+type RuleRecord = Partial<Record<keyof FormModel, App.Global.FormRule[]>>;
+
+const rules = computed<RuleRecord>(() => {
+  const { formRules, createConfirmPwdRule } = useFormRules();
+
+  return {
+    phone: formRules.phone,
+    password: formRules.pwd,
+    confirmPassword: createConfirmPwdRule(model.value.password)
+  };
+});
+
+async function handleSubmit() {
+  await validate();
+  // request to reset password
+  window.$message?.success($t('page.login.common.validateSuccess'));
+}
+</script>
+
+<template>
+  <ElForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false" @keyup.enter="handleSubmit">
+    <ElFormItem prop="phone">
+      <ElInput v-model="model.phone" :placeholder="$t('page.login.common.phonePlaceholder')" />
+    </ElFormItem>
+    <ElFormItem prop="code">
+      <ElInput v-model="model.code" :placeholder="$t('page.login.common.codePlaceholder')" />
+    </ElFormItem>
+    <ElFormItem prop="password">
+      <ElInput
+        v-model="model.password"
+        type="password"
+        show-password-on="click"
+        :placeholder="$t('page.login.common.passwordPlaceholder')"
+      />
+    </ElFormItem>
+    <ElFormItem prop="confirmPassword">
+      <ElInput
+        v-model="model.confirmPassword"
+        type="password"
+        show-password-on="click"
+        :placeholder="$t('page.login.common.confirmPasswordPlaceholder')"
+      />
+    </ElFormItem>
+    <ElSpace direction="vertical" fill :size="18" class="w-full">
+      <ElButton type="primary" size="large" round @click="handleSubmit">
+        {{ $t('common.confirm') }}
+      </ElButton>
+      <ElButton size="large" round @click="toggleLoginModule('pwd-login')">
+        {{ $t('page.login.common.back') }}
+      </ElButton>
+    </ElSpace>
+  </ElForm>
+</template>
+
+<style scoped></style>