From 497f54b264eba626b77e79fec2ca6947ccae19e4 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期二, 14 十二月 2021 15:45:23 +0800
Subject: [PATCH] refactor: myAppointmentList

---
 PAMapp/pages/myAppointmentList.vue |   77 +++++++++++++++++++++++++++-----------
 1 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/PAMapp/pages/myAppointmentList.vue b/PAMapp/pages/myAppointmentList.vue
index 3e99491..ba395a1 100644
--- a/PAMapp/pages/myAppointmentList.vue
+++ b/PAMapp/pages/myAppointmentList.vue
@@ -21,63 +21,94 @@
 
             <NuxtChild></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 } from 'nuxt-property-decorator';
-import { ClientInfo } from '~/assets/ts/api/appointment';
+
 import * as _ from 'lodash';
 
+import { ClientInfo } from '~/assets/ts/models/client.model';
+
 @Component({
-    layout: 'home'
+    layout: 'home',
+    middleware: 'myAppointmentMiddleware'
 })
 export default class ClientReservedList extends Vue {
+
     activeTabName = 'appointmentList';
     appointmentList: ClientInfo[] = [];
     contactedList: ClientInfo[] = [];
     clients: ClientInfo[] = [];
+    showNewAppointmentHint = false;
 
-    @State('myAppointmentList') myAppointmentList!: ClientInfo[];
-    @Action storeMyAppointmentList!: any;
+    @State('myAppointmentList')
+    myAppointmentList!: ClientInfo[];
 
-    mounted() {
-     this.storeMyAppointmentList();
+    @State('myNewAppointmentSum')
+    newAppointmentSum!: number;
 
-     if (this.$route.name) {
-         this.activeTabName = this.$route.name.split('-')[1]
-     }
-    }
+    @Action
+    storeMyAppointmentList!: () => Promise<number>;
 
     @Watch('myAppointmentList')
     onMyAppointmentListChange() {
         this.contactedList = this.myAppointmentList
-            .filter(item => item.communicateStatus === 'contacted')
-            .sort((a, b) => a.appointmentDate > b.appointmentDate ? -1 : 1);
+            .filter(item => item.communicateStatus === 'contacted');
+
         this.appointmentList = this.myAppointmentList
-            .filter(item => item.communicateStatus !== 'contacted')
-            .sort((a, b) => a.appointmentDate > b.appointmentDate ? -1 : 1);;
+            .filter(item => item.communicateStatus !== 'contacted');
     }
 
-    tabClick(path: string) {
-        this.activeTabName = path;
-        this.$router.push('/myAppointmentList/' + this.activeTabName)
+    //////////////////////////////////////////////////////////////////////
+
+    mounted() {
+      this.setActivatedTab();
+      this.storeMyAppointmentList();
+      this.showNewAppointmentHint = this.newAppointmentSum > 0;
     }
 
-    get route(): string{
-        const routeName = this.$route.name;
-        return routeName ? routeName:'';
-    };
+    //////////////////////////////////////////////////////////////////////
 
     get bannerClassName() {
-        return this.routeFormatBannerClass(this.route);
+        const routeName = this.$route.name || '';
+        return this.routeFormatBannerClass(routeName);
     };
 
+    tabClick(path: string) {
+      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) {
+        this.activeTabName = routeFullName.split('-')[1];
+      }
+    }
 
 }
 </script>
@@ -109,4 +140,4 @@
             margin: 30px auto;
         }
     }
-</style>
\ No newline at end of file
+</style>

--
Gitblit v1.8.0