From 945df9fec87c64d45f4a8878f302afe052a9bee3 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期五, 19 十一月 2021 15:15:55 +0800
Subject: [PATCH] update#130453: [諮詢前問項] : b. 再度登入時，進行預約諮詢前的問項資料會自動帶入，此為phase 1範圍，待處理
---
PAMapp/components/Client/ClientCard.vue | 109 ++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 80 insertions(+), 29 deletions(-)
diff --git a/PAMapp/components/Client/ClientCard.vue b/PAMapp/components/Client/ClientCard.vue
index 5594a0e..1fffe7c 100644
--- a/PAMapp/components/Client/ClientCard.vue
+++ b/PAMapp/components/Client/ClientCard.vue
@@ -1,24 +1,24 @@
<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">
+ <!-- <div class="satisfaction">
<i class="icon-star pam-icon icon--yellow satisfaction"></i>
<span>{{'1'}}</span>
- </div>
+ </div> -->
</el-col>
<el-col :xs="14" :sm="15">
<div class="smTxt_bold name">{{client.name}}</div>
<div class="message">������</div>
<div class="professionals">
- <template v-if="client.requirements.length > 0">
+ <template v-if="client.requirement">
<span
- v-for="(item, index) in client.requirements"
+ v-for="(item, index) in requirements"
:key="index"
class="professionalsTxt"
>#{{item}}</span>
@@ -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,48 +42,83 @@
<Ui-Dialog
:isVisible.sync="isVisibleDialog"
:width="width"
+ class="pam-myDemand-dialog"
>
<h5 class="subTitle text--center mb-30"
>{{isReserved ? '������' : '撌脰蝯∟���'}}</h5>
- <p class="smTxt text-right">隞予 10:00</p>
+ <p class="smTxt text-right">{{client.appointmentDate | formatDate}}</p>
<div class="dialogTxt">
<p>憪��{client.name}}</p>
- <p>�閰梧��0912345678</p>
- <p>Email嚗�</p>
- <p>�批嚗{client.gender === 'male' ? '���' : '憟單��'}}</p>
+ <p>�閰梧�{client.phone}}</p>
+ <p>Email嚗{client.email}}</p>
+ <p>�批嚗{gender}}</p>
<p>撟湧翩嚗{client.age}}</p>
- <p>�璆哨����璆�</p>
- <p>��瘙�{client.requirements}}</p>
- <p>��蝯⊥�挾銝�嚗���,��� 18:00~21:00</p>
- <div class="mt-30 text--center">
- <el-button>{{isReserved ? '璅酉�撌脤��蝯�' : '��遛��漲'}}</el-button>
+ <p>�璆哨�{client.job}}</p>
+ <p>��瘙�{client.requirement.split(',').join('��')}}</p>
+ <p v-for="(item, index) in hopeContactTime" :key="index">��蝯⊥�挾{{index + 1 | formatNumber}}嚗{ item | formatHopeContactTime}}</p>
</div>
- </div>
+ <div class="mt-30 text--center" v-if="isReserved">
+ <el-button @click="markAppointment">璅酉�撌脤��蝯�</el-button>
+ </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 { Clients } from '~/pages/clientReservedList.vue';
+import { ClientInfo, markAsContact } from '~/assets/ts/api/appointment';
-@Component
+@Component({
+ filters: {
+ formatNumber(index: number) {
+ if (index) {
+ 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 {
- @Prop() client!: Clients;
+ @Action updateMyAppointment!: (data: ClientInfo) => void
+
+ @Prop() client!: ClientInfo;
isVisibleDialog = false;
width = '';
+ get requirements() {
+ 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));
+ return contactList.filter(item => !!item && item !== ",")
+ }
+
get time() {
- const hours = this.client.time.getHours();
- const minutes = this.client.time.getMinutes();
- return `${hours} : ${minutes}`
+ const formatDate = (this.$options.filters as any).formatDate(this.client.appointmentDate);
+ return formatDate.split(' ')[1]
}
get date() {
- const month = this.client.time.getMonth();
- const date = this.client.time.getDate();
- return `${month} / ${date}`
+ const formatDate = (this.$options.filters as any).formatDate(this.client.appointmentDate);
+ return formatDate.split(' ')[0]
}
get isReserved() {
@@ -94,6 +128,20 @@
openDetail() {
this.width = isMobileDevice() ? '80%' : '';
this.isVisibleDialog = true;
+ }
+
+ markAppointment() {
+ 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;
+
+ })
}
}
@@ -158,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