<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="clickTab('appointmentList')"
|
>
|
<span class="smTxt">未聯絡({{ appointmentList.length }})</span>
|
</div>
|
<div
|
class="cus-tab-item"
|
:class="{'is-active': activeTabName === 'contactedList'}"
|
@click="clickTab('contactedList')"
|
>
|
<span class="smTxt">約訪中({{ contactedList.length }})</span>
|
</div>
|
<div
|
class="cus-tab-item"
|
:class="{'is-active': activeTabName === 'closedList'}"
|
@click="clickTab('closedList')"
|
>
|
<span class="smTxt">結案({{ closedList.length }})</span>
|
</div>
|
</div>
|
|
<NuxtChild keep-alive></NuxtChild>
|
|
</div>
|
|
<!-- DIALOG -->
|
<PopUpFrame
|
:isOpen.sync="showNewAppointmentHint"
|
>
|
<div class="text--center mdTxt">
|
<p class="mb-50">您有 <span class="text--primary">{{ newAppointmentSum }}</span> 則新的預約</p>
|
<div class="text--center">
|
<el-button
|
type="primary"
|
@click="showNewAppointmentHint = false"
|
>我知道了</el-button>
|
</div>
|
</div>
|
</PopUpFrame>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, State, Action, Watch, namespace } from 'nuxt-property-decorator';
|
|
import * as _ from 'lodash';
|
|
import { Appointment } from '~/shared/models/appointment.model';
|
import { ContactStatus } from '~/shared/models/enum/contact-status';
|
|
const localStorage = namespace('localStorage');
|
|
@Component({
|
layout: 'home',
|
middleware: 'myAppointment'
|
})
|
export default class ClientReservedList extends Vue {
|
|
@State('myAppointmentList')
|
myAppointmentList!: Appointment[];
|
|
@State('myNewAppointmentSum')
|
newAppointmentSum!: number;
|
|
@Action
|
storeMyAppointmentList!: () => Promise<number>;
|
|
@localStorage.Mutation
|
storageClearAppointmentIdFromMsg!: () => void;
|
|
@localStorage.Getter
|
currentAppointmentIdFromMsg!: string;
|
|
activeTabName : string = 'appointmentList';
|
appointmentList : Appointment[] = [];
|
contactedList : Appointment[] = [];
|
closedList : Appointment[] = [];
|
contactStatus = ContactStatus;
|
showNewAppointmentHint: boolean = false;
|
|
//////////////////////////////////////////////////////////////////////
|
|
mounted() {
|
this.storeMyAppointmentList();
|
}
|
|
destroyed() {
|
this.storageClearAppointmentIdFromMsg();
|
}
|
|
//////////////////////////////////////////////////////////////////////
|
|
@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();
|
}
|
}
|
|
// TODO: 調整程式碼 [Tomas, 2022/1/14 12:02]
|
private redirectAppointmentStatus() {
|
const currentAppointmentIndex = this.myAppointmentList
|
.findIndex(item => item.id === +this.currentAppointmentIdFromMsg);
|
if (currentAppointmentIndex > -1) {
|
const communicateStatus = this.myAppointmentList[currentAppointmentIndex].communicateStatus;
|
const pathName = communicateStatus === 'reserved' ? 'appointmentList' : 'closedList';
|
this.$router.push(
|
{
|
path: '/myAppointmentList/' + pathName,
|
query: {appointmentId: this.currentAppointmentIdFromMsg}
|
}
|
);
|
}
|
};
|
|
@Watch('newAppointmentSum')
|
newAppointmentSumChange(): void {
|
this.showNewAppointmentHint = this.newAppointmentSum > 0;
|
}
|
|
@Watch('$route', {immediate: true})
|
onRouteChange() {
|
const routeFullName = this.$route.name;
|
if (routeFullName) {
|
this.activeTabName = routeFullName.split('-')[1];
|
}
|
}
|
|
//////////////////////////////////////////////////////////////////////
|
|
clickTab(path: string): void {
|
this.activeTabName = path;
|
this.$router.push(`/myAppointmentList/${this.activeTabName}`);
|
}
|
|
get bannerClassName() {
|
const routeName = this.$route.name || '';
|
return this.routeFormatBannerClass(routeName);
|
};
|
|
// format to {page}-banner or pam-no-banner tag
|
private routeFormatBannerClass(route: string): string {
|
const needBannerTags = ['myAppointmentList-appointmentList', 'myAppointmentList-closedList'];
|
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>
|
