From f90c94f20b5f11d3b3ce0164d619c0112d5158c9 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期四, 20 一月 2022 18:23:56 +0800
Subject: [PATCH] update: TODO#133100 顧問端:header增加顧問頭像圖示

---
 PAMapp/pages/myAppointmentList.vue |   65 ++++++++++++++++++--------------
 1 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/PAMapp/pages/myAppointmentList.vue b/PAMapp/pages/myAppointmentList.vue
index 286ea92..d1a6847 100644
--- a/PAMapp/pages/myAppointmentList.vue
+++ b/PAMapp/pages/myAppointmentList.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="pam-myAppointment-banner"></div>
+    <InterviewNotification></InterviewNotification>
         <div class="pam-container">
             <div class="pam-cus-tabs mb-30">
                 <div
@@ -8,21 +8,21 @@
                     :class="{'is-active': activeTabName === 'appointmentList'}"
                     @click="clickTab('appointmentList')"
                 >
-                  <span class="smTxt">��蝯�({{ appointmentList.length }})</span>
-                </div>
-                <div
-                    class="cus-tab-item"
-                    :class="{'is-active': activeTabName === 'onProgressList'}"
-                    @click="clickTab('onProgressList')"
-                >
-                  <span class="smTxt">蝝赤銝�({{ appointmentList.length }})</span>
+                  <span class="smTxt">��蝯�({{ appointmentItemSum }})</span>
                 </div>
                 <div
                     class="cus-tab-item"
                     :class="{'is-active': activeTabName === 'contactedList'}"
                     @click="clickTab('contactedList')"
                 >
-                  <span class="smTxt">蝯��({{ contactedList.length }})</span>
+                  <span class="smTxt">蝝赤銝�({{ contactedItemSum }})</span>
+                </div>
+                <div
+                    class="cus-tab-item"
+                    :class="{'is-active': activeTabName === 'closedList'}"
+                    @click="clickTab('closedList')"
+                >
+                  <span class="smTxt">蝯��({{ closedItemSum }})</span>
                 </div>
             </div>
 
@@ -53,8 +53,10 @@
 import * as _ from 'lodash';
 
 import { Appointment } from '~/shared/models/appointment.model';
+import { ContactStatus } from '~/shared/models/enum/contact-status';
 
 const localStorage = namespace('localStorage');
+const appointmentStore = namespace('appointment.store');
 
 @Component({
     layout: 'home',
@@ -62,14 +64,23 @@
 })
 export default class ClientReservedList extends Vue {
 
-    @State('myAppointmentList')
+    @appointmentStore.State('myAppointmentList')
     myAppointmentList!: Appointment[];
 
-    @State('myNewAppointmentSum')
+    @appointmentStore.Getter('newAppointmentSum')
     newAppointmentSum!: number;
 
-    @Action
-    storeMyAppointmentList!: () => Promise<number>;
+    @appointmentStore.Getter('appointmentItemSum')
+    appointmentItemSum!: number;
+
+    @appointmentStore.Getter('contactedItemSum')
+    contactedItemSum!: number;
+
+    @appointmentStore.Getter('closedItemSum')
+    closedItemSum!: number;
+
+    @appointmentStore.Action
+    getMyAppointmentList!: () => Promise<Appointment[]>;
 
     @localStorage.Mutation
     storageClearAppointmentIdFromMsg!: () => void;
@@ -77,16 +88,14 @@
     @localStorage.Getter
     currentAppointmentIdFromMsg!: string;
 
-    activeTabName         : string       = 'appointmentList';
-    appointmentList       : Appointment[] = [];
-    clients               : Appointment[] = [];
-    contactedList         : Appointment[] = [];
-    showNewAppointmentHint: boolean      = false;
+    activeTabName          : string        = 'appointmentList';
+    contactStatus          = ContactStatus;
+    showNewAppointmentHint: boolean        = false;
 
     //////////////////////////////////////////////////////////////////////
 
     mounted() {
-      this.storeMyAppointmentList();
+      this.getMyAppointmentList();
     }
 
     destroyed() {
@@ -97,12 +106,6 @@
 
     @Watch('myAppointmentList')
     onMyAppointmentListChange(): void {
-        this.contactedList = this.myAppointmentList
-            .filter(item => item.communicateStatus === 'contacted');
-
-        this.appointmentList = this.myAppointmentList
-            .filter(item => item.communicateStatus !== 'contacted');
-
         if (this.currentAppointmentIdFromMsg) {
             this.redirectAppointmentStatus();
         }
@@ -113,7 +116,13 @@
             .findIndex(item => item.id === +this.currentAppointmentIdFromMsg);
         if (currentAppointmentIndex > -1) {
             const communicateStatus = this.myAppointmentList[currentAppointmentIndex].communicateStatus;
-            const pathName = communicateStatus === 'reserved' ? 'appointmentList' : 'contactedList';
+            let pathName = 'closedList'
+            if (communicateStatus === this.contactStatus.RESERVED || communicateStatus === this.contactStatus.PICKED) {
+              pathName = 'contactedList';
+            }
+            if (communicateStatus === this.contactStatus.CONTACTED) {
+              pathName = 'contactedList';
+            }
             this.$router.push(
                 {
                     path: '/myAppointmentList/' + pathName,
@@ -150,7 +159,7 @@
 
     // format to {page}-banner or pam-no-banner tag
     private routeFormatBannerClass(route: string): string {
-        const needBannerTags = ['myAppointmentList-appointmentList', 'myAppointmentList-contactedList'];
+        const needBannerTags = ['myAppointmentList-appointmentList', 'myAppointmentList-closedList'];
         return _.includes(needBannerTags, route) ? route + '-banner' : 'pam-no-banner';
     };
 }

--
Gitblit v1.8.0