| | |
| | | <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"> |
| | |
| | | <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], |
| | |
| | | title: '我的顧問清單', |
| | | }, |
| | | { |
| | | authorityOfRoleList: [Role.NOT_LOGIN, Role.USER], |
| | | routeUrl: '/faq', |
| | | title: 'F&Q 常見問題', |
| | | }, |
| | | { |
| | | authorityOfRoleList: [Role.USER, Role.ADMIN], |
| | | routeUrl: '', |
| | | title: '登出', |
| | |
| | | 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(); |
| | |
| | | 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> |
| | |
| | | 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; |
| | | } |