<template>
|
<div>
|
<div class="pam-cus-tabs mb-30">
|
<div
|
class="cus-tab-item"
|
:class="{'is-active': activeTabName === 'appointmentList'}"
|
@click="tabClick('appointmentList')"
|
>客戶預約
|
<span class="p">({{appointmentList.length}})</span>
|
</div>
|
<div
|
class="cus-tab-item"
|
:class="{'is-active': activeTabName === 'contactedList'}"
|
@click="tabClick('contactedList')"
|
>已聯絡
|
<span class="p">({{contactedList.length}})</span>
|
</div>
|
</div>
|
|
<NuxtChild></NuxtChild>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, State, Action, Watch } from 'nuxt-property-decorator';
|
import { ClientInfo } from '~/assets/ts/api/appointment';
|
|
@Component
|
export default class ClientReservedList extends Vue {
|
activeTabName = 'appointmentList';
|
appointmentList: ClientInfo[] = [];
|
contactedList: ClientInfo[] = [];
|
clients: ClientInfo[] = [];
|
|
@State('myAppointmentList') myAppointmentList!: ClientInfo[];
|
@Action storeMyAppointmentList!: any;
|
|
mounted() {
|
this.storeMyAppointmentList();
|
|
if (this.$route.name) {
|
console.log('mounted route')
|
this.activeTabName = this.$route.name.split('-')[1]
|
}
|
}
|
|
@Watch('myAppointmentList')
|
onMyAppointmentListChange() {
|
this.contactedList = this.myAppointmentList
|
.filter(item => item.communicateStatus === 'contacted')
|
.sort((a, b) => a.appointmentDate > b.appointmentDate ? -1 : 1);
|
this.appointmentList = this.myAppointmentList
|
.filter(item => item.communicateStatus !== 'contacted')
|
.sort((a, b) => a.appointmentDate > b.appointmentDate ? -1 : 1);;
|
}
|
|
tabClick(path: string) {
|
this.activeTabName = path;
|
this.$router.push('/myAppointmentList/' + this.activeTabName)
|
}
|
|
}
|
</script>
|
