<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>
|
<AppointmentProgress
|
:currentStep="appointmentDetail.communicateStatus"
|
></AppointmentProgress>
|
|
<section class="client-detail">
|
|
<div class="client-detail-info">
|
<div class="client-detail-info__avatar">
|
<div class="circle">
|
{{ appointmentDetail.name }}
|
<div class="sm-circle">
|
{{ appointmentDetail.gender === 'male' ? '男' : '女'}}
|
</div>
|
</div>
|
</div>
|
<div class="client-detail-info__information">
|
<div>{{ appointmentDetail.age }}歲</div>
|
<div>{{ appointmentDetail.phone }}</div>
|
<div class="text--underline">{{ appointmentDetail.email }}</div>
|
</div>
|
</div>
|
|
<div class="client-detail-demand mt-10">
|
<div class="client-detail-demand__demand-list">
|
<div class="client-detail-demand__demand-list-label">需求</div>
|
<div>{{ appointmentDetail.requirement }}</div>
|
</div>
|
<div class="client-detail-demand__hope-contact-time">
|
<div class="client-detail-demand__demand-list-label">聯絡<br />時段</div>
|
<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>
|
|
</section>
|
|
|
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Context } from '@nuxt/types';
|
|
import { Vue, Component } from 'vue-property-decorator';
|
|
import appointmentService from '~/shared/services/appointment.service';
|
import { AppointmentDetail } from '~/shared/models/appointment.model';
|
|
@Component
|
export default class AppointmentDetailComponent extends Vue {
|
|
appointmentDetail!: AppointmentDetail;
|
|
//////////////////////////////////////////////////////////////////////
|
|
async asyncData(context: Context) {
|
const appointmentId = +context.route.params.appointmentId;
|
return {
|
appointmentDetail: await appointmentService.getAppointmentDetail(appointmentId).then((res) => res)
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.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-color: #fff;
|
border: 1px solid $PRIMARY_BLACK;
|
position: relative;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.sm-circle{
|
position: absolute;
|
height: 30px;
|
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;
|
}
|
}
|
}
|
.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 .mr-10;
|
@extend .mdTxt;
|
@extend .mb-10;
|
}
|
}
|
.client-detail-action {
|
margin-left: 50px;
|
}
|
}
|
}
|
</style>
|
