<template>
|
<header class="pam-header">
|
<img class="pam-header__logo" src="~/assets/images/logo.png" alt="" @click="$router.push('/')">
|
<div class="pam-header__title">
|
我的幸福我作主
|
<div class="pam-header__sub-title">
|
預約我的幸福守護者
|
</div>
|
</div>
|
<div class="pam-header__action-bar">
|
<i class="icon-bell text--dark-blue cursor--pointer" @click="$router.push('/notification')"></i>
|
<!-- <el-dropdown @command="handleCommand">
|
<i class="icon-avatar text--dark-blue cursor--pointer"></i>
|
<el-dropdown-menu slot="dropdown" class="pam-header__dropdown">
|
<li class="pam-header__dropdown-item" @click="$router.push('/login')">登入</li>
|
<li class="pam-header__dropdown-item" @click="$router.push('/accountSetting')">個人帳號設定</li>
|
<li class="pam-header__dropdown-item" @click="$router.push('/record/contactRecord')">查看紀錄</li>
|
<li class="pam-header__dropdown-item" @click="$router.push('/myConsultantList/consultantList')">我的顧問清單</li>
|
<li class="pam-header__dropdown-item">登出</li>
|
<li class="pam-header__dropdown-item pam-header__dropdown-divider" @click="$router.push('/consultantLogin')">顧問登入</li>
|
</el-dropdown-menu>
|
</el-dropdown> -->
|
|
<el-dropdown>
|
<i class="icon-avatar text--dark-blue cursor--pointer"></i>
|
<el-dropdown-menu slot="dropdown" class="pam-header__dropdown">
|
<template v-for="(navbarItem,index) in navBarList">
|
<li class="pam-header__dropdown-item"
|
: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,Role.USER],
|
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 {
|
height: 53px;
|
display: flex;
|
align-items: center;
|
.pam-header__logo {
|
height: 100%;
|
}
|
.pam-header__title {
|
flex: 1;
|
margin: 10px 0;
|
padding-left: 10px;
|
border-left: 1px solid #CCCCCC;
|
font-size: 16px;
|
font-weight: bold;
|
color: $PRUDENTIAL_GREY;
|
letter-spacing: 3.6px;
|
flex-basis: 140px;
|
.pam-header__sub-title {
|
padding-top: 2px;
|
font-size: 13px;
|
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: 0 15px;
|
@media screen and (max-width: 320px) {
|
padding: 0 5px;
|
}
|
}
|
}
|
}
|
</style>
|