refactor components: NavBar, Footer, loading, popUpFrame

Tomas

2021-12-28 e430eadebde1690a177cdf79e8a35da66c484dd0

refactor components: NavBar, Footer, loading, popUpFrame

 PAMapp/components/Footer.vue

@@ -20,7 +20,7 @@
          <li class="pam-footer-contact__item">(專員接聽時間：週一 ~ 週五 08:00~20:00 及週六、日及例假日09:00~17:30)</li>
        </ul>
      </section>
      <section class="pam-footer-copywrite">本網站由保誠人壽與保經代共同合作</section>
      <section class="pam-footer-copywriting">本網站由保誠人壽與保經代共同合作</section>
    </footer>
</template>

@@ -44,6 +44,7 @@
  label: string;
  url: string;
}

</script>

<style lang="scss" scoped>
@@ -101,7 +102,7 @@
      }
    }
  }
  .pam-footer-copywrite {
  .pam-footer-copywriting {
    background-color: $PRIMARY_RED;
    display: flex;
    justify-content: center;

 PAMapp/components/NavBar.vue

@@ -40,11 +40,15 @@
  const roleStorage = namespace('localStorage');
  @Component
  export default class NavBar extends Vue {
    @roleStorage.Mutation storageClear!: () => void;

    @roleStorage.Getter idToken!: string | null;
    @roleStorage.Getter currentRole!: string | null;
    @roleStorage.Getter consultantId!: string | null;

    @roleStorage.Mutation storageClear!: () => void;

    isOpenDropdown = false;
    login_role     = Role.NOT_LOGIN;

    navBarList = [{
        authorityOfRoleList: [Role.NOT_LOGIN],
@@ -92,12 +96,8 @@
        title: '顧問登入',
      },
    ];
    login_role = Role.NOT_LOGIN;
    isOpenDropdown = false;

    get loginRole(): Role {
      return this.idToken && this.currentRole ? (this.currentRole as Role): Role.NOT_LOGIN;
    }
    //////////////////////////////////////////////////////////////////////

    routerNavigateTo(url: string): void {
      (this.$refs.dropdown as any).hide();
@@ -115,6 +115,11 @@
      this.storageClear();
      _.isEqual(this.$route.name, 'index') ? location.reload() : this.$router.push('/');
    }

    get loginRole(): Role {
      return this.idToken && this.currentRole ? (this.currentRole as Role): Role.NOT_LOGIN;
    }

  }

</script>

 PAMapp/components/loading.vue

@@ -17,16 +17,23 @@
    }
  })
  export default class Loading extends Vue {

    isLoading = false;

    defaultOptions = {
      animationData: require('@/assets/lottie/loading.json')
    };

    //////////////////////////////////////////////////////////////////////

    start(): void {
      this.isLoading = true;
    }

    finish(): void {
      this.isLoading = false;
    }

  }

</script>

 PAMapp/components/popUpFrame.vue

@@ -1,15 +1,18 @@
<template>
  <div>

    <Ui-Drawer :isVisible.sync="isUseDrawer"
    @closeDrawer="closePopUp"
    :size="drawerSize">
      <slot></slot>
    </Ui-Drawer>

    <Ui-Dialog :isVisible.sync="isUseDialog"
    @closeDialog="closePopUp"
    :width="dialogWidth">
      <slot></slot>
    </Ui-Dialog>

  </div>
</template>

@@ -20,13 +23,28 @@

  @Component
  export default class PopUpFrame extends Vue {
    @PropSync('isOpen',{type:Boolean,default:false}) syncIsOpen!:boolean;
    @Prop({default:'auto'}) drawerSize!:string; // element UI drawer default size
    @Prop({default:'50%'}) dialogWidth!:string; // element UI dialog default width

    @PropSync('isOpen',{type:Boolean,default:false})
    syncIsOpen!:boolean;

    @Prop({default:'auto'})
    drawerSize!:string; // element UI drawer default size

    @Prop({default:'50%'})
    dialogWidth!:string; // element UI dialog default width

    //////////////////////////////////////////////////////////////////////

    @Emit('closePopUp') closePopUp() {
      return;
    }

    //////////////////////////////////////////////////////////////////////

    private get isUseDrawer() : boolean {
      return this.syncIsOpen && UtilsService.isMobileDevice();
    }

    private set isUseDrawer(value: boolean) {
      this.$emit('update:isOpen',value);
    }
@@ -39,8 +57,5 @@
      this.$emit('update:isOpen',value);
    }

    @Emit('closePopUp') closePopUp() {
        return;
    }
  }
</script>