From 943b8dfc3fd82d76d46cde1834972270d4aa868a Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 12 一月 2022 16:06:40 +0800
Subject: [PATCH] update: 串接預約單流程(新增採訪紀錄, 結案頁面, 預約單列表細節)
---
/dev/null | 87 -----------------
PAMapp/components/BackActionBar.vue | 8 +
PAMapp/components/Ui/UiField.vue | 11 +-
PAMapp/pages/appointment/_appointmentId/interview/new/index.vue | 4
PAMapp/components/Appointment/AppointmentInterviewList.vue | 116 +++++++++++++++++++++++
PAMapp/components/Client/ClientCard.vue | 8 +
PAMapp/components/Appointment/AppointmentRecordList.vue | 6
PAMapp/pages/appointment/_appointmentId/index.vue | 27 ++++-
PAMapp/pages/appointment/_appointmentId/close/index.vue | 18 +++
9 files changed, 178 insertions(+), 107 deletions(-)
diff --git a/PAMapp/components/Appointment/AppointmentInterviewList.vue b/PAMapp/components/Appointment/AppointmentInterviewList.vue
new file mode 100644
index 0000000..66c1774
--- /dev/null
+++ b/PAMapp/components/Appointment/AppointmentInterviewList.vue
@@ -0,0 +1,116 @@
+<template>
+ <div>
+ <div class="interview__header">
+ <div class="mdTxt">蝝赤蝝����</div>
+ <div class="mdTxt text--underline text--primary"
+ @click="addInterview">+�憓�</div>
+ </div>
+
+ <template v-if="!interviewList.length">
+ <div class="record-card record-card--empty">
+ �蝝赤蝝����
+ </div>
+ </template>
+
+ <template v-if="interviewList.length">
+ <div class="interview--future">
+
+ <div class="record-card">
+ <div class="record-card-date">
+ <span class="bold">01/10</span>
+ <span class="mt-5 line-space">09:00</span>
+ </div>
+ <div class="record-card-content">
+ <span>�����恥�蝝��璅��撱喉�����������靽</span>
+ </div>
+ </div>
+ </div>
+
+ <section class="interview--past">
+ <div class="record-card">
+ <div class="record-card-date">
+ <span class="bold">01/08</span>
+ <span class="mt-5 line-space">09:00</span>
+ </div>
+ <div class="record-card-content">
+ <span>�����縑���閰梯�Ⅳ嚗���������</span>
+ </div>
+ </div>
+ </section>
+
+ <section class="more-log-action">
+ <div class="mdTxt text--primary text--underline">撅��憭�</div>
+ </section>
+ </template>
+ </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'nuxt-property-decorator';
+
+@Component
+export default class AppointmentInterviewList extends Vue {
+
+ interviewList = [];
+
+ //////////////////////////////////////////////////////////////////////
+
+ addInterview(): void {
+ const appointmentId = this.$route.params.appointmentId;
+ this.$router.push(`/appointment/${appointmentId}/interview/new`);
+ }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.interview__header {
+ display : flex;
+ justify-content: space-between;
+ margin-bottom : 10px;
+}
+.interview--future{
+ border-bottom: 1px solid #CCCCCC;
+ padding-bottom: 17px;
+ margin-bottom: 17px;
+ .record{
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 10px;
+ }
+}
+.record-card {
+ height: 62px;
+ border: 1px solid #707070;
+ border-radius: 5px;
+ display: flex;
+ border-bottom: 1px solid #000;
+ .record-card-date{
+ display: flex;
+ flex-direction: column;
+ margin-left: 10px;
+ margin-right: 10px;
+ margin-top: 10px;
+ }
+ .record-card-content{
+ height: 42px;
+ margin-top: 10px;
+ margin-right: 10px;
+ line-height: 1.2;
+ }
+ &.record-card--empty {
+ align-items : center;
+ background-color: #fff;
+ color : $MID_GREY;
+ justify-content : center;
+ }
+}
+.line-space{
+ letter-spacing: 1px;
+}
+.more-log-action{
+ margin-top: 30px;
+ display: flex;
+ justify-content:flex-end;
+}
+</style>
diff --git a/PAMapp/components/Appointment/AppointmentRecord.vue b/PAMapp/components/Appointment/AppointmentRecord.vue
deleted file mode 100644
index a2cb3ca..0000000
--- a/PAMapp/components/Appointment/AppointmentRecord.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
- <div>
- <div class="record-page">
- <div class="record">
- <div class="mdTxt">蝝赤蝝����</div>
- <div class="mdTxt text--underline text--primary"
- @click="$router.push('/appointment/EditAppointmentRecord')">+�憓�</div>
- </div>
-
- <div class="record-card">
- <div class="record-card-date">
- <span class="bold">01/10</span>
- <span class="mt-5 line-space">09:00</span>
- </div>
- <div class="record-card-content">
- <span>�����恥�蝝��璅��撱喉�����������靽</span>
- </div>
- </div>
- </div>
-
- <section>
- <div class="record-card">
- <div class="record-card-date">
- <span class="bold">01/08</span>
- <span class="mt-5 line-space">09:00</span>
- </div>
- <div class="record-card-content">
- <span>�����縑���閰梯�Ⅳ嚗���������</span>
- </div>
- </div>
- </section>
-
- <section class="more-log-action">
- <div class="mdTxt text--primary text--underline">撅��憭�</div>
- </section>
- </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Prop } from 'nuxt-property-decorator';
-
-@Component
-export default class AppointmentRecord extends Vue {
-
-}
-</script>
-
-<style lang="scss" scoped>
-.record-page{
- border-bottom: 1px solid #CCCCCC;
- padding-bottom: 17px;
- margin-bottom: 17px;
- .record{
- display: flex;
- justify-content: space-between;
- margin-bottom: 10px;
- }
-}
-.record-card{
- height: 62px;
- border: 1px solid #707070;
- border-radius: 5px;
- display: flex;
- border-bottom: 1px solid #000;
- .record-card-date{
- display: flex;
- flex-direction: column;
- margin-left: 10px;
- margin-right: 10px;
- margin-top: 10px;
- }
- .record-card-content{
- height: 42px;
- margin-top: 10px;
- margin-right: 10px;
- line-height: 1.2;
- }
- }
-.line-space{
- letter-spacing: 1px;
-}
-.more-log-action{
- margin-top: 30px;
- display: flex;
- justify-content:flex-end;
-}
-</style>
\ No newline at end of file
diff --git a/PAMapp/components/Appointment/AppointmentRecordLog.vue b/PAMapp/components/Appointment/AppointmentRecordList.vue
similarity index 97%
rename from PAMapp/components/Appointment/AppointmentRecordLog.vue
rename to PAMapp/components/Appointment/AppointmentRecordList.vue
index 413cbc9..9bc21b1 100644
--- a/PAMapp/components/Appointment/AppointmentRecordLog.vue
+++ b/PAMapp/components/Appointment/AppointmentRecordList.vue
@@ -1,7 +1,7 @@
<template>
<div class="record-log-component">
<div class="mdTxt mt-30 mb-10">蝟餌絞�蝝����</div>
-
+
<section class="record-log-card">
<div class="record-log-card-date-container">
<div class="record-log-card-date-container-circle">
@@ -36,7 +36,7 @@
import { Vue, Component, Prop } from 'nuxt-property-decorator';
@Component
-export default class AppointmentRecordLog extends Vue {
+export default class AppointmentRecordList extends Vue {
}
</script>
@@ -87,4 +87,4 @@
justify-content:flex-end;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/PAMapp/components/BackActionBar.vue b/PAMapp/components/BackActionBar.vue
index f154324..598e73d 100644
--- a/PAMapp/components/BackActionBar.vue
+++ b/PAMapp/components/BackActionBar.vue
@@ -76,7 +76,13 @@
break;
case 'appointment':
const appointmentFeatureLabel = this.$route.name.includes('close') ? '蝯��' : '������';
- featureLabel = appointmentFeatureLabel;
+ const inInterview = this.$route.name.includes('interview');
+ const addNewInterview = this.$route.name.includes('new');
+ if (inInterview) {
+ featureLabel = addNewInterview ? '�憓�赤蝝����' : '蝺刻摩蝝赤蝝����';
+ } else {
+ featureLabel = appointmentFeatureLabel;
+ }
break;
}
return featureLabel;
diff --git a/PAMapp/components/Client/ClientCard.vue b/PAMapp/components/Client/ClientCard.vue
index 7f5c0bf..6d7e821 100644
--- a/PAMapp/components/Client/ClientCard.vue
+++ b/PAMapp/components/Client/ClientCard.vue
@@ -6,7 +6,7 @@
class="rowStyle cursor--pointer"
justify="space-between"
:class="{'new': newAppointment }"
- @click.native="openDetail"
+ @click.native="viewDetail"
>
<div class="test">
<div class="unread" v-if="isReserved">
@@ -202,6 +202,12 @@
this.memo = this.memoInfo.content;
}
+ //////////////////////////////////////////////////////////////////////
+
+ viewDetail(): void {
+ this.$router.push(`/appointment/${this.client.id}`);
+ }
+
get newAppointment(): boolean {
return !this.client.consultantViewTime
&& this.client.communicateStatus === 'reserved';
diff --git a/PAMapp/components/Ui/UiField.vue b/PAMapp/components/Ui/UiField.vue
index aa64749..dfa1512 100644
--- a/PAMapp/components/Ui/UiField.vue
+++ b/PAMapp/components/Ui/UiField.vue
@@ -68,26 +68,25 @@
}
</script>
-
<style lang="scss" scoped>
.pam-field {
- display: flex;
+ display : flex;
flex-direction: column;
.pam-field__label {
- display: flex;
align-items: center;
+ display : flex;
.pam-icon {
font-size: 12px;
}
.pam-field__title {
- font-weight: bold;
- display: flex;
align-items: center;
+ display : flex;
+ font-weight: bold;
}
}
.pam-field__content {
+ display : flex;
padding-top: 10px;
- display: flex;
}
}
</style>
diff --git a/PAMapp/pages/appointment/_appointmentId/close/index.vue b/PAMapp/pages/appointment/_appointmentId/close/index.vue
index 3b32a57..f67a0b3 100644
--- a/PAMapp/pages/appointment/_appointmentId/close/index.vue
+++ b/PAMapp/pages/appointment/_appointmentId/close/index.vue
@@ -21,6 +21,11 @@
v-model="appointmentCloseInfo.planCode"
placeholder="隢撓�"
type="text">
+ <!-- <el-input
+ type="input"
+ placeholder="隢撓�"
+ v-model="appointmentCloseInfo.planCode">
+ </el-input> -->
</UiField>
</el-row>
@@ -51,6 +56,7 @@
</select>
<div style="display: flex" class="mt-10">
+
<input
v-if="appointmentCloseInfo.failReason === 'other'"
class="appointment-client-detail-close__input"
@@ -65,7 +71,15 @@
type="flex"
class="pam-paragraph">
<UiField label="��酉" :labelSize="20">
- <textarea
+ <el-input
+ type="textarea"
+ :rows="3"
+ placeholder="隢撓�"
+ v-model="appointmentCloseInfo.archivedDate"
+ resize="none">
+ </el-input>
+
+ <!-- <textarea
v-model="appointmentCloseInfo.archivedDate"
class="appointment-close__remark"
placeholder="隢撓�"
@@ -73,7 +87,7 @@
id="remark"
wrap="off"
rows="3">
- </textarea>
+ </textarea> -->
</UiField>
</el-row>
diff --git a/PAMapp/pages/appointment/_appointmentId/index.vue b/PAMapp/pages/appointment/_appointmentId/index.vue
index 7261a18..41290f7 100644
--- a/PAMapp/pages/appointment/_appointmentId/index.vue
+++ b/PAMapp/pages/appointment/_appointmentId/index.vue
@@ -6,6 +6,7 @@
<div>{{ appointmentDetail.consultantReadTime }}</div>
</div>
<AppointmentProgress
+ class="mt-10"
:currentStep="appointmentDetail.communicateStatus"
></AppointmentProgress>
@@ -14,16 +15,18 @@
<div class="client-detail-info">
<div class="client-detail-info__avatar">
<div class="circle">
- {{ appointmentDetail.name }}
+ {{ appointmentDetail.name || 'NO NAME' }}
<div class="sm-circle">
{{ appointmentDetail.gender === 'male' ? '�' : '憟�'}}
</div>
</div>
</div>
<div class="client-detail-info__information">
- <div>{{ appointmentDetail.age }}甇�</div>
+ <div>{{ appointmentDetail.age || '--' }}甇�</div>
<div>{{ appointmentDetail.phone }}</div>
- <div class="text--underline">{{ appointmentDetail.email }}</div>
+ <div class="text--underline">
+ {{ appointmentDetail.email }}
+ </div>
</div>
</div>
@@ -34,18 +37,26 @@
</div>
<div class="client-detail-demand__hope-contact-time">
<div class="client-detail-demand__demand-list-label">�蝯�<br />��挾</div>
- <div>{{ appointmentDetail.hopeContactTime }}</div>
+ <div>���� 17:00 ~ 19:00</div>
+ <!-- TODO: 憭�蝯⊥�挾憒�� && 頝���� [Tomas. 2021/1/12] -->
+ <!-- <div>{{ appointmentDetail.hopeContactTime }}</div> -->
</div>
</div>
<div class="client-detail-action">
- <el-button @click="$router.go(-1)" >蝯��</el-button>
+ <el-button @click="closeAppointment" >蝯��</el-button>
<el-button @click="$router.go(-1)" style="margin-left: 0px">�/�閮�</el-button>
</div>
</section>
+ <section class="mt-30">
+ <AppointmentInterviewList />
+ </section>
+ <section class="mt-30">
+ <AppointmentRecordList />
+ </section>
</div>
</template>
@@ -72,6 +83,12 @@
}
}
+ //////////////////////////////////////////////////////////////////////
+
+ closeAppointment(): void {
+ this.$router.push(`/appointment/${this.appointmentDetail.id}/close`);
+ }
+
}
</script>
diff --git a/PAMapp/pages/appointment/EditAppointmentRecord.vue b/PAMapp/pages/appointment/_appointmentId/interview/new/index.vue
similarity index 95%
rename from PAMapp/pages/appointment/EditAppointmentRecord.vue
rename to PAMapp/pages/appointment/_appointmentId/interview/new/index.vue
index 22543ba..ce4909f 100644
--- a/PAMapp/pages/appointment/EditAppointmentRecord.vue
+++ b/PAMapp/pages/appointment/_appointmentId/interview/new/index.vue
@@ -25,7 +25,7 @@
import { Vue, Component } from 'nuxt-property-decorator';
@Component
-export default class EditAppointmentRecord extends Vue {
+export default class NewAppointmentInterview extends Vue {
}
</script>
@@ -63,4 +63,4 @@
display: flex;
justify-content: center;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0