update: 更新約訪通知彈窗機制

Tomas

2022-03-18 6ec0118f26788b14e0a95ec0e48c392a5758526b

update: 更新約訪通知彈窗機制

 PAMapp/components/Interview/InterviewMsg.vue

@@ -7,8 +7,29 @@
      :lock-scroll="false"
        >
        <div class="subTitle msg-dialog-title">約訪通知</div>
      <div class="send-msg-nav">

      <div v-if="!!client.phone">
        <div class="mdTxt mt-30 mb-10 required">預計約訪時段</div>
        <DateTimePicker
          @changeDateTime="interviewContent.interviewTime = $event"
          :isPastDateDisabled="true"
          :defaultValue="defaultValue"
        ></DateTimePicker>
      </div>

      <div class="send-msg-nav mt-10" style="justify-content: flex-start; align-items: center">
        <div class="mdTxt">通知內容</div>
        <div class="ml-10">
          <label for="addContactInfo" style="color: #ED1B2E; font-size: 18px; cursor: pointer">
            <input
              style="display: none"
              type="checkbox"
              id="addContactInfo"
              @click="interviewContent.addContactInfo = !interviewContent.addContactInfo"
              value="addContactInfo">
              <i class="pr-5" :class="interviewContent.addContactInfo ?'icon-checkbox-1': 'icon-checkbox'"></i>一併傳送聯繫資訊
          </label>
        </div>
      </div>

      <el-input
@@ -16,17 +37,21 @@
        :autosize="true"
        placeholder="約訪通知"
        resize="none"
        v-model="interviewTxt">
        v-model="interviewContent.customContent">
        </el-input>

      <div v-if="client.phone">
        <div class="mdTxt mt-30 mb-10 required">預計約訪時段</div>
        <DateTimePicker
          @changeDateTime="interviewTime = $event"
          :isPastDateDisabled="true"
          :defaultValue="defaultValue"
        ></DateTimePicker>
      <div class="send-msg-nav mt-10">
        <div class="mdTxt">預覽通知內容</div>
      </div>

      <el-input
        type="textarea"
        :autosize="true"
        placeholder="預覽約訪通知"
        resize="none"
        :disabled="true"
        v-model="interviewTxt">
        </el-input>

      <div class="msg-dialog-btn">
        <el-button @click="addInterview"  :disabled="isBtnDisabled">傳送</el-button>
@@ -45,7 +70,7 @@
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop, PropSync, Emit, namespace } from 'nuxt-property-decorator';
import { Vue, Component, Prop, PropSync, Emit, namespace, Watch } from 'nuxt-property-decorator';

import appointmentService from '~/shared/services/appointment.service';
import { Appointment, ToInformAppointment } from '~/shared/models/appointment.model';
@@ -75,6 +100,13 @@
    @Prop()
    defaultValue!: string;

    @Watch('defaultValue', { immediate: true })
    onDefaultValueChange(): void {
      if (this.defaultValue) {
        this.interviewContent.interviewTime = this.defaultValue;
      }
    }

    @Emit('closeDialog')
    closeDialog() {
        return;
@@ -84,30 +116,40 @@
    loginConsultant!: AgentInfo;

    isShowSuccessAlert = false;
    interviewTxt = '';

    interviewTxt = "";
    interviewTime = '';
    @Watch('interviewContent', { immediate: true, deep: true })
    onInterviewContentChange(): void {
      if (this.interviewContent.addContactInfo) {
        if (this.interviewContent.interviewTime) {
          const targetDate = new Date(this.interviewContent.interviewTime);
          this.interviewContent.formattedInterviewTime = `${targetDate.getFullYear()}年${targetDate.getMonth() + 1}月${targetDate.getDate()}日 ${targetDate.getHours()}時${targetDate.getMinutes()}分`;
        }
        this.interviewTxt = this.interviewContent.customContent + "\n" + ( this.client.phone || this.defaultValue ? ("我預計會在下述的時間與您聯繫"+ "\n" + (this.interviewContent.formattedInterviewTime || "(尚未選擇約訪時段)")): "") + "\n" +"以下是我的電話號碼/Email："+"\n" + (this.loginConsultant.phoneNumber || '(尚未提供電話號碼)') + "\n" + (this.loginConsultant.email|| '尚未提供 Email') + "\n"  +"若此時間不方便，請與我聯繫！謝謝！";
      } else {
        this.interviewTxt = this.interviewContent.customContent;
      }
    }

    interviewContent = {
      addContactInfo: true,
      interviewTime: '',
      formattedInterviewTime: '',
      customContent: '',
    };

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

    mounted() {
      if(this.loginConsultant.phoneNumber && this.loginConsultant.email)
      {
        this.interviewTxt = "您好！我是保誠媒合平台的保險顧問" + this.loginConsultant.name + "，感謝您的預約！我預計會在下述的時間與您聯繫"+"\n"+"以下是我的電話號碼/Email："+"\n" + this.loginConsultant.phoneNumber + "\n" + this.loginConsultant.email + "\n"+"若此時間不方便，請與我聯繫！謝謝！"}
        else if (!this.loginConsultant.phoneNumber && this.loginConsultant.email)
          {
            this.interviewTxt = "您好！我是保誠媒合平台的保險顧問" + this.loginConsultant.name + "，感謝您的預約！我預計會在下述的時間與您聯繫"+"\n"+"以下是我的Email："+"\n" + this.loginConsultant.email + "\n"+"若此時間不方便，請與我聯繫！謝謝！"
        }
        else
        this.interviewTxt = "您好！我是保誠媒合平台的保險顧問" + this.loginConsultant.name + "，感謝您的預約！我預計會在下述的時間與您聯繫"+"\n"+"以下是我的電話號碼："+"\n" + this.loginConsultant.phoneNumber + "\n"+"若此時間不方便，請與我聯繫！謝謝！"
      this.interviewContent.customContent = `您好！我是保誠媒合平台的保險顧問${this.loginConsultant.name}，感謝您的預約！`;
    }

    addInterview() {
      const message = this.getMessage();
      const appointmentInformation: ToInformAppointment = {
        appointmentId: this.client.id,
        email        : this.client?.email,
        interviewDate: this.interviewTime,
        message,
        interviewDate: this.defaultValue,
        message      : this.interviewTxt,
        phone        : this.client?.phone,
      };
      appointmentService.informAppointment(appointmentInformation).then((_) => {
@@ -122,22 +164,8 @@
      this.getMyAppointmentList();
    }

    private getMessage(): string {
      const targetDate = new Date(this.interviewTime);
      const interviewTime = `${targetDate.getFullYear()}年${targetDate.getMonth() + 1}月${targetDate.getDate()}日 ${targetDate.getHours()}時${targetDate.getMinutes()}分`;
      let result = '';
      if(this.loginConsultant.phoneNumber && this.loginConsultant.email) {
        result = "您好！我是保誠媒合平台的保險顧問" + this.loginConsultant.name + "，感謝您的預約！我預計會在下述的時間與您聯繫"+"\n" + interviewTime + "\n" +"以下是我的電話號碼/Email："+"\n" + this.loginConsultant.phoneNumber + "\n" + this.loginConsultant.email + "\n"+"若此時間不方便，請與我聯繫！謝謝！"}
        else if (!this.loginConsultant.phoneNumber && this.loginConsultant.email) {
            result = "您好！我是保誠媒合平台的保險顧問" + this.loginConsultant.name + "，感謝您的預約！我預計會在下述的時間與您聯繫"+"\n" + interviewTime + "\n" +"以下是我的Email："+"\n" + this.loginConsultant.email + "\n"+"若此時間不方便，請與我聯繫！謝謝！"
        } else {
          result = "您好！我是保誠媒合平台的保險顧問" + this.loginConsultant.name + "，感謝您的預約！我預計會在下述的時間與您聯繫"+"\n" + interviewTime + "\n" +"以下是我的電話號碼："+"\n" + this.loginConsultant.phoneNumber + "\n"+"若此時間不方便，請與我聯繫！謝謝！"
        }
        return result;
    }

    get isBtnDisabled() :Boolean {
      const isFormValid = this.client.phone ? this.interviewTxt && this.interviewTime :this.interviewTxt
      const isFormValid = this.client.phone ? this.interviewTxt && this.interviewContent.formattedInterviewTime : this.interviewTxt
      return !isFormValid
    }