update: TODO#133100 顧問端：header增加顧問頭像圖示

Mila

2022-01-20 f90c94f20b5f11d3b3ce0164d619c0112d5158c9

 PAMapp/pages/appointment/_appointmentId/index.vue

@@ -1,13 +1,13 @@
<template>
  <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>{{ appointmentDetail.appointmentDate | formatDate }}</div>
      <div>{{ appointmentDetail.consultantReadTime | formatDate }}</div>
    </div>

    <AppointmentProgress
      class="mt-10"
      :currentStep="appointmentDetail.communicateStatus"
      :currentStep="appointmentProgress"
    ></AppointmentProgress>

    <section class="client-detail">
@@ -22,7 +22,7 @@
          </div>
        </div>
        <div class="client-detail-info__information">
          <div>{{ appointmentDetail.age || '--' }}歲</div>
          <div>{{ appointmentDetail.age | toAgeLabel }}</div>
          <div>{{ appointmentDetail.phone }}</div>
          <div class="text--underline">
            {{ appointmentDetail.email }}
@@ -43,18 +43,22 @@
        </div>
      </div>

      <div class="client-detail-action">
        <!-- <el-button @click="closeAppointment" >結案</el-button>
        <el-button @click="sendMsg" style="margin-left: 0px">通知/約訪</el-button> -->
        <el-button>發送滿意度</el-button>
      <div class="client-detail-action" v-if="showWhenAppointmentHasClosed">
        <el-button >發送滿意度</el-button>
      </div>

      <div class="client-detail-action" v-else>
        <el-button @click="closeAppointment" >結案</el-button>
        <el-button @click="sendMsg" style="margin-left: 0px">通知/約訪</el-button>
      </div>

    </section>

    <section class="close-appointment-detail">
    <section class="close-appointment-detail" v-if="showWhenAppointmentHasClosed">

        <div class="close-appointment-detail-nav">
          <div class="mdTxt">結案方式</div>
          <div class="mdTxt text--primary text--underline">編輯</div>
          <div class="mdTxt text--primary text--underline cursor--pointer" @click="editAppointmentHasClosed">編輯</div>
        </div>
        <span class="mt-10 mb-30">成交</span>

@@ -69,70 +73,45 @@

    </section>


    <UiDialog
    :isVisible.sync="isVisibleDialog"
    class="msg-dialog">
      <div class="subTitle msg-dialog-title">約訪通知</div>

      <div class="send-msg-nav">
        <div class="mdTxt">通知內容</div>
        <div class="mdTxt text--primary text--underline">編輯</div>
      </div>

      <el-input
        type="textarea"
        :rows="9"
        placeholder="約訪通知"
        resize="none"
        validate-event = "false"
        v-model="interviewTxt">
        </el-input>
      <div class="mdTxt mt-30 mb-10">預計約訪時段</div>
      <div class="date-input">
            2022/01/10 09:00
            <i class="icon-calender icon"></i>
        </div>

      <div class="msg-dialog-btn">
        <el-button>傳送</el-button>
      </div>
    </UiDialog>
    <InterviewMsg
      :isVisible.sync="isVisibleDialog"
      :client="appointmentDetail">
    </InterviewMsg>


    <section class="mt-30">
      <AppointmentInterviewList />
      <AppointmentInterviewList :interviewList="appointmentDetail.interviewRecordDTOs" />
    </section>

    <section class="mt-30">
      <AppointmentRecordList />
      <AppointmentRecordList :noticeLogs="appointmentDetail.appointmentNoticeLogs" />
    </section>

  </div>
</template>

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

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

import appointmentService from '~/shared/services/appointment.service';
import { AppointmentDetail } from '~/shared/models/appointment.model';
import { Appointment } from '~/shared/models/appointment.model';
import { ContactStatus } from '~/shared/models/enum/contact-status';

const appointmentStore = namespace('appointment.store');

@Component
export default class AppointmentDetailComponent extends Vue {

  appointmentDetail!: AppointmentDetail;
  @appointmentStore.State('appointmentDetail')
  appointmentDetail!: Appointment;

  @appointmentStore.Getter('appointmentProgress')
  appointmentProgress!: ContactStatus;

  isVisibleDialog = false;
  interviewTxt = "";
  //////////////////////////////////////////////////////////////////////
  contactStatus = ContactStatus;

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

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

@@ -140,8 +119,18 @@
    this.$router.push(`/appointment/${this.appointmentDetail.id}/close`);
  }

  sendMsg():void{
  sendMsg():void {
    this.isVisibleDialog = true;
  }

  editAppointmentHasClosed(): void{
    this.$router.push(`/appointment/${this.appointmentDetail.id}/close`);
  }

  get showWhenAppointmentHasClosed(): boolean {
    return this.appointmentDetail.communicateStatus === this.contactStatus.DONE
        || this.appointmentDetail.communicateStatus === this.contactStatus.CLOSE
        || this.appointmentDetail.communicateStatus === this.contactStatus.CANCEL;
  }
}
</script>
@@ -216,32 +205,6 @@
    }
  }
}
.msg-dialog-title{
  display: flex;
  justify-content: center;
  margin-bottom:30px;
  color: $PRIMARY_BLACK;
}
.send-msg-nav{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: $PRIMARY_BLACK;
}
.el-dialog{
  width:90%
}
.el-textarea__inner{
  font-size: 20px;
  padding:10px;
  text-align: justify;
  font-weight: 500;
}
.msg-dialog-btn{
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
.close-appointment-detail{
  background-color: #fff;
  display: flex;
@@ -256,4 +219,5 @@
  justify-content: space-between;
  flex: 1;
}

</style>