新增客户修改密码功能

src/layouts/header/index.vue

@@ -2,25 +2,54 @@
     <div class="header">
         <div style="line-height: 60px">
             <img class="logo" :src="logoUrl" />
-            <span class="title">{{title}}</span>
+            <span class="title">{{ title }}</span>
         </div>
         <div class="action">
-            <div class="user" @click="toPersonal">
+            <el-dropdown class="user-wrap" @command="userCommand">
+                <div class="user">
                     <el-avatar :size="40" :src="avatar"></el-avatar>
                     <span class="m-l-10">{{ customer ? customerName : userName }}</span>
                 </div>
+                <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item v-if="!customer" command="person">个人中心</el-dropdown-item>
+                    <el-dropdown-item v-else command="resetPw">修改密码</el-dropdown-item>
+                </el-dropdown-menu>
+            </el-dropdown>
             <el-divider direction="vertical"></el-divider>
             <el-button type="text" class="ml20" @click="loginout">退出</el-button>
         </div>
+        <el-dialog title="修改密码" :visible.sync="passwordVisible" :close-on-click-modal="false" :append-to-body="true" @close="resetPassword" width="30%">
+            <el-form ref="passwordForm" label-width="82px">
+                <el-form-item label="原密码">
+                    <el-input type="password" v-model="passwordForm.password" placeholder="请输入原密码"></el-input>
+                </el-form-item>
+                <el-form-item label="新密码">
+                    <el-input type="password" v-model="passwordForm.newPassword" placeholder="请输入新密码"></el-input>
+                </el-form-item>
+                <el-form-item label="确认新密码">
+                    <el-input type="password" v-model="passwordForm.reNewPassword" placeholder="请确认新密码" @keyup.enter.native="submitPassword"></el-input>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="passwordVisible = false">取 消</el-button>
+                <el-button type="primary" @click="submitPassword">确 定</el-button>
+            </span>
+        </el-dialog>
     </div>
 </template>
 <script>
 import { mapState, mapActions } from "vuex";
+import util from "@/libs/util";
 
 export default {
     data() {
         return {
-
+            passwordVisible: false,
+            passwordForm: {
+                password: "",
+                newPassword: "",
+                reNewPassword: ""
+            }
         };
     },
     computed: {
@@ -37,31 +66,55 @@ export default {
             "setTitle", "setLogoUrl", "setAvatar", "setUserName"
         ]),
         loginout() { // 退出登录
-            this.$router.push('/login');
+            this.$router.push("/login");
             localStorage.clear();
-            sessionStorage.clear()
+            sessionStorage.clear();
             location.reload();
         },
-        toPersonal() { // 个人中心(客户没有个人中心，老师有)
-            if (!this.customer) {
-                this.$router.push("/setting/person");
-            }
-        },
-        getSystemDetail () { // 获取系统logo
+        getSystemDetail() { // 获取系统logo
             this.$get(this.api.logoDetail).then(res => {
                 if (res.data) {
                     this.setTitle(res.data.title);
                     this.setLogoUrl(res.data.logoUrl);
                 }
-            }).catch(res => {});
+            }).catch(res => {
+            });
         },
-        getUserDetail () { // 获取用户详情
+        getUserDetail() { // 获取用户详情
             this.$get(this.api.queryUserInfoDetails).then(res => {
-                let {userAvatars, userName} = res.result.hrUserInfo;
+                let { userAvatars, userName } = res.result.hrUserInfo;
                 userAvatars && this.setAvatar(userAvatars);
                 this.setUserName(userName);
-            }).catch(res => {});
+            }).catch(res => {
+            });
+        },
+        userCommand(command) { // 切换下拉菜单
+            if (command == "person") {
+                this.$router.push("/setting/person");
+            } else {
+                this.passwordVisible = true;
+            }
+        },
+        resetPassword() { // 关闭修改密码
+            this.passwordForm = {
+                password: "",
+                newPassword: "",
+                reNewPassword: ""
+            };
         },
+        submitPassword() { // 提交修改密码
+            if (!this.passwordForm.password) return util.warningMsg("请输入原密码");
+            if (!this.passwordForm.newPassword) return util.warningMsg("请输入新密码");
+            if (!this.passwordForm.reNewPassword) return util.warningMsg("请确认新密码");
+            if (this.passwordForm.newPassword.length < 6 || this.passwordForm.reNewPassword.length < 6) return util.warningMsg("请输入6位数以上的密码");
+            if (this.passwordForm.newPassword !== this.passwordForm.reNewPassword) return util.warningMsg("输入的新密码不一致，请重新确认");
+            if (this.passwordForm.password === this.passwordForm.newPassword) return util.warningMsg("原密码跟新密码不能一致");
+            this.$post(this.api.examinePassword, this.passwordForm).then(res => {
+                util.successMsg("修改成功");
+                this.passwordVisible = false;
+            }).catch(err => {
+            });
+        }
     }
 };
 </script>
@@ -80,6 +133,7 @@ export default {
         height: 50px;
         margin: 0 20px;
     }
+
     .title {
         font-size: 18px;
         font-weight: bold;