From 0099840e8ee746adcaecd0e9683009890bd70688 Mon Sep 17 00:00:00 2001
From: jiangpeng <1649773715@qq.com>
Date: Fri, 12 Jun 2026 14:52:40 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E5=AF=86?=
 =?UTF-8?q?=E7=A0=81=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/auth.ts                   |  30 +++-
 src/router/index.ts               |   9 +
 src/store/auth.ts                 |   5 +-
 src/types/index.ts                |   8 +
 src/views/Login/index.vue         |  37 +++-
 src/views/ResetPassword/index.vue | 274 ++++++++++++++++++++++++++++++
 6 files changed, 357 insertions(+), 6 deletions(-)
 create mode 100644 src/views/ResetPassword/index.vue

diff --git a/src/api/auth.ts b/src/api/auth.ts
index 2eebb03..fe9f06d 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -1,5 +1,5 @@
 import http from '@/utils/http'
-import type { ApiResponse, LoginParams } from '@/types'
+import type { ApiResponse, LoginParams, ResetPwdParams } from '@/types'
 import type { AxiosResponse } from 'axios'
 
 /**
@@ -33,4 +33,32 @@ export const getInfo = (): Promise<AxiosResponse<ApiResponse<any>>> => {
  */
 export const logout = (): Promise<AxiosResponse<ApiResponse<any>>> => {
   return http.post('/logout')
+}
+
+const createFormData = (data: Record<string, string>) => {
+  const formData = new FormData()
+  Object.keys(data).forEach((key) => formData.append(key, data[key]))
+  return formData
+}
+
+/**
+ * 发送重置密码邮箱验证码
+ */
+export const sendResetPwdEmailCode = (username: string): Promise<AxiosResponse<ApiResponse<any>>> => {
+  return http.post('/login/sendResetPwdEmailCode', createFormData({ username }))
+}
+
+/**
+ * 重置登录密码
+ */
+export const resetLoginPwd = (params: ResetPwdParams): Promise<AxiosResponse<ApiResponse<any>>> => {
+  return http.post(
+    '/login/resetPwd',
+    createFormData({
+      username: params.username,
+      newPassword: params.newPassword,
+      confirmPassword: params.confirmPassword,
+      emailCode: params.emailCode
+    })
+  )
 }
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index c9cfc5f..52bc205 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -17,6 +17,15 @@ const routes: RouteRecordRaw[] = [
       requiresAuth: false
     }
   },
+  {
+    path: '/reset-password',
+    name: 'ResetPassword',
+    component: () => import('@/views/ResetPassword/index.vue'),
+    meta: {
+      title: '修改密码',
+      requiresAuth: false
+    }
+  },
   {
     path: '/list',
     name: 'Home',
diff --git a/src/store/auth.ts b/src/store/auth.ts
index e93f0d3..90382f3 100644
--- a/src/store/auth.ts
+++ b/src/store/auth.ts
@@ -44,7 +44,10 @@ export const useAuthStore = defineStore('auth', {
           
           return response.data
         } else {
-          throw new Error(response.data.msg || '登录失败')
+          const error: any = new Error(response.data.msg || '登录失败')
+          error.code = response.data.code
+          error.response = response
+          throw error
         }
       } catch (error: any) {
         console.error('登录接口调用失败:', error)
diff --git a/src/types/index.ts b/src/types/index.ts
index 152e0c2..c7dd8e9 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -14,6 +14,14 @@ export interface LoginParams {
   rememberMe?: boolean
 }
 
+// 重置登录密码参数类型
+export interface ResetPwdParams {
+  username: string
+  newPassword: string
+  confirmPassword: string
+  emailCode: string
+}
+
 // 订单状态类型
 export type OrderStatus = '0' | '1' | '2' // 待审批、已审批、已拒绝
 export type FileType = '0' | '1' | '2' // 待审批、已审批、已拒绝
diff --git a/src/views/Login/index.vue b/src/views/Login/index.vue
index 6b558fd..9737ad9 100644
--- a/src/views/Login/index.vue
+++ b/src/views/Login/index.vue
@@ -72,6 +72,10 @@
           <span class="captcha-tip">点击图片刷新验证码</span>
         </div>
         
+        <div class="login-options">
+          <span class="forgot-password" @click="goResetPassword">忘记密码？</span>
+        </div>
+        
         <div class="login-button-container">
           <van-button round block type="primary" native-type="submit" :loading="loading" class="login-button">
             登录
@@ -84,12 +88,13 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { showFailToast, showSuccessToast } from 'vant'
 import { useAuthStore } from '@/store/auth'
 import type { LoginParams } from '@/types'
 
 const router = useRouter()
+const route = useRoute()
 const authStore = useAuthStore()
 
 const username = ref('')
@@ -108,6 +113,13 @@ const refreshCaptcha = () => {
   captchaUrl.value = getCaptchaUrl()
 }
 
+const goResetPassword = () => {
+  router.push({
+    path: '/reset-password',
+    query: username.value ? { username: username.value } : undefined
+  })
+}
+
 const onSubmit = async (values: any) => {
   loading.value = true
   try {
@@ -122,9 +134,20 @@ const onSubmit = async (values: any) => {
     
     showSuccessToast('登录成功')
     
-    router.push('/list')
+    const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/list'
+    router.push(redirect)
   } catch (error: any) {
     console.error('登录失败:', error)
+    const responseData = error.response?.data
+    const errorCode = responseData?.code ?? error.code
+    if (errorCode === 301) {
+      showFailToast(responseData?.msg || '密码不符合安全规则，请修改密码')
+      router.push({
+        path: '/reset-password',
+        query: username.value ? { username: username.value } : undefined
+      })
+      return
+    }
     showFailToast(error.message || '登录失败')
     refreshCaptcha()
   } finally {
@@ -139,6 +162,11 @@ onMounted(() => {
   if (savedUsername) {
     username.value = savedUsername
   }
+
+  const queryUsername = route.query.username
+  if (typeof queryUsername === 'string') {
+    username.value = queryUsername
+  }
   
   if (savedPassword) {
     password.value = savedPassword
@@ -230,15 +258,16 @@ onMounted(() => {
 
 .login-options {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
   padding: 0 10px;
-  margin: 10px 0 25px;
+  margin: 0 0 16px;
 }
 
 .forgot-password {
   color: #1989fa;
   font-size: 14px;
+  cursor: pointer;
   text-decoration: none;
   
   &:hover {
diff --git a/src/views/ResetPassword/index.vue b/src/views/ResetPassword/index.vue
new file mode 100644
index 0000000..3d0b4f6
--- /dev/null
+++ b/src/views/ResetPassword/index.vue
@@ -0,0 +1,274 @@
+<template>
+  <div class="reset-page">
+    <div class="reset-container">
+      <div class="reset-header">
+        <h1 class="reset-title">修改密码</h1>
+        <p class="reset-subtitle">密码长度8-20位，需包含大小写字母、数字、特殊字符</p>
+      </div>
+
+      <van-form @submit="submitResetPwd" class="reset-form">
+        <van-cell-group inset>
+          <van-field
+            v-model="form.username"
+            name="username"
+            label="账号"
+            placeholder="请输入账号"
+            :rules="[{ required: true, message: '请输入账号' }]"
+            class="reset-input"
+          />
+
+          <van-field
+            v-model="form.newPassword"
+            type="password"
+            name="newPassword"
+            label="新密码"
+            placeholder="请输入新密码"
+            :rules="newPasswordRules"
+            class="reset-input"
+          />
+
+          <van-field
+            v-model="form.confirmPassword"
+            type="password"
+            name="confirmPassword"
+            label="确认密码"
+            placeholder="请确认新密码"
+            :rules="confirmPasswordRules"
+            class="reset-input"
+          />
+
+          <van-field
+            v-model="form.emailCode"
+            name="emailCode"
+            label="邮箱验证码"
+            placeholder="请输入邮箱验证码"
+            maxlength="6"
+            :rules="emailCodeRules"
+            class="reset-input"
+          >
+            <template #button>
+              <van-button
+                size="small"
+                type="primary"
+                native-type="button"
+                :loading="emailCodeLoading"
+                :disabled="emailCodeCountdown > 0"
+                @click="sendEmailCode"
+              >
+                {{ emailCodeCountdown > 0 ? `${emailCodeCountdown}秒后重发` : '发送验证码' }}
+              </van-button>
+            </template>
+          </van-field>
+        </van-cell-group>
+
+        <div class="button-container">
+          <van-button round block type="primary" native-type="submit" :loading="resetPwdLoading" class="submit-button">
+            提交
+          </van-button>
+          <van-button round block plain type="primary" native-type="button" class="back-button" @click="backToLogin">
+            返回登录
+          </van-button>
+        </div>
+      </van-form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onBeforeUnmount, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { showFailToast, showSuccessToast } from 'vant'
+import { resetLoginPwd, sendResetPwdEmailCode } from '@/api/auth'
+import type { ResetPwdParams } from '@/types'
+
+const route = useRoute()
+const router = useRouter()
+
+const form = reactive<ResetPwdParams>({
+  username: '',
+  newPassword: '',
+  confirmPassword: '',
+  emailCode: ''
+})
+
+const resetPwdLoading = ref(false)
+const emailCodeLoading = ref(false)
+const emailCodeCountdown = ref(0)
+let emailCodeTimer: ReturnType<typeof setInterval> | null = null
+
+const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,20}$/
+
+const newPasswordRules = [
+  { required: true, message: '请输入新密码' },
+  { pattern: passwordPattern, message: '密码需为8-20位，并包含大小写字母、数字、特殊字符' }
+]
+
+const confirmPasswordRules = [
+  { required: true, message: '请确认新密码' },
+  {
+    validator: (value: string) => value === form.newPassword,
+    message: '两次输入的密码不一致'
+  }
+]
+
+const emailCodeRules = [
+  { required: true, message: '请输入邮箱验证码' },
+  { pattern: /^\d{6}$/, message: '邮箱验证码为6位数字' }
+]
+
+const clearEmailCodeTimer = () => {
+  if (emailCodeTimer) {
+    clearInterval(emailCodeTimer)
+    emailCodeTimer = null
+  }
+  emailCodeCountdown.value = 0
+}
+
+const startEmailCodeCountdown = () => {
+  clearEmailCodeTimer()
+  emailCodeCountdown.value = 60
+  emailCodeTimer = setInterval(() => {
+    if (emailCodeCountdown.value <= 1) {
+      clearEmailCodeTimer()
+    } else {
+      emailCodeCountdown.value--
+    }
+  }, 1000)
+}
+
+const getResponseMessage = (response: any, defaultMessage: string) => {
+  return response?.data?.msg || response?.msg || defaultMessage
+}
+
+const sendEmailCode = async () => {
+  if (!form.username) {
+    showFailToast('请输入账号')
+    return
+  }
+
+  emailCodeLoading.value = true
+  try {
+    const response: any = await sendResetPwdEmailCode(form.username)
+    if (response.data?.code !== 0) {
+      showFailToast(getResponseMessage(response, '发送验证码失败'))
+      return
+    }
+    showSuccessToast('验证码已发送')
+    startEmailCodeCountdown()
+  } catch (error: any) {
+    showFailToast(error.response?.data?.msg || error.message || '发送验证码失败')
+  } finally {
+    emailCodeLoading.value = false
+  }
+}
+
+const backToLogin = () => {
+  router.replace('/login')
+}
+
+const submitResetPwd = async () => {
+  resetPwdLoading.value = true
+  try {
+    const response: any = await resetLoginPwd(form)
+    if (response.data?.code !== 0) {
+      showFailToast(getResponseMessage(response, '密码修改失败'))
+      return
+    }
+    showSuccessToast('密码修改成功，请重新登录')
+    localStorage.removeItem('savedPassword')
+    router.replace({
+      path: '/login',
+      query: form.username ? { username: form.username } : undefined
+    })
+  } catch (error: any) {
+    showFailToast(error.response?.data?.msg || error.message || '密码修改失败')
+  } finally {
+    resetPwdLoading.value = false
+  }
+}
+
+onMounted(() => {
+  const username = route.query.username
+  if (typeof username === 'string') {
+    form.username = username
+  }
+})
+
+onBeforeUnmount(() => {
+  clearEmailCodeTimer()
+})
+</script>
+
+<style lang="scss" scoped>
+.reset-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.reset-container {
+  width: 100%;
+  max-width: 400px;
+  background: white;
+  border-radius: 16px;
+  padding: 36px 24px;
+  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, #1989fa, #07c160, #ff6600);
+  }
+}
+
+.reset-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.reset-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 10px;
+}
+
+.reset-subtitle {
+  font-size: 13px;
+  color: #ee0a24;
+  line-height: 20px;
+  margin: 0;
+}
+
+.reset-form {
+  margin-bottom: 10px;
+}
+
+.reset-input {
+  margin-bottom: 12px;
+}
+
+.button-container {
+  margin-top: 24px;
+}
+
+.submit-button,
+.back-button {
+  height: 46px;
+  font-size: 16px;
+}
+
+.back-button {
+  margin-top: 12px;
+}
+</style>