Update: 登出時呼叫 API logout

Tomas

2023-08-14 7521c6641773e25c2ebefeb228fa8733856a849e

 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="isShowNotification"
        class="icon-bell text--dark-blue cursor--pointer fix-chrome-click--issue"
        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"
@@ -54,6 +57,7 @@
  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
@@ -124,7 +128,7 @@
      {
        authorityOfRoleList: [Role.NOT_LOGIN, Role.USER],
        routeUrl: '/faq',
        title: 'F&Q 常見問題',
        title: 'FAQ 常見問題',
      },
      {
        authorityOfRoleList: [Role.USER, Role.ADMIN],
@@ -163,8 +167,10 @@
    }

    logout(): void {
      this.storageClear();
      _.isEqual(this.$route.name, 'index') ? location.reload() : this.$router.push('/');
      loginService.logout().then(() => {
        this.storageClear();
        _.isEqual(this.$route.name, 'index') ? location.reload() : this.$router.push('/');
      });
    }

    get loginRole(): Role {
@@ -177,6 +183,12 @@
      }
      if (this.isAdminLogin) {
        return this.notificationList.length
      }
    }

    get isNewNotification() {
      if (this.currentRole) {
        return this.notificationList.filter(item => !item.readDate).length;
      }
    }

@@ -245,6 +257,7 @@

      i {
        padding: 0px 15px;
        @extend .fix-chrome-click--issue;

        @media screen and (max-width: 352px) {
          padding: 0px 10px;
@@ -257,6 +270,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;
        }
      }
    }
  }