From a7b45caf5b3784f65ba82793d87f5ffb202fca1e Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期五, 21 一月 2022 11:42:07 +0800
Subject: [PATCH] update#134555: [顧問] 預約單結案/編輯結案功能串接

---
 PAMapp/pages/appointment/_appointmentId/index.vue |   77 +++++++++++++++++++++++++-------------
 1 files changed, 51 insertions(+), 26 deletions(-)

diff --git a/PAMapp/pages/appointment/_appointmentId/index.vue b/PAMapp/pages/appointment/_appointmentId/index.vue
index b4a7da0..54ad105 100644
--- a/PAMapp/pages/appointment/_appointmentId/index.vue
+++ b/PAMapp/pages/appointment/_appointmentId/index.vue
@@ -31,15 +31,22 @@
       </div>
 
       <div class="client-detail-demand mt-10">
-        <div class="client-detail-demand__demand-list">
+
+        <div class="client-detail-demand__demand-list mb-10">
           <div class="client-detail-demand__demand-list-label">��瘙�</div>
-          <div>{{ appointmentDetail.requirement }}</div>
+          <div class="client-detail-demand__demand-list-content">{{ appointmentDetail.requirement }}</div>
         </div>
-        <div class="client-detail-demand__hope-contact-time">
+
+        <div class="client-detail-demand__demand-list">
           <div class="client-detail-demand__demand-list-label">�蝯�<br />��挾</div>
-          <div>���� 17:00 ~ 19:00</div>
-          <!-- TODO: 憭�蝯⊥�挾憒�� && 頝���� [Tomas. 2021/1/12] -->
-          <!-- <div>{{ appointmentDetail.hopeContactTime }}</div> -->
+          <div class="client-detail-demand__demand-list-content">
+            <div v-for="(hopeContactTime, index) in hopeContactTimeList" :key="index"
+              :class="{'mt-10': index > 0, 'pb-10': true, 'hope-contact-time__line': index + 1 < hopeContactTimeList.length }">
+              <div v-for="(item, index) in getHopeContactTimeContent(hopeContactTime)" :key="index" :class="{'mt-10': index < 0 }">
+                {{ item }}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -54,24 +61,9 @@
 
     </section>
 
-    <section class="close-appointment-detail" v-if="showWhenAppointmentHasClosed">
-
-        <div class="close-appointment-detail-nav">
-          <div class="mdTxt">蝯�撘�</div>
-          <div class="mdTxt text--primary text--underline cursor--pointer" @click="editAppointmentHasClosed">蝺刻摩</div>
-        </div>
-        <span class="mt-10 mb-30">��漱</span>
-
-        <div class="mdTxt mb-10">靽頨思遢霅���</div>
-        <div class="mb-30">A123456789</div>
-        <div class="mdTxt mb-10">���誨蝣噗lan Code</div>
-        <div class="mb-30">8888888</div>
-        <div class="mdTxt mb-10">�脖辣����</div>
-        <div class="mb-30">2021/12/2</div>
-        <div class="mdTxt mb-10">��酉</div>
-        <div class="">蝝赤4甈∴�恥�敺�迭��窄�憭Ｕ��</div>
-
-    </section>
+    <template v-if="showWhenAppointmentHasClosed">
+      <AppointmentClosedInfo :appointmentDetail="appointmentDetail" />
+    </template>
 
     <InterviewMsg
       :isVisible.sync="isVisibleDialog"
@@ -131,6 +123,28 @@
     return this.appointmentDetail.communicateStatus === this.contactStatus.DONE
         || this.appointmentDetail.communicateStatus === this.contactStatus.CLOSE
         || 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 hopeContactTimeList(): any[] {
+    return this.appointmentDetail.hopeContactTime.split("','")
+  }
+
+  getHopeContactTimeContent(hopeContactTimeString: string): string[] {
+    const result = hopeContactTimeString.replace("'", '').split('��');
+    return result;
   }
 }
 </script>
@@ -195,9 +209,17 @@
         display: flex;
       }
       .client-detail-demand__demand-list-label {
-        @extend .mr-10;
-        @extend .mdTxt;
         @extend .mb-10;
+        @extend .mdTxt;
+        @extend .mr-10;
+        color     : $DARK_BLUE;
+        flex-basis: auto;
+        min-width : 40px;
+      }
+      .client-detail-demand__demand-list-content {
+        text-align: justify;
+        text-justify: auto;
+        word-break: break-all;
       }
     }
     .client-detail-action {
@@ -219,5 +241,8 @@
   justify-content: space-between;
   flex: 1;
 }
+.hope-contact-time__line {
+  border-bottom: 1px solid #CCCCCC;
+}
 
 </style>

--
Gitblit v1.8.0