TODO#139894 [ footer -最下方說明與保經代合作 ] 文案修改

HelenHuang

2022-06-09 9bdb95c9e34cef640534e5e5a1e2225a80442000

 PAMapp/components/NavBar.vue

@@ -7,13 +7,32 @@
      <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" ></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 { Action, namespace, State, Watch } from 'nuxt-property-decorator';
  import { Role } from '~/shared/models/enum/Role';
  import * as _ from 'lodash';
  const localStorage = namespace('localStorage');
  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 {
    @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,33 +140,55 @@
        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.isOpenDropdown = !this.isOpenDropdown;
      (this.$refs.dropdown as any).hide();
      _.isEqual(url, '') ? this.fakeLogout() : this.$router.push(url);
      _.isEqual(url,'')
        ? this.logout()
        : this.$router.push(_.isEqual(url,'/agentInfo/') ? url+this.consultantId :url);
    }

    pushRouterByLoginRole(): void {
      const link = _.isEqual(this.currentRole, Role.ADMIN) ? '/myAppointmentList/appointmentList' : '/';
      this.$router.push(link);
    }
    // TODO: 僅OTP認證開發前 暫時使用
    fakeLogout(): void {

    logout(): void {
      this.storageClear();
      _.isEqual(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>
@@ -118,7 +202,7 @@
    display: flex;
    align-items: center;
    background-color: $PRIMARY_WHITE;
    z-index: 3;
    z-index: 6;

    .pam-header__logo {
      height: 30px;
@@ -170,9 +254,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;
        }
      }
    }
@@ -188,25 +293,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;