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/components/BackActionBar.vue | 3
PAMapp/pages/appointment/_appointmentId.vue | 141 ++++++++++++++++++++---------------
PAMapp/shared/models/appointment.model.ts | 39 +++++----
PAMapp/assets/scss/utilities/_heading.scss | 9 ++
4 files changed, 115 insertions(+), 77 deletions(-)
diff --git a/PAMapp/assets/scss/utilities/_heading.scss b/PAMapp/assets/scss/utilities/_heading.scss
index 8b64442..03bbfbc 100644
--- a/PAMapp/assets/scss/utilities/_heading.scss
+++ b/PAMapp/assets/scss/utilities/_heading.scss
@@ -113,3 +113,12 @@
.text--underline {
text-decoration: underline;
}
+
+.pam-link-button {
+ @extend .fix-chrome-click--issue;
+ @extend .smTxt;
+ @extend .text--bold;
+ @extend .text--primary;
+ @extend .cursor--pointer;
+ @extend .text--underline;
+}
diff --git a/PAMapp/components/BackActionBar.vue b/PAMapp/components/BackActionBar.vue
index c1d51ab..d2ddf14 100644
--- a/PAMapp/components/BackActionBar.vue
+++ b/PAMapp/components/BackActionBar.vue
@@ -74,6 +74,9 @@
case 'faq':
featureLabel = 'F&Q 撣貉����';
break;
+ case 'appointment':
+ featureLabel = '������';
+ break;
}
return featureLabel;
} else {
diff --git a/PAMapp/pages/appointment/_appointmentId.vue b/PAMapp/pages/appointment/_appointmentId.vue
index ea76d97..7261a18 100644
--- a/PAMapp/pages/appointment/_appointmentId.vue
+++ b/PAMapp/pages/appointment/_appointmentId.vue
@@ -1,39 +1,52 @@
<template>
<div class="appointment-client-detail-page">
- <div class="date-detail">
- <div>11/24 13:00 ����</div>
- <div>隞予 10:22 撌脰�</div>
+ <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="circle-block">
- <div class="circle">
- {{ appointmentDetail.name }}
- <div class="sm-circle">
- {{ appointmentDetail.gender === 'male' ? '�' : '憟�'}}
+
+ <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-info">
- <span>{{ appointmentDetail.age }}甇�</span>
- <span>{{ appointmentDetail.phone }}</span>
- <span class="text--underline">{{ appointmentDetail.email }}</span>
+
+ <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>
- <section class="client-demand">
- <div class="client-requirement">
- <div style="width:50px" class="mr-10 mdTxt">��瘙�</div>
- <div>{{ appointmentDetail.requirement }}</div>
- </div>
- <div class="client-demand-contact-time">
- <div class="mr-10 mdTxt">�蝯⊥�挾</div>
- <div>{{ appointmentDetail.hopeContactTime }}</div>
- </div>
- </section>
+
+
</div>
</template>
@@ -65,64 +78,70 @@
<style lang="scss" scoped>
.appointment-client-detail-page{
.date-detail{
- display: flex;
- font-size: 16px;
- color:#68737A;
+ display : flex;
+ font-size : 16px;
+ color : #68737A;
justify-content: space-between;
- margin-bottom: 2px;
+ margin-bottom : 2px;
}
.client-detail{
- display: flex;
background-color: #fff;
margin-top:10px;
- padding: 17px 21px 24px 21px;
- .circle-block{
+ padding: 17px 21px;
+ .client-detail-info {
display: flex;
- margin-right: 22px;
- .circle{
- height: 100px;
- width: 100px;
- border-radius: 50%;
- background-color: #fff;
- border: 1px solid $PRIMARY_BLACK;
- position: relative;
+ .client-detail-info__avatar{
display: flex;
- justify-content: center;
- align-items: center;
- .sm-circle{
- position: absolute;
- height: 30px;
- width: 30px;
+ margin-right: 22px;
+ .circle{
+ height: 100px;
+ width: 100px;
border-radius: 50%;
background-color: #fff;
border: 1px solid $PRIMARY_BLACK;
- bottom: 0;
- right: 0;
+ 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-info{
+ .client-detail-demand{
+ background-color: #fff;
font-size: 20px;
- line-height: 1.6;
- }
- }
- .client-demand{
- background-color: #fff;
- font-size: 20px;
- padding-left: 21px;
- padding-right:22px;
- display: flex;
- flex-direction: column;
- .client-requirement{
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-demand-contact-time{
- display: flex;
- width: 281px;
+ .client-detail-action {
+ margin-left: 50px;
}
}
}
diff --git a/PAMapp/shared/models/appointment.model.ts b/PAMapp/shared/models/appointment.model.ts
index b6daab1..2fe9173 100644
--- a/PAMapp/shared/models/appointment.model.ts
+++ b/PAMapp/shared/models/appointment.model.ts
@@ -39,21 +39,28 @@
}
export interface AppointmentDetail {
- id : number;
- phone : string;
- email : string;
- contactType : string;
- gender : string;
- age : string;
- job : string;
- requirement : string;
- communicateStatus: string;
- hopeContactTime : string;
- otherRequirement : string;
- appointmentDate : string;
- agentNo : string;
- customerId : number;
- name : string;
+ age : string;
+ agentNo : string;
+ appointmentDate : string;
+ appointmentMemoList?: string[];
+ communicateStatus : string;
+ consultantReadTime : string;
+ consultantViewTime : string;
+ contactTime : string;
+ contactType : string;
+ customerId : number;
+ email : string;
+ gender : string;
+ hopeContactTime : string;
+ id : number;
+ interviewRecordDTOs : string[];
+ job : string;
+ lastModifiedDate : string;
+ name : string;
+ otherRequirement : string;
+ phone : string;
+ requirement : string;
+ satisfactionScore? : number;
}
export interface AppointmentParams {
phone : string;
@@ -104,4 +111,4 @@
content: string,
/** memo id */
id: number
-}
\ No newline at end of file
+}
--
Gitblit v1.8.0