add: _appointmentId 預約單細節頁面

HelenHuang

2022-01-11 429346f4ee63ad81177a1e4d1dde4c011a85a322

add: _appointmentId 預約單細節頁面

 PAMapp/pages/appointment/_appointmentId.vue

@@ -1,5 +1,129 @@
<template>
  <div>
    APPOINTMENT_3
  <div class="appointment-client-detail-page">
    <div class="date-detail">  
      <div>11/24 13:00 預約</div>
      <div>今天 10:22 已讀</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>
        </div>
      </div>
      <div class="client-info">
        <span>{{ appointmentDetail.age }}歲</span>
        <span>{{ appointmentDetail.phone }}</span>
        <span class="text--underline">{{ appointmentDetail.email }}</span>
      </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>

<script lang="ts">
import { Context } from '@nuxt/types';

import { Vue, Component } from 'vue-property-decorator';

import appointmentService from '~/shared/services/appointment.service';
import { AppointmentDetail } from '~/shared/models/appointment.model';

@Component
export default class AppointmentDetailComponent extends Vue {

  appointmentDetail!: AppointmentDetail;

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

  async asyncData(context: Context) {
    const appointmentId = +context.route.params.appointmentId;
    return {
      appointmentDetail: await appointmentService.getAppointmentDetail(appointmentId).then((res) => res)
    }
  }

}
</script>

<style lang="scss" scoped>
.appointment-client-detail-page{
  .date-detail{
    display: flex;
    font-size: 16px;
    color:#68737A;
    justify-content: space-between;
    margin-bottom: 2px;
  }
  .client-detail{
    display: flex;
    background-color: #fff;
    margin-top:10px;
    padding: 17px 21px 24px 21px;
    .circle-block{
      display: flex;
      margin-right: 22px;
      .circle{
        height: 100px;
        width: 100px;
        border-radius: 50%;
        background-color: #fff;
        border: 1px solid $PRIMARY_BLACK;
        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-info{
      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;

    }
    .client-demand-contact-time{
      display: flex;
      width: 281px;
    }
  }
}
</style>