From 3dd41875f8a623bda069ab4f9c1e2fd6c757c44e Mon Sep 17 00:00:00 2001 From: wayne <wayne8692wayne8692@gmail.com> Date: 星期六, 22 一月 2022 17:06:47 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/Phase3' into Phase3 --- PAMapp/components/NavBar.vue | 112 ++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 96 insertions(+), 16 deletions(-) diff --git a/PAMapp/components/NavBar.vue b/PAMapp/components/NavBar.vue index ca0cc1e..13c53a4 100644 --- a/PAMapp/components/NavBar.vue +++ b/PAMapp/components/NavBar.vue @@ -7,13 +7,29 @@ <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> --> + <i + v-if="isShowNotification" + 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> + <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,18 +49,47 @@ <script lang="ts"> import { Vue, Component } from 'vue-property-decorator'; - import { namespace } from 'nuxt-property-decorator'; - import { Role } from '~/shared/models/enum/role'; + import { Action, namespace, State, Watch } from 'nuxt-property-decorator'; + import { Role } from '~/shared/models/enum/Role'; import * as _ from 'lodash'; + import { NotificationList } from '~/shared/models/reviews.model'; + import { AppointmentLog } from '~/shared/models/appointment.model'; const roleStorage = namespace('localStorage'); @Component export default class NavBar extends Vue { - @roleStorage.Mutation storageClear!: () => void; - @roleStorage.Getter idToken!: string | null; - @roleStorage.Getter currentRole!: string | null; - @roleStorage.Getter consultantId!: 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], @@ -92,12 +137,26 @@ title: '憿批��', }, ]; - login_role = Role.NOT_LOGIN; - isOpenDropdown = false; - get loginRole(): Role { - return this.idToken && this.currentRole ? (this.currentRole as Role): Role.NOT_LOGIN; + ////////////////////////////////////////////////////////////////////// + + @Watch('$route', {immediate: true}) + onRouterChange() { + this.getNotificationAndReviewLog(); } + + private getNotificationAndReviewLog() { + if (this.isUserLogin) { + this.storeMyPersonalNotification(); + this.storeMyAppointmentReviewLog(); + } + + if (this.isAdminLogin) { + this.storeMyPersonalNotification(); + } + } + + ////////////////////////////////////////////////////////////////////// routerNavigateTo(url: string): void { (this.$refs.dropdown as any).hide(); @@ -115,6 +174,20 @@ 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; + } + + get isShowNotification() { + if (this.isUserLogin) { + return this.notificationList.length || this.unReviewLogList.length; + } + if (this.isAdminLogin) { + return this.notificationList.length + } + } + } </script> @@ -185,6 +258,13 @@ padding: 0px 10px; } } + + .admin-avatar { + margin: 0px 15px; + @media screen and (max-width: 352px) { + margin: 0px 10px; + } + } } } @@ -205,11 +285,11 @@ 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; } -- Gitblit v1.8.0