<template>
|
<header class="pam-header">
|
<div class="pam-header__logo"
|
@click="pushRouterByLoginRole"></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">
|
<i 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" ></i>
|
<el-dropdown-menu
|
class="pam-header__dropdown">
|
<template v-for="(item,index) in navBarList">
|
<el-dropdown-item :key="index"
|
v-if="item.authorityOfRoleList.includes(loginRole)"
|
class="fix-chrome-click--issue"
|
:class="{'pam-header__dropdown-divider':item.title === '顧問登入'}"
|
:command="item.routeUrl">
|
{{item.title}}
|
</el-dropdown-item>
|
</template>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</header>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component } from 'vue-property-decorator';
|
import { namespace } from 'nuxt-property-decorator';
|
import * as _ from 'lodash';
|
const localStorage = namespace('localStorage');
|
@Component
|
export default class NavBar extends Vue {
|
@localStorage.Mutation storageClear!: () => void;
|
@localStorage.Getter idToken!: string | null;
|
@localStorage.Getter currentRole!: string | null;
|
|
navBarList = [{
|
authorityOfRoleList: [Role.NOT_LOGIN],
|
routeUrl: '/login',
|
title: '登入',
|
},
|
{
|
authorityOfRoleList: [Role.USER],
|
routeUrl: '/accountSetting',
|
title: '個人帳號設定',
|
},
|
{
|
authorityOfRoleList: [Role.ADMIN],
|
routeUrl: '/notFinish',
|
title: '查看帳號資訊',
|
},
|
{
|
authorityOfRoleList: [Role.USER, Role.ADMIN],
|
routeUrl: '/record/contactRecord',
|
title: '查看紀錄',
|
},
|
{
|
authorityOfRoleList: [Role.NOT_LOGIN, Role.USER],
|
routeUrl: '/myConsultantList/consultantList',
|
title: '我的顧問清單',
|
},
|
{
|
authorityOfRoleList: [Role.USER, Role.ADMIN],
|
routeUrl: '',
|
title: '登出',
|
},
|
{
|
authorityOfRoleList: [Role.NOT_LOGIN],
|
routeUrl: '/consultantLogin',
|
title: '顧問登入',
|
},
|
];
|
login_role = Role.NOT_LOGIN;
|
isOpenDropdown = false;
|
|
get loginRole(): string {
|
return this.idToken && this.currentRole ? this.currentRole : Role.NOT_LOGIN;
|
}
|
|
routerNavigateTo(url: string): void {
|
this.isOpenDropdown = !this.isOpenDropdown;
|
(this.$refs.dropdown as any).hide();
|
_.isEqual(url, '') ? this.fakeLogout() : this.$router.push(url);
|
}
|
|
pushRouterByLoginRole(): void {
|
const link = _.isEqual(this.currentRole, Role.ADMIN) ? '/myAppointmentList/appointmentList' : '/';
|
this.$router.push(link);
|
}
|
// TODO: 僅OTP認證開發前 暫時使用
|
fakeLogout(): void {
|
this.storageClear();
|
_.isEqual(this.$route.name, 'index') ? location.reload() : this.$router.push('/');
|
}
|
}
|
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 {
|
position: relative;
|
display: flex;
|
height: 100%;
|
font-size: 24px;
|
font-weight: bold;
|
align-items: center;
|
justify-content: space-around;
|
|
i {
|
padding: 0px 15px;
|
|
@media screen and (max-width: 352px) {
|
padding: 0px 10px;
|
}
|
}
|
}
|
}
|
|
.el-dropdown{
|
height: 100%;
|
display: flex;
|
align-items: center;
|
&.is-open {
|
background-color: $PEACH;
|
i {
|
color: $PRIMARY_WHITE;
|
}
|
}
|
}
|
|
@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>
|
