mall-web-ssr/components/default/Header.vue

<template>
  <header class="header">
    <nav class="navbar">
      <div class="navbar-container container">
        <div class="navbar-header">
          <a href="http://www.ubtob.com" class="item navbar-link">
            <img src="/images/logo/uas.png" class="navbar-logo">
            <span class="navbar-slogan">进入优软云</span>
          </a>
        </div>
        <div class="navbar-right">
          <template v-if="user.logged">
            <div class="item-wrap dropdown">
              <div class="item dropdown-toggle">
                欢迎您，{{ user.data.userName }}&nbsp;<a @click="logout()">[退出]</a>
              </div>
              <ul class="dropdown-menu">
                <li class="menu-item-first">
                  <span>{{ enterprise.enName }}</span>
                  <a class="pull-right" @click="toggleEnterprises()" v-if="user.data.enterprises.length > 1">
                    {{ showEnterprises ? '取消' : '切换' }}
                  </a>
                </li>
                <li class="menu-item"
                    v-for="en in user.data.enterprises"
                    v-if="showEnterprises && en.enName!=enterprise.enName">
                  <a @click="switchEnterprise(en)">{{ en.enName }}</a>
                </li>
              </ul>
            </div>
            <nuxt-link class="item" :to="'/'">商城首页</nuxt-link>
            <nuxt-link class="item" to="/user">买家中心</nuxt-link>
            <nuxt-link class="item" to="/vendor">卖家中心</nuxt-link>
          </template>
          <template v-else>
            <a class="item" @click="onLoginClick()">登录</a>
            <a class="item" href="http://account.ubtob.com/sso/register">注册</a>
            <nuxt-link class="item" :to="'/'">商城首页</nuxt-link>
          </template>
          <nuxt-link class="item" to="/help/home">帮助中心</nuxt-link>
        </div>
      </div>
    </nav>
  </header>
</template>
<script>
  export default {
    name: 'header',
    data () {
      return {
        showEnterprises: false
      }
    },
    computed: {
      user () {
        return this.$store.state.option.user
      },
      enterprise () {
        let ens = this.user.data.enterprises
        if (ens && ens.length) {
          return ens.find(item => item.current) || ens[0]
        }
        return {}
      }
    },
    methods: {
      logout () {
        this.$router.push('/auth/logout')
      },
      onLoginClick () {
        this.$http.get('/login/page').then(response => {
          if (response.data) {
            this.$router.push('/auth/login')
          }
        })
        // TODO 待Account Center改版
      },
      toggleEnterprises () {
        this.showEnterprises = !this.showEnterprises
      },
      // 切换当前企业
      switchEnterprise (en) {
        this.toggleEnterprises()
        this.$http.get(`/user/authentication/${en.uu}`).then(() => {
          this.$store.dispatch('loadUserInfo')
        })
      }
    },
    beforeMount () {
      // this.$store.dispatch('loadUserInfo')
    }
  }
</script>
<style lang="scss" scoped>
  .header .navbar{
    min-height: inherit;
    border-radius: 0;
  }
  @import '~assets/scss/mixins';
  @import '~assets/scss/variables';

  $nav-height: 36px;

  .header {
    height: $nav-height;

    .navbar {
      width: 100%;
      height: 100%;
      font-size: $font-size-small;
      background-color: $black-light;

      .navbar-container {

        .item-wrap {
          display: inline-block;
        }

        .item {
          color: $grey;
          display: inline-block;
          height: $nav-height;
          line-height: $nav-height;
        }

        a {
          color: $grey;
        }

        .navbar-header {
          float: left;

          .navbar-logo {
            margin-bottom: 2px;
          }

          .navbar-slogan {
            margin-left: $sm-pad;
          }

        }

        .navbar-right {
          float: right;

          .item {
            padding: 0 $pad;
          }

          .dropdown {

            .dropdown-toggle {
              line-height: $nav-height;

              a:hover {
                color: $red !important;
              }
            }

            .dropdown-menu {
              width: 220px;
              margin-left: -1px;
              border: $border;
              border-top: none;
              padding: 1em;

              .menu-item-first {
                margin-bottom: 10px;
              }

              .menu-item {
                line-height: 30px;
                a {
                  color: $accent;
                }
              }
            }

            &:hover {
              background-color: $white;

              .dropdown-toggle {
                color: $text;
              }
              a {
                color: $text
              }
            }
          }
        }
      }
    }
  }
</style>