保誠-保戶業務員媒合平台
HelenHuang
2022-06-09 9bdb95c9e34cef640534e5e5a1e2225a80442000
PAMapp/pages/myAppointmentList/closedList.vue
@@ -5,16 +5,15 @@
            placeholder="請輸入關鍵字"
            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">
        <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>
@@ -34,30 +33,34 @@
</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');
const appointmentStore = namespace('appointment.store');
const localStorage     = namespace('localStorage');
@Component
export default class ClientClosedList extends Vue {
    @State('myAppointmentList')
    @appointmentStore.State('myAppointmentList')
    myAppointmentList!: Appointment[];
    @localStorage.Getter
    currentAppointmentIdFromMsg!: string;
    closedItemSum = 0;
    closedList: Appointment[] = [];
    contactStatus= ContactStatus;
    currentPage  : number = 1;
    doneItemSum = 0;
    closedItemSum = 0;
    currentPage   = 1;
    doneItemSum   = 0;
    itemSum       = 0;
    keyWord       = '';
    closedList: Appointment[] = [];
    filterList   : Appointment[] = [];
    itemSum = 0;
    keyWord      : string       = '';
    pageList     : Appointment[] = [];
    selectedClosedCategory: 'all' | 'done' | 'closed' = 'all';
@@ -72,8 +75,8 @@
    @Watch('myAppointmentList')
    onMyAppointmentListChange() {
        this.closedList = (this.myAppointmentList || [])
            .filter(item => item.communicateStatus === this.contactStatus.DONE || item.communicateStatus === this.contactStatus.CLOSE)
            .map((item) => ({...item, sortTime: new Date(item.contactTime)}))
            .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.closedList;
        this.itemSum = this.closedList.length;
@@ -105,9 +108,13 @@
      } else {
        this.filterList = this.closedList;
      }
      this.filterList = this.filterList.filter(item => {
          return item?.name?.match(this.keyWord) || item?.requirement?.match(this.keyWord)
      })
      if (this.keyWord) {
        this.filterList = this.filterList.filter(item => {
            return item?.name?.match(this.keyWord) || item?.requirement?.match(this.keyWord)
        })
      }
    }
    changePage(pageList: Appointment[]): void {
@@ -122,14 +129,19 @@
  .closed-appointment__tag-filter {
    display: flex;
    .el-radio {
      border-color: $PRIMARY_BLACK;
      border-width: 2px;
      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: #D0D0CE;
        background-color: $CORAL;
        .el-radio__label {
          color  : $PRIMARY_WHITE !important;
        }
      }
      .el-radio__input {
        display: none;