From b4d6944076f1df6eedaae35c4c2a7072fe988e8a Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期二, 30 四月 2024 15:34:02 +0800
Subject: [PATCH] update: package-lock.json
---
PAMapp/components/NavBar.vue | 184 ++++++++++++++++++++++++++++++++++++---------
1 files changed, 146 insertions(+), 38 deletions(-)
diff --git a/PAMapp/components/NavBar.vue b/PAMapp/components/NavBar.vue
index 85e5ac2..992f570 100644
--- a/PAMapp/components/NavBar.vue
+++ b/PAMapp/components/NavBar.vue
@@ -3,17 +3,36 @@
<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 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}"
+ <i
+ v-if="isShowNotification"
+ class="icon-bell text--dark-blue cursor--pointer"
+ @click="$router.push('/notification')"
+ >
+ <span :class="{'newNotification': isNewNotification}"></span>
+ </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>
+ <div
+ @click="isOpenDropdown =!isOpenDropdown"
+ @blur="isOpenDropdown =false">
+ <template v-if="isAdminLogin">
+ <UiAvatar
+ :size="30"
+ :agentNo="consultantId"
+ class="admin-avatar"
+ ></UiAvatar>
+ </template>
+ <template v-else>
+ <i class="icon-avatar text--dark-blue cursor--pointer fix-chrome-click--issue"></i>
+ </template>
+ </div>
<el-dropdown-menu
class="pam-header__dropdown">
<template v-for="(item,index) in navBarList">
@@ -33,19 +52,52 @@
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
- import { namespace } from 'nuxt-property-decorator';
- import * as _ from 'lodash';
- const localStorage = namespace('localStorage');
+ import { Action, namespace, State, Watch } from 'nuxt-property-decorator';
+ import { Role } from '~/shared/models/enum/Role';
+ import { NotificationList } from '~/shared/models/reviews.model';
+ import { AppointmentLog } from '~/shared/models/appointment.model';
+ import loginService from '~/shared/services/login.service'
+
+ const roleStorage = namespace('localStorage');
@Component
export default class NavBar extends Vue {
- @localStorage.Mutation storageClear!: () => void;
- @localStorage.Getter idToken!: string | null;
- @localStorage.Getter currentRole!: string | null;
+
+ @roleStorage.Getter
+ idToken!: string | null;
+
+ @roleStorage.Getter
+ currentRole!: string | null;
+
+ @roleStorage.Getter
+ consultantId!: string | null;
+
+ @roleStorage.Mutation
+ storageClear!: () => void;
+
+ @roleStorage.Getter
+ isAdminLogin!: boolean;
+
+ @roleStorage.Getter
+ isUserLogin!: boolean;
+
+ @Action
+ storeMyPersonalNotification!: () => void;
+
+ @State
+ notificationList!: NotificationList[];
+
+ @Action
+ storeMyAppointmentReviewLog!: () => void;
+
+ @State
+ unReviewLogList!: AppointmentLog[];
+
+ isOpenDropdown = false;
navBarList = [{
authorityOfRoleList: [Role.NOT_LOGIN],
routeUrl: '/login',
- title: '��',
+ title: '�� | 閮餃��',
},
{
authorityOfRoleList: [Role.USER],
@@ -53,19 +105,29 @@
title: '�犖撣唾�身摰�',
},
{
- authorityOfRoleList: [Role.ADMIN],
- routeUrl: '/notFinish',
+ authorityOfRoleList:[Role.ADMIN],
+ routeUrl: '/agentInfo/',
title: '���董�����',
},
{
- authorityOfRoleList: [Role.USER, Role.ADMIN],
- routeUrl: '/record/contactRecord',
+ 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: 'FAQ 撣貉����',
},
{
authorityOfRoleList: [Role.USER, Role.ADMIN],
@@ -78,32 +140,57 @@
title: '憿批��',
},
];
- login_role = Role.NOT_LOGIN;
- isOpenDropdown = false;
- get loginRole(): string {
- return this.idToken && this.currentRole ? this.currentRole : Role.NOT_LOGIN;
+ //////////////////////////////////////////////////////////////////////
+
+ @Watch('$route', {immediate: true})
+ onRouterChange() {
+ if (this.currentRole) {
+ this.storeMyPersonalNotification();
+ this.storeMyAppointmentReviewLog();
+ }
}
+
+ //////////////////////////////////////////////////////////////////////
routerNavigateTo(url: string): void {
(this.$refs.dropdown as any).hide();
- _.isEqual(url, '') ? this.fakeLogout() : this.$router.push(url);
+ url === ''
+ ? this.logout()
+ : this.$router.push(url === '/agentInfo/' ? url+this.consultantId : url);
}
pushRouterByLoginRole(): void {
- const link = _.isEqual(this.currentRole, Role.ADMIN) ? '/myAppointmentList/appointmentList' : '/';
+ const link = this.currentRole === Role.ADMIN ? '/myAppointmentList/appointmentList' : '/';
this.$router.push(link);
}
- // TODO: ��TP隤����� ���蝙�
- fakeLogout(): void {
- this.storageClear();
- _.isEqual(this.$route.name, 'index') ? location.reload() : this.$router.push('/');
+
+ logout(): void {
+ loginService.logout().then(() => {
+ this.storageClear();
+ this.$route.name === 'index' ? location.reload() : this.$router.push('/');
+ });
}
- }
- export enum Role {
- USER = 'user',
- ADMIN = 'admin',
- NOT_LOGIN = '',
+
+ get loginRole(): Role {
+ return this.idToken && this.currentRole ? (this.currentRole as Role): Role.NOT_LOGIN;
+ }
+
+ get isShowNotification() {
+ if (this.isUserLogin) {
+ return this.notificationList.length || this.unReviewLogList.length;
+ }
+ if (this.isAdminLogin) {
+ return this.notificationList.length
+ }
+ }
+
+ get isNewNotification() {
+ if (this.currentRole) {
+ return this.notificationList.filter(item => !item.readDate).length;
+ }
+ }
+
}
</script>
@@ -117,7 +204,7 @@
display: flex;
align-items: center;
background-color: $PRIMARY_WHITE;
- z-index: 3;
+ z-index: 6;
.pam-header__logo {
height: 30px;
@@ -169,9 +256,30 @@
i {
padding: 0px 15px;
+ @extend .fix-chrome-click--issue;
@media screen and (max-width: 352px) {
padding: 0px 10px;
+ }
+ }
+
+ .admin-avatar {
+ margin: 0px 15px;
+ @media screen and (max-width: 352px) {
+ margin: 0px 10px;
+ }
+ }
+
+ .icon-bell {
+ position: relative;
+ .newNotification {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ top: 0;
+ right: 15px;
+ border-radius: 50px;
+ background: $PRIMARY_RED;
}
}
}
@@ -187,25 +295,25 @@
color: $PRIMARY_WHITE;
}
}
- }
+ }
@include desktop {
.pam-header {
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;
}
.pam-header__title {
display: flex;
- justify-content: start;
+ justify-content: flex-start;
align-items: center;
border: none;
padding-left: 30px;
--
Gitblit v1.8.0