From db15612798841319bafcb3ed4e77c7c013b9446f Mon Sep 17 00:00:00 2001
From: jack <jack.su@pollex.com.tw>
Date: 星期三, 25 十二月 2024 15:39:30 +0800
Subject: [PATCH] [UPDATE] 新增顧問登入OTP流程和文件

---
 PAMapp/components/NavBar.vue |   87 +++++++++++++++++++++++++++++++++++++------
 1 files changed, 74 insertions(+), 13 deletions(-)

diff --git a/PAMapp/components/NavBar.vue b/PAMapp/components/NavBar.vue
index 3754bfb..992f570 100644
--- a/PAMapp/components/NavBar.vue
+++ b/PAMapp/components/NavBar.vue
@@ -3,15 +3,18 @@
     <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
-        v-if="currentRole"
-        class="icon-bell text--dark-blue cursor--pointer fix-chrome-click--issue"
+        v-if="isShowNotification"
+        class="icon-bell text--dark-blue cursor--pointer"
         @click="$router.push('/notification')"
-      ></i>
+      >
+        <span :class="{'newNotification': isNewNotification}"></span>
+      </i>
+
         <el-dropdown :class="{'is-open':isOpenDropdown}"
           ref="dropdown"
           trigger="click"
@@ -49,9 +52,11 @@
 
 <script lang="ts">
   import { Vue, Component } from 'vue-property-decorator';
-  import { namespace } from 'nuxt-property-decorator';
+  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';
+  import loginService from '~/shared/services/login.service'
 
   const roleStorage = namespace('localStorage');
   @Component
@@ -71,6 +76,21 @@
 
     @roleStorage.Getter
     isAdminLogin!: boolean;
+
+    @roleStorage.Getter
+    isUserLogin!: boolean;
+
+    @Action
+    storeMyPersonalNotification!: () => void;
+
+    @State
+    notificationList!: NotificationList[];
+
+    @Action
+    storeMyAppointmentReviewLog!: () => void;
+
+    @State
+    unReviewLogList!: AppointmentLog[];
 
     isOpenDropdown = false;
 
@@ -107,7 +127,7 @@
       {
         authorityOfRoleList: [Role.NOT_LOGIN, Role.USER],
         routeUrl: '/faq',
-        title: 'F&Q 撣貉����',
+        title: 'FAQ 撣貉����',
       },
       {
         authorityOfRoleList: [Role.USER, Role.ADMIN],
@@ -123,25 +143,52 @@
 
     //////////////////////////////////////////////////////////////////////
 
+    @Watch('$route', {immediate: true})
+    onRouterChange() {
+        if (this.currentRole) {
+          this.storeMyPersonalNotification();
+          this.storeMyAppointmentReviewLog();
+        }
+    }
+
+    //////////////////////////////////////////////////////////////////////
+
     routerNavigateTo(url: string): void {
       (this.$refs.dropdown as any).hide();
-      _.isEqual(url,'')
+      url === ''
         ? this.logout()
-        : this.$router.push(_.isEqual(url,'/agentInfo/') ? url+this.consultantId :url);
+        : 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);
     }
 
     logout(): void {
-      this.storageClear();
-      _.isEqual(this.$route.name, 'index') ? location.reload() : this.$router.push('/');
+      loginService.logout().then(() => {
+        this.storageClear();
+        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
+      }
+    }
+
+    get isNewNotification() {
+      if (this.currentRole) {
+        return this.notificationList.filter(item => !item.readDate).length;
+      }
     }
 
   }
@@ -209,6 +256,7 @@
 
       i {
         padding: 0px 15px;
+        @extend .fix-chrome-click--issue;
 
         @media screen and (max-width: 352px) {
           padding: 0px 10px;
@@ -221,6 +269,19 @@
           margin: 0px 10px;
         }
       }
+
+      .icon-bell {
+        position: relative;
+        .newNotification {
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          top: 0;
+          right: 15px;
+          border-radius: 50px;
+          background: $PRIMARY_RED;
+        }
+      }
     }
   }
 

--
Gitblit v1.8.0