shop-pc/layouts/module/header/HeaderInfoBar.vue

<template>
  <div class="info-bar-header">
    <div
      class="info-bar-header-wrap layout-center flex flex-between flex-middle"
    >
      <div class="header-wrap__logo">马士兵严选欢迎你！</div>
      <div class="header-wrap__content flex flex-middle">
        <div class="header-wrap-content__login">
          <!-- 已登录 -->
          <el-dropdown
            v-if="token"
            @visible-change="menuVisible = $event"
            @command="handleCommandClick"
          >
            <div
              class="wrap-content-login__info flex flex-middle flex-center"
              :class="{ 'wrap-content-login__info--hover': menuVisible }"
            >
              <span>你好，{{ userInfo.nickname }}</span>
              <img class="content-login-info__logo" :src="menuIcon" />
            </div>
            <el-dropdown-menu slot="dropdown" class="dropdown-menu-self">
              <div class="menu-item__wrap flex flex-middle">
                <img class="menu-item-wrap__avatar" :src="userInfo.avatar" />
                <span>{{ userInfo.nickname }}</span>
              </div>
              <div class="menu-item__line"></div>
              <el-dropdown-item
                class="flex flex-between flex-middle"
                v-for="item in menuList"
                :key="item.value"
                :command="item.value"
              >
                <span> {{ item.label }}</span>
                <img src="@/static/images/layout/icon-arrow.png" />
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- 未登录 -->
          <div v-else class="wrap-content-login__text flex">
            <span>请先</span>
            <span class="content-login-text--light" @click="onLoginClick">
              登录/注册
            </span>
          </div>
        </div>
        <template>
          <div v-if="!menuVisible" class="header-wrap-content--line"></div>
          <div
            class="header-wrap-content__common flex flex-middle"
            @click="onJumpPersonalPage('message')"
          >
            <img src="@/static/images/layout/icon-message.png" />
            <span>消息</span>
            <div class="wrap-content-message__tip">33</div>
          </div>
        </template>
        <div class="header-wrap-content--line"></div>
        <div
          class="header-wrap-content__common flex flex-middle"
          @click="onJumpPersonalPage('order')"
        >
          <img src="@/static/images/layout/icon-order.png" />
          <span>我的订单</span>
        </div>
        <div class="header-wrap-content--line"></div>
        <div class="header-wrap-content__common flex flex-middle">
          <img src="@/static/images/layout/icon-phone.png" />
          <span>下载app</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
const MENU_VALUE = {
  PERSONAL: 1,
  ADDRESS: 2,
  LOGON_OUT: 3,
};

export default {
  name: "HeaderInfoBar",
  data() {
    return {
      menuVisible: false,
      menuList: [
        {
          label: "个人中心",
          value: MENU_VALUE.PERSONAL,
        },
        {
          label: "收货地址",
          value: MENU_VALUE.ADDRESS,
        },
        {
          label: "退出登录",
          value: MENU_VALUE.LOGON_OUT,
        },
      ],
    };
  },
  computed: {
    ...mapState(["userInfo", "token"]),
    menuIcon() {
      return this.menuVisible
        ? require("@/static/images/layout/icon-up-light.png")
        : require("@/static/images/layout/icon-up.png");
    },
  },
  methods: {
    onLoginClick() {
      this.$isLoginValidate();
    },
    handleCommandClick(event) {
      switch (event) {
        case MENU_VALUE.PERSONAL:
          this.$router.push("/account");
          break;
        case MENU_VALUE.ADDRESS:
          this.$router.push("/account");
          break;
        case MENU_VALUE.LOGON_OUT:
          this.$store.commit("setLoginOut");
      }
    },

    // 跳转个人中心页面
    onJumpPersonalPage(type) {
      this.$router.push(`/account?type=${type}`);
    },
  },
};
</script>
<style lang="scss">
.dropdown-menu-self {
  width: 200px;
  margin-top: 0 !important;
  padding-bottom: 0;
  .popper__arrow {
    display: none;
  }
  .el-dropdown-menu__item:hover {
    background: #f8f9fb;
    color: #666666;
  }
  .el-dropdown-menu__item {
    height: 42px;
    font-size: 14px;
    img {
      width: 8px;
      height: 14px;
    }
  }
  .menu-item__wrap {
    padding: 16px 24px;
    font-size: 14px;
    .menu-item-wrap__avatar {
      width: 50px;
      height: 50px;
      margin-right: 13px;
      border-radius: 50%;
    }
  }
  .menu-item__line {
    width: 100%;
    height: 1px;
    background: #eeeeee;
    border-radius: 0px 0px 0px 0px;
  }
}
</style>
<style lang="scss" scoped>
.info-bar-header {
  height: 30px;
  color: #999999;
  background: #f1f1f1;
  border-radius: 0px 0px 0px 0px;
  .info-bar-header-wrap {
    height: 100%;
    width: 1200px;
    margin: 0 auto;
    .header-wrap__content {
      .header-wrap-content__login {
        .wrap-content-login__text {
          padding: 0 18px;
          .content-login-text--light {
            margin-left: 6px;
            color: #ff875b;
            cursor: pointer;
          }
        }
        .wrap-content-login__info--hover {
          background: #ffffff !important;
          color: #ff875b;
        }
        .wrap-content-login__info {
          position: relative;
          padding: 0 18px;
          height: 30px;
          cursor: pointer;
          .content-login-info__logo {
            width: 8px;
            height: 4px;
            margin-left: 4px;
          }
        }
      }
      .wrap-content-message__tip {
        min-width: 14px;
        height: 14px;
        padding: 0 3px;
        line-height: 14px;
        font-size: 10px;
        color: #ffffff;
        text-align: center;
        background: #ff512b;
        border-radius: 50%;
        margin-left: 4px;
      }
      .header-wrap-content--line {
        width: 1px;
        height: 10px;
        background: #d8d8d8;
      }
      .header-wrap-content__common {
        cursor: pointer;
        padding: 0 18px;
        img {
          width: 14px;
          height: 14px;
          margin-right: 4px;
        }
      }
    }
  }
}
</style>