<template>
|
<div>
|
<div class="pam-myAppointment-banner"></div>
|
<div class="pam-container">
|
<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>
|
|
<PopUpFrame
|
:isOpen.sync="showNewAppointmentNumber"
|
>
|
<div class="text--center mdTxt">
|
<p class="mb-50">你有 <span class="text--primary">{{newAppointmentNumber}}</span> 則新的預約</p>
|
<div class="text--center">
|
<el-button
|
type="primary"
|
@click="showNewAppointmentNumber = false"
|
>我知道了</el-button>
|
</div>
|
</div>
|
</PopUpFrame>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, State, Action, Watch } from 'nuxt-property-decorator';
|
import { allAppointmentsView, ClientInfo } from '~/assets/ts/api/appointment';
|
import * as _ from 'lodash';
|
|
@Component({
|
layout: 'home',
|
middleware: 'myAppointmentMiddleware'
|
})
|
export default class ClientReservedList extends Vue {
|
activeTabName = 'appointmentList';
|
appointmentList: ClientInfo[] = [];
|
contactedList: ClientInfo[] = [];
|
clients: ClientInfo[] = [];
|
newAppointmentNumber: number = 0;
|
showNewAppointmentNumber = false;
|
|
@State('myAppointmentList') myAppointmentList!: ClientInfo[];
|
@Action storeMyAppointmentList!: () => Promise<number>;
|
|
mounted() {
|
this.storeMyAppointmentList().then(newDataLength => {
|
this.newAppointmentNumber = newDataLength;
|
if (this.newAppointmentNumber > 0) {
|
this.showNewAppointmentNumber = true;
|
allAppointmentsView().then(res => res);
|
}
|
});
|
|
if (this.$route.name) {
|
this.activeTabName = this.$route.name.split('-')[1]
|
}
|
}
|
|
@Watch('myAppointmentList')
|
onMyAppointmentListChange() {
|
this.contactedList = this.myAppointmentList
|
.filter(item => item.communicateStatus === 'contacted');
|
|
this.appointmentList = this.myAppointmentList
|
.filter(item => item.communicateStatus !== 'contacted');
|
}
|
|
tabClick(path: string) {
|
this.activeTabName = path;
|
this.$router.push('/myAppointmentList/' + this.activeTabName)
|
}
|
|
get route(): string{
|
const routeName = this.$route.name;
|
return routeName ? routeName:'';
|
};
|
|
get bannerClassName() {
|
return this.routeFormatBannerClass(this.route);
|
};
|
|
// format to {page}-banner or pam-no-banner tag
|
private routeFormatBannerClass(route: string): string {
|
const needBannerTags = ['myAppointmentList-appointmentList', 'myAppointmentList-contactedList'];
|
return _.includes(needBannerTags, route) ? route + '-banner' : 'pam-no-banner';
|
};
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.pam-myAppointment-banner {
|
width: 100%;
|
height: 120px;
|
background-size: cover;
|
background-repeat: no-repeat;
|
background-position: center;
|
position: relative;
|
background-image: url('~/assets/images/myAppointmentList/agent_banner_mob.svg');
|
}
|
|
@media (min-width: 768px) {
|
.pam-myAppointment-banner {
|
background-image: url('~/assets/images/myAppointmentList/agent_banner_web.svg');
|
}
|
}
|
|
.pam-container {
|
margin: 30px 20px;
|
}
|
|
@include desktop {
|
.pam-container {
|
width: 700px;
|
margin: 30px auto;
|
}
|
}
|
</style>
|
