From ca2d65b285ac77c1a16605be38f88c6fe10c820a Mon Sep 17 00:00:00 2001 From: Tomas <tomasysh@gmail.com> Date: 星期四, 10 三月 2022 12:38:08 +0800 Subject: [PATCH] update#136639: [前端] 調整為顧問不支援發送滿意度功能(移除發送滿意度功能連結) --- PAMapp/pages/appointment/_appointmentId/index.vue | 107 ++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 88 insertions(+), 19 deletions(-) diff --git a/PAMapp/pages/appointment/_appointmentId/index.vue b/PAMapp/pages/appointment/_appointmentId/index.vue index 51f97ed..7b49df1 100644 --- a/PAMapp/pages/appointment/_appointmentId/index.vue +++ b/PAMapp/pages/appointment/_appointmentId/index.vue @@ -1,8 +1,10 @@ <template> - <div class="appointment-client-detail-page"> + <div class="appointment-client-detail-page" v-if="!!appointmentDetail"> <div class="date-detail"> - <div>{{ appointmentDetail.appointmentDate | formatDate }}</div> - <div>{{ appointmentDetail.consultantReadTime | formatDate }}</div> + <div>{{ appointmentDetail.appointmentDate | formatDate }}����</div> + <div>{{ appointmentDetail.consultantReadTime | formatDate }} + <span v-if="appointmentDetail.consultantReadTime">撌脰�</span> + </div> </div> <AppointmentProgress @@ -12,19 +14,22 @@ <section class="client-detail"> - <div class="client-detail-info"> + <div class="client-detail-info mb-30"> <div class="client-detail-info__avatar"> <div class="circle"> {{ appointmentDetail.name || 'NO NAME' }} - <div class="sm-circle"> - {{ appointmentDetail.gender === 'male' ? '�' : '憟�'}} + <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"> + <div class="text--underline text--break-all"> {{ appointmentDetail.email }} </div> </div> @@ -50,16 +55,20 @@ </div> </div> - <div class="client-detail-action" v-if="showWhenAppointmentHasClosed"> - <el-button >��遛��漲</el-button> + <!-- <div class=" btn-center" v-if="showWhenAppointmentHasClosed"> + <el-button @click="inviteReview">��遛��漲</el-button> + </div> --> + + <div class="client-detail-action" v-if="showWhenAppointmentHasContacted"> + <el-button @click="closeAppointment" class="desktop-client-detail-action-btn" >蝯��</el-button> + <el-button @click="sendMsg" style="margin-left: 0px">�蝝赤</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 class=" btn-center" v-if="showWhenAppointmentHasCreate"> + <el-button @click="sendMsg">���赤�</el-button> </div> - </section> + <template v-if="showWhenAppointmentHasClosed"> <AppointmentClosedInfo :appointmentDetail="appointmentDetail" /> @@ -71,13 +80,20 @@ </InterviewMsg> - <section class="mt-30"> + <section class="mt-30" v-if="!showWhenAppointmentHasCreate"> <AppointmentInterviewList :interviewList="appointmentDetail.interviewRecordDTOs" /> </section> - <section class="mt-30"> + <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> @@ -88,6 +104,9 @@ 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'); @@ -101,6 +120,7 @@ appointmentProgress!: ContactStatus; isVisibleDialog = false; + isShowInviteReviewDialog = false ; interviewTxt = ""; contactStatus = ContactStatus; @@ -125,13 +145,28 @@ || 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.replace("'", '').split('��'); + const result = hopeContactTimeString.replaceAll("'", '').split('��'); return result; + } + + inviteReview(): void { + reviewsService.sendSatisfactionToClient(this.appointmentDetail.id).then(res => { + this.isShowInviteReviewDialog = true; + }); } } </script> @@ -158,8 +193,7 @@ height: 100px; width: 100px; border-radius: 50%; - background-color: #fff; - border: 1px solid $PRIMARY_BLACK; + background-image: url('~/assets/images/appointment/avatar_bg.svg'); position: relative; display: flex; justify-content: center; @@ -170,12 +204,26 @@ width: 30px; border-radius: 50%; background-color: #fff; - border: 1px solid $PRIMARY_BLACK; 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; + } } } } @@ -199,12 +247,14 @@ @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; } @@ -214,6 +264,11 @@ } } } +.invite-review{ + align-items : center; + display : flex; + flex-direction: column; + } .close-appointment-detail{ background-color: #fff; display: flex; @@ -231,5 +286,19 @@ .hope-contact-time__line { border-bottom: 1px solid #CCCCCC; } +.btn-center{ + display: flex; + justify-content: center; + } + + @include desktop { + .client-detail-action { + display: flex; + justify-content: center; + } + .desktop-client-detail-action-btn{ + margin-right: 10px; + } + } </style> -- Gitblit v1.8.0