feat: 添加修改密码功能

src/common/api/login.js

 import axios from './axios'
 
 export function getLoginState({ account, password }) {
-  return axios.post('platform/user/login', { account, password })
+  return axios.post('platform/user/login', {
+    account,
+    password,
+  })
 }
 
 export function logout() {
   return axios.get('platform/user/logout')
 }
+
+export function resetPassword({ account, oldPwd, newPwd }) {
+  return axios.post('platform/user/changePassword', {
+    account,
+    oldPwd,
+    newPwd,
+  })
+}

src/common/components/element-ui.js

@@ -25,6 +25,9 @@ import {
   Tag,
   Checkbox,
   Tree,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
 } from 'element-ui'
 
 const components = [
@@ -49,6 +52,9 @@ const components = [
   Tag,
   Checkbox,
   Tree,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
 ]
 
 export default {

src/views/home/navMenu.vue

@@ -14,7 +14,7 @@
       @click.native="onClickMenus"
       active-text-color="#ffd04b"
     >
-      <template v-for="(nav,index) in menuList">
+      <template v-for="(nav, index) in menuList">
         <el-menu-item
           :key="index"
           v-if="nav.children.length === 0"
@@ -46,21 +46,83 @@
       </template>
     </el-menu>
     <div class="user-area">
-      <span class="user-name">{{
-        userInfo && userInfo.realName
-      }}</span>
-      <el-button
+      <el-dropdown>
+        <div size="mini" style="color: #fff">
+          {{ userInfo && userInfo.realName
+          }}<i
+            class="el-icon-arrow-down el-icon--right"
+          ></i>
+        </div>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item @click.native="updatePassword"
+            >修改密码</el-dropdown-item
+          >
+          <el-dropdown-item @click.native="logout"
+            >退出登录</el-dropdown-item
+          >
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <!-- <el-button
         type="text"
         style="color: #fff"
         @click="logout"
         >退出登录</el-button
-      >
+      > -->
     </div>
+    <el-dialog
+      :close-on-click-modal="false"
+      title="修改密码"
+      :visible.sync="dialogVisible"
+      width="400px"
+    >
+      <el-form
+        :inline="true"
+        label-width="100px"
+        size="small"
+      >
+        <el-form-item label="原密码">
+          <el-input
+            show-password
+            v-model="oldPwd"
+            placeholder="原密码"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="新密码">
+          <el-input
+            show-password
+            v-model="newPwd"
+            placeholder="新密码"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="确认新密码">
+          <el-input
+            show-password
+            v-model="confimPwd"
+            placeholder="确认新密码"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button
+          size="small"
+          @click="dialogVisible = false"
+          >取 消</el-button
+        >
+        <el-button
+          size="small"
+          type="primary"
+          @click="resetPasswordSumbit"
+        >
+          确 定
+        </el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
 import { mapGetters, mapState } from 'vuex'
-import { logout } from '@/common/api/login'
+import { logout, resetPassword } from '@/common/api/login'
 import { setToken, setUser } from '@/utils/auth'
 export default {
   name: 'navMenu',
@@ -117,6 +179,10 @@ export default {
           ],
         },
       ],
+      dialogVisible: false,
+      oldPwd: '',
+      newPwd: '',
+      confimPwd: '',
     }
   },
   computed: {
@@ -139,6 +205,41 @@ export default {
     },
   },
   methods: {
+    updatePassword() {
+      this.dialogVisible = true
+    },
+    async resetPasswordSumbit() {
+      if (!this.oldPwd) {
+        this.$message.warning('请输入原密码')
+        return
+      }
+      if (!this.newPwd) {
+        this.$message.warning('请输入新密码')
+        return
+      }
+      if (!this.confimPwd) {
+        this.$message.warning('确认新密码')
+        return
+      }
+      if (this.newPwd !== this.confimPwd) {
+        return this.$message.warning('新密码两次输入不一致')
+      }
+      try {
+        const res = await resetPassword({
+          account: this.userInfo.account,
+          oldPwd: this.oldPwd,
+          newPwd: this.newPwd,
+        })
+        if (res.code === 200) {
+          this.dialogVisible = false
+          this.$message.success('密码修改成功')
+          this.logout()
+        }
+        console.log(res)
+      } catch (e) {
+        console.error(e)
+      }
+    },
     async logout() {
       try {
         await logout()