修改密码功能开发

src/api/modules/user.ts

@@ -301,9 +301,7 @@ const userApi = (axiosInstance: ApiInstance) => ({
   }),
 
   // 修改密码
-  passwordEdit: (data: PasswordEditData) => axiosInstance.post('user/password/edit', data, {
-    baseURL: '/mock/',
-  }),
+  passwordEdit: (data: PasswordEditData) => axiosInstance.post('auth/modifyPass', data,),
 
   //成员列表分页
   memberList: (data: Page) => axiosInstance.post('/userInfo/getUserInfoList', data, { }),

src/layouts/components/Topbar/Toolbar/rightSide.vue

@@ -44,6 +44,9 @@ watch(() => userStore.avatar, () => {
       [
         { label: '快捷键介绍', handle: () => eventBus.emit('global-hotkeys-intro-toggle'), hide: settingsStore.mode !== 'pc' },
       ],
+      [
+        { label: '修改密码', handle: () => eventBus.emit('forgot-password-dialog-toggle'), hide: settingsStore.mode !== 'pc' },
+      ],
       [
         { label: '退出登录', handle: () => userStore.logout(settingsStore.settings.home.fullPath) },
       ],

src/layouts/components/forgotPassword/index.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import eventBus from '@/utils/eventBus'
+import { FormInstance, FormRules, ElMessage } from 'element-plus'
+import api from '@/api'
+import useUserStore from '@/store/modules/user'
+const userStore = useUserStore()
+
+defineOptions({
+  name: 'HotkeysIntro',
+})
+
+interface RuleForm {
+  oldPassWord: string,
+  newPassWord: string,
+}
+const formLabelAlign = reactive({
+  oldPassWord: '',//旧密码
+  newPassWord: '',//新密码
+})
+const ruleFormRef = ref<FormInstance>()
+const newPassWords = ref();
+const isShow = ref(false)
+const formrules = reactive<FormRules<RuleForm>>({
+  oldPassWord: [
+    { required: true, message: '旧密码不能为空', trigger: 'blur' },
+  ],
+  newPassWord: [
+    { required: true, message: '新密码不能为空', trigger: 'blur' },
+    { min: 8, max: 20, message: '8-20位字符，包含字母和数字', trigger: 'blur' },
+  ],
+})
+onMounted(() => {
+  eventBus.on('forgot-password-dialog-toggle', () => {
+    isShow.value = !isShow.value
+  })
+})
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid): any => {
+    if (valid) {
+      if (formLabelAlign.oldPassWord == formLabelAlign.newPassWord) {
+        return ElMessage({
+          message: '输入的旧密码和新密码一致',
+          type: 'warning',
+          plain: true,
+        })
+      }
+      if (newPassWords.value !== formLabelAlign.newPassWord) {
+        return ElMessage({
+          message: '两次输入的新密码不一致',
+          type: 'warning',
+          plain: true,
+        })
+      }
+      api.userApi.passwordEdit(formLabelAlign).then((res: any) => {
+        if (res.code == 200) {
+          isShow.value=false;
+          ElMessage({
+            message: res.msg,
+            type: 'success',
+            plain: true,
+          })
+          setTimeout(() => {
+            userStore.logout();
+          }, 1000)
+        }
+      })
+    }
+  })
+}
+</script>
+
+<template>
+
+  <HDialog v-model="isShow" title="修改密码">
+    <div style="padding: 0 20px;" class="">
+      <el-form label-position="top" label-width="auto" :rules="formrules" size="large" ref="ruleFormRef"
+        :model="formLabelAlign">
+        <el-form-item label="请输入旧密码" prop="oldPassWord">
+          <el-input v-model="formLabelAlign.oldPassWord" type="password" show-password />
+        </el-form-item>
+        <el-form-item label="输入新密码" prop="newPassWord">
+          <el-input v-model="formLabelAlign.newPassWord" type="password" show-password />
+        </el-form-item>
+        <el-form-item label="再次输入新密码">
+          <el-input v-model="newPassWords" type="password" show-password />
+        </el-form-item>
+      </el-form>
+      <h6 style="color: #666;">8-20位字符，包含字母和数字，建议字母包含大小写组合。</h6>
+      <div class="dialog-footer flex a-c j-s">
+        <el-button @click="isShow = false" size="large">取消</el-button>
+        <el-button type="primary" style="background: linear-gradient(91deg, #4fcaff 0%, #2b62ff 100%);border: none;"
+          @click="submitForm(ruleFormRef)" size="large">
+          确认修改
+        </el-button>
+      </div>
+    </div>
+
+  </HDialog>
+</template>
+<style lang="scss" scoped>
+.dialog-footer {
+  width: 100%;
+
+  .el-button {
+    width: 45%;
+  }
+}
+</style>

src/layouts/index.vue

@@ -9,6 +9,7 @@ import BackTop from './components/BackTop/index.vue'
 import Copyright from './components/Copyright/index.vue'
 import Header from './components/Header/index.vue'
 import HotkeysIntro from './components/HotkeysIntro/index.vue'
+import forgotPassword from './components/forgotPassword/index.vue'
 import MainSidebar from './components/MainSidebar/index.vue'
 import Search from './components/Search/index.vue'
 import SubSidebar from './components/SubSidebar/index.vue'
@@ -125,6 +126,7 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING === 'true'
     </div>
     <Search />
     <HotkeysIntro />
+    <forgotPassword />
     <template v-if="enableAppSetting">
       <div class="app-setting" @click="eventBus.emit('global-app-setting-toggle')">
         <SvgIcon name="i-uiw:setting-o" class="icon" />