From ae4db5435180c44b37f521c463b17f2023ac1d8c Mon Sep 17 00:00:00 2001
From: wayne <wayne8692wayne8692@gmail.com>
Date: 星期五, 18 二月 2022 09:25:50 +0800
Subject: [PATCH] [update] 若顧問停用時,將無法登入 (文案待確認)

---
 PAMapp/pages/myAppointmentList.vue |  100 +++++++++++++++++++++++++++++++++++---------------
 1 files changed, 70 insertions(+), 30 deletions(-)

diff --git a/PAMapp/pages/myAppointmentList.vue b/PAMapp/pages/myAppointmentList.vue
index ea6c11b..646cede 100644
--- a/PAMapp/pages/myAppointmentList.vue
+++ b/PAMapp/pages/myAppointmentList.vue
@@ -1,21 +1,28 @@
 <template>
     <div>
-        <div class="pam-myAppointment-banner"></div>
+      <div class="pam-myAppointment-banner"></div>
         <div class="pam-container">
-            <div class="pam-cus-tabs mb-30">
+            <div class="pam-cus-tabs mb-10">
                 <div
                     class="cus-tab-item"
                     :class="{'is-active': activeTabName === 'appointmentList'}"
                     @click="clickTab('appointmentList')"
-                >摰X����
-                    <span class="p">({{appointmentList.length}})</span>
+                >
+                  <span class="smTxt">��蝯�({{ appointmentItemSum }})</span>
                 </div>
                 <div
                     class="cus-tab-item"
                     :class="{'is-active': activeTabName === 'contactedList'}"
                     @click="clickTab('contactedList')"
-                >撌脰蝯�
-                    <span class="p">({{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>
 
@@ -25,29 +32,46 @@
 
         <!-- DIALOG -->
         <PopUpFrame
-             :isOpen.sync="showNewAppointmentHint"
+             :isOpen.sync="isShowNewAppointmentHint"
         >
             <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"
+                        @click="isShowNewAppointmentHint = false"
                     >������</el-button>
                 </div>
             </div>
         </PopUpFrame>
+
+      <PopUpFrame
+        :isOpen.sync="isShowRemindAppointmentDialog"
+      >
+          <div class="text--center mdTxt">
+              <p class="mb-50">���� <span class="text--primary">{{ pendingAppointmentSum }}</span> ������脰�蝜恬������</p>
+              <div class="text--center">
+                  <el-button
+                      type="primary"
+                      @click="isShowRemindAppointmentDialog = false"
+                  >������</el-button>
+              </div>
+          </div>
+      </PopUpFrame>
     </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component, State, Action, Watch, namespace } from 'nuxt-property-decorator';
+import { Vue, Component, Watch, namespace } from 'nuxt-property-decorator';
 
 import * as _ from 'lodash';
 
-import { ClientInfo } from '~/shared/models/client.model';
+import appointmentService from '~/shared/services/appointment.service';
+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',
@@ -55,14 +79,23 @@
 })
 export default class ClientReservedList extends Vue {
 
-    @State('myAppointmentList')
-    myAppointmentList!: ClientInfo[];
+    @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;
@@ -70,16 +103,23 @@
     @localStorage.Getter
     currentAppointmentIdFromMsg!: string;
 
-    activeTabName         : string       = 'appointmentList';
-    appointmentList       : ClientInfo[] = [];
-    clients               : ClientInfo[] = [];
-    contactedList         : ClientInfo[] = [];
-    showNewAppointmentHint: boolean      = false;
+    contactStatus          = ContactStatus;
+
+    activeTabName                 = 'appointmentList';
+    isShowNewAppointmentHint      = false;
+    isShowRemindAppointmentDialog = false;
+    pendingAppointmentSum         = 0;
 
     //////////////////////////////////////////////////////////////////////
 
     mounted() {
-      this.storeMyAppointmentList();
+      this.getMyAppointmentList();
+        appointmentService.getPendingAppointmentSum().then((pendingAppointmentSum) => {
+        this.pendingAppointmentSum = pendingAppointmentSum;
+        if (this.pendingAppointmentSum) {
+          this.isShowRemindAppointmentDialog = true;
+        }
+      });
     }
 
     destroyed() {
@@ -90,12 +130,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();
         }
@@ -106,7 +140,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,
@@ -118,7 +158,7 @@
 
     @Watch('newAppointmentSum')
     newAppointmentSumChange(): void {
-      this.showNewAppointmentHint = this.newAppointmentSum > 0;
+      this.isShowNewAppointmentHint = this.newAppointmentSum > 0;
     }
 
     @Watch('$route', {immediate: true})
@@ -143,7 +183,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