src/views/homePage/components/Header.vue

<template>
  <header>
    <div class="slogin">
      <!-- 举旗帜聚民心、防风险保安全、强治理惠民生、 增动能促发展、谋合作图共赢 -->
    </div>
    <div class="title">E蓉管理</div>
    <div class="user">
      <div class="head">
        <el-image :src="avatar" fit="cover"></el-image>
      </div>
      <el-dropdown @command="handleCommand">
        <div class="info">
          {{ userInfo.userName }}（{{ userInfo.organizeName }}）
        </div>
        <el-dropdown-menu slot="dropdown" router>
          <el-dropdown-item command="toUserInfo">修改信息</el-dropdown-item>
          <passwordForm>
            <el-dropdown-item>修改密码</el-dropdown-item>
          </passwordForm>
          <el-dropdown-item command="logout">退出系统</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <UserInfoPage ref="UserInfoPage" v-if="visbleUserInfo" @refresh="visbleUserInfoRefresh"/>
  </header>
</template>
<script>
import UserInfoPage from './UserInfoPage.vue'
export default {
  name: "Header",
  components: {UserInfoPage},
  data() {
    return {
      userInfo: this.$store.state.user.userInfo,
      avatar: process.env.VUE_APP_BASE_API + this.$store.state.user.avatar,
      visbleUserInfo: false,
    };
  },
  mounted() {},
  methods: {
    visbleUserInfoRefresh() {
      this.avatar = process.env.VUE_APP_BASE_API + this.$store.state.user.avatar;
      // this.$store.dispatch("resetToken").then(() => {
      //   this.$router.push(`/login`);
      // });
      this.visbleUserInfo = false;
    },
    async logout() {
      await this.$store.dispatch("LogOut");
      this.$router.push({ path: "/login" });
    },
    toUserInfo() {
      this.visbleUserInfo = true;
      this.$nextTick(() => {
        this.$refs.UserInfoPage.init();
      });
    },
    handleCommand(command) {
      switch (command) {
        case "logout":
          this.$confirm("确定退出登录?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.logout();
            })
            .catch(() => {});
          break;
        case "toUserInfo":
          this.toUserInfo();
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style scoped lang="scss">
header {
  width: 100%;
  color: rgba(255, 255, 255, 1);
  position: relative;
  .slogin {
    position: absolute;
    left: 28px;
    top: 21px;
    width: 600px;
    text-align: right;
    font-size: 28px;
    font-family: Roboto;
    font-weight: 400;
    line-height: 39px;
  }
  .title {
    text-align: center;
    width: 100%;
    padding-top: 5px;
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;
  }
  .user {
    position: absolute;
    right: 33px;
    top: 13px;
    display: flex;
    align-items: center;
    flex-direction: row;
    .head {
      width: 50px;
      height: 50px;
      margin-right: 13px;
      .el-image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .info {
      color: #fff;
      cursor: pointer;
    }
  }
}
</style>