From a74fd90950e4d37c35b947db979d3a26698a85db Mon Sep 17 00:00:00 2001 From: Tomas <tomasysh@gmail.com> Date: 星期一, 27 十二月 2021 10:06:23 +0800 Subject: [PATCH] page refactor: my-appointment-list --- PAMapp/pages/myAppointmentList.vue | 93 +++++++++++++++++++++++----------------------- 1 files changed, 46 insertions(+), 47 deletions(-) diff --git a/PAMapp/pages/myAppointmentList.vue b/PAMapp/pages/myAppointmentList.vue index f5198db..e38c17e 100644 --- a/PAMapp/pages/myAppointmentList.vue +++ b/PAMapp/pages/myAppointmentList.vue @@ -56,33 +56,17 @@ @State('myAppointmentList') myAppointmentList!: ClientInfo[]; - @Watch('myAppointmentList') - onMyAppointmentListChange() { - this.contactedList = this.myAppointmentList - .filter(item => item.communicateStatus === 'contacted'); - - this.appointmentList = this.myAppointmentList - .filter(item => item.communicateStatus !== 'contacted'); - } - @State('myNewAppointmentSum') newAppointmentSum!: number; - @Watch('newAppointmentSum') - newAppointmentSumChange(): void { - this.showNewAppointmentHint = this.newAppointmentSum > 0; - } + @Action + storeMyAppointmentList!: () => Promise<number>; - activeTabName = 'appointmentList'; - appointmentList: ClientInfo[] = []; - contactedList: ClientInfo[] = []; - clients: ClientInfo[] = []; - showNewAppointmentHint = false; - - get bannerClassName() { - const routeName = this.$route.name || ''; - return this.routeFormatBannerClass(routeName); - }; + activeTabName : string = 'appointmentList'; + appointmentList : ClientInfo[] = []; + clients : ClientInfo[] = []; + contactedList : ClientInfo[] = []; + showNewAppointmentHint: boolean = false; ////////////////////////////////////////////////////////////////////// @@ -91,24 +75,6 @@ this.storeMyAppointmentList(); } - ////////////////////////////////////////////////////////////////////// - - @Action - storeMyAppointmentList!: () => Promise<number>; - - - clickTab(path: string): void { - this.activeTabName = path; - this.$router.push(`/myAppointmentList/${this.activeTabName}`); - } - - ////////////////////////////////////////////////////////////////////// - // 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'; - }; - private setActivatedTab(): void { const routeFullName = this.$route.name; if (routeFullName) { @@ -116,18 +82,51 @@ } } + ////////////////////////////////////////////////////////////////////// + + @Watch('myAppointmentList') + onMyAppointmentListChange(): void { + this.contactedList = this.myAppointmentList + .filter(item => item.communicateStatus === 'contacted'); + + this.appointmentList = this.myAppointmentList + .filter(item => item.communicateStatus !== 'contacted'); + } + + @Watch('newAppointmentSum') + newAppointmentSumChange(): void { + this.showNewAppointmentHint = this.newAppointmentSum > 0; + } + + ////////////////////////////////////////////////////////////////////// + + 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-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; + 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'); + position : relative; + background-image : url('~/assets/images/myAppointmentList/agent_banner_mob.svg'); } @media (min-width: 768px) { -- Gitblit v1.8.0