update#134555: [顧問] 預約單結案/編輯結案功能串接

Tomas

2022-01-21 a7b45caf5b3784f65ba82793d87f5ffb202fca1e

 PAMapp/pages/appointment/_appointmentId/index.vue

@@ -31,15 +31,22 @@
      </div>

      <div class="client-detail-demand mt-10">
        <div class="client-detail-demand__demand-list">

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

        <div class="client-detail-demand__demand-list">
          <div class="client-detail-demand__demand-list-label">聯絡<br />時段</div>
          <div>星期一 17:00 ~ 19:00</div>
          <!-- TODO: 多筆聯絡時段如何呈現 && 跑版問題 [Tomas. 2021/1/12] -->
          <!-- <div>{{ appointmentDetail.hopeContactTime }}</div> -->
          <div class="client-detail-demand__demand-list-content">
            <div v-for="(hopeContactTime, index) in hopeContactTimeList" :key="index"
              :class="{'mt-10': index > 0, 'pb-10': true, 'hope-contact-time__line': index + 1 < hopeContactTimeList.length }">
              <div v-for="(item, index) in getHopeContactTimeContent(hopeContactTime)" :key="index" :class="{'mt-10': index < 0 }">
                {{ item }}
              </div>
            </div>
          </div>
        </div>
      </div>

@@ -54,24 +61,9 @@

    </section>

    <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 cursor--pointer" @click="editAppointmentHasClosed">編輯</div>
        </div>
        <span class="mt-10 mb-30">成交</span>

        <div class="mdTxt mb-10">保戶身份證字號</div>
        <div class="mb-30">A123456789</div>
        <div class="mdTxt mb-10">商品代碼Plan Code</div>
        <div class="mb-30">8888888</div>
        <div class="mdTxt mb-10">進件時間</div>
        <div class="mb-30">2021/12/2</div>
        <div class="mdTxt mb-10">備註</div>
        <div class="">約訪4次，客戶很喜歡聊寶可夢。</div>

    </section>
    <template v-if="showWhenAppointmentHasClosed">
      <AppointmentClosedInfo :appointmentDetail="appointmentDetail" />
    </template>

    <InterviewMsg
      :isVisible.sync="isVisibleDialog"
@@ -131,6 +123,28 @@
    return this.appointmentDetail.communicateStatus === this.contactStatus.DONE
        || this.appointmentDetail.communicateStatus === this.contactStatus.CLOSE
        || 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 hopeContactTimeList(): any[] {
    return this.appointmentDetail.hopeContactTime.split("','")
  }

  getHopeContactTimeContent(hopeContactTimeString: string): string[] {
    const result = hopeContactTimeString.replace("'", '').split('、');
    return result;
  }
}
</script>
@@ -195,9 +209,17 @@
        display: flex;
      }
      .client-detail-demand__demand-list-label {
        @extend .mr-10;
        @extend .mdTxt;
        @extend .mb-10;
        @extend .mdTxt;
        @extend .mr-10;
        color     : $DARK_BLUE;
        flex-basis: auto;
        min-width : 40px;
      }
      .client-detail-demand__demand-list-content {
        text-align: justify;
        text-justify: auto;
        word-break: break-all;
      }
    }
    .client-detail-action {
@@ -219,5 +241,8 @@
  justify-content: space-between;
  flex: 1;
}
.hope-contact-time__line {
  border-bottom: 1px solid #CCCCCC;
}

</style>