From 647946725fdb607c8dbcabf30e4a5a94eab2561c Mon Sep 17 00:00:00 2001
From: wayne <wayne8692wayne8692@gmail.com>
Date: 星期二, 16 十一月 2021 18:17:53 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'

---
 PAMapp/components/NavBar.vue |  198 +++++++++++++++++++++++++++++++++++++++++++++++-
 1 files changed, 191 insertions(+), 7 deletions(-)

diff --git a/PAMapp/components/NavBar.vue b/PAMapp/components/NavBar.vue
index 2de27f4..02163a4 100644
--- a/PAMapp/components/NavBar.vue
+++ b/PAMapp/components/NavBar.vue
@@ -1,9 +1,193 @@
 <template>
-    <div>Header
-        <el-button @click="$router.push('/login')">��</el-button>
-        <el-button @click="$router.push('/notification')">���</el-button>
-        <el-button @click="$router.push('/accountSetting')">�犖撣唾�身摰�</el-button>
-        <el-button @click="$router.push('/record/contactRecord')">�������</el-button>
-        <el-button @click="$router.push('/contactList/consultantList')">���蝯⊥�</el-button>
+  <header class="pam-header">
+    <div class="pam-header__logo" @click="$router.push('/')"></div>
+    <div class="pam-header__title">
+      <div class="pam-header__title--main">���兢蝳��蜓</div>
+      <div class="pam-header__title--sub">�����兢蝳�風��</div>
     </div>
-</template>
\ No newline at end of file
+    <div class="pam-header__action-bar" style="position:relaitive">
+      <i class="icon-bell text--dark-blue cursor--pointer fix-chrome-click--issue"
+        @click="$router.push('/notification')"></i>
+      <el-dropdown>
+        <i class="icon-avatar text--dark-blue cursor--pointer fix-chrome-click--issue"></i>
+        <el-dropdown-menu slot="dropdown"
+          class="pam-header__dropdown">
+          <template v-for="(navbarItem,index) in navBarList">
+            <li class="pam-header__dropdown-item fix-chrome-click--issue "
+              :class="{'pam-header__dropdown-divider':navbarItem.title === '憿批��'}"
+              v-if="navbarItem.needRole.includes(loginRole)"
+              :key="index"
+              @click="linkTo(navbarItem.link)">
+              {{navbarItem.title}}
+            </li>
+          </template>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </header>
+</template>
+
+<script lang="ts">
+  import { Vue, Component } from 'vue-property-decorator';
+  import * as _ from 'lodash';
+  @Component
+  export default class NavBar extends Vue {
+    navBarList = [{
+        needRole: [Role.NOT_LOGIN],
+        link: '/login',
+        title: '��',
+      },
+      {
+        needRole: [Role.USER],
+        link: '/accountSetting',
+        title: '�犖撣唾�身摰�',
+      },
+      {
+        needRole: [Role.ADMIN],
+        link: '/notFinish',
+        title: '���董�����',
+      },
+      {
+        needRole: [Role.USER, Role.ADMIN],
+        link: '/record/contactRecord',
+        title: '�������',
+      },
+      {
+        needRole: [Role.NOT_LOGIN, Role.USER],
+        link: '/myConsultantList/consultantList',
+        title: '���“���',
+      },
+      {
+        needRole: [Role.USER, Role.ADMIN],
+        link: '',
+        title: '��',
+      },
+      {
+        needRole: [Role.NOT_LOGIN],
+        link: '/consultantLogin',
+        title: '憿批��',
+      },
+    ];
+    get idToken(): string | null {
+      return localStorage.getItem('id_token');
+    }
+    get roleOfState(): string | null {
+      return localStorage.getItem('roleOfState');
+    }
+    get loginRole(): string {
+      return this.roleOfState && this.idToken ? this.roleOfState : Role.NOT_LOGIN;
+    }
+
+    linkTo(routerLink: string): void {
+      _.isEqual(routerLink, '') ? this.fakeLogout() : this.$router.push(routerLink);
+    }
+
+
+    // TODO: ��TP隤����� ���蝙�
+    fakeLogout(): void {
+      localStorage.clear();
+      this.$router.go(0);
+    }
+  }
+  export enum Role {
+    USER = 'user',
+    ADMIN = 'admin',
+    NOT_LOGIN = '',
+  }
+
+</script>
+
+<style lang="scss" scoped>
+  .pam-header {
+    position: fixed;
+    top: 0;
+    height: $MOB_NAV_BAR;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    background-color: $PRIMARY_WHITE;
+    z-index: 3;
+    
+    .pam-header__logo {
+      height: 30px;
+      width: 115px;
+      margin: 0 10px;
+      background-image: url('~/assets/images/taiwan-logo.png');
+      background-repeat:no-repeat;
+      background-size: contain;
+      background-position: center;
+    }
+    .pam-header__title {
+      flex: 1;
+      flex-basis: 160px;
+      border-left:1px #CCCCCC solid;
+      padding-left:10px;
+      .pam-header__title--main {
+        font-size: 16px;
+        font-weight: bold;
+        color: $PRUDENTIAL_GREY;
+        letter-spacing:0.8px;
+        @media screen and (max-width: 352px) {
+          font-size: 12px;
+        }
+      }
+      .pam-header__title--sub {
+        padding-top: 2px;
+        font-size: 12px;
+        transform: scale(0.9);
+        -webkit-transform-origin-x: 0;
+        font-weight: bold;
+        color: $CORAL;
+        letter-spacing: 1.2px;
+      }
+    }
+
+
+    .pam-header__action-bar {
+      display: flex;
+      font-size: 24px;
+      font-weight: bold;
+      justify-content: space-around;
+
+      i {
+        padding: 0px 15px;
+        @media screen and (max-width: 352px) {
+          padding: 0px 10px;
+        }
+      }
+    }
+  }
+
+  @include desktop {
+    .pam-header {
+      height: $DESKTOP_NAV_BAR;
+      .pam-header__logo {
+        width: 180px;
+        height: 100%;
+        margin: 0;
+        background-image: url('~/assets/images/logo.png');
+        background-size: cover;
+        background-repeat:no-repeat;
+        background-position: center;
+      }
+      .pam-header__title {
+        display: flex;
+        justify-content: start;
+        align-items: center;
+        border: none;
+        padding-left: 30px;
+        .pam-header__title--main{
+          font-size: 30px;
+          letter-spacing: 1.5px;
+        }
+        .pam-header__title--sub{
+          font-size: 20px;
+          letter-spacing: 2px;
+          transform: none;
+          margin-left: 30px;
+        }
+      }
+    }
+  }
+
+</style>

--
Gitblit v1.8.0