<template>
|
<div>
|
<div class="pam-cus-tabs mb-30">
|
<div
|
class="cus-tab-item"
|
:class="{'is-active': activeTabName === 'reservedList'}"
|
@click="tabClick('reservedList')"
|
>客戶預約
|
<span class="p">({{reservedList.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
|
:contactedList="contactedList"
|
:reservedList="reservedList"
|
></NuxtChild>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Context } from '@nuxt/types';
|
import { Vue, Component } from 'nuxt-property-decorator';
|
|
@Component
|
export default class ClientReservedList extends Vue {
|
activeTabName = 'reservedList';
|
reservedList: Clients[] = [];
|
contactedList: Clients[] = [];
|
clients: Clients[] = [];
|
|
async asyncData(context: Context) {
|
let reservedList: Clients[] = [];
|
let contactedList: Clients[] = [];
|
let clients: Clients[] = [];
|
|
await context.$service.home.clientReservedList().then((result: Clients[]) => {
|
clients = result;
|
})
|
|
contactedList = clients.filter(item => item.communicateStatus === 'contacted');
|
reservedList = clients.filter(item => item.communicateStatus === 'reserved');
|
|
return {
|
clients,
|
contactedList,
|
reservedList
|
}
|
}
|
|
tabClick(path: string) {
|
this.activeTabName = path;
|
this.$router.push('/clientReservedList/' + this.activeTabName)
|
}
|
}
|
|
export interface Clients {
|
name: string,
|
clientId: string,
|
phone: string,
|
time: Date,
|
gender: string,
|
age: string,
|
job: string,
|
requirements: string[],
|
communicateStatus: string
|
}
|
</script>
|
