| | |
| | | <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> |
| | | |
| | |
| | | import { ContactStatus } from '~/shared/models/enum/contact-status'; |
| | | |
| | | const localStorage = namespace('localStorage'); |
| | | const appointmentStore = namespace('appointment.store'); |
| | | |
| | | @Component({ |
| | | layout: 'home', |
| | |
| | | }) |
| | | 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; |
| | |
| | | currentAppointmentIdFromMsg!: string; |
| | | |
| | | activeTabName : string = 'appointmentList'; |
| | | appointmentList : Appointment[] = []; |
| | | contactedList : Appointment[] = []; |
| | | closedList : Appointment[] = []; |
| | | contactStatus = ContactStatus; |
| | | showNewAppointmentHint: boolean = false; |
| | | |
| | | ////////////////////////////////////////////////////////////////////// |
| | | |
| | | mounted() { |
| | | this.storeMyAppointmentList(); |
| | | this.getMyAppointmentList(); |
| | | } |
| | | |
| | | destroyed() { |
| | |
| | | |
| | | @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(); |
| | | } |