TODO#135406 [顧問] 預約單明細 - 點擊更多約訪紀錄時，改為展開而非導頁

HelenHuang

2022-02-15 65ebd84c61cf86c12f6180d931a0476d5f4b3cdb

 PAMapp/components/Appointment/AppointmentInterviewList.vue

@@ -2,28 +2,40 @@
    <div>
        <div class="interview__header">
            <div class="mdTxt">約訪紀錄</div>
            <div class="pam-link-button--lg"
            <div class="pam-link-button"
            @click="addInterview">+新增</div>
        </div>
        <InterviewCard :interviewList="displayList.slice(0, 3)"></InterviewCard>

        <section class="text--right mt-30" v-if="interviewList.length > 3">
                <div class="pam-link-button--lg" @click="readMoreBtn">展開看更多</div>
        <InterviewCard :interviewList="displayAppointmentList"></InterviewCard>

        <section class="text--right mt-30 interview-check-more" v-if="interviewList.length > 3">
                <div class="pam-link-button" @click="readAllList = !readAllList">
                  {{ readAllList ?  '顯示較少' : '展開看更多' }}
                  <i :class="readAllList ? 'icon-top' : 'icon-down'"></i>
                  </div>
        </section>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'nuxt-property-decorator';
import { Vue, Component, Prop, Watch, namespace } from 'nuxt-property-decorator';

import { InterviewRecord } from '~/shared/models/appointment.model';

@Component
export default class AppointmentInterviewList extends Vue {

  @Prop()
  interviewList!: InterviewRecord[];

  appointmentId!: string;
  displayList: InterviewRecord[] = [];
  readAllList = false;

  get displayAppointmentList(): InterviewRecord[] {
    return this.readAllList ? this.displayList : this.displayList.slice(0, 3);
  }


  //////////////////////////////////////////////////////////////////////

@@ -48,10 +60,6 @@
    this.$router.push(`/appointment/${this.appointmentId}/interview/new`);
  }

  readMoreBtn() {
      this.$router.push(`/appointment/${this.appointmentId}/interviewList`);
  }

}
</script>

@@ -61,4 +69,8 @@
  justify-content: space-between;
  margin-bottom  : 10px;
}
.interview-check-more{
  display: flex;
  justify-content: center;
}
</style>