topbar.vue

<template>
  <div class="top-bar">
    <div class="top-bar-left">
      <div class="logo" @click="$router.push('/index')"></div>
      <span class="title f24">中国国家博物馆建党百年展点播院线服务平台</span>
    </div>
    <div class="top-bar-right">
      <!-- <div class="avatar"></div> -->
      <div class="user-name f16">Hello, {{ userName }}</div>
      <div class="line"></div>
      <div class="login-out" @click="logout()"></div>
    </div>
    <div class="effectiveDate" v-show=" (expireNum || expireNum===0) && expireNum < 30 ">
      您的账号{{ expireNum }}天到期
    </div>
  </div>
</template>
<script>
import { loginOut } from "@/config/loginOut";
export default {
  data() {
    return {
      userName: localStorage.getItem("user"),
      expireNum: localStorage.getItem("expireNum"),
    };
  },
  mounted() {},
  methods: {
    logout() {
      this.$confirm("确认退出吗？")
        .then((_) => {
          this.handleLogout();
        })
        .catch((_) => {});
    },
    handleLogout() {
      let _this = this;
      _this
        .$https({
          method: "get",
          url: "logout",
          authType: "back",
        })
        .then((res) => {
          if (res.status == 200) {
            let resData = res.data;
            if (resData.resultCode == 200) {
              _this.$message({
                type: "success",
                message: resData.message,
              });
              loginOut();
              _this.$router.push("login");
            } else {
              _this.$message.error(res.data.message);
            }
          } else {
            _this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          _this.$message.error(error.message);
        });
    },
  },
};
</script>
<style lang="less" scoped>
.top-bar {
  background-color: @party-red;
  width: 100%;
  height: 76px;
  line-height: 76px;
  padding: 0 30px;
  overflow: hidden;
  .top-bar-left {
    float: left;
    .logo {
      width: 46px;
      height: 36px;
      display: inline-block;
      vertical-align: middle;
      background: url("~@/assets/login/logo.png") no-repeat center/100% 100%;
      cursor: pointer;
    }
    .title {
      color: @party-white;
      vertical-align: middle;
      padding-left: 16px;
    }
  }
  .top-bar-right {
    float: right;
    > * {
      display: inline-block;
      vertical-align: middle;
    }
    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: pink;
    }
    .user-name {
      font-size: 16px;
      line-height: 16px;
      color: @party-white;
    }
    .line {
      width: 2px;
      height: 18px;
      background-color: @party-white;
      margin: 0 15px;
    }
    .login-out {
      width: 20px;
      height: 20px;
      background: url("~@/assets/login/logout.png") no-repeat center/100% 100%;
      cursor: pointer;
    }
  }
  .effectiveDate {
    position: absolute;
    right: 93px;
    top: 25px;
    color: @party-white
  }
}
</style>