Merge branch '2023_CR2' of ssh://dev.pollex.com.tw:29418/pcalife/PAM into 2...

jack

2023-07-31 23a51718522d4b01e9f13532573a85ff27298c08

 PAMapp/pages/appointment/_appointmentId/index.vue

@@ -1,8 +1,10 @@
<template>
  <div class="appointment-client-detail-page">
  <div class="appointment-client-detail-page" v-if="!!appointmentDetail">
    <div class="date-detail">
      <div>{{ appointmentDetail.appointmentDate | formatDate }}</div>
      <div>{{ appointmentDetail.consultantReadTime | formatDate }}</div>
      <div>{{ appointmentDetail.appointmentDate | formatDate }}預約</div>
      <div>{{ appointmentDetail.consultantReadTime | formatDate }}
        <span v-if="appointmentDetail.consultantReadTime">已讀</span>
      </div>
    </div>

    <AppointmentProgress
@@ -12,19 +14,22 @@

    <section class="client-detail">

      <div class="client-detail-info">
      <div class="client-detail-info mb-30">
        <div class="client-detail-info__avatar">
          <div class="circle">
            {{ appointmentDetail.name || 'NO NAME' }}
            <div class="sm-circle">
              {{ appointmentDetail.gender === 'male' ? '男' : '女'}}
            <div class="sm-circle sm-circle-male" v-if="appointmentDetail.gender === 'male'">
              <i class="icon-sex-male sex-icon"></i>
            </div>
            <div class="sm-circle sm-circle-female" v-if="appointmentDetail.gender === 'female'">
              <i class="icon-sex-female sex-icon"></i>
            </div>
          </div>
        </div>
        <div class="client-detail-info__information">
          <div>{{ appointmentDetail.age | toAgeLabel }}</div>
          <div>{{ appointmentDetail.phone }}</div>
          <div class="text--underline">
          <div class=" text--break-all">
            {{ appointmentDetail.email }}
          </div>
        </div>
@@ -33,8 +38,13 @@
      <div class="client-detail-demand mt-10">

        <div class="client-detail-demand__demand-list mb-10">
          <div class="client-detail-demand__demand-list-label">諮詢<br />方式</div>
          <div class="client-detail-demand__demand-list-content">{{ appointmentDetail.consultationMethod | toConsulType }}</div>
        </div>

        <div class="client-detail-demand__demand-list mb-10">
          <div class="client-detail-demand__demand-list-label">需求</div>
          <div class="client-detail-demand__demand-list-content">{{ appointmentDetail.requirement }}</div>
          <div class="client-detail-demand__demand-list-content">{{ appointmentDetail.requirement || '--' }}</div>
        </div>

        <div class="client-detail-demand__demand-list">
@@ -50,16 +60,20 @@
        </div>
      </div>

      <div class="client-detail-action" v-if="showWhenAppointmentHasClosed">
        <el-button >發送滿意度</el-button>
      <!-- <div class=" btn-center" v-if="showWhenAppointmentHasClosed">
        <el-button @click="inviteReview">發送滿意度</el-button>
      </div> -->

      <div class="client-detail-action" v-if="showWhenAppointmentHasContacted">
        <el-button @click="closeAppointment" class="desktop-client-detail-action-btn" >結案</el-button>
        <el-button @click="sendMsg" style="margin-left: 0px">通知約訪</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 class=" btn-center" v-if="showWhenAppointmentHasCreate">
        <el-button @click="sendMsg">傳送約訪通知</el-button>
      </div>

    </section>


    <template v-if="showWhenAppointmentHasClosed">
      <AppointmentClosedInfo :appointmentDetail="appointmentDetail" />
@@ -71,13 +85,20 @@
    </InterviewMsg>


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

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

    <PopUpFrame :isOpen.sync="isShowInviteReviewDialog">
          <div class="text--middle invite-review">
            <div class="mb-30 mt-10">已發送滿意度</div>
            <div class="text--primary text--middle cursor--pointer text--underline" @click="isShowInviteReviewDialog = false" :size="'250px'">我知道了</div>
          </div>
        </PopUpFrame>

  </div>
</template>
@@ -88,6 +109,9 @@

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

import reviewsService from '~/shared/services/reviews.service';


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

@@ -101,6 +125,7 @@
  appointmentProgress!: ContactStatus;

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

@@ -125,17 +150,13 @@
        || this.appointmentDetail.communicateStatus === this.contactStatus.CANCEL;
  }

  get displayClosedType(): string {
    let closedType = '成交';
    switch (this.appointmentDetail.communicateStatus) {
      case this.contactStatus.CLOSE:
        closedType = '未成交';
        break;
      case this.contactStatus.CANCEL:
        closedType = '取消';
        break;
    }
    return closedType;
  get showWhenAppointmentHasCreate(): boolean {
    return this.appointmentDetail.communicateStatus === this.contactStatus.PICKED
        || this.appointmentDetail.communicateStatus === this.contactStatus.RESERVED;
  }

  get showWhenAppointmentHasContacted() :boolean {
    return this.appointmentDetail.communicateStatus === this.contactStatus.CONTACTED;
  }

  get hopeContactTimeList(): any[] {
@@ -143,8 +164,14 @@
  }

  getHopeContactTimeContent(hopeContactTimeString: string): string[] {
    const result = hopeContactTimeString.replace("'", '').split('、');
    const result = hopeContactTimeString.replaceAll("'", '').split('、');
    return result;
  }

  inviteReview(): void {
    reviewsService.sendSatisfactionToClient(this.appointmentDetail.id).then(res => {
        this.isShowInviteReviewDialog = true;
    });
  }
}
</script>
@@ -171,8 +198,7 @@
          height: 100px;
          width: 100px;
          border-radius: 50%;
          background-color: #fff;
          border: 1px solid $PRIMARY_BLACK;
          background-image: url('~/assets/images/appointment/avatar_bg.svg');
          position: relative;
          display: flex;
          justify-content: center;
@@ -183,12 +209,26 @@
            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;
            .sex-icon {
              font-size: 20px;
              &.icon-sex-male{
                color: $SKY_BLUE;
              }
              &.icon-sex-female{
                color: $CORAL;
              }
            }
            &-male {
              border: 1px solid $SKY_BLUE;
            }
            &-female {
              border: 1px solid $LIGHT_RED;
            }
          }
        }
      }
@@ -212,12 +252,14 @@
        @extend .mb-10;
        @extend .mdTxt;
        @extend .mr-10;
        line-height: 1.3;
        color     : $DARK_BLUE;
        flex-basis: auto;
        min-width : 40px;
      }
      .client-detail-demand__demand-list-content {
        text-align: justify;
        line-height: 1.3;
        text-justify: auto;
        word-break: break-all;
      }
@@ -227,6 +269,11 @@
    }
  }
}
.invite-review{
    align-items   : center;
    display       : flex;
    flex-direction: column;
  }
.close-appointment-detail{
  background-color: #fff;
  display: flex;
@@ -244,5 +291,19 @@
.hope-contact-time__line {
  border-bottom: 1px solid #CCCCCC;
}
.btn-center{
    display: flex;
    justify-content: center;
  }

  @include desktop {
    .client-detail-action {
    display: flex;
    justify-content: center;
    }
    .desktop-client-detail-action-btn{
      margin-right: 10px;
    }
  }

</style>