Update#178944: 移除 lodash 套件

Tomas

2023-12-25 f065760fa7df1f88747395ab4b55349ce8b2faf0

 PAMapp/pages/quickFilter/index.vue

@@ -1,241 +1,271 @@
<template>
    <div>
        <div class="quickBtnBlock">
            <el-button
                v-for="(question, index) in questionList"
                :key="index"
                class="subTitle quickBtn"
                :disabled="question.name === 'onlineState'"

                @click="openPopUp(question)"
            >{{question.title}}</el-button>
        </div>
        <h5 class="mdTxt mb-10 mt-30">篩選條件</h5>
        <div>
            <Ui-Tags
                v-if="selectedItem.gender"
                @removeTag="removeTag('gender')"
            >
                {{selectedItem.gender}}
            </Ui-Tags>
            <Ui-Tags
                v-if="selectedItem.satisfaction"
                @removeTag="removeTag('satisfaction')"
            >
                {{selectedItem.satisfaction + '星以上滿意度'}}
            </Ui-Tags>
            <template v-if="selectedItem.style.length > 0">
                <Ui-Tags
                    v-for="(item, index) in selectedItem.style"
                    :key="index"
                    @removeTag="removeTag('style', index)"
                >
                    {{item}}
                </Ui-Tags>
            </template>

            <div class="mb-10" v-if="selectedItem.onlineState"></div>
            <div class="emptyBox text--mid_grey"
                v-if="!selectedItem.gender && !selectedItem.satisfaction && selectedItem.style.length === 0 && !selectedItem.onlineState">
                <p class="smTxt">尚無篩選</p>
            </div>
        </div>

        <h5 class="mdTxt mb-10 mt-30">快速篩選推薦</h5>
        <template v-if="consultantList.length > 0">
            <QuickFilterConsultantList></QuickFilterConsultantList>
        </template>

        <template v-else>
            <div class="emptyBox bg-white"></div>
        </template>

        <Ui-Drawer
            :isVisible.sync="questionDrawer"
            :size="questionOption.name === 'style' ? '50%' : '30%'"
            @closeDrawer="closePopUp"
        >
            <QuickFilterSelector
                ref="quickFilterRef"
                :drawerVisible.sync="questionDrawer"
                :questionOption="questionOption"
                :selectedItem="selectedItem"
            ></QuickFilterSelector>
        </Ui-Drawer>

        <Ui-Dialog :isVisible.sync="dialog"
            @closeDialog="closePopUp"
        >
            <QuickFilterSelector
                ref="quickFilterRef"
                :drawerVisible.sync="questionDrawer"
                :questionOption="questionOption"
                :selectedItem="selectedItem"
            ></QuickFilterSelector>
        </Ui-Dialog>
  <div>
    <div class="pam-paragraph pam-quick-filter__options">
      <el-button v-for="(question, index) in questionList"
        :key="index"
        class="subTitle pam-quick-filter__btn"
        :class="{'is-active': isActive(question.name)}"
        @click="openPopUp(question)">{{question.title}}</el-button>
    </div>

    <div class="pam-paragraph">
      <div class="mdTxt">篩選條件</div>
      <div class="mt-10">
        <template v-if="confirmItem.length > 0">
          <UiTags v-for="(item, index) in confirmItem"
            :key="index"
            @removeTag="removeTag(item.value)">
            <span v-if="item.option === 'gender'">
              {{item.value === 'male' ? '男性' : '女性'}}
            </span>
            <span v-else-if="item.option === 'seniority'">
              {{item.value | formatSeniorityTitle}}
              <span class="smTxt">{{item.value | formatSenioritySubTitle}}</span>
            </span>
            <span v-else-if="item.option === 'avgScore' && !hideReviews">{{item.value + '星以上滿意度'}}</span>
            <span v-else>{{item.value}}</span>
          </UiTags>
        </template>
        <div v-else
          class="pam-quick-filter__empty text--mid_grey">
          <p class="smTxt">尚無篩選</p>
        </div>
      </div>
    </div>

    <div class="pam-paragraph">
      <span class="mdTxt">快速篩選推薦</span>
      <span class="smTxt_bold text--prudential_grey ml-10">共 {{consultantList.length}} 筆</span>
    </div>

    <div class="pam-paragraph pam-quick-filter__recommend">
      <img class="img"
        alt=""
        src="~/assets/images/quickFilter/recommend.svg">
      <template v-if="consultantList.length > 0">
        <QuickFilterConsultantList :consultantList="consultantList"></QuickFilterConsultantList>
      </template>
      <template v-else>
        <div class="pam-quick-filter__empty text--mid_grey pam-quick-filter__empty--white">
          <p class="smTxt">尚無推薦資料</p>
        </div>
      </template>
    </div>

    <PopUpFrame class="pam-myDemand-dialog"
      dialogWidth="400px"
      :isOpen.sync="isOpenQuestionPopUp">
      <QuickFilterSelector ref="quickFilterRef"
        :isOpenQuestionPopUp="isOpenQuestionPopUp"
        :questionOption="questionOption"
        @confirm="confirm"
        :confirmItem="confirmItem"></QuickFilterSelector>
    </PopUpFrame>
  </div>
</template>

<script lang="ts">
import { Context } from '@nuxt/types';
import { Vue, Component } from 'nuxt-property-decorator';
import { Consultants } from '~/assets/ts/api/consultant';
import { isMobileDevice } from '~/assets/ts/device';
import QuickFilterDrawer from '~/components/QuickFilter/QuickFilterSelector.vue';
  import { Consultant } from '~/shared/models/consultant.model';
  import { FastQueryParams, QuestionOption, Selected } from '~/shared/models/quick-filter.model';
  import { questionList } from '~/shared/const/quickFilter-questionList';
  import { Seniority } from '~/shared/models/enum/seniority';
  import { Vue, Component, namespace } from 'nuxt-property-decorator';
  import queryConsultantService from '~/shared/services/query-consultant.service';

@Component
export default class QuickFilter extends Vue {
    dialog = false;
    consultantList = [];
    questionDrawer = false;
  const localStorage = namespace('localStorage');
  const seniorityMap={
    [Seniority.SENIOR]:{
      title:'資深',
      subTitle:'薑是老的辣'
    },
    [Seniority.YOUNG]:{
      title:'年輕',
      subTitle:'給年輕人一個機會'
    },
    [Seniority.UNLIMITED]:{
      title:'不限',
      subTitle:'年齡不是問題'
    },
  }
  @Component({
    filters: {
      formatSeniorityTitle(value): string{
        return seniorityMap[value].title
      },
      formatSenioritySubTitle(value): string {
        return seniorityMap[value].subTitle
      }
    }
  })
  export default class QuickFilter extends Vue {
    @localStorage.Mutation
    storageQuickFilter!: (token: string) => void;

    @localStorage.Getter
    quickFilterSelectedData!: Selected[];

    isOpenQuestionPopUp = false;
    consultantList: Consultant[] = [];
    questionOption = {};
    selectedItem: selectedItem = {
        gender: '',
        satisfaction: 0,
        style: [],
        onlineState: ''
    };
    questionList: QuestionOption[] = [
        {
            name: 'gender',
            title: '顧問性別',
            detail: ['男性', '女性'],
            type: 'radio'
        },
        {
            name: 'satisfaction',
            title: '顧問滿意度',
            detail: [],
            type: ''
        },
        {
            name: 'style',
            title: '溝通風格',
            detail: ['謹慎務實', '明快主動', '耐心傾聽', '健談風趣'],
            type: 'checkbox'
        },
        {
            name: 'onlineState',
            title: '上線狀態',
            detail: [],
            type: 'radio'
        }
    ];
    confirmItem: Selected[] = [];
    questionList = questionList;

    async asyncData(context: Context) {
        let consultantList: Consultants[] = [];

        await context.$service.home.recommendConsultantList().then((result: Consultants[]) => {
            consultantList = result;
        })

        return {
            consultantList,
        }
    ////////////////////////////////////////////////////////////////////// Vue lifeCycle
    mounted() {
      if (this.quickFilterSelectedData && this.quickFilterSelectedData.length > 0) {
        this.confirmItem = this.quickFilterSelectedData;
        this.getRecommendList();
      }
    }


    //////////////////////////////////////////////////////////////////////
    openPopUp(question: QuestionOption) {
        this.questionOption = question;
        isMobileDevice() ? this.questionDrawer = true : this.dialog = true;
      this.questionOption = question;
      this.isOpenQuestionPopUp = true;
    }

    removeTag(type: string, index: number = 0) {

        if (type === 'gender') {
            this.selectedItem.gender = ''
        }

        if (type === 'satisfaction') {
             this.selectedItem.satisfaction = 0
        }

        if (type === 'style') {
            this.selectedItem.style.splice(index, 1)
        }

    removeTag(value: string) {
      this.confirmItem = this.confirmItem.filter(item => item.value !== value);
      this.confirmItem.length > 0 ? this.getRecommendList() : this.consultantList = [];
    }

    closePopUp() {
        this.selectedItem = JSON.parse(JSON.stringify((this.$refs.quickFilterRef as QuickFilterDrawer).pickedItem));
    confirm(event: Selected) {
      this.setConfirmData(event);
      this.confirmItem.length > 0 ? this.getRecommendList() : this.consultantList = [];
      this.isOpenQuestionPopUp = false;
    }

}
    isActive(name: string) {
      return name === 'gender' && !!this.getGender()
          || name === 'avgScore' && !!this.getAvgScore()
          || name === 'communicationStyles' && !!this.getCommunicationStyles().length
          || name === 'seniority' && !!this.getSeniority()
    }

export interface QuestionOption {
    title: string;
    detail: string[];
    type: string;
    name: string;
}

export interface selectedItem {
    name?: string;
    gender: string;
    satisfaction: number;
    style: string[];
    onlineState: string;
}
    //////////////////////////////////////////////////////////////////////
    private getGender(): string {
      return this.filterSingleSelected('gender'); // maybe can use enum ?
    }

    private getAvgScore(): number {
      return this.filterSingleSelected('avgScore');
    }

    private getSeniority(): string {
      return this.filterSingleSelected('seniority');
    }

    private getCommunicationStyles(): string[] {
      return this.confirmItem.filter(item => item.option === 'communicationStyles').map(i => i.value);
    }

    private filterSingleSelected(name: string) {
      const filter = this.confirmItem.filter(item => item.option === name);
      return filter.length > 0 ?
        filter[0].value :
        (name === 'avgScore' ? 0 : '');
    }

    private setConfirmData(event: Selected) {
      if (event.option === 'communicationStyles') {
        this.filterCommunicationStyles(event);
      } else {
        const findIndex = this.confirmItem.findIndex(item => item.option === event.option);
        findIndex === -1 ? this.confirmItem.push(event) : this.confirmItem[findIndex] = event;
      }
    }

    private filterCommunicationStyles(event: Selected) {
      const confirmValue = this.confirmItem
        .filter(item => item.option === 'communicationStyles')
        .map(i => i.value);
      const pickerValue = event.value;

      this.confirmItem = this.confirmItem
        .filter(item => pickerValue.includes(item.value) || item.option !== 'communicationStyles');

      const addValue = pickerValue.filter(item => !confirmValue.includes(item)).map(i => {
        return {
          option: 'communicationStyles',
          value: i
        }
      })
      if (addValue.length > 0) {
        this.confirmItem.push(...addValue);
      }
    }

    private getRecommendList() {
      const data: FastQueryParams = {
        gender: this.getGender(),
        communicationStyles: this.getCommunicationStyles(),
        avgScore: this.getAvgScore(),
        status: '',
        seniority: this.getSeniority()
      }

      queryConsultantService.fastQuery(data).then((consultantList) => {
        this.consultantList = consultantList;
        this.storageQuickFilter(JSON.stringify(this.confirmItem))
      })
    }

  }

</script>

<style lang="scss" scoped>
    .emptyBox {
        width: 100%;
        height: 100px;
  .pam-quick-filter__options {
    display: flex;
    width: 100%;
    height: 132px;
    flex-wrap: wrap;
    justify-content: space-between;

        border: solid 1px $LIGHT_GREY;
        text-align: center;
    .pam-quick-filter__btn {
      width: 48%;
      height: 56px;
      text-align: center;
      box-shadow: 0 0 6px #22222229;
      border-radius: 10px;
      border-color: $CORAL;

        .smTxt {
            line-height: 100px;
        }
      &.is-active {
        background-color: $CORAL;
        color: $PRIMARY_WHITE;
      }
    }

    .bg-white {
        background-color: $PRIMARY_WHITE;
    .pam-quick-filter__btn+.pam-quick-filter__btn {
      margin-left: 0;
    }
  }

    .quickBtnBlock {
        display: flex;
        width: 100%;
        height: 132px;
        flex-wrap: wrap;
        justify-content: space-between;
  .pam-quick-filter__empty {
    width: 100%;
    height: 100px;
    border: solid 1px $LIGHT_GREY;
    text-align: center;
    border-radius: 10px;

        .quickBtn {
            width: 48%;
            height: 56px;
            text-align: center;
            box-shadow: 0 0 6px #22222229;
            border-color: $PRIMARY_WHITE;
            border-radius: 10px;
            color: $PRIMARY_BLACK;

            &:hover,&:focus {
                color: $PRIMARY_BLACK;
                border-color: $PRIMARY_WHITE;
                background-color: $PRIMARY_WHITE;
            }

            &:disabled {
                color: $PRIMARY_WHITE;
                border-color: $LIGHT_GREY;
                background-color: $LIGHT_GREY;
            }
        }
        .quickBtn+.quickBtn {
            margin-left: 0;
        }

        .is-disabled {
            background-color: $LIGHT_GREY;
            color: $PRIMARY_WHITE;

            &:hover,&:focus {
                color: $PRIMARY_WHITE;
                border-color: $LIGHT_GREY;
                background-color: $LIGHT_GREY;
            }
        }
    .smTxt {
      line-height: 100px;
    }
    .pam-quick-filter__empty--white{
      box-shadow: 0 0 6px #00000029;
      background-color: $PRIMARY_WHITE;
    }
  }

</style>
  .pam-quick-filter__recommend {
    position: relative;

    .img {
      position: absolute;
      top: -50px;
      right: 10px;
    }
  }
</style>