From 03ea05b93dcb5adc546d9d37204df5142e2058dd Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 12 一月 2022 09:31:09 +0800
Subject: [PATCH] update: 預約單細節頁面(客戶資訊區塊樣式)
---
PAMapp/pages/appointment/_appointmentId.vue | 147 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 145 insertions(+), 2 deletions(-)
diff --git a/PAMapp/pages/appointment/_appointmentId.vue b/PAMapp/pages/appointment/_appointmentId.vue
index 45969d3..7261a18 100644
--- a/PAMapp/pages/appointment/_appointmentId.vue
+++ b/PAMapp/pages/appointment/_appointmentId.vue
@@ -1,5 +1,148 @@
<template>
- <div>
- APPOINTMENT_3
+ <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>
--
Gitblit v1.8.0