From 5ca8f6e6e554696cb8add0fc91396b2d905b0d7a Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期二, 30 十一月 2021 13:53:24 +0800
Subject: [PATCH] add: age.filter

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

diff --git a/PAMapp/components/Client/ClientCard.vue b/PAMapp/components/Client/ClientCard.vue
index 038ec5a..ef481b3 100644
--- a/PAMapp/components/Client/ClientCard.vue
+++ b/PAMapp/components/Client/ClientCard.vue
@@ -1,11 +1,11 @@
 <template>
     <div>
-        <el-row type="flex" class="rowStyle">
+        <el-row type="flex" class="rowStyle" @click.native="openDetail">
             <el-col :xs="5" :sm="3">
                 <el-avatar
                     :size="50"
                     src=""
-                    class="cursor--pointer"
+                    class="cursor--pointer fix-chrome-click--issue"
                 ></el-avatar>
                 <!-- <div class="satisfaction">
                     <i class="icon-star pam-icon icon--yellow satisfaction"></i>
@@ -30,9 +30,8 @@
                 </div>
             </el-col>
             <el-col class="flex-column contactInfo" :xs="5" :sm="6">
-                <div class="smTxt_bold cursor--pointer"
+                <div class="smTxt_bold cursor--pointer fix-chrome-click--issue"
                     :class="client.communicateStatus"
-                    @click="openDetail"
                 >{{isReserved ? '撌脤���' : '撌脰蝯�'}}
                 </div>
                 <div class="date xsTxt text--mid_grey">{{date}}</div>
@@ -43,6 +42,7 @@
         <Ui-Dialog
             :isVisible.sync="isVisibleDialog"
             :width="width"
+            class="pam-myDemand-dialog"
         >
             <h5 class="subTitle text--center mb-30"
             >{{isReserved ? '������' : '撌脰蝯∟���'}}</h5>
@@ -51,22 +51,21 @@
                 <p>憪��{client.name}}</p>
                 <p>�閰梧�{client.phone}}</p>
                 <p>Email嚗{client.email}}</p>
-                <p>�批嚗{client.gender === 'male' ? '���' : '憟單��'}}</p>
-                <p>撟湧翩嚗{client.age}}</p>
+                <p>�批嚗{gender}}</p>
+                <p>撟湧翩嚗{client.age | toAgeLabel }}</p>
                 <p>�璆哨�{client.job}}</p>
-                <p>��瘙�{client.requirement.replace(',', '��')}}</p>
-                <p v-for="(item, index) in hopeContactTime" :key="index">��蝯⊥�挾{{index + 1 | formatNumber}}嚗{item}}</p>
+                <p>��瘙�{client.requirement.split(',').join('��')}}</p>
+                <p v-for="(item, index) in hopeContactTime" :key="index">��蝯⊥�挾{{index + 1 | formatNumber}}嚗{ item | formatHopeContactTime}}</p>
+                </div>
                 <div class="mt-30 text--center" v-if="isReserved">
                     <el-button @click="markAppointment">璅酉�撌脤��蝯�</el-button>
                 </div>
-
-            </div>
         </Ui-Dialog>
     </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'nuxt-property-decorator';
+import { Vue, Component, Prop, Mutation, Action } from 'nuxt-property-decorator';
 import { isMobileDevice } from '~/assets/ts/device';
 import { ClientInfo, markAsContact } from '~/assets/ts/api/appointment';
 
@@ -77,10 +76,21 @@
                 const upperNumber = ['�', '銝�', '鈭�', '銝�', '���', '鈭�', '�', '銝�', '�', '銋�', '���']
                 return upperNumber[index];
             }
+        },
+        formatHopeContactTime(item: string): string {
+          if (item) {
+            const [hopeDay, hopeTime] = item.split('��');
+            const day = hopeDay.split(',').length > 6 ? '銝����' : hopeDay;
+            const time = hopeTime.split(',').length > 3 ? '銝����' : hopeTime;
+            return `${day}��${time}`;
+          }
+          return '';
         }
     }
 })
 export default class ClientList extends Vue {
+    @Action updateMyAppointment!: (data: ClientInfo) => void
+
     @Prop() client!: ClientInfo;
     isVisibleDialog = false;
     width = '';
@@ -89,9 +99,16 @@
         return this.client.requirement.split(',');
     }
 
+    get gender() {
+        if (this.client.gender) {
+            return this.client.gender === 'male' ? '���' : '憟單��';
+        }
+        return ''
+    }
+
     get hopeContactTime() {
-        const contactList = this.client.hopeContactTime.split("'").map(item => item.slice(0, item.length - 1));
-        return contactList.filter(item => !!item)
+        const contactList = this.client.hopeContactTime.split("'").map(item => item.slice(0, item.length));
+        return contactList.filter(item => !!item && item !== ",")
     }
 
     get time() {
@@ -114,7 +131,17 @@
     }
 
     markAppointment() {
-        markAsContact(this.client.id).then(res => this.$router.go(0))
+        markAsContact(this.client.id).then(data => {
+            // TODO: 閬敺����� updated client 鞈�� - Ben 2021/11/16
+
+            const updatedClient = {...this.client};
+            updatedClient.communicateStatus = 'contacted';
+            updatedClient.appointmentDate = new Date();
+
+            this.updateMyAppointment(updatedClient);
+            this.isVisibleDialog = false;
+
+        })
     }
 
 }
@@ -179,9 +206,12 @@
 
     .dialogTxt {
         font-size: 20px;
+        overflow-y:scroll;
+        height:400px;
     }
+
 
     .text-right {
         text-align: right;
     }
-</style>
\ No newline at end of file
+</style>

--
Gitblit v1.8.0