保誠-保戶業務員媒合平台
Mila
2022-01-20 1d6d2d14200ed9432347ef8013e3fc117fa2161b
PAMapp/components/NavBar.vue
@@ -7,13 +7,20 @@
      <div class="pam-header__title--sub">預約我的幸福守護者</div>
    </div>
    <div class="pam-header__action-bar">
      <!-- <i class="icon-bell text--dark-blue cursor--pointer fix-chrome-click--issue"
        @click="$router.push('/notification')"></i> -->
      <i
        v-if="currentRole"
        class="icon-bell text--dark-blue cursor--pointer fix-chrome-click--issue"
        @click="$router.push('/notification')"
      ></i>
        <el-dropdown :class="{'is-open':isOpenDropdown}"
          ref="dropdown"
          trigger="click"
          @command="routerNavigateTo">
          <i class="icon-avatar text--dark-blue cursor--pointer fix-chrome-click--issue" @click="isOpenDropdown =!isOpenDropdown" @blur="isOpenDropdown =false"></i>
          <i
            class="icon-avatar text--dark-blue cursor--pointer fix-chrome-click--issue"
            @click="isOpenDropdown =!isOpenDropdown"
            @blur="isOpenDropdown =false"
          ></i>
          <el-dropdown-menu
            class="pam-header__dropdown">
            <template v-for="(item,index) in navBarList">
@@ -34,17 +41,20 @@
<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator';
  import { namespace } from 'nuxt-property-decorator';
  import { Role } from '~/assets/ts/models/enum/Role';
  import { Role } from '~/shared/models/enum/Role';
  import * as _ from 'lodash';
  const roleStorage = namespace('localStorage');
  @Component
  export default class NavBar extends Vue {
    @roleStorage.Mutation storageClear!: () => void;
    @roleStorage.Getter idToken!: string | null;
    @roleStorage.Getter currentRole!: string | null;
    @roleStorage.Getter consultantId!: string | null;
    @roleStorage.Mutation storageClear!: () => void;
    isOpenDropdown = false;
    navBarList = [{
        authorityOfRoleList: [Role.NOT_LOGIN],
@@ -77,6 +87,11 @@
        title: '我的顧問清單',
      },
      {
        authorityOfRoleList: [Role.NOT_LOGIN, Role.USER],
        routeUrl: '/faq',
        title: 'F&Q 常見問題',
      },
      {
        authorityOfRoleList: [Role.USER, Role.ADMIN],
        routeUrl: '',
        title: '登出',
@@ -87,12 +102,8 @@
        title: '顧問登入',
      },
    ];
    login_role = Role.NOT_LOGIN;
    isOpenDropdown = false;
    get loginRole(): Role {
      return this.idToken && this.currentRole ? (this.currentRole as Role): Role.NOT_LOGIN;
    }
    //////////////////////////////////////////////////////////////////////
    routerNavigateTo(url: string): void {
      (this.$refs.dropdown as any).hide();
@@ -110,6 +121,11 @@
      this.storageClear();
      _.isEqual(this.$route.name, 'index') ? location.reload() : this.$router.push('/');
    }
    get loginRole(): Role {
      return this.idToken && this.currentRole ? (this.currentRole as Role): Role.NOT_LOGIN;
    }
  }
</script>
@@ -200,11 +216,11 @@
      height: $DESKTOP_NAV_BAR;
      .pam-header__logo {
        width: 180px;
        height: 100%;
        width: 160px;
        height: 70px;
        margin: 0;
        background-image: url('~/assets/images/logo.png');
        background-size: cover;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }