增加修改密码功能

src/pages/layout/head.vue

@@ -1,19 +1,62 @@
 <!--  -->
 <template>
-<div class='header card'>
-  <div class="header-title">
-    <!-- <img src="@/assets/img/logo.png" alt=""> -->
-    <span>大理博物馆管理后台</span>
-  </div>
-  <div class="header-user">
-    <div class="avatars">
-      <!-- <img :src="head" alt=""> -->
-      <img style="height:70%" src="@/assets/img/user.png" alt="">
-      <span>{{userName}}</span>
+  <div class="header card">
+    <div class="header-title">
+      <!-- <img src="@/assets/img/logo.png" alt=""> -->
+      <span>大理博物馆管理后台</span>
+    </div>
+    <div class="header-user" @click="cut = !cut">
+      <div class="avatars">
+        <!-- <img :src="head" alt=""> -->
+        <img style="height: 70%" src="@/assets/img/user.png" alt="" />
+        <span>{{ userName }}</span>
+      </div>
+      <!-- 下箭头 -->
+      <div class="pull_down" v-if="cut"></div>
+      <div class="pull_up" v-else></div>
+      <!-- 点击箭头出来的ul -->
+      <ul class="user_handle" v-show="cut">
+        <li @click="isShow = true">修改密码</li>
+        <li @click="outLogin">退出登录</li>
+      </ul>
+
+      <!-- <div @click="logout" class="logout"><img src="@/assets/img/logout.png" alt="">退出</div> -->
     </div>
-    <!-- <div @click="logout" class="logout"><img src="@/assets/img/logout.png" alt="">退出</div> -->
+
+    <!-- 点击修改密码出现弹窗 -->
+    <el-dialog title="修改密码" :visible.sync="isShow" @close="btnX()">
+      <el-form :model="form" label-width="100px" :rules="rules" ref="ruleForm">
+        <el-form-item label="旧密码：" prop="oldPassword">
+          <el-input
+            style="width: 400px"
+            v-model="form.oldPassword"
+            placeholder="请输入"
+            show-password
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="新密码：" prop="newPassword">
+          <el-input
+            style="width: 400px"
+            v-model="form.newPassword"
+            placeholder="请输入"
+            show-password
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="确定新密码：" prop="checkPass">
+          <el-input
+            style="width: 400px"
+            v-model="form.checkPass"
+            placeholder="请输入"
+            show-password
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="btnX">取 消</el-button>
+        <el-button type="danger" @click="btnOk">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
-</div>
 </template>
 
 <script>
@@ -23,63 +66,175 @@
 export default {
   // import引入的组件需要注入到对象中才能使用
   components: {},
-  data () {
+  data() {
+    const validatePass2 = (rule, value, callback) => {
+      if (value !== this.form.newPassword) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
     return {
-      head: '',
-      userName:''
-    }
+      // 修改密码
+      form: {
+        oldPassword: "",
+        newPassword: "",
+        checkPass: "",
+      },
+      rules: {
+        checkPass: [{ validator: validatePass2, trigger: "blur" }],
+        oldPassword: [{ required: true, message: "不能为空", trigger: "blur" }],
+        newPassword: [{ required: true, message: "不能为空", trigger: "blur" }],
+      },
+      cut: false,
+      isShow: false,
+      head: "",
+      userName: "",
+    };
   },
   // 监控data中的数据变化
   watch: {},
   // 方法集合
   methods: {
-    logout () {
-      this.$http({
-        method: 'get',
-        url: '/admin/logout',
-        headers: {
-          token: window.localStorage.getItem('token')
-        }
-      }).then(res => {
-        if (res.code === 0) {
-          window.localStorage.setItem('token', '')
-          window.localStorage.setItem('role', '')
+    // 修改密码点击取消
+    btnX() {
+      this.$refs.ruleForm.resetFields();
+      this.cut = false;
+      this.isShow = false;
+      this.form = {
+        oldPassword: "",
+        newPassword: "",
+        checkPass: "",
+      };
+    },
+    // 修改密码点击确定
+    async btnOk() {
+      try {
+        await this.$refs.ruleForm.validate();
+        this.$http({
+          method: "post",
+          url: "/manage/user/updatePwd",
+          headers: {
+            token: window.localStorage.getItem("token"),
+          },
+          data:this.form
+        }).then((res) => {
+          if (res.code === 0) {
+            window.localStorage.setItem("token", "");
+            window.localStorage.setItem("role", "");
 
-          this.$alert('退出成功', '提示', {
-            confirmButtonText: '确定',
-            callback: () => {
-              window.localStorage.setItem('userInfo', '')
-              this.$router.push('/login')
-            }
-          })
-        }
+            this.$alert("修改成功", "提示", {
+              confirmButtonText: "确定",
+              callback: () => {
+                window.localStorage.setItem("userInfo", "");
+                this.$router.push("/login");
+              },
+            });
+          }else  this.$message.error(res.msg);
+        });
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    //点击退出登录
+    outLogin() {
+      this.$confirm("确定退出吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
       })
-    }
-  },
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
+        .then(() => {
+          this.$http({
+            method: "get",
+            url: "/admin/logout",
+            headers: {
+              token: window.localStorage.getItem("token"),
+            },
+          }).then((res) => {
+            if (res.code === 0) {
+              window.localStorage.setItem("token", "");
+              window.localStorage.setItem("role", "");
 
+              this.$alert("退出成功", "提示", {
+                confirmButtonText: "确定",
+                callback: () => {
+                  window.localStorage.setItem("userInfo", "");
+                  this.$router.push("/login");
+                },
+              });
+            }
+          });
+        })
+        .catch(() => {
+          this.$message.info("已取消");
+        });
+    },
   },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
-    let userInfo = window.localStorage.getItem('userInfo') &&  JSON.parse(window.localStorage.getItem('userInfo')) || ''
-    this.userName = userInfo.userName
-    this.head = userInfo.thumb
+  mounted() {
+    let userInfo =
+      (window.localStorage.getItem("userInfo") &&
+        JSON.parse(window.localStorage.getItem("userInfo"))) ||
+      "";
+    this.userName = userInfo.userName;
+    this.head = userInfo.thumb;
 
-    
     // this.updateInfo()
   },
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
-}
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {}, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
+};
 </script>
 
 <style scoped>
+.pull_down {
+  position: absolute;
+  right: -12px;
+  bottom: 18px;
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-bottom: 8px solid #fff;
+}
+.pull_up {
+  position: absolute;
+  right: -12px;
+  bottom: 18px;
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid #fff;
+}
+.user_handle {
+  color: #fff;
+  z-index: 999;
+  position: absolute;
+  right: -36px;
+  bottom: -146px;
+  background-color: #b63c25;
+}
+.user_handle li {
+  padding: 0px 30px;
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+}
+.user_handle li:hover {
+  color: #dc3545;
+  background-color: #fff;
+}
+
 .header {
   height: 4.25rem;
   width: 100%;
@@ -89,7 +244,7 @@ export default {
   line-height: 4.25rem;
   padding: 0 1.875rem;
   box-sizing: border-box;
-  background-color: #B63C25!important;
+  background-color: #b63c25 !important;
 }
 
 .header-title {
@@ -98,12 +253,12 @@ export default {
   text-align: center;
   vertical-align: middle;
 }
-.header-title img{
+.header-title img {
   vertical-align: middle;
   max-width: 50px;
   margin-right: 4px;
 }
-.header-title span{
+.header-title span {
   vertical-align: middle;
   display: inline-block;
   font-size: 24px;
@@ -111,6 +266,8 @@ export default {
   font-weight: bold;
 }
 .header-user {
+  cursor: pointer;
+  position: relative;
   display: flex;
   align-items: center;
 }
@@ -128,7 +285,7 @@ export default {
   color: #fff;
 }
 
-.header-user .avatars{
+.header-user .avatars {
   display: flex;
   align-items: center;
   height: 3rem;
@@ -136,13 +293,13 @@ export default {
   color: #fff;
 }
 
-.header-user .avatars span{
+.header-user .avatars span {
   margin-left: 10px;
 }
 
-.header-user .avatars img{
-  width:3rem;
-  height:3rem;
-  border-radius:50%;
+.header-user .avatars img {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
 }
 </style>