From 66f726b6643e85cd6ec0041d01b31d38b3803c1a Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 26 一月 2022 10:56:05 +0800
Subject: [PATCH] add#134789: [顧問] 過久未回應的預約單流程

---
 PAMapp/pages/myAppointmentList.vue |   84 ++++++++++++++++++++++++++++-------------
 1 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/PAMapp/pages/myAppointmentList.vue b/PAMapp/pages/myAppointmentList.vue
index 0ced7e5..646cede 100644
--- a/PAMapp/pages/myAppointmentList.vue
+++ b/PAMapp/pages/myAppointmentList.vue
@@ -1,28 +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')"
                 >
-                  <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">蝝赤銝�({{ appointmentList.length }})</span>
+                  <span class="smTxt">蝝赤銝�({{ contactedItemSum }})</span>
                 </div>
                 <div
                     class="cus-tab-item"
                     :class="{'is-active': activeTabName === 'closedList'}"
                     @click="clickTab('closedList')"
                 >
-                  <span class="smTxt">蝯��({{ closedList.length }})</span>
+                  <span class="smTxt">蝯��({{ closedItemSum }})</span>
                 </div>
             </div>
 
@@ -32,30 +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 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',
@@ -63,14 +79,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;
@@ -78,17 +103,23 @@
     @localStorage.Getter
     currentAppointmentIdFromMsg!: string;
 
-    activeTabName          : string        = 'appointmentList';
-    appointmentList        : Appointment[] = [];
-    contactedList          : Appointment[] = [];
-    closedList             : Appointment[] = [];
     contactStatus          = ContactStatus;
-    showNewAppointmentHint: boolean        = false;
+
+    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() {
@@ -99,24 +130,23 @@
 
     @Watch('myAppointmentList')
     onMyAppointmentListChange(): void {
-        this.appointmentList = this.myAppointmentList
-            .filter(item => item.communicateStatus === this.contactStatus.RESERVED);
-        this.contactedList = this.myAppointmentList
-            .filter((item) => item.communicateStatus === this.contactStatus.CONTACTED);
-        this.closedList = this.myAppointmentList
-            .filter(item => item.communicateStatus === this.contactStatus.DONE || item.communicateStatus === this.contactStatus.CLOSE );
         if (this.currentAppointmentIdFromMsg) {
             this.redirectAppointmentStatus();
         }
     }
 
-    // TODO: 隤踵蝔�Ⅳ [Tomas, 2022/1/14 12:02]
     private redirectAppointmentStatus() {
         const currentAppointmentIndex = this.myAppointmentList
             .findIndex(item => item.id === +this.currentAppointmentIdFromMsg);
         if (currentAppointmentIndex > -1) {
             const communicateStatus = this.myAppointmentList[currentAppointmentIndex].communicateStatus;
-            const pathName = communicateStatus === 'reserved' ? 'appointmentList' : 'closedList';
+            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,
@@ -128,7 +158,7 @@
 
     @Watch('newAppointmentSum')
     newAppointmentSumChange(): void {
-      this.showNewAppointmentHint = this.newAppointmentSum > 0;
+      this.isShowNewAppointmentHint = this.newAppointmentSum > 0;
     }
 
     @Watch('$route', {immediate: true})

--
Gitblit v1.8.0