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:
parent
e7f1b39ac8
commit
400b7272d4
@ -14,6 +14,10 @@ export function 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 }) {
|
||||
|
||||
@ -82,6 +82,12 @@ const router = createRouter({
|
||||
component: () => import('@/views/my/Index.vue'),
|
||||
meta: { title: '我的', requiresAuth: true }
|
||||
},
|
||||
{
|
||||
path: '/my/change-password',
|
||||
name: 'ChangePassword',
|
||||
component: () => import('@/views/my/ChangePassword.vue'),
|
||||
meta: { title: '修改密码', requiresAuth: true }
|
||||
},
|
||||
// 登录
|
||||
{
|
||||
path: '/login',
|
||||
|
||||
145
fund-mobile/src/views/my/ChangePassword.vue
Normal file
145
fund-mobile/src/views/my/ChangePassword.vue
Normal 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>
|
||||
@ -55,7 +55,7 @@ const userInfo = ref({
|
||||
})
|
||||
|
||||
const handleChangePassword = () => {
|
||||
showToast('功能开发中')
|
||||
router.push('/my/change-password')
|
||||
}
|
||||
|
||||
const handleAbout = () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user