保誠-保戶業務員媒合平台
wayne
2022-01-26 6fa4bba623713c396432ba8b863846883d6a1906
PAMapp/pages/myAppointmentList.vue
@@ -1,28 +1,28 @@
<template>
    <div>
        <div class="pam-myAppointment-banner"></div>
      <div class="pam-myAppointment-banner"></div>
        <div class="pam-container">
            <div class="pam-cus-tabs mb-30">
            <div class="pam-cus-tabs mb-10">
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'appointmentList'}"
                    @click="clickTab('appointmentList')"
                >
                  <span class="smTxt">未聯絡({{ appointmentList.length }})</span>
                  <span class="smTxt">未聯絡({{ appointmentItemSum }})</span>
                </div>
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'contactedList'}"
                    @click="clickTab('contactedList')"
                >
                  <span class="smTxt">約訪中({{ contactedList.length }})</span>
                  <span class="smTxt">約訪中({{ contactedItemSum }})</span>
                </div>
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'closedList'}"
                    @click="clickTab('closedList')"
                >
                  <span class="smTxt">結案({{ closedList.length }})</span>
                  <span class="smTxt">結案({{ closedItemSum }})</span>
                </div>
            </div>
@@ -56,6 +56,7 @@
import { ContactStatus } from '~/shared/models/enum/contact-status';
const localStorage = namespace('localStorage');
const appointmentStore = namespace('appointment.store');
@Component({
    layout: 'home',
@@ -63,14 +64,23 @@
})
export default class ClientReservedList extends Vue {
    @State('myAppointmentList')
    @appointmentStore.State('myAppointmentList')
    myAppointmentList!: Appointment[];
    @State('myNewAppointmentSum')
    @appointmentStore.Getter('newAppointmentSum')
    newAppointmentSum!: number;
    @Action
    storeMyAppointmentList!: () => Promise<number>;
    @appointmentStore.Getter('appointmentItemSum')
    appointmentItemSum!: number;
    @appointmentStore.Getter('contactedItemSum')
    contactedItemSum!: number;
    @appointmentStore.Getter('closedItemSum')
    closedItemSum!: number;
    @appointmentStore.Action
    getMyAppointmentList!: () => Promise<Appointment[]>;
    @localStorage.Mutation
    storageClearAppointmentIdFromMsg!: () => void;
@@ -79,16 +89,13 @@
    currentAppointmentIdFromMsg!: string;
    activeTabName          : string        = 'appointmentList';
    appointmentList        : Appointment[] = [];
    contactedList          : Appointment[] = [];
    closedList             : Appointment[] = [];
    contactStatus          = ContactStatus;
    showNewAppointmentHint: boolean        = false;
    //////////////////////////////////////////////////////////////////////
    mounted() {
      this.storeMyAppointmentList();
      this.getMyAppointmentList();
    }
    destroyed() {
@@ -99,12 +106,6 @@
    @Watch('myAppointmentList')
    onMyAppointmentListChange(): void {
        this.appointmentList = this.myAppointmentList
            .filter(item => item.communicateStatus === this.contactStatus.RESERVED);
        this.contactedList = this.myAppointmentList
            .filter((item) => item.communicateStatus === this.contactStatus.CONTACTED);
        this.closedList = this.myAppointmentList
            .filter(item => item.communicateStatus === this.contactStatus.DONE || item.communicateStatus === this.contactStatus.CLOSE );
        if (this.currentAppointmentIdFromMsg) {
            this.redirectAppointmentStatus();
        }