<template>
|
<div class="appointment-client-detail-page">
|
<div class="date-detail">
|
<div>{{ appointmentDetail.appointmentDate | formatDate }}預約</div>
|
<div>{{ appointmentDetail.consultantReadTime | formatDate }}
|
<span v-if="appointmentDetail.consultantReadTime">已讀</span>
|
</div>
|
</div>
|
|
<AppointmentProgress
|
class="mt-10"
|
:currentStep="appointmentProgress"
|
></AppointmentProgress>
|
|
<section class="client-detail">
|
|
<div class="client-detail-info mb-30">
|
<div class="client-detail-info__avatar">
|
<div class="circle">
|
{{ appointmentDetail.name || 'NO NAME' }}
|
<div class="sm-circle sm-circle-male" v-if="appointmentDetail.gender === 'male'">
|
<i class="icon-sex-male sex-icon"></i>
|
</div>
|
<div class="sm-circle sm-circle-female" v-if="appointmentDetail.gender === 'female'">
|
<i class="icon-sex-female sex-icon"></i>
|
</div>
|
</div>
|
</div>
|
<div class="client-detail-info__information">
|
<div>{{ appointmentDetail.age | toAgeLabel }}</div>
|
<div>{{ appointmentDetail.phone }}</div>
|
<div class="text--underline text--break-all">
|
{{ appointmentDetail.email }}
|
</div>
|
</div>
|
</div>
|
|
<div class="client-detail-demand mt-10">
|
|
<div class="client-detail-demand__demand-list mb-10">
|
<div class="client-detail-demand__demand-list-label">需求</div>
|
<div class="client-detail-demand__demand-list-content">{{ appointmentDetail.requirement }}</div>
|
</div>
|
|
<div class="client-detail-demand__demand-list">
|
<div class="client-detail-demand__demand-list-label">聯絡<br />時段</div>
|
<div class="client-detail-demand__demand-list-content">
|
<div v-for="(hopeContactTime, index) in hopeContactTimeList" :key="index"
|
:class="{'mt-10': index > 0, 'pb-10': true, 'hope-contact-time__line': index + 1 < hopeContactTimeList.length }">
|
<div v-for="(item, index) in getHopeContactTimeContent(hopeContactTime)" :key="index" :class="{'mt-10': index < 0 }">
|
{{ item }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="client-detail-action" v-if="showWhenAppointmentHasClosed">
|
<el-button @click="inviteReview">發送滿意度</el-button>
|
</div>
|
|
<div class="client-detail-action" v-if="showWhenAppointmentHasContacted">
|
<el-button @click="closeAppointment" >結案</el-button>
|
<el-button @click="sendMsg" style="margin-left: 0px">通知約訪</el-button>
|
</div>
|
|
</section>
|
|
<div class="client-detail-action btn-center" v-if="showWhenAppointmentHasCreate">
|
<el-button @click="sendMsg">傳送約訪通知</el-button>
|
</div>
|
|
<template v-if="showWhenAppointmentHasClosed">
|
<AppointmentClosedInfo :appointmentDetail="appointmentDetail" />
|
</template>
|
|
<InterviewMsg
|
:isVisible.sync="isVisibleDialog"
|
:client="appointmentDetail">
|
</InterviewMsg>
|
|
|
<section class="mt-30" v-if="!showWhenAppointmentHasCreate">
|
<AppointmentInterviewList :interviewList="appointmentDetail.interviewRecordDTOs" />
|
</section>
|
|
<section class="mt-30" v-if="!showWhenAppointmentHasCreate">
|
<AppointmentRecordList :noticeLogs="appointmentDetail.appointmentNoticeLogs" />
|
</section>
|
|
<PopUpFrame :isOpen.sync="isShowInviteReviewDialog">
|
<div class="text--middle invite-review">
|
<div class="mb-30 mt-10">已發送滿意度</div>
|
<div class="text--primary text--middle cursor--pointer text--underline" @click="isShowInviteReviewDialog = false" :size="'250px'">我知道了</div>
|
</div>
|
</PopUpFrame>
|
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component } from 'vue-property-decorator';
|
import { namespace } from 'nuxt-property-decorator';
|
|
import { Appointment } from '~/shared/models/appointment.model';
|
import { ContactStatus } from '~/shared/models/enum/contact-status';
|
|
import reviewsService from '~/shared/services/reviews.service';
|
|
|
const appointmentStore = namespace('appointment.store');
|
|
@Component
|
export default class AppointmentDetailComponent extends Vue {
|
|
@appointmentStore.State('appointmentDetail')
|
appointmentDetail!: Appointment;
|
|
@appointmentStore.Getter('appointmentProgress')
|
appointmentProgress!: ContactStatus;
|
|
isVisibleDialog = false;
|
isShowInviteReviewDialog = false ;
|
interviewTxt = "";
|
contactStatus = ContactStatus;
|
|
|
//////////////////////////////////////////////////////////////////////
|
|
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;
|
}
|
|
get showWhenAppointmentHasCreate(): boolean {
|
return this.appointmentDetail.communicateStatus === this.contactStatus.PICKED
|
|| this.appointmentDetail.communicateStatus === this.contactStatus.RESERVED;
|
}
|
|
get showWhenAppointmentHasContacted() :boolean {
|
return this.appointmentDetail.communicateStatus === this.contactStatus.CONTACTED;
|
}
|
|
get hopeContactTimeList(): any[] {
|
return this.appointmentDetail.hopeContactTime.split("','")
|
}
|
|
getHopeContactTimeContent(hopeContactTimeString: string): string[] {
|
const result = hopeContactTimeString.replaceAll("'", '').split('、');
|
return result;
|
}
|
|
inviteReview(): void {
|
reviewsService.sendSatisfactionToClient(this.appointmentDetail.id).then(res => {
|
this.isShowInviteReviewDialog = true;
|
});
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.appointment-client-detail-page{
|
.date-detail{
|
display : flex;
|
font-size : 16px;
|
color : #68737A;
|
justify-content: space-between;
|
margin-bottom : 2px;
|
}
|
.client-detail{
|
background-color: #fff;
|
margin-top:10px;
|
padding: 17px 21px;
|
.client-detail-info {
|
display: flex;
|
.client-detail-info__avatar{
|
display: flex;
|
margin-right: 22px;
|
.circle{
|
height: 100px;
|
width: 100px;
|
border-radius: 50%;
|
background-image: url('~/assets/images/appointment/avatar_bg.svg');
|
position: relative;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.sm-circle{
|
position: absolute;
|
height: 30px;
|
width: 30px;
|
border-radius: 50%;
|
background-color: #fff;
|
bottom: 0;
|
right: 0;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.sex-icon {
|
font-size: 20px;
|
&.icon-sex-male{
|
color: $SKY_BLUE;
|
}
|
&.icon-sex-female{
|
color: $CORAL;
|
}
|
}
|
&-male {
|
border: 1px solid $SKY_BLUE;
|
}
|
&-female {
|
border: 1px solid $LIGHT_RED;
|
}
|
}
|
}
|
}
|
.client-detail-info__information{
|
font-size: 20px;
|
line-height: 1.6;
|
}
|
}
|
.client-detail-demand{
|
background-color: #fff;
|
font-size: 20px;
|
display: flex;
|
flex-direction: column;
|
.client-detail-demand__demand-list{
|
display: flex;
|
}
|
.client-detail-demand__hope-contact-time{
|
display: flex;
|
}
|
.client-detail-demand__demand-list-label {
|
@extend .mb-10;
|
@extend .mdTxt;
|
@extend .mr-10;
|
line-height: 1.3;
|
color : $DARK_BLUE;
|
flex-basis: auto;
|
min-width : 40px;
|
}
|
.client-detail-demand__demand-list-content {
|
text-align: justify;
|
line-height: 1.3;
|
text-justify: auto;
|
word-break: break-all;
|
}
|
}
|
.client-detail-action {
|
margin-left: 50px;
|
}
|
}
|
}
|
.invite-review{
|
align-items : center;
|
display : flex;
|
flex-direction: column;
|
}
|
.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;
|
}
|
.hope-contact-time__line {
|
border-bottom: 1px solid #CCCCCC;
|
}
|
.btn-center{
|
display: flex;
|
justify-content: center;
|
}
|
|
</style>
|
