From 304a920efe54968615208a580bff15bd013d730e Mon Sep 17 00:00:00 2001
From: HelenHuang <LinHuang@pollex.com.tw>
Date: 星期五, 07 一月 2022 09:59:44 +0800
Subject: [PATCH] add: appointmentProgress.vue

---
 PAMapp/components/Client/ClientCard.vue |  120 +++++++++++++++++++++++++++++++++++++----------------------
 1 files changed, 75 insertions(+), 45 deletions(-)

diff --git a/PAMapp/components/Client/ClientCard.vue b/PAMapp/components/Client/ClientCard.vue
index 4cc5f65..c140e28 100644
--- a/PAMapp/components/Client/ClientCard.vue
+++ b/PAMapp/components/Client/ClientCard.vue
@@ -8,27 +8,14 @@
             :class="{'new': newAppointment }"
             @click.native="openDetail"
         >
-            <el-col :xs="1" :sm="1" class="unread" align="middle" v-if="isReserved">
+        <div class="test">
+            <div class="unread" v-if="isReserved">
                 <div class="circle" v-if="!isRead"></div>
-            </el-col>
-            <el-col :xs="5" :sm="3" align="middle">
-                <el-avatar
-                    :size="50"
-                ></el-avatar>
-                <div class="satisfaction" v-if="!hideReviews">
-                    <template v-if="client.satisfactionScore">
-                        TODO:���遛��漲
-                        <i class="icon-star pam-icon icon--yellow satisfaction"></i>
-                        <span>{{client.satisfactionScore}}</span>
-                    </template>
-                    <template v-else>
-                        <div class="unfilled">�憛急遛��漲</div>
-                    </template>
-                </div>
-            </el-col>
-            <el-col :xs="14" :sm="14" class="pl-10">
+            </div>
+
+            <div class="pl-10">
                 <div class="smTxt_bold name">{{ client.name }}</div>
-                <div class="my-10">������</div>
+                <div class="my-10 xsTxt">������</div>
                 <div class="professionals">
                     <template v-if="client.requirement">
                         <span
@@ -42,19 +29,46 @@
                         >(摰X�����瘙�)</span>
                     </template>
                 </div>
-            </el-col>
-            <el-col class="flex-column contactInfo" :xs="4" :sm="6">
-                <div
+                <div class="unread" style="display:flex">
+                    <div class="circle"></div>
+                    <div class="line"></div>
+                    <div class="circle"></div>
+                    <div class="line"></div>
+                    <div class="circle"></div>
+                </div>
+            </div>
+        </div>
+            <!-- <el-col :xs="5" :sm="3" align="middle">
+                <el-avatar
+                    :size="50"
+                ></el-avatar>
+                <div class="satisfaction" v-if="!hideReviews">
+                    <template v-if="client.satisfactionScore">
+                        TODO:���遛��漲
+                        <i class="icon-star pam-icon icon--yellow satisfaction"></i>
+                        <span>{{client.satisfactionScore}}</span>
+                    </template>
+                    <template v-else>
+                        <div class="unfilled">�憛急遛��漲</div>
+                    </template>
+                </div>
+            </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>
+                >{{ reservedTxt }}</div> -->
+                <div class="invite-msg smTxt_bold">
+                    ���赤�
+                </div>
                 <div
-                    class="date xsTxt text--mid_grey"
+                    class="date xsTxt text--black"
                 >{{ date }}</div>
                 <div
                     class="xsTxt text--mid_grey"
                 >{{ time }}</div>
-            </el-col>
+            </div>
         </el-row>
 
         <Ui-Dialog
@@ -87,12 +101,12 @@
                     :key="index"
                 >��蝯⊥�挾{{index + 1 | formatNumber}}嚗�<span>{{ item | formatHopeContactTime}}</span></p>
             </div>
-            <div class="memoStyle">
-                <div class="header">
+            <div class="mt-30">
+                <div class="memoTitleStyle">
                     <div class="mdTxt">�摰寞�膩</div>
                     <div
-                        class="smTxt text--bold text--primary edit cursor--pointer text--underline"
-                        @click='isEdit = !isEdit'
+                        class="smTxt text--bold text--primary cursor--pointer text--underline edit"
+                        @click='editMemo'
                     >蝺刻摩</div>
                 </div>
 
@@ -257,12 +271,7 @@
 
     markAppointment() {
         myConsultantService.markAsContact(this.client.id).then(data => {
-            // TODO: 閬敺����� updated client 鞈�� - Ben 2021/11/16
-            const updatedClient = {...this.client};
-            updatedClient.communicateStatus = 'contacted';
-            updatedClient.contactTime = new Date().toString();
-
-            this.updateMyAppointment(updatedClient);
+            this.updateMyAppointment(data);
             this.isVisibleDialog = false;
         })
     }
@@ -307,20 +316,26 @@
 
     private createMemo(params) {
         appointmentService.createMemo(params).then(memoRes => {
-            this.updateStoreMemo(memoRes);
+            this.storeMemo(memoRes);
         });
     }
 
     private updateMemo(params) {
         appointmentService.updateMemo(params).then(memoRes => {
-            this.updateStoreMemo(memoRes);
+            this.storeMemo(memoRes);
         });
     }
 
-    private updateStoreMemo(memoRes) {
+    private storeMemo(memoRes) {
         this.memoInfo = memoRes;
         this.memo = this.memoInfo.content;
+        this.client.appointmentMemoList[0] = this.memoInfo;
         this.isEdit = false;
+    }
+
+    editMemo() {
+        this.isEdit = !this.isEdit;
+        this.memo = this.memoInfo.content;
     }
 
     cancelEditMemo() {
@@ -338,6 +353,7 @@
         margin-bottom: 10px;
         display: flex;
         justify-content: space-between;
+        
         transition: background-color 0.5s;
         &.new {
             border-left: solid 4px $YELLOW;
@@ -405,16 +421,30 @@
             height: 400px;
         }
     }
-    .memoStyle {
-        margin-top: 30px;
-        .header {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            align-items: flex-end;
+    .memoTitleStyle {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .edit {
+            align-self: flex-end;
         }
     }
     .fixed-Height {
         height: 16px;
     }
+    .test{
+        display: flex;
+    }
+    .invite-msg{
+        color: #ED1B2E;
+        border-bottom: 1px solid #ED1B2E;
+        width: 97px;
+    }
+    .line{
+        height: 4px;
+        width: 10px;
+        background-color: $PRUDENTIAL_GREY;
+        
+    }
 </style>

--
Gitblit v1.8.0