From cd4a64b39c429f2f5b45cb042d1b66f1cd3904cd Mon Sep 17 00:00:00 2001
From: 劉鈞霖 <benson@gmail.com>
Date: 星期一, 15 十一月 2021 18:06:40 +0800
Subject: [PATCH] [ Update ] 更新 navbar 清單 根據 角色 顯示清單

---
 PAMapp/components/NavBar.vue |  152 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 150 insertions(+), 2 deletions(-)

diff --git a/PAMapp/components/NavBar.vue b/PAMapp/components/NavBar.vue
index 1ba5353..3dbaf28 100644
--- a/PAMapp/components/NavBar.vue
+++ b/PAMapp/components/NavBar.vue
@@ -1,3 +1,151 @@
 <template>
-    <div>navbar</div>
-</template>
\ No newline at end of file
+    <header class="pam-header">
+      <img class="pam-header__logo" src="~/assets/images/logo.png" alt="" @click="$router.push('/')">
+        <div class="pam-header__title">
+          ���兢蝳��蜓
+          <div class="pam-header__sub-title">
+            �����兢蝳�風��
+          </div>
+        </div>
+        <div class="pam-header__action-bar">
+          <i class="icon-bell text--dark-blue cursor--pointer" @click="$router.push('/notification')"></i>
+          <!-- <el-dropdown @command="handleCommand">
+            <i class="icon-avatar text--dark-blue cursor--pointer"></i>
+            <el-dropdown-menu slot="dropdown" class="pam-header__dropdown">
+              <li class="pam-header__dropdown-item" @click="$router.push('/login')">��</li>
+              <li class="pam-header__dropdown-item" @click="$router.push('/accountSetting')">�犖撣唾�身摰�</li>
+              <li class="pam-header__dropdown-item" @click="$router.push('/record/contactRecord')">�������</li>
+              <li class="pam-header__dropdown-item" @click="$router.push('/myConsultantList/consultantList')">���“���</li>
+              <li class="pam-header__dropdown-item">��</li>
+              <li class="pam-header__dropdown-item pam-header__dropdown-divider" @click="$router.push('/consultantLogin')">憿批��</li>
+            </el-dropdown-menu>
+          </el-dropdown> -->
+
+          <el-dropdown>
+            <i class="icon-avatar text--dark-blue cursor--pointer"></i>
+            <el-dropdown-menu slot="dropdown" class="pam-header__dropdown">
+              <template v-for="(navbarItem,index) in navBarList">
+                <li class="pam-header__dropdown-item" 
+                  :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,Role.USER],
+      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 {
+  height: 53px;
+  display: flex;
+  align-items: center;
+  .pam-header__logo {
+    height: 100%;
+  }
+  .pam-header__title {
+    flex: 1;
+    margin: 10px 0;
+    padding-left: 10px;
+    border-left: 1px solid #CCCCCC;
+    font-size: 16px;
+    font-weight: bold;
+    color: $PRUDENTIAL_GREY;
+    letter-spacing: 3.6px;
+    flex-basis: 140px;
+    .pam-header__sub-title {
+      padding-top: 2px;
+      font-size: 13px;
+      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: 0 15px;
+      @media screen and (max-width: 320px) {
+        padding: 0 5px;
+      }
+    }
+  }
+}
+</style>

--
Gitblit v1.8.0