From f90c94f20b5f11d3b3ce0164d619c0112d5158c9 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期四, 20 一月 2022 18:23:56 +0800
Subject: [PATCH] update: TODO#133100 顧問端：header增加顧問頭像圖示
---
PAMapp/pages/appointment/_appointmentId/index.vue | 119 ++++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 97 insertions(+), 22 deletions(-)
diff --git a/PAMapp/pages/appointment/_appointmentId/index.vue b/PAMapp/pages/appointment/_appointmentId/index.vue
index 7261a18..b4a7da0 100644
--- a/PAMapp/pages/appointment/_appointmentId/index.vue
+++ b/PAMapp/pages/appointment/_appointmentId/index.vue
@@ -1,12 +1,13 @@
<template>
<div class="appointment-client-detail-page">
<div class="date-detail">
- <!-- TODO: 閬����� step 憿舐內銝�� Date [Tomas, 2022/1/11] -->
- <div>{{ appointmentDetail.appointmentDate }}</div>
- <div>{{ appointmentDetail.consultantReadTime }}</div>
+ <div>{{ appointmentDetail.appointmentDate | formatDate }}</div>
+ <div>{{ appointmentDetail.consultantReadTime | formatDate }}</div>
</div>
+
<AppointmentProgress
- :currentStep="appointmentDetail.communicateStatus"
+ class="mt-10"
+ :currentStep="appointmentProgress"
></AppointmentProgress>
<section class="client-detail">
@@ -14,16 +15,18 @@
<div class="client-detail-info">
<div class="client-detail-info__avatar">
<div class="circle">
- {{ appointmentDetail.name }}
+ {{ appointmentDetail.name || 'NO NAME' }}
<div class="sm-circle">
{{ appointmentDetail.gender === 'male' ? '�' : '憟�'}}
</div>
</div>
</div>
<div class="client-detail-info__information">
- <div>{{ appointmentDetail.age }}甇�</div>
+ <div>{{ appointmentDetail.age | toAgeLabel }}</div>
<div>{{ appointmentDetail.phone }}</div>
- <div class="text--underline">{{ appointmentDetail.email }}</div>
+ <div class="text--underline">
+ {{ appointmentDetail.email }}
+ </div>
</div>
</div>
@@ -34,48 +37,105 @@
</div>
<div class="client-detail-demand__hope-contact-time">
<div class="client-detail-demand__demand-list-label">�蝯�<br />��挾</div>
- <div>{{ appointmentDetail.hopeContactTime }}</div>
+ <div>���� 17:00 ~ 19:00</div>
+ <!-- TODO: 憭�蝯⊥�挾憒�� && 頝���� [Tomas. 2021/1/12] -->
+ <!-- <div>{{ appointmentDetail.hopeContactTime }}</div> -->
</div>
</div>
- <div class="client-detail-action">
- <el-button @click="$router.go(-1)" >蝯��</el-button>
- <el-button @click="$router.go(-1)" style="margin-left: 0px">�/�閮�</el-button>
+ <div class="client-detail-action" v-if="showWhenAppointmentHasClosed">
+ <el-button >��遛��漲</el-button>
+ </div>
+
+ <div class="client-detail-action" v-else>
+ <el-button @click="closeAppointment" >蝯��</el-button>
+ <el-button @click="sendMsg" style="margin-left: 0px">�/蝝赤</el-button>
</div>
</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>
+
+ <InterviewMsg
+ :isVisible.sync="isVisibleDialog"
+ :client="appointmentDetail">
+ </InterviewMsg>
+
+
+ <section class="mt-30">
+ <AppointmentInterviewList :interviewList="appointmentDetail.interviewRecordDTOs" />
+ </section>
+
+ <section class="mt-30">
+ <AppointmentRecordList :noticeLogs="appointmentDetail.appointmentNoticeLogs" />
+ </section>
</div>
</template>
<script lang="ts">
-import { Context } from '@nuxt/types';
-
import { Vue, Component } from 'vue-property-decorator';
+import { namespace } from 'nuxt-property-decorator';
-import appointmentService from '~/shared/services/appointment.service';
-import { AppointmentDetail } from '~/shared/models/appointment.model';
+import { Appointment } from '~/shared/models/appointment.model';
+import { ContactStatus } from '~/shared/models/enum/contact-status';
+
+const appointmentStore = namespace('appointment.store');
@Component
export default class AppointmentDetailComponent extends Vue {
- appointmentDetail!: AppointmentDetail;
+ @appointmentStore.State('appointmentDetail')
+ appointmentDetail!: Appointment;
+
+ @appointmentStore.Getter('appointmentProgress')
+ appointmentProgress!: ContactStatus;
+
+ isVisibleDialog = false;
+ interviewTxt = "";
+ contactStatus = ContactStatus;
+
//////////////////////////////////////////////////////////////////////
- async asyncData(context: Context) {
- const appointmentId = +context.route.params.appointmentId;
- return {
- appointmentDetail: await appointmentService.getAppointmentDetail(appointmentId).then((res) => res)
- }
+ closeAppointment(): void {
+ this.$router.push(`/appointment/${this.appointmentDetail.id}/close`);
}
+ sendMsg():void {
+ this.isVisibleDialog = true;
+ }
+
+ editAppointmentHasClosed(): void{
+ this.$router.push(`/appointment/${this.appointmentDetail.id}/close`);
+ }
+
+ get showWhenAppointmentHasClosed(): boolean {
+ return this.appointmentDetail.communicateStatus === this.contactStatus.DONE
+ || this.appointmentDetail.communicateStatus === this.contactStatus.CLOSE
+ || this.appointmentDetail.communicateStatus === this.contactStatus.CANCEL;
+ }
}
</script>
-<style lang="scss" scoped>
+<style lang="scss">
.appointment-client-detail-page{
.date-detail{
display : flex;
@@ -145,4 +205,19 @@
}
}
}
+.close-appointment-detail{
+ background-color: #fff;
+ display: flex;
+ margin-top: 30px;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ font-size: 20px;
+}
+.close-appointment-detail-nav{
+ display: flex;
+ justify-content: space-between;
+ flex: 1;
+}
+
</style>
--
Gitblit v1.8.0