<template>
|
<header class="pam-header">
|
<div class="pam-header__logo" @click="$router.push('/')"></div>
|
<div class="pam-header__title">
|
<div class="pam-header__title--main">我的幸福我做主</div>
|
<div class="pam-header__title--sub">預約我的幸福守護者</div>
|
</div>
|
<div class="pam-header__action-bar" style="position:relaitive">
|
<i class="icon-bell text--dark-blue cursor--pointer fix-chrome-click--issue"
|
@click="$router.push('/notification')"></i>
|
<el-dropdown>
|
<i class="icon-avatar text--dark-blue cursor--pointer fix-chrome-click--issue"></i>
|
<el-dropdown-menu slot="dropdown"
|
class="pam-header__dropdown">
|
<template v-for="(navbarItem,index) in navBarList">
|
<li class="pam-header__dropdown-item fix-chrome-click--issue "
|
:class="{'pam-header__dropdown-divider':navbarItem.title === '顧問登入'}"
|
v-if="navbarItem.needRole.includes(loginRole)"
|
:key="index"
|
@click="linkTo(navbarItem.link)">
|
{{navbarItem.title}}
|
</li>
|
</template>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</header>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component } from 'vue-property-decorator';
|
import * as _ from 'lodash';
|
@Component
|
export default class NavBar extends Vue {
|
navBarList = [{
|
needRole: [Role.NOT_LOGIN],
|
link: '/login',
|
title: '登入',
|
},
|
{
|
needRole: [Role.USER],
|
link: '/accountSetting',
|
title: '個人帳號設定',
|
},
|
{
|
needRole: [Role.ADMIN],
|
link: '/notFinish',
|
title: '查看帳號資訊',
|
},
|
{
|
needRole: [Role.USER, Role.ADMIN],
|
link: '/record/contactRecord',
|
title: '查看紀錄',
|
},
|
{
|
needRole: [Role.NOT_LOGIN, Role.USER],
|
link: '/myConsultantList/consultantList',
|
title: '我的顧問清單',
|
},
|
{
|
needRole: [Role.USER, Role.ADMIN],
|
link: '',
|
title: '登出',
|
},
|
{
|
needRole: [Role.NOT_LOGIN],
|
link: '/consultantLogin',
|
title: '顧問登入',
|
},
|
];
|
get idToken(): string | null {
|
return localStorage.getItem('id_token');
|
}
|
get roleOfState(): string | null {
|
return localStorage.getItem('roleOfState');
|
}
|
get loginRole(): string {
|
return this.roleOfState && this.idToken ? this.roleOfState : Role.NOT_LOGIN;
|
}
|
|
linkTo(routerLink: string): void {
|
_.isEqual(routerLink, '') ? this.fakeLogout() : this.$router.push(routerLink);
|
}
|
|
|
// TODO: 僅OTP認證開發前 暫時使用
|
fakeLogout(): void {
|
localStorage.clear();
|
this.$router.go(0);
|
}
|
}
|
export enum Role {
|
USER = 'user',
|
ADMIN = 'admin',
|
NOT_LOGIN = '',
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
.pam-header {
|
position: fixed;
|
top: 0;
|
height: $MOB_NAV_BAR;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
background-color: $PRIMARY_WHITE;
|
z-index: 3;
|
|
.pam-header__logo {
|
height: 30px;
|
width: 115px;
|
margin: 0 10px;
|
background-image: url('~/assets/images/taiwan-logo.png');
|
background-repeat:no-repeat;
|
background-size: contain;
|
background-position: center;
|
}
|
.pam-header__title {
|
flex: 1;
|
flex-basis: 160px;
|
border-left:1px #CCCCCC solid;
|
padding-left:10px;
|
.pam-header__title--main {
|
font-size: 16px;
|
font-weight: bold;
|
color: $PRUDENTIAL_GREY;
|
letter-spacing:0.8px;
|
@media screen and (max-width: 352px) {
|
font-size: 12px;
|
}
|
}
|
.pam-header__title--sub {
|
padding-top: 2px;
|
font-size: 12px;
|
transform: scale(0.9);
|
-webkit-transform-origin-x: 0;
|
font-weight: bold;
|
color: $CORAL;
|
letter-spacing: 1.2px;
|
}
|
}
|
|
|
.pam-header__action-bar {
|
display: flex;
|
font-size: 24px;
|
font-weight: bold;
|
justify-content: space-around;
|
|
i {
|
padding: 0px 15px;
|
@media screen and (max-width: 352px) {
|
padding: 0px 10px;
|
}
|
}
|
}
|
}
|
|
@include desktop {
|
.pam-header {
|
height: $DESKTOP_NAV_BAR;
|
.pam-header__logo {
|
width: 180px;
|
height: 100%;
|
margin: 0;
|
background-image: url('~/assets/images/logo.png');
|
background-size: cover;
|
background-repeat:no-repeat;
|
background-position: center;
|
}
|
.pam-header__title {
|
display: flex;
|
justify-content: start;
|
align-items: center;
|
border: none;
|
padding-left: 30px;
|
.pam-header__title--main{
|
font-size: 30px;
|
letter-spacing: 1.5px;
|
}
|
.pam-header__title--sub{
|
font-size: 20px;
|
letter-spacing: 2px;
|
transform: none;
|
margin-left: 30px;
|
}
|
}
|
}
|
}
|
|
</style>
|
