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