TODO#139894 [ footer -最下方說明與保經代合作 ] 文案修改

HelenHuang

2022-06-09 9bdb95c9e34cef640534e5e5a1e2225a80442000

 PAMapp/pages/myAppointmentList/closedList.vue

@@ -1,18 +1,23 @@
<template>
    <div>
    <div class="pam-closed-appointment-list">
        <el-input
            type="text"
            placeholder="請輸入關鍵字"
            class="mb-30 pam-clientReserved-input"
            class="mb-10 pam-clientReserved-input"
            v-model="keyWord"
            @keyup.enter.native="search"
            @input="search"
        >
            <i
                slot="suffix"
                class="icon-search search cursor--pointer"
                @click="search"
            ></i>
        </el-input>

        <div class="closed-appointment__tag-filter mb-10">
          <el-radio v-model="selectedClosedCategory" :label="'all'" border>全部({{ itemSum }})</el-radio>
          <el-radio v-model="selectedClosedCategory" :label="'done'" border>成交({{ doneItemSum }})</el-radio>
          <el-radio v-model="selectedClosedCategory" :label="'closed'" border>未成交({{ closedItemSum }})</el-radio>
        </div>

        <ClientList
            :clients="pageList"
@@ -28,28 +33,36 @@
</template>

<script lang="ts">
import { Vue, Component, Watch, State, namespace } from 'nuxt-property-decorator';
import { Vue, Component, Watch, namespace } from 'nuxt-property-decorator';

import { Appointment } from '~/shared/models/appointment.model';
import { ContactStatus } from '~/shared/models/enum/contact-status';


const localStorage = namespace('localStorage');
@Component
export default class ClientContactedList extends Vue {
const appointmentStore = namespace('appointment.store');
const localStorage     = namespace('localStorage');

    @State('myAppointmentList')
@Component
export default class ClientClosedList extends Vue {

    @appointmentStore.State('myAppointmentList')
    myAppointmentList!: Appointment[];

    @localStorage.Getter
    currentAppointmentIdFromMsg!: string;

    contactedList: Appointment[] = [];
    filterList   : Appointment[] = [];
    keyWord      : string       = '';
    pageList     : Appointment[] = [];
    currentPage  : number = 1;
    contactStatus= ContactStatus;

    closedItemSum = 0;
    currentPage   = 1;
    doneItemSum   = 0;
    itemSum       = 0;
    keyWord       = '';

    closedList: Appointment[] = [];
    filterList   : Appointment[] = [];
    pageList     : Appointment[] = [];
    selectedClosedCategory: 'all' | 'done' | 'closed' = 'all';

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

@@ -61,12 +74,14 @@

    @Watch('myAppointmentList')
    onMyAppointmentListChange() {
        this.contactedList = (this.myAppointmentList || [])
            .filter(item => item.communicateStatus === this.contactStatus.DONE || item.communicateStatus === this.contactStatus.CLOSE)
            .map((item) => ({...item, sortTime: new Date(item.contactTime)}))
        this.closedList = (this.myAppointmentList || [])
            .filter(item => item.communicateStatus === this.contactStatus.DONE || item.communicateStatus === this.contactStatus.CLOSE || item.communicateStatus === this.contactStatus.CANCEL)
            .map((item) => ({...item, sortTime: new Date(item.lastModifiedDate)}))
            .sort((prevItem, nextItem) => +nextItem.sortTime - +prevItem.sortTime);
        this.filterList = this.contactedList;

        this.filterList = this.closedList;
        this.itemSum = this.closedList.length;
        this.doneItemSum = this.closedList.filter((item) => item.communicateStatus === this.contactStatus.DONE).length;
        this.closedItemSum = this.closedList.filter((item) => item.communicateStatus === this.contactStatus.CLOSE).length;
        this.getCurrentPage();
    }

@@ -78,12 +93,28 @@
        }
    }

    @Watch('selectedClosedCategory')
    onSelectedClosedCategoryChanges() {
      this.search();
    }

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

    search(): void {
        this.filterList = this.contactedList.filter(item => {
      if (this.selectedClosedCategory === this.contactStatus.DONE) {
        this.filterList = this.closedList.filter((item) => item.communicateStatus === this.contactStatus.DONE);
      } else if (this.selectedClosedCategory === this.contactStatus.CLOSE) {
        this.filterList = this.closedList.filter((item) => item.communicateStatus === this.contactStatus.CLOSE);
      } else {
        this.filterList = this.closedList;
      }

      if (this.keyWord) {
        this.filterList = this.filterList.filter(item => {
            return item?.name?.match(this.keyWord) || item?.requirement?.match(this.keyWord)
        })
      }

    }

    changePage(pageList: Appointment[]): void {
@@ -92,3 +123,34 @@

}
</script>

<style lang="scss">
.pam-closed-appointment-list {
  .closed-appointment__tag-filter {
    display: flex;
    .el-radio {
      border-color: $LIGHT_GREY;
      border-radius: 30px;
      border-width: 1px;
      font-size   : 16px;
      margin-left : 0 !important;
      margin-right: 10px;
      padding     : 10px;
      @extend .fix-chrome-click--issue;
      &.is-checked {
        background-color: $CORAL;
        .el-radio__label {
          color  : $PRIMARY_WHITE !important;
        }
      }
      .el-radio__input {
        display: none;
      }
      .el-radio__label {
        color  : $PRIMARY_BLACK !important;
        padding: 0px !important;
      }
    }
  }
}
</style>