From bf015fd9a49ab0ec81c050215bbfc38d944bfb6e Mon Sep 17 00:00:00 2001
From: HelenHuang <LinHuang@pollex.com.tw>
Date: 星期一, 17 一月 2022 12:34:10 +0800
Subject: [PATCH] update: 預約清單 - 預約卡片描述

---
 PAMapp/components/Client/ClientCard.vue |  111 ++++++++++++++++++++++++++++++++++++++++---------------
 1 files changed, 81 insertions(+), 30 deletions(-)

diff --git a/PAMapp/components/Client/ClientCard.vue b/PAMapp/components/Client/ClientCard.vue
index 13d43a5..90eec39 100644
--- a/PAMapp/components/Client/ClientCard.vue
+++ b/PAMapp/components/Client/ClientCard.vue
@@ -15,8 +15,20 @@
 
             <div class="pl-10">
                 <div class="smTxt_bold name">{{ client.name }}</div>
-                <div class="my-10 xsTxt">������</div>
-                <div class="professionals">
+                <div  v-if="client.communicateStatus === contactStatus.RESERVED" class="my-10 xsTxt">������</div>
+                <div
+                  class="xsTxt mb-10 mt-10"
+                  v-else-if="client.communicateStatus === contactStatus.CONTACTED">
+                  蝝赤蝝����
+                </div>
+                <div
+                  class="xsTxt mb-10 mt-10"
+                  v-else>
+                  皛踵�漲
+                  <span v-if="client.satisfactionScore" class="xsTxt">{{ client.satisfactionScore }}</span>
+                  <span v-else class="xsTxt text--mid_grey">�憛�</span>
+                </div>
+                <div class="professionals" v-if="client.communicateStatus === contactStatus.RESERVED">
                     <template v-if="client.requirement">
                         <span
                             v-for="(item, index) in requirements"
@@ -51,13 +63,26 @@
             </el-col> -->
 
             <div class="flex-column contactInfo" :xs="4" :sm="6">
-                <!-- <div
-                    class="smTxt_bold fix-chrome-click--issue"
-                    :class="{'unread-txt': reservedTxt === '�霈�', 'read-txt': reservedTxt !== '�霈�'}"
-                >{{ reservedTxt }}</div> -->
-                <div class="invite-msg smTxt_bold" @click.stop="showMsgDialog">
-                    ���赤�
+
+                <div
+                  class="invite-msg smTxt_bold"
+                  @click.stop="showAddInterviewDialog"
+                  v-if="client.communicateStatus === contactStatus.RESERVED">
+                  ���赤�
                 </div>
+                <div
+                  class="invite-msg smTxt_bold"
+                  @click.stop="navigateToCloseAppointment"
+                  v-else-if="client.communicateStatus === contactStatus.CONTACTED">
+                  蝯��
+                </div>
+                <div
+                  class="invite-msg smTxt_bold"
+                  @click.stop="inviteReview"
+                  v-else>
+                  ��遛��漲
+                </div>
+
                 <div
                     class="date xsTxt text--black"
                 >{{ date }}</div>
@@ -129,7 +154,16 @@
             </div>
         </Ui-Dialog>
 
-        <InterviewMsg :isVisible.sync="isMsgDialog"></InterviewMsg>
+        <InterviewMsg
+          :client="client"
+          :isVisible.sync="isShowAddInterviewDialog">
+        </InterviewMsg>
+        <PopUpFrame :isOpen.sync="showInviteReview">
+          <div class="text--middle invite-review">
+            <div class="mb-30 mt-10">撌脩�遛��漲</div>
+            <div class="text--primary text--middle cursor--pointer text--underline" @click="showInviteReview = false" :size="'250px'">������</div>
+          </div>
+        </PopUpFrame>
     </div>
 </template>
 
@@ -137,11 +171,12 @@
 import { Vue, Component, Prop, Action, namespace, Watch } from 'nuxt-property-decorator';
 
 import appointmentService from '~/shared/services/appointment.service';
+import myConsultantService from '~/shared/services/my-consultant.service';
 import UtilsService from '~/shared/services/utils.service';
 import { hideReviews } from '~/shared/const/hide-reviews';
-import myConsultantService from '~/shared/services/my-consultant.service';
 import { ElRow } from 'element-ui/types/row';
-import { Appointment, AppointmentMemoInfo } from '~/shared/models/appointment.model';
+import { Appointment, AppointmentMemoInfo, ToInformAppointment } from '~/shared/models/appointment.model';
+import { ContactStatus } from '~/shared/models/enum/contact-status';
 
 const localStorage = namespace('localStorage');
 @Component({
@@ -173,18 +208,23 @@
     @localStorage.Mutation
     storageClearAppointmentIdFromMsg!: () => void;
 
-    isVisibleDialog = false;
-    isMsgDialog = false;
-    dialogWidth = '';
-    hideReviews = hideReviews;
+    contactStatus            = ContactStatus;
+    dialogWidth              = '';
+    hideReviews              = hideReviews;
+    isEdit                   = false;
+    isShowAddInterviewDialog = false;
+    isVisibleDialog          = false;
+    memo                     = '';
+    showInviteReview = false;
 
-    isEdit = false;
+
+    // currentAppointmentStatus = this.contactStatus.RESERVED;
+
     memoInfo: AppointmentMemoInfo = {
         appointmentId: 0,
-        content: '',
-        id: 0
+        content      : '',
+        id           : 0
     }
-    memo = '';
 
     //////////////////////////////////////////////////////////////////////
 
@@ -211,9 +251,22 @@
       this.$router.push(`/appointment/${this.client.id}`);
     }
 
-    showMsgDialog(): void {
-      this.isMsgDialog = true;
+    showAddInterviewDialog(): void {
+      this.isShowAddInterviewDialog = true;
     }
+
+    navigateToCloseAppointment(): void {
+      this.$router.push(`/appointment/${this.client.id}/close`);
+    }
+
+    makeAppointment(): void {
+      alert('MAKE AN APPOINTMENT!');
+    }
+
+    inviteReview(): void {
+      this.showInviteReview = true ;
+    }
+
     get newAppointment(): boolean {
       return !this.client.consultantViewTime
             && this.client.communicateStatus === 'reserved';
@@ -444,14 +497,12 @@
         display: flex;
     }
     .invite-msg{
-        color: #ED1B2E;
-        border-bottom: 1px solid #ED1B2E;
-        width: 97px;
+      color: $PRIMARY_RED;
+        @extend .text--underline;
     }
-    .line{
-        height: 4px;
-        width: 10px;
-        background-color: $PRUDENTIAL_GREY;
-
-    }
+  .invite-review{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 </style>

--
Gitblit v1.8.0