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 class="member-text" :title="enterprise.enName"><i class="fa fa-map-marker"></i>&nbsp;{{ enterprise.enName }}</span>
                  <a class="pull-right" @click="toggleEnterprises()" v-if="user.data.enterprises && user.data.enterprises.length > 0">
                    {{ showEnterprises ? '取消' : '切换' }}
                  </a>
                </li>
                <li class="menu-item"
                    v-for="en in user.data.enterprises"
                    v-if="showEnterprises && en.uu!=enterprise.uu">
                  <a @click="switchEnterprise(en)" :title="en.enName">{{ en.enName }}</a>
                </li>
                <li class="menu-item"  v-if="showEnterprises">
                  <a @click="switchEnterprise({uu: 0})"><span v-text="user.data.userName"></span>（个人账户）</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>-->
            <!--<a class="item" :href="url + '/user'">买家中心</a>
            <a class="item" :href="url + '/vendor'">卖家中心</a>-->
            <a class="item" href="/user#/index">买家中心</a>
            <a class="item" href="/vendor#/index" v-if="enterprise.uu">卖家中心</a>
          </template>
          <template v-else>
            <a class="item" @click="onLoginClick()">登录</a>
            <a class="item" @click="onRegisterClick">注册</a>
            <nuxt-link class="item" :to="'/'">商城首页</nuxt-link>
          </template>
          <nuxt-link class="item" to="/help/home">帮助中心</nuxt-link>
          <!--<a class="item" href="/help#/home">帮助中心</a>-->
        </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) || {enName: this.user.data.userName + '（个人账户）'}
        } else {
          return {enName: this.user.data.userName + '（个人账户）'}
        }
      },
      url () {
        return this.$store.state.option.url
      }
    },
    methods: {
      logout () {
        this.$http.get('/logout/crossBefore').then(response => {
          if (response.data) {
            window.location.href = response.data.logoutUrl + encodeURIComponent(window.location.host + response.data.baseUrl)
          }
        })
      },
      onLoginClick () {
        this.$http.get('/login/page', {params: {returnUrl: window.location.href}}).then(response => {
          if (response.data) {
            window.location.href = response.data.content + '&baseUrl=' + encodeURIComponent(window.location.host + response.data.baseUrl)
          }
        })
        // TODO 待Account Center改版
      },
      onRegisterClick () {
        this.$http.get('/register/page').then(response => {
          if (response.data) {
            window.location.href = response.data.content
          }
        })
      },
      toggleEnterprises () {
        this.showEnterprises = !this.showEnterprises
      },
      // 切换当前企业
      switchEnterprise (en) {
        this.toggleEnterprises()
        this.$http.get(`/user/authentication/${en.uu}`).then(() => {
          this.$store.dispatch('loadUserInfo')
//          window.location.reload()
        })
      }
    },
    beforeMount () {
      // this.$store.dispatch('loadUserInfo')
    }
  }
</script>
<style lang="scss" scoped>
  .header .navbar{
    min-height: inherit;
    border-radius: 0;
  }
  .header .navbar .navbar-container .navbar-right .dropdown .dropdown-menu li span,.header .navbar .navbar-container .navbar-right .dropdown .dropdown-menu li a{
    font-size: 12px;
  }
  .header .navbar .navbar-container .navbar-right .dropdown .dropdown-menu .menu-item a{
    width: 100%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 30px;
  }
  .header .navbar .navbar-container .navbar-right .dropdown .dropdown-menu .menu-item{
    height: 30px;
  }
  .dropdown-menu>li>a{
    padding: 0;
    line-height: 30px;
  }
  .dropdown-menu>li a:hover{
    background: none;
    text-decoration: underline !important;
  }
  .dropdown-menu>li>a.pull-right{
    padding: 0;
    color: #1162a4 !important;
    line-height: inherit;
  }
  .member-text{
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
  }
  @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 {
              min-width: 220px;
              margin-left: -1px;
              border: $border;
              border-top: none;
              padding: 1em;
              margin:0;
              border: none;
              border-radius: 0;

              .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>