登录页、忘记密码

src/locales/en.json

@@ -40,6 +40,7 @@
     "inviteCode": "Invitation Code",
     "inviteCodeOptional": "Invitation Code (Optional)",
     "forgotPassword": "Forgot Password?",
+    "forgotPasswordTitle": "Forgot Password",
     "resetPassword": "Reset Password",
     "newPassword": "New Password",
     "loginSuccess": "Login Success",

src/locales/id.json

@@ -40,6 +40,7 @@
     "inviteCode": "Kode undangan",
     "inviteCodeOptional": "Kode undangan (Opsional)",
     "forgotPassword": "Lupa kata sandi?",
+    "forgotPasswordTitle": "Lupa kata sandi",
     "resetPassword": "Atur ulang kata sandi",
     "newPassword": "Kata sandi baru",
     "loginSuccess": "Berhasil masuk",

src/locales/vi.json

@@ -40,6 +40,7 @@
     "inviteCode": "Mã mời",
     "inviteCodeOptional": "Mã mời (Tùy chọn)",
     "forgotPassword": "Quên mật khẩu?",
+    "forgotPasswordTitle": "Quên mật khẩu",
     "resetPassword": "Đặt lại mật khẩu",
     "newPassword": "Mật khẩu mới",
     "loginSuccess": "Đăng nhập thành công",

src/locales/zh.json

@@ -40,6 +40,7 @@
     "inviteCode": "邀请码",
     "inviteCodeOptional": "邀请码（选填）",
     "forgotPassword": "忘记密码？",
+    "forgotPasswordTitle": "忘记密码",
     "resetPassword": "重置密码",
     "newPassword": "新密码",
     "loginSuccess": "登录成功",

src/views/forgot-password/index.vue

@@ -2,7 +2,7 @@
   <div class="forgot-password-page">
     <!-- 顶部导航 -->
     <van-nav-bar
-      :title="$t('auth.resetPassword')"
+      :title="$t('auth.forgotPasswordTitle')"
       left-arrow
       @click-left="goBack"
     />
@@ -10,7 +10,7 @@
     <!-- 表单 -->
     <div class="form-section">
       <div class="form-content">
-        <div class="input-group">
+        <div class="input-group" v-if="resetType === 'phone'">
           <van-field
             v-model="form.phone"
             type="tel"
@@ -25,6 +25,15 @@
             </template>
           </van-field>
         </div>
+        <div class="input-group" v-else>
+          <van-field
+            v-model="form.email"
+            type="text"
+            :placeholder="$t('auth.pleaseInputEmail')"
+            clearable
+            left-icon="envelop-o"
+          />
+        </div>
 
         <div class="input-group">
           <van-field
@@ -102,14 +111,16 @@
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toast } from 'vue-sonner';
 import { requestSendCode, requestResetPassword } from '@/api/auth';
 
 const { t } = useI18n();
 const router = useRouter();
+const route = useRoute();
 
+const resetType = ref((route.query.type as string) || 'phone');
 const loading = ref(false);
 const showPassword = ref(false);
 const showConfirmPassword = ref(false);
@@ -119,6 +130,7 @@ const countdown = ref(0);
 
 const form = reactive({
   phone: '',
+  email: '',
   code: '',
   newPassword: '',
   confirmPassword: ''
@@ -142,18 +154,22 @@ const goBack = () => {
 
 // 发送验证码
 const sendCode = async () => {
-  if (!form.phone) {
-    toast.error(t('auth.pleaseInputPhone'));
+  const account = resetType.value === 'phone' ? form.phone : form.email;
+  if (!account) {
+    toast.error(t(resetType.value === 'phone' ? 'auth.pleaseInputPhone' : 'auth.pleaseInputEmail'));
     return;
   }
 
   try {
-    const res = await requestSendCode({
-      type: 'phone',
-      account: form.phone,
-      areaCode: areaCode.value,
+    const params: any = {
+      type: resetType.value,
+      account,
       scene: 'reset'
-    });
+    };
+    if (resetType.value === 'phone') {
+      params.areaCode = areaCode.value;
+    }
+    const res = await requestSendCode(params);
     if (res.code === 200) {
       toast.success(t('common.success') || '验证码已发送');
       countdown.value = 60;
@@ -171,8 +187,9 @@ const sendCode = async () => {
 
 // 提交重置密码
 const handleSubmit = async () => {
-  if (!form.phone) {
-    toast.error(t('auth.pleaseInputPhone'));
+  const account = resetType.value === 'phone' ? form.phone : form.email;
+  if (!account) {
+    toast.error(t(resetType.value === 'phone' ? 'auth.pleaseInputPhone' : 'auth.pleaseInputEmail'));
     return;
   }
   if (!form.code) {
@@ -194,13 +211,16 @@ const handleSubmit = async () => {
 
   loading.value = true;
   try {
-    const res = await requestResetPassword({
-      type: 'phone',
-      account: form.phone,
+    const params: any = {
+      type: resetType.value,
+      account,
       code: form.code,
-      newPassword: form.newPassword,
-      areaCode: areaCode.value
-    });
+      newPassword: form.newPassword
+    };
+    if (resetType.value === 'phone') {
+      params.areaCode = areaCode.value;
+    }
+    const res = await requestResetPassword(params);
     if (res.code === 200) {
       toast.success(t('auth.resetSuccess') || '密码重置成功');
       router.replace('/login');

src/views/login/index.vue

@@ -6,7 +6,6 @@
         <img src="@/assets/images/common/logo.svg" alt="Vitiens" class="logo-img" />
       </div>
       <div class="title"><img src="@/assets/images/common/Vitiens.svg" alt="Vitiens" class="title-img" /></div>
-      <div class="subtitle">{{ $t('home.taskCenter') }}</div>
     </div>
 
     <!-- 登录表单 -->
@@ -62,8 +61,8 @@
           </van-field>
         </div>
 
-        <div class="forgot-password" @click="goForgotPassword">
-          {{ $t('auth.forgotPassword') }}
+        <div class="forgot-password">
+          <span @click="goForgotPassword">{{ $t('auth.forgotPassword') }}</span>
         </div>
 
         <van-button
@@ -107,8 +106,8 @@
           </van-field>
         </div>
 
-        <div class="forgot-password" @click="goForgotPassword">
-          {{ $t('auth.forgotPassword') }}
+        <div class="forgot-password">
+          <span @click="goForgotPassword">{{ $t('auth.forgotPassword') }}</span>
         </div>
 
         <van-button
@@ -798,7 +797,7 @@ const handleFacebookCallback = async (userInfo: any, accessToken: string) => {
 };
 
 const goForgotPassword = () => {
-  router.push('/forgot-password');
+  router.push({ path: '/forgot-password', query: { type: loginType.value } });
 };
 
 const goRegister = () => {