From f3e662798b3b83a83c2d60dc7b4e6cf1ee4f1331 Mon Sep 17 00:00:00 2001 From: Tomas <tomasysh@gmail.com> Date: 星期六, 05 八月 2023 16:35:00 +0800 Subject: [PATCH] Fixed: [弱掃] p8.2 Bad use of null-like value --- PAMapp/components/Appointment/AppointmentRecordList.vue | 108 +++++++---------------------------------------------- 1 files changed, 15 insertions(+), 93 deletions(-) diff --git a/PAMapp/components/Appointment/AppointmentRecordList.vue b/PAMapp/components/Appointment/AppointmentRecordList.vue index 15e880d..27dfde9 100644 --- a/PAMapp/components/Appointment/AppointmentRecordList.vue +++ b/PAMapp/components/Appointment/AppointmentRecordList.vue @@ -2,43 +2,13 @@ <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"> - <div class="pam-link-button--lg" - >撅��憭�</div> + <section class="text--center mt-30" v-if="displayLogs.length > 3"> + <div class="pam-link-button" + @click="readMoreBtn" + >撅��憭� + <i class="icon-expand"></i></div> </section> </div> </template> @@ -47,15 +17,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 +25,8 @@ appointmentId: string = ''; displayLogs : NoticeLogs[] = []; + + ////////////////////////////////////////////////////////////////////// mounted() { this.appointmentId = this.$route.params.appointmentId; @@ -79,53 +43,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