Update#178944: 移除 lodash 套件

Tomas

2023-12-25 f065760fa7df1f88747395ab4b55349ce8b2faf0

 PAMapp/layouts/default.vue

@@ -1,18 +1,22 @@
<template>
  <div class="pam-background">
    <UiGoToTop></UiGoToTop>
    <NavBar></NavBar>
    <BackActionBar></BackActionBar>
    <div class="pam-banner"
      :class="bannerClassName">
      <div class="pam-banner__text text--dark-blue">
        <div class="mt-5"
          v-for="(item,index) in getBannerTextList"
          v-for="(bannerText, index) in bannerTextList"
          :key="index">
          {{item}}
          {{ bannerText }}
        </div>
      </div>
    </div>
    <div class="pam-container" :class="containClassName">
    <div
      class="pam-container"
      :class="[containClassName, {'mt-navBar': bannerClassName === 'pam-no-banner'} ]"
    >
      <Nuxt class="pam-page-container"></Nuxt>
    </div>
    <Footer></Footer>
@@ -21,55 +25,61 @@

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator';
  import * as _ from 'lodash';


  @Component
  export default class DefaultLayout extends Vue {
    private bannerTextDto:BannerDto= {
      [RouterPage.RECOMMEND_CONSULTANT]: ['輸入問題回答', '依照你的需求推薦嚴選顧問'],
      [RouterPage.QUICK_FILTER]: ['點選下方選項', '尋找你的BEST Match'],
      [RouterPage.MY_CONSULTANT_LIST]:[],
      [RouterPage.QUESTIONNAIRE]:[],
    }
    get getBannerTextList(): string[] {
      return this.bannerTextDto[this.route] ? this.bannerTextDto[this.route] : [];
    };

    get route(): string{
      const routeName = this.$route.name;
      return routeName ? routeName:'';
      return routeName ? routeName : '';
    };

    get bannerClassName() {
      return this.routeFormatBannerClass(this.route);
    };

    // format to {page}-banner or pam-no-banner tag
    private routeFormatBannerClass(route: string): string {
      const needBannerTags = ['recommendConsultant', 'quickFilter', 'myConsultantList-consultantList','myAppointmentList-appointmentList'];
      return _.includes(needBannerTags, route) ? route + '-banner' : 'pam-no-banner';
    get bannerTextList(): string[] {
      return this.bannerText[this.route];
    };

    get containClassName(): string {
      return this.routeFormatContainClass(this.route);
    };

    get bannerClassName() {
      return this.routeFormatBannerClass(this.route);
    };

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

    // format to {page}-container tag
    private routeFormatContainClass(route: string): string {
      const needContainBgTags = ['recommendConsultant', 'questionnaire'];
      return _.includes(needContainBgTags, route) ? route + '-container' : '';
      const needContainBgRoutes = ['recommendConsultant', 'questionnaire-agentNo'];
      return needContainBgRoutes.includes(route) ? route + '-container' : '';
    };

    // format to {page}-banner or pam-no-banner tag
    private routeFormatBannerClass(route: string): string {
      const needBannerRoutes = ['recommendConsultant', 'quickFilter', 'myConsultantList-consultantList', 'myConsultantList-contactedList', 'myAppointmentList-appointmentList', 'myAppointmentList-contactedList', 'login', 'notification'];
      return needBannerRoutes.includes(route) ? route + '-banner' : 'pam-no-banner';
    };

    private bannerText: FeatureBannerTitle= {
      [FeaturePage.RECOMMEND_CONSULTANT]: ['輸入個人需求及偏好', '即可獲得量身推薦之嚴選顧問清單'],
      [FeaturePage.QUICK_FILTER]        : ['依個人偏好快速搜尋', '找到你的最佳顧問'],
      [FeaturePage.MY_CONSULTANT_LIST]  : [],
      [FeaturePage.QUESTIONNAIRE]       : [],
    }

  }
  enum RouterPage {

  enum FeaturePage {
    RECOMMEND_CONSULTANT = 'recommendConsultant',
    QUICK_FILTER = "quickFilter",
    MY_CONSULTANT_LIST = "myConsultantList",
    QUESTIONNAIRE = 'questionnaire',
    QUICK_FILTER         = "quickFilter",
    MY_CONSULTANT_LIST   = "myConsultantList",
    QUESTIONNAIRE        = 'questionnaire',
  }
  type BannerDto={
    [x:string]:string[];

  interface FeatureBannerTitle {
    [x:string]: string[];
  };

</script>

<style lang="scss"
@@ -88,18 +98,6 @@
    margin: 30px 20px;
  }

  @include desktop {
    .pam-page-container {
      width: 700px;
      margin: 30px auto 0px auto;
    }
    .pam-banner__text{
      width: 700px;
      position: static !important;
      margin: 30px auto 0px auto;
    }
  }

  .pam-banner {
    width: 100%;
    height: 120px;
@@ -107,6 +105,29 @@
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    @extend .mt-navBar;
  }

  .mt-navBar {
    margin-top: calc($MOB_NAV_BAR * 2);
  }

  @include desktop {
    .pam-banner  {
      height: 150px;
    }
    .mt-navBar {
      margin-top: calc($DESKTOP_NAV_BAR + $MOB_NAV_BAR);
    }
    .pam-page-container {
      width: 700px;
      margin: 30px auto;
    }
    .pam-banner__text{
      width: 700px;
      position: static !important;
      margin: 30px auto 0px auto;
    }
  }

  .pam-banner__text {
@@ -130,8 +151,8 @@
      background-image: url('~/assets/images/quickFilter/banner_mob.svg');
    }

    @media (min-width: 768px) {
      &-banner {
    @include desktop {
        &-banner {
        background-image: url('~/assets/images/quickFilter/banner_web.svg');
      }
    }
@@ -148,7 +169,7 @@
      background-size: contain;
    }

    @media (min-width: 768px) {
    @include desktop {
      &-banner {
        background-image: url('~/assets/images/recommendConsultant/banner_web.svg');
        background-size: cover;
@@ -159,42 +180,57 @@
        background-size: cover;
      }
    }

  }

  .myConsultantList-consultantList {
  .myConsultantList-consultantList,.myConsultantList-contactedList {
    &-banner {
      background-image: url('~/assets/images/myConsultantList/banner_mob.svg');
    }

    @media (min-width: 768px) {
    @include desktop {
      &-banner {
        background-image: url('~/assets/images/myConsultantList/banner_web.svg');
      }
    }
  }

  .questionnaire {
  .questionnaire-agentNo {
    &-container {
      background-image: url('~/assets/images/recommendConsultant/bg_flower_mob.svg');
      background-size: contain;
    }

    @media (min-width: 768px) {
    @include desktop {
      &-container {
        background-image: url('~/assets/images/recommendConsultant/bg_flower_web.svg');
        background-size: cover;
      }
    }
  }
  .myAppointmentList-appointmentList{

  .login {
    &-banner {
      background-image: url('~/assets/images/myAppointmentList/agent_banner_mob.svg');
      background-image: url('~/assets/images/login/login_mob.svg');
    }

    @media (min-width: 768px) {
    @include desktop {
      &-banner {
        background-image: url('~/assets/images/myAppointmentList/agent_banner_web.svg');
        background-image: url('~/assets/images/login/login_web.svg');
      }
    }
  }

  .notification {
    &-banner {
      background-image: url('~/assets/images/notification/banner_mob.svg');
    }

    @include desktop {
      &-banner {
        background-image: url('~/assets/images/notification/banner_web.svg');
      }
    }
  }

</style>