feat: 移动端新增修改密码功能

1. 新增修改密码页面 (my/ChangePassword.vue)
   - 支持输入旧密码、新密码、确认密码
   - 密码验证:至少6位、两次输入一致性校验
   - 修改成功后自动清除登录信息并跳转到登录页

2. 新增API接口 (updatePassword)
   - PUT /sys/profile/password
   - 参数: oldPassword, newPassword, confirmPassword

3. 更新路由配置
   - 新增 /my/change-password 路由

4. 更新我的页面
   - 修改密码点击跳转到修改密码页面
This commit is contained in:
zhangjf 2026-02-23 12:32:36 +08:00
parent e7f1b39ac8
commit 400b7272d4
4 changed files with 156 additions and 1 deletions

View File

@ -14,6 +14,10 @@ export function logout() {
return request.post('/auth/logout') return request.post('/auth/logout')
} }
export function updatePassword(data: { oldPassword: string; newPassword: string; confirmPassword: string }) {
return request.put('/sys/profile/password', data)
}
// ===================== 项目管理 ===================== // ===================== 项目管理 =====================
export function getProjectList(params?: { pageNum: number; pageSize: number; keyword?: string }) { export function getProjectList(params?: { pageNum: number; pageSize: number; keyword?: string }) {

View File

@ -82,6 +82,12 @@ const router = createRouter({
component: () => import('@/views/my/Index.vue'), component: () => import('@/views/my/Index.vue'),
meta: { title: '我的', requiresAuth: true } meta: { title: '我的', requiresAuth: true }
}, },
{
path: '/my/change-password',
name: 'ChangePassword',
component: () => import('@/views/my/ChangePassword.vue'),
meta: { title: '修改密码', requiresAuth: true }
},
// 登录 // 登录
{ {
path: '/login', path: '/login',

View File

@ -0,0 +1,145 @@
<template>
<div class="page change-password">
<van-nav-bar title="修改密码" left-arrow @click-left="$router.back()" />
<van-form @submit="onSubmit">
<van-cell-group inset>
<van-field
v-model="form.oldPassword"
type="password"
name="oldPassword"
label="旧密码"
placeholder="请输入旧密码"
:rules="[{ required: true, message: '请输入旧密码' }]"
required
/>
<van-field
v-model="form.newPassword"
type="password"
name="newPassword"
label="新密码"
placeholder="请输入新密码至少6位"
:rules="[
{ required: true, message: '请输入新密码' },
{ pattern: /^.{6,}$/, message: '密码至少6位' }
]"
required
/>
<van-field
v-model="form.confirmPassword"
type="password"
name="confirmPassword"
label="确认密码"
placeholder="请再次输入新密码"
:rules="[
{ required: true, message: '请确认新密码' },
{ validator: validateConfirmPassword, message: '两次密码输入不一致' }
]"
required
/>
</van-cell-group>
<div class="tips">
<van-icon name="info-o" />
<span>密码修改成功后需要重新登录</span>
</div>
<div class="submit-btn">
<van-button round block type="primary" native-type="submit" :loading="submitting">
确认修改
</van-button>
</div>
</van-form>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast, showConfirmDialog } from 'vant'
import { updatePassword } from '@/api'
const router = useRouter()
const submitting = ref(false)
const form = ref({
oldPassword: '',
newPassword: '',
confirmPassword: ''
})
const validateConfirmPassword = () => {
return form.value.confirmPassword === form.value.newPassword
}
const onSubmit = async () => {
if (form.value.newPassword !== form.value.confirmPassword) {
showToast('两次密码输入不一致')
return
}
if (form.value.oldPassword === form.value.newPassword) {
showToast('新密码不能与旧密码相同')
return
}
try {
await showConfirmDialog({
title: '确认修改',
message: '密码修改成功后需要重新登录,确定要修改吗?'
})
submitting.value = true
await updatePassword({
oldPassword: form.value.oldPassword,
newPassword: form.value.newPassword,
confirmPassword: form.value.confirmPassword
})
showSuccessToast('密码修改成功')
//
localStorage.removeItem('token')
localStorage.removeItem('userInfo')
//
setTimeout(() => {
router.replace('/login')
}, 1500)
} catch (e: any) {
if (e.message !== 'cancel') {
showToast(e.message || '修改失败')
}
} finally {
submitting.value = false
}
}
</script>
<style scoped>
.change-password {
background: #f5f5f5;
min-height: 100vh;
}
.van-cell-group {
margin: 12px;
}
.tips {
display: flex;
align-items: center;
gap: 6px;
margin: 16px 20px;
font-size: 12px;
color: var(--mac-text-secondary);
}
.submit-btn {
margin: 24px 16px;
}
</style>

View File

@ -55,7 +55,7 @@ const userInfo = ref({
}) })
const handleChangePassword = () => { const handleChangePassword = () => {
showToast('功能开发中') router.push('/my/change-password')
} }
const handleAbout = () => { const handleAbout = () => {