SteelfurnitureWeb/src/components/userInfo.vue

<template>
  <div class="userInfo">
    <div class="avatar">
      <img :src="require(`@assets/touxiang0${userName ? '2' : '1'}.png`)" />
    </div>
    <div class="username">
      {{ userName || `${$t("page.components.userInfo.username")}！` }}
    </div>
    <div class="btns">
      <template v-if="userName">
        <router-link to="/editPassword">
          <el-button class="left btn">{{
            $t("page.components.userInfo.editPassword")
          }}</el-button>
        </router-link>
        <el-button class="right btn" @click="logout">{{
          $t("page.components.userInfo.logout")
        }}</el-button>
      </template>
      <template v-else>
        <router-link to="/login">
          <el-button class="left btn">{{
            $t("page.components.userInfo.login")
          }}</el-button>
        </router-link>
        <router-link to="/register">
          <el-button class="right btn">{{
            $t("page.components.userInfo.register")
          }}</el-button>
        </router-link>
      </template>
    </div>
  </div>
</template>
<script lang="ts">
import {
  Component,
  Vue,
  Prop,
  Emit,
  Model,
  Watch,
  PropSync
} from "vue-property-decorator";
import user from "@/store/modules/user";
@Component
export default class extends Vue {
  get userName() {
    return user.UserInfo && user.UserInfo.loginAccount;
  }
  async logout() {
    if (
      !(await this.$confirm(`${this.$i18n.t("message.confirm.logout")}`).catch(
        x => false
      ))
    )
      return;
    await this.$router.push("/login");
    user.clear();
  }
}
</script>
<style lang="scss" scoped>
.userInfo {
  height: 16rem;
  background: #fff;
  border-radius: 0.4rem;
  text-align: center;
  padding: 2rem;
  box-sizing: border-box;
  .avatar {
    img {
      height: 5.8rem;
      width: 5.8rem;
      border-radius: 50%;
    }
  }
  .username {
    height: 2.4rem;
    line-height: 2.4rem;
    font-size: 1.2rem;
    color: #666;
  }
  .btns {
    padding-top: 1rem;
    font-size: 1.4rem;
    .btn {
      width: 40%;
      height: 2.8rem;
      line-height: 2.8rem;
      padding: 0;
      border: 0;
      margin: 0.5rem;
      &.left {
        color: #fff;
        background: #fd5522;
      }
      &.right {
        color: #fd5522;
        border: 1px solid #fd5522;
        background: #fff;
      }
    }
  }
}
</style>