📦 修改密码功能

package-lock.json

@@ -15,6 +15,7 @@
         "@vuemap/vue-amap": "^2.1.12",
         "@vueup/vue-quill": "^1.2.0",
         "ant-design-vue": "^4.2.6",
+        "async-validator": "^4.2.5",
         "axios": "^1.11.0",
         "bootstrap": "^5.3.0",
         "dayjs": "^1.11.18",

package.json

@@ -22,6 +22,7 @@
     "@vuemap/vue-amap": "^2.1.12",
     "@vueup/vue-quill": "^1.2.0",
     "ant-design-vue": "^4.2.6",
+    "async-validator": "^4.2.5",
     "axios": "^1.11.0",
     "bootstrap": "^5.3.0",
     "dayjs": "^1.11.18",

src/api/auth/UserApi.ts

@@ -83,6 +83,12 @@ export class UserApi extends AppServerRequestModule<DataModel> {
       password: data?.password,
     }, '登录', undefined, LoginResult)).data as LoginResult;
   }
+  async updatePassword(data: {
+    newpassword: string,
+    oldpassword: string,
+  }) {
+    return (await this.post('/content/main_body_user/changepwd', data, '更新密码'))
+  }
 
   async refresh() {
     return (await this.post('/ich/inheritor/refresh', {}, '刷新token', undefined, LoginResult)).data as LoginResult;

src/components/NavBar.vue

@@ -50,6 +50,7 @@
       <a-image :src="IconUser" class="right-button" :preview="false" />
       <template #overlay>
         <a-menu>
+          <a-menu-item key="2" @click="router.push('/change-password')">修改密码</a-menu-item>
           <a-menu-item key="3" @click="logout">退出登录</a-menu-item>
         </a-menu>
       </template>

src/pages/change-password.vue

@@ -0,0 +1,123 @@
+<template>
+  <!-- 登录页 -->
+  <div class="login main-background main-background-type0">
+    <div class="nav-placeholder"></div>
+    <!-- 表单 -->
+    <section class="main-section ">
+      <div class="content small-h">
+        <div class="title">
+          <h2>修改密码</h2>
+        </div>
+        <div class="form-container">
+          <DynamicForm 
+            ref="form"
+            :model="formModel" 
+            :options="formOptions"
+          />
+          <a-button type="primary" block @click="handleSubmit">确认修改</a-button>
+          <a-button class="mt-3" block @click="router.back()">返回</a-button>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UserApi from '@/api/auth/UserApi';
+import { DynamicForm, type IDynamicFormOptions, type IDynamicFormRef } from '@imengyu/vue-dynamic-form';
+import { message, Modal, type FormInstance } from 'ant-design-vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import type { RuleItem } from 'async-validator';
+
+const form = ref<IDynamicFormRef>();
+const formModel = ref({
+  oldPassword: '',
+  password: '',
+  passwordRepeat: '',
+});
+const formOptions = ref<IDynamicFormOptions>({
+  formLabelCol: { span: 6 },
+  formWrapperCol: { span: 24 },
+  formAdditionaProps: {
+    layout: 'vertical'
+  },
+  formItems: [
+    {
+      label: '旧密码',
+      name: 'oldPassword',
+      type: 'password',
+      additionalProps: {
+        placeholder: '请输入旧密码' 
+      }
+    },
+    {
+      label: '新密码',
+      name: 'password',
+      type: 'password',
+      additionalProps: {
+        placeholder: '请输入密码' 
+      }
+    },
+    {
+      label: '确认新密码',
+      name: 'passwordRepeat',
+      type: 'password',
+      additionalProps: {
+        placeholder: '请输入新密码' 
+      }
+    },
+  ],
+  formRules: {
+    oldPassword: [
+      { required: true, message: '请输入旧密码' },
+      { min: 6, message: '密码长度必须大于等于6位' },
+    ],
+    password: [
+      { required: true, message: '请输入密码' },
+      { min: 6, message: '密码长度必须大于等于6位' },
+    ],
+    passwordRepeat: [
+      { required: true, message: '请再输入一次密码' },
+      {
+        //表单自定义校验
+        validator(rule, value, callback, source) {
+          if (value !== formModel.value.password) {
+            callback('两次输入密码不一致，请检查');
+            return;
+          }
+          callback();
+        },
+      },
+    ] as RuleItem[],
+  },
+});
+
+const router = useRouter();
+
+async function handleSubmit() {
+  try {
+    await (form.value?.getFormRef() as FormInstance).validate();
+  } catch {
+    return;
+  }
+  try {
+    await UserApi.updatePassword({
+      oldpassword: formModel.value.oldPassword,
+      newpassword: formModel.value.password,
+    });
+    message.success('修改密码成功');
+  } catch (error) {
+    Modal.error({
+      title: '修改密码失败',
+      content: '' + error,
+    });
+  }
+}
+</script>
+
+<style lang="scss">
+.login {
+  min-height: calc(100vh - 50px);
+}
+</style>

src/pages/login.vue

@@ -135,6 +135,6 @@ async function handleSubmit() {
 
 <style lang="scss">
 .login {
-  min-height: 70vh;
+  min-height: calc(100vh - 50px);
 }
 </style>

src/router/index.ts

@@ -41,6 +41,11 @@ const router = createRouter({
       component: () => import('@/pages/admin.vue'),
     },
     {
+      path: '/change-password',
+      name: 'ChangePassword',
+      component: () => import('@/pages/change-password.vue'),
+    },
+    {
       path: '/login',
       name: 'Login',
       component: () => import('@/pages/login.vue'),