From 04b25b25c477309298e1d7433ddb14bb8e57778d Mon Sep 17 00:00:00 2001
From: charlie <charlie@lvguanqingdeMacBook-Pro.local>
Date: 星期六, 22 一月 2022 12:17:58 +0800
Subject: [PATCH] Fixed: 修正預約資訊中的性別icon顯示判斷

---
 PAMapp/pages/appointment/_appointmentId/index.vue |   87 ++++++++++++++++++++++++++++++++-----------
 1 files changed, 64 insertions(+), 23 deletions(-)

diff --git a/PAMapp/pages/appointment/_appointmentId/index.vue b/PAMapp/pages/appointment/_appointmentId/index.vue
index 54ad105..0fe4c50 100644
--- a/PAMapp/pages/appointment/_appointmentId/index.vue
+++ b/PAMapp/pages/appointment/_appointmentId/index.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="appointment-client-detail-page">
     <div class="date-detail">
-      <div>{{ appointmentDetail.appointmentDate | formatDate }}</div>
-      <div>{{ appointmentDetail.consultantReadTime | formatDate }}</div>
+      <div>{{ appointmentDetail.appointmentDate | formatDate }}����</div>
+      <div>{{ appointmentDetail.consultantReadTime | formatDate }}
+        <span v-if="appointmentDetail.consultantReadTime">撌脰�</span>
+      </div>
     </div>
 
     <AppointmentProgress
@@ -12,12 +14,15 @@
 
     <section class="client-detail">
 
-      <div class="client-detail-info">
+      <div class="client-detail-info mb-30">
         <div class="client-detail-info__avatar">
           <div class="circle">
             {{ appointmentDetail.name || 'NO NAME' }}
-            <div class="sm-circle">
-              {{ appointmentDetail.gender === 'male' ? '�' : '憟�'}}
+            <div class="sm-circle sm-circle-male" v-if="appointmentDetail.gender === 'male'">
+              <i class="icon-sex-male sex-icon"></i>
+            </div>
+            <div class="sm-circle sm-circle-female" v-if="appointmentDetail.gender === 'female'">
+              <i class="icon-sex-female sex-icon"></i>
             </div>
           </div>
         </div>
@@ -51,12 +56,16 @@
       </div>
 
       <div class="client-detail-action" v-if="showWhenAppointmentHasClosed">
-        <el-button >��遛��漲</el-button>
+        <el-button @click="inviteReview">��遛��漲</el-button>
       </div>
 
-      <div class="client-detail-action" v-else>
+      <div class="client-detail-action" v-if="showWhenAppointmentHasContacted">
         <el-button @click="closeAppointment" >蝯��</el-button>
         <el-button @click="sendMsg" style="margin-left: 0px">�/蝝赤</el-button>
+      </div>
+
+      <div class="client-detail-action" v-if="showWhenAppointmentHasCreate">
+        <el-button @click="sendMsg">���赤�</el-button>
       </div>
 
     </section>
@@ -71,13 +80,20 @@
     </InterviewMsg>
 
 
-    <section class="mt-30">
+    <section class="mt-30" v-if="!showWhenAppointmentHasCreate">
       <AppointmentInterviewList :interviewList="appointmentDetail.interviewRecordDTOs" />
     </section>
 
-    <section class="mt-30">
+    <section class="mt-30" v-if="!showWhenAppointmentHasCreate">
       <AppointmentRecordList :noticeLogs="appointmentDetail.appointmentNoticeLogs" />
     </section>
+
+    <PopUpFrame :isOpen.sync="isShowInviteReviewDialog">
+          <div class="text--middle invite-review">
+            <div class="mb-30 mt-10">撌脩�遛��漲</div>
+            <div class="text--primary text--middle cursor--pointer text--underline" @click="isShowInviteReviewDialog = false" :size="'250px'">������</div>
+          </div>
+        </PopUpFrame>
 
   </div>
 </template>
@@ -88,6 +104,9 @@
 
 import { Appointment } from '~/shared/models/appointment.model';
 import { ContactStatus } from '~/shared/models/enum/contact-status';
+
+import reviewsService from '~/shared/services/reviews.service';
+
 
 const appointmentStore = namespace('appointment.store');
 
@@ -101,6 +120,7 @@
   appointmentProgress!: ContactStatus;
 
   isVisibleDialog = false;
+  isShowInviteReviewDialog = false ;
   interviewTxt = "";
   contactStatus = ContactStatus;
 
@@ -125,17 +145,13 @@
         || this.appointmentDetail.communicateStatus === this.contactStatus.CANCEL;
   }
 
-  get displayClosedType(): string {
-    let closedType = '��漱';
-    switch (this.appointmentDetail.communicateStatus) {
-      case this.contactStatus.CLOSE:
-        closedType = '���漱';
-        break;
-      case this.contactStatus.CANCEL:
-        closedType = '����';
-        break;
-    }
-    return closedType;
+  get showWhenAppointmentHasCreate(): boolean {
+    return this.appointmentDetail.communicateStatus === this.contactStatus.PICKED
+        || this.appointmentDetail.communicateStatus === this.contactStatus.RESERVED;
+  }
+
+  get showWhenAppointmentHasContacted() :boolean {
+    return this.appointmentDetail.communicateStatus === this.contactStatus.CONTACTED;
   }
 
   get hopeContactTimeList(): any[] {
@@ -145,6 +161,11 @@
   getHopeContactTimeContent(hopeContactTimeString: string): string[] {
     const result = hopeContactTimeString.replace("'", '').split('��');
     return result;
+  }
+
+  inviteReview(): void {
+    reviewsService.sendSatisfactionToClient(this.appointmentDetail.id).then(res => res);
+    this.isShowInviteReviewDialog = true ;
   }
 }
 </script>
@@ -171,8 +192,7 @@
           height: 100px;
           width: 100px;
           border-radius: 50%;
-          background-color: #fff;
-          border: 1px solid $PRIMARY_BLACK;
+          background-image: url('~/assets/images/appointment/avatar_bg.svg');
           position: relative;
           display: flex;
           justify-content: center;
@@ -183,12 +203,26 @@
             width: 30px;
             border-radius: 50%;
             background-color: #fff;
-            border: 1px solid $PRIMARY_BLACK;
             bottom: 0;
             right: 0;
             display: flex;
             justify-content: center;
             align-items: center;
+            .sex-icon {
+              font-size: 20px;
+              &.icon-sex-male{
+                color: $SKY_BLUE;
+              }
+              &.icon-sex-female{
+                color: $CORAL;
+              }
+            }
+            &-male {
+              border: 1px solid $SKY_BLUE;
+            }
+            &-female {
+              border: 1px solid $LIGHT_RED;
+            }
           }
         }
       }
@@ -212,12 +246,14 @@
         @extend .mb-10;
         @extend .mdTxt;
         @extend .mr-10;
+        line-height: 1.3;
         color     : $DARK_BLUE;
         flex-basis: auto;
         min-width : 40px;
       }
       .client-detail-demand__demand-list-content {
         text-align: justify;
+        line-height: 1.3;
         text-justify: auto;
         word-break: break-all;
       }
@@ -227,6 +263,11 @@
     }
   }
 }
+.invite-review{
+    align-items   : center;
+    display       : flex;
+    flex-direction: column;
+  }
 .close-appointment-detail{
   background-color: #fff;
   display: flex;

--
Gitblit v1.8.0