From 38b68f92b9a47ca3947985d6b581603fe05106c7 Mon Sep 17 00:00:00 2001
From: charlie <charlie@lvguanqingdeMacBook-Pro.local>
Date: 星期六, 22 一月 2022 11:56:00 +0800
Subject: [PATCH] update: 1. 新增約訪預約資訊頭像圖片和型別icon，微調對齊方式 2. 約訪結案列表的樣式修正並調整進度條色彩
---
PAMapp/pages/appointment/_appointmentId/index.vue | 186 +++++++++++++++++++++++++++++++++++++---------
1 files changed, 149 insertions(+), 37 deletions(-)
diff --git a/PAMapp/pages/appointment/_appointmentId/index.vue b/PAMapp/pages/appointment/_appointmentId/index.vue
index 41290f7..5e75edc 100644
--- a/PAMapp/pages/appointment/_appointmentId/index.vue
+++ b/PAMapp/pages/appointment/_appointmentId/index.vue
@@ -1,28 +1,31 @@
<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 }}
+ <span v-if="appointmentDetail.consultantReadTime">撌脰�</span>
+ </div>
</div>
+
<AppointmentProgress
class="mt-10"
- :currentStep="appointmentDetail.communicateStatus"
+ :currentStep="appointmentProgress"
></AppointmentProgress>
<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' ? '�' : '憟�'}}
+ <i class="icon-sex-male sex-icon" v-if="appointmentDetail.gender === 'male'"></i>
+ <i class="icon-sex-female sex-icon" v-else></i>
</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 }}
@@ -31,57 +34,94 @@
</div>
<div class="client-detail-demand mt-10">
- <div class="client-detail-demand__demand-list">
+
+ <div class="client-detail-demand__demand-list mb-10">
<div class="client-detail-demand__demand-list-label">��瘙�</div>
- <div>{{ appointmentDetail.requirement }}</div>
+ <div class="client-detail-demand__demand-list-content">{{ appointmentDetail.requirement }}</div>
</div>
- <div class="client-detail-demand__hope-contact-time">
+
+ <div class="client-detail-demand__demand-list">
<div class="client-detail-demand__demand-list-label">�蝯�<br />��挾</div>
- <div>���� 17:00 ~ 19:00</div>
- <!-- TODO: 憭�蝯⊥�挾憒�� && 頝���� [Tomas. 2021/1/12] -->
- <!-- <div>{{ appointmentDetail.hopeContactTime }}</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">
+ <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="$router.go(-1)" style="margin-left: 0px">�/�閮�</el-button>
+ <el-button @click="sendMsg" style="margin-left: 0px">�/蝝赤</el-button>
+ </div>
+
+ <div class="client-detail-action" v-if="showWhenAppointmentHasCreate">
+ <el-button @click="sendMsg">���赤�</el-button>
</div>
</section>
- <section class="mt-30">
- <AppointmentInterviewList />
+ <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">
- <AppointmentRecordList />
+ <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 { 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';
+
+import reviewsService from '~/shared/services/reviews.service';
+
+
+const appointmentStore = namespace('appointment.store');
@Component
export default class AppointmentDetailComponent extends Vue {
- appointmentDetail!: AppointmentDetail;
+ @appointmentStore.State('appointmentDetail')
+ appointmentDetail!: Appointment;
- //////////////////////////////////////////////////////////////////////
+ @appointmentStore.Getter('appointmentProgress')
+ appointmentProgress!: ContactStatus;
- async asyncData(context: Context) {
- const appointmentId = +context.route.params.appointmentId;
- return {
- appointmentDetail: await appointmentService.getAppointmentDetail(appointmentId).then((res) => res)
- }
- }
+ isVisibleDialog = false;
+ isShowInviteReviewDialog = false ;
+ interviewTxt = "";
+ contactStatus = ContactStatus;
+
//////////////////////////////////////////////////////////////////////
@@ -89,10 +129,46 @@
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.replace("'", '').split('��');
+ return result;
+ }
+
+ inviteReview(): void {
+ reviewsService.sendSatisfactionToClient(this.appointmentDetail.id).then(res => res);
+ this.isShowInviteReviewDialog = true ;
+ }
}
</script>
-<style lang="scss" scoped>
+<style lang="scss">
.appointment-client-detail-page{
.date-detail{
display : flex;
@@ -114,8 +190,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;
@@ -126,12 +201,16 @@
width: 30px;
border-radius: 50%;
background-color: #fff;
- border: 1px solid $PRIMARY_BLACK;
+ border: 1px solid $SKY_BLUE;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
+ .sex-icon {
+ font-size: 20px;
+ color: $SKY_BLUE;
+ }
}
}
}
@@ -152,9 +231,19 @@
display: flex;
}
.client-detail-demand__demand-list-label {
- @extend .mr-10;
- @extend .mdTxt;
@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 {
@@ -162,4 +251,27 @@
}
}
}
+.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;
+}
+
</style>
--
Gitblit v1.8.0