From 0e27da107dd3329b4d0c11ce7d0173c3bd1358e9 Mon Sep 17 00:00:00 2001 From: Jack <jack.su@pollex.com.tw> Date: 星期三, 19 一月 2022 19:06:52 +0800 Subject: [PATCH] Merge branch 'Phase3' of ssh://dev.pollex.com.tw:29418/pcalife/PAM into Phase3 --- PAMapp/components/Appointment/AppointmentRecordList.vue | 103 ++++++--------------------------------------------- 1 files changed, 12 insertions(+), 91 deletions(-) diff --git a/PAMapp/components/Appointment/AppointmentRecordList.vue b/PAMapp/components/Appointment/AppointmentRecordList.vue index 15e880d..39b2835 100644 --- a/PAMapp/components/Appointment/AppointmentRecordList.vue +++ b/PAMapp/components/Appointment/AppointmentRecordList.vue @@ -2,42 +2,11 @@ <div class="record-log-component"> <div class="mdTxt mt-30 mb-10">蝟餌絞�蝝����</div> - <div v-for="(item, index) in displayLogs" - :key="index"> - <section - class="record-log-card" - > - <div class="record-log-card-date-container"> - <div class="record-log-card-date-container-circle"> - <div class="xxsTxt bold line-height">{{item.createdDate | formatYear}}</div> - <div> - <UiDateFormat - class="xxsTxt bold line-height" - :date="item.createdDate" - onlyShowSection="DAY" /> - </div> - <div> - <UiDateFormat - class="xxsTxt mt-4 line-space" - :date="item.createdDate" - onlyShowSection="TIME" /> - </div> - </div> - </div> - <div class="record-log-msg"> - <div>���赤� - <span v-if="item.email && item.phone">(���陛閮�mail)</span> - <span v-else-if="item.email">(Email)</span> - <span v-else>(���陛閮�)</span> - </div> - <div class="mt-10">���{item.interviewDate | formatDate}}</div> - </div> - </section> - <div class="time-line"></div> - </div> + <InterviewRecordCard :noticeLogsList="displayLogs.slice(0, 3)"></InterviewRecordCard> - <section class="more-log-action"> + <section class="text--right mt-30" v-if="displayLogs.length > 3"> <div class="pam-link-button--lg" + @click="readMoreBtn" >撅��憭�</div> </section> </div> @@ -47,15 +16,7 @@ import { Vue, Component, Prop, Watch } from 'nuxt-property-decorator'; import { NoticeLogs } from '~/shared/models/appointment.model'; -@Component({ - filters: { - formatYear(value) { - if (value) { - return new Date(value).getFullYear(); - } - } - } -}) +@Component export default class AppointmentRecordList extends Vue { @Prop() @@ -63,6 +24,8 @@ appointmentId: string = ''; displayLogs : NoticeLogs[] = []; + + ////////////////////////////////////////////////////////////////////// mounted() { this.appointmentId = this.$route.params.appointmentId; @@ -79,53 +42,11 @@ } } + ////////////////////////////////////////////////////////////////////// + + readMoreBtn() { + this.$router.push(`/appointment/${this.appointmentId}/recordList`); + } + } </script> - -<style lang="scss" scoped> -.record-log-component{ - display: flex; - flex-direction: column; - .record-log-card{ - display: flex; - .record-log-card-date-container{ - position:relative; - .record-log-card-date-container-circle{ - display: flex; - flex-direction: column; - width: 56px; - height: 56px; - border-radius: 50%; - border:1px solid $PRIMARY_BLACK; - justify-content: center; - align-items: center; - align-content: center; - } - } - } -} -.mt-4{ - margin-top: 4px; -} -.line-space{ - letter-spacing: 1px; -} -.line-height{ - line-height:1.2; -} -.time-line{ - border-left: 1px solid black; - height: 30px; - margin-left: 28px; - -} -.record-log-msg{ - margin-left: 13px; - margin-top: 10px; -} -.more-log-action{ - display: flex; - justify-content:flex-end; -} - -</style> -- Gitblit v1.8.0