<template>
|
<div class="interview-msg-component">
|
<el-dialog
|
:visible.sync="dialogVisible"
|
:width="dialogWidth"
|
@close="closeDialog"
|
:lock-scroll="false"
|
>
|
<div class="subTitle msg-dialog-title">約訪通知</div>
|
|
<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>
|
|
<el-input
|
type="textarea"
|
placeholder="請輸入內容"
|
resize="none"
|
rows="2"
|
v-model="interviewContent.customContent">
|
</el-input>
|
|
<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="interviewContent">
|
<div style="padding:10px;line-height:25px">
|
<i class="content">您好！我是保誠媒合平台的保險顧問{{loginConsultant.name}}，感謝您的預約！</i><br/>
|
<el-input type="textarea" :placeholder="'\{{ 如有額外補充資訊，將在這裡顯示 }}'" resize="none" v-model="interviewContent.customContent" readonly :autosize="true" ></el-input><br/>
|
<i class="content">{{client.phone ||defaultValue ? ("我預計會在下述的時間與您聯繫"+ "\n" + (this.interviewContent.formattedInterviewTime || "(尚未選擇約訪時段)")): ""}}</i><br/>
|
<i class="content">以下是我的電話號碼/Email：{{loginConsultant.phoneNumber || '尚未提供電話號碼'}} / {{loginConsultant.email || '尚未提供 Email'}}</i><br/>
|
<i class="content">若此時間不方便，請與我聯繫！謝謝！</i>
|
</div>
|
</div>
|
|
<div class="msg-dialog-btn">
|
<el-button @click="addInterview" :disabled="isBtnDisabled">傳送</el-button>
|
</div>
|
|
</el-dialog>
|
|
<PopUpFrame
|
:isOpen.sync="isShowSuccessAlert"
|
@closePopUp="closeAllDialog">
|
<div class="text--middle invite-review">
|
<div class="mb-30 mt-10">已發送約訪通知</div>
|
<div class="text--primary text--middle cursor--pointer text--underline" @click="closeAllDialog " :size="'250px'">我知道了</div>
|
</div>
|
</PopUpFrame>
|
</div>
|
</template>
|
<script lang="ts">
|
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';
|
import { AgentInfo } from '~/shared/models/agent-info.model';
|
|
const loginStore = namespace('login.store');
|
const appointmentStore = namespace('appointment.store');
|
|
@Component
|
export default class InterviewMsg extends Vue {
|
|
@appointmentStore.Action
|
updateAppointmentDetail!: (id: number) => Appointment;
|
|
@appointmentStore.Action
|
getMyAppointmentList!: () => Promise<Appointment[]>;
|
|
@PropSync('isVisible')
|
dialogVisible!: boolean;
|
|
@Prop({default:'90%'})
|
dialogWidth!:string;
|
|
@Prop()
|
client!: Appointment;
|
|
@Prop()
|
defaultValue!: string;
|
|
@Watch('defaultValue', { immediate: true })
|
onDefaultValueChange(): void {
|
if (this.defaultValue) {
|
this.interviewContent.interviewTime = this.defaultValue;
|
}
|
}
|
|
@Emit('closeDialog')
|
closeDialog() {
|
return;
|
}
|
|
@loginStore.State
|
loginConsultant!: AgentInfo;
|
|
isShowSuccessAlert = false;
|
interviewTxt = '';
|
|
@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.loginConsultant.name+"，感謝您的預約！"+"\n"+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() {
|
this.interviewContent.customContent ='';
|
}
|
|
addInterview() {
|
const appointmentInformation: ToInformAppointment = {
|
appointmentId: this.client.id,
|
email : this.client?.email,
|
interviewDate: this.interviewContent.interviewTime,
|
message : this.interviewTxt,
|
phone : this.client?.phone,
|
};
|
appointmentService.informAppointment(appointmentInformation).then((_) => {
|
this.isShowSuccessAlert = true ;
|
});
|
}
|
|
closeAllDialog() {
|
this.isShowSuccessAlert = false ;
|
this.dialogVisible = false;
|
this.updateAppointmentDetail(this.client.id);
|
this.getMyAppointmentList();
|
}
|
|
get isBtnDisabled() :Boolean {
|
const isFormValid = this.client.phone ? this.interviewTxt && this.interviewContent.formattedInterviewTime : this.interviewTxt
|
return !isFormValid
|
}
|
|
}
|
</script>
|
|
<style lang="scss" >
|
.interview-msg-component{
|
|
.required {
|
position: relative;
|
&::before {
|
content: '*';
|
position: absolute;
|
color: #FF0000;
|
transform: translate(-12px, 0);
|
}
|
}
|
.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: 600;
|
|
}
|
.msg-dialog-btn{
|
margin-top: 30px;
|
display: flex;
|
justify-content: center;
|
}
|
.invite-review{
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.interviewContent {
|
border: 1px solid #D0D0CE;
|
border-radius: 4px;
|
overflow-y: auto;
|
height: 180px;
|
background-color:#F8F9FA;
|
textarea {
|
outline:none !important;
|
border: none;
|
background-color:transparent;
|
color: red;
|
}
|
::placeholder {
|
color: red;
|
}
|
}
|
.content{
|
font-size: 18px;
|
font-weight: bold;
|
color: #CCCCCC;
|
}
|
|
.el-input__inner {
|
border:1px solid #707070;
|
border-radius:4px;
|
}
|
.interview-other-msg {
|
max-height: 80px;
|
overflow-y: auto;
|
margin-bottom: 5px;
|
margin-top: 5px;
|
}
|
}
|
</style>
|
