update: 預約單細節頁面(客戶資訊區塊樣式)

Tomas

2022-01-12 03ea05b93dcb5adc546d9d37204df5142e2058dd

 PAMapp/pages/appointment/_appointmentId.vue

@@ -1,5 +1,148 @@
<template>
  <div>
    APPOINTMENT_3
  <div class="appointment-client-detail-page">
    <div class="date-detail">
      <!-- TODO: 要依據不同 step 顯示不同 Date [Tomas, 2022/1/11] -->
      <div>{{ appointmentDetail.appointmentDate }}</div>
      <div>{{ appointmentDetail.consultantReadTime }}</div>
    </div>
    <AppointmentProgress
      :currentStep="appointmentDetail.communicateStatus"
    ></AppointmentProgress>

    <section class="client-detail">

      <div class="client-detail-info">
        <div class="client-detail-info__avatar">
          <div class="circle">
            {{ appointmentDetail.name }}
            <div class="sm-circle">
              {{ appointmentDetail.gender === 'male' ? '男' : '女'}}
            </div>
          </div>
        </div>
        <div class="client-detail-info__information">
          <div>{{ appointmentDetail.age }}歲</div>
          <div>{{ appointmentDetail.phone }}</div>
          <div class="text--underline">{{ appointmentDetail.email }}</div>
        </div>
      </div>

      <div class="client-detail-demand mt-10">
        <div class="client-detail-demand__demand-list">
          <div class="client-detail-demand__demand-list-label">需求</div>
          <div>{{ appointmentDetail.requirement }}</div>
        </div>
        <div class="client-detail-demand__hope-contact-time">
          <div class="client-detail-demand__demand-list-label">聯絡<br />時段</div>
          <div>{{ appointmentDetail.hopeContactTime }}</div>
        </div>
      </div>

      <div class="client-detail-action">
        <el-button @click="$router.go(-1)" >結案</el-button>
        <el-button @click="$router.go(-1)" style="margin-left: 0px">通知/採訪</el-button>
      </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{
    background-color: #fff;
    margin-top:10px;
    padding: 17px 21px;
    .client-detail-info {
      display: flex;
      .client-detail-info__avatar{
        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-detail-info__information{
        font-size: 20px;
        line-height: 1.6;
      }
    }
    .client-detail-demand{
      background-color: #fff;
      font-size: 20px;
      display: flex;
      flex-direction: column;
      .client-detail-demand__demand-list{
        display: flex;
      }
      .client-detail-demand__hope-contact-time{
        display: flex;
      }
      .client-detail-demand__demand-list-label {
        @extend .mr-10;
        @extend .mdTxt;
        @extend .mb-10;
      }
    }
    .client-detail-action {
      margin-left: 50px;
    }
  }
}
</style>