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 | 45 ++++++++++++++++++++++++++++++++++----------- 1 files changed, 34 insertions(+), 11 deletions(-) diff --git a/PAMapp/components/Client/ClientCard.vue b/PAMapp/components/Client/ClientCard.vue index 2c00238..ef481b3 100644 --- a/PAMapp/components/Client/ClientCard.vue +++ b/PAMapp/components/Client/ClientCard.vue @@ -1,6 +1,6 @@ <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" @@ -32,7 +32,6 @@ <el-col class="flex-column contactInfo" :xs="5" :sm="6"> <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> @@ -52,21 +52,20 @@ <p>�閰梧�{client.phone}}</p> <p>Email嚗{client.email}}</p> <p>�批嚗{gender}}</p> - <p>撟湧翩嚗{client.age}}</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 = ''; @@ -98,7 +108,7 @@ get hopeContactTime() { const contactList = this.client.hopeContactTime.split("'").map(item => item.slice(0, item.length)); - return contactList.filter(item => !!item) + return contactList.filter(item => !!item && item !== ",") } get time() { @@ -121,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; + + }) } } @@ -186,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