From 8ece1a33dd0776e8a3cc94d3ac4faf8c6f7ff03c Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期一, 17 一月 2022 10:08:26 +0800
Subject: [PATCH] add: TODO#134181 dateTimePicker
---
PAMapp/components/NavBar.vue | 251 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 249 insertions(+), 2 deletions(-)
diff --git a/PAMapp/components/NavBar.vue b/PAMapp/components/NavBar.vue
index 1ba5353..58a73cd 100644
--- a/PAMapp/components/NavBar.vue
+++ b/PAMapp/components/NavBar.vue
@@ -1,3 +1,250 @@
<template>
- <div>navbar</div>
-</template>
\ No newline at end of file
+ <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
+ 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>
+ <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 { Role } from '~/shared/models/enum/Role';
+ import * as _ from 'lodash';
+
+ const roleStorage = namespace('localStorage');
+ @Component
+ export default class NavBar extends Vue {
+
+ @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],
+ routeUrl: '/login',
+ title: '�� | 閮餃��',
+ },
+ {
+ authorityOfRoleList: [Role.USER],
+ routeUrl: '/accountSetting',
+ title: '�犖撣唾�身摰�',
+ },
+ {
+ authorityOfRoleList:[Role.ADMIN],
+ routeUrl: '/agentInfo/',
+ title: '���董�����',
+ },
+ {
+ authorityOfRoleList:[Role.ADMIN],
+ routeUrl: '/record',
+ title: '�������',
+ },
+ {
+ authorityOfRoleList: [Role.USER],
+ routeUrl: '/userReviewsRecord',
+ title: '�������',
+ },
+ {
+ authorityOfRoleList: [Role.NOT_LOGIN, Role.USER],
+ routeUrl: '/myConsultantList/consultantList',
+ title: '���“���',
+ },
+ {
+ authorityOfRoleList: [Role.NOT_LOGIN, Role.USER],
+ routeUrl: '/faq',
+ title: 'F&Q 撣貉����',
+ },
+ {
+ authorityOfRoleList: [Role.USER, Role.ADMIN],
+ routeUrl: '',
+ title: '��',
+ },
+ {
+ authorityOfRoleList: [Role.NOT_LOGIN],
+ routeUrl: '/consultantLogin',
+ title: '憿批��',
+ },
+ ];
+
+ //////////////////////////////////////////////////////////////////////
+
+ routerNavigateTo(url: string): void {
+ (this.$refs.dropdown as any).hide();
+ _.isEqual(url,'')
+ ? this.logout()
+ : this.$router.push(_.isEqual(url,'/agentInfo/') ? url+this.consultantId :url);
+ }
+
+ pushRouterByLoginRole(): void {
+ const link = _.isEqual(this.currentRole, Role.ADMIN) ? '/myAppointmentList/appointmentList' : '/';
+ this.$router.push(link);
+ }
+
+ logout(): void {
+ 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>
+
+<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: 6;
+
+ .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: flex-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>
--
Gitblit v1.8.0