保誠-保戶業務員媒合平台
HelenHuang
2022-06-09 9bdb95c9e34cef640534e5e5a1e2225a80442000
PAMapp/components/NavBar.vue
@@ -8,10 +8,13 @@
    </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';
  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],
@@ -120,6 +140,16 @@
        title: '顧問登入',
      },
    ];
    //////////////////////////////////////////////////////////////////////
    @Watch('$route', {immediate: true})
    onRouterChange() {
        if (this.currentRole) {
          this.storeMyPersonalNotification();
          this.storeMyAppointmentReviewLog();
        }
    }
    //////////////////////////////////////////////////////////////////////
@@ -142,6 +172,21 @@
    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 +254,7 @@
      i {
        padding: 0px 15px;
        @extend .fix-chrome-click--issue;
        @media screen and (max-width: 352px) {
          padding: 0px 10px;
@@ -221,6 +267,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;
        }
      }
    }
  }