保誠-保戶業務員媒合平台
wayne
2022-02-17 a3716f72066d25d745f4d5103ff23a553c3e102b
PAMapp/pages/questionnaire/_agentNo.vue
@@ -1,12 +1,12 @@
<template>
  <div class="ques-page--reset" v-if="isLogin">
  <div class="ques-page--reset" v-if="isUserLogin">
    <div class="ques-header">
        <div class="ques-header__mob-banner"></div>
        <div
          class="ques-header__info"
          v-if="myRequest.contactType==='phone'">
          <div class="text--middle">
              <div class="mdTxt">你指定的聯繫方式</div>
              <div class="mdTxt">您指定的聯繫方式</div>
              <div class="mt-10">
                  <span>手機:</span>
                  <span>{{myRequest.phone}}</span>
@@ -16,32 +16,36 @@
              <div class="datepicker required">
                  <span class="mdTxt">手機連絡的方便時間</span>
                  <PhoneContactTimePicker
                  :scheduleList.sync="myRequest.hopeContactTime"/>
                  :scheduleList="myRequest.hopeContactTime"/>
              </div>
          </div>
          <div class="mt-30">
              <div class="mdTxt">其他備用聯繫方式</div>
              <div class="ques-header__input-block">
                  <span>Email:</span>
                  <input class="ques-header__input"
                  <input class="ques-header__input  break"
                    :class="{ 'is-invalid': !emailValid}"
                    placeholder="請輸入"
                    v-model="myRequest.email">
              </div>
              <div class="error mt-5 mb-5" style="margin-left:65px">
                  <span v-show="!emailValid">Email格式有誤</span>
              </div>
          </div>
        </div>
        <div class="ques-header__info" v-else>
          <div class="text--middle">
              <div class="mdTxt">你指定的聯繫方式</div>
              <div class="mdTxt">您指定的聯繫方式</div>
              <div class="mt-10 ques-header__input-block">
                  <span>Email:</span>
                  <span>{{myRequest.email}}</span>
                  <span class=" break">{{myRequest.email}}</span>
              </div>
          </div>
          <div class="mt-30">
              <div class="mdTxt">其他備用聯繫方式</div>
              <div class="ques-header__input-block">
                  <span>手機:</span>
                  <input class="ques-header__input"
                  <span>手機 : </span>
                  <input class="ques-header__input ml-4"
                    :class="{'is-invalid': !phoneValid}"
                    placeholder="請輸入"
                    maxlength="10"
@@ -55,7 +59,7 @@
              <div class="datepicker">
                  <span class="mdTxt">手機連絡的方便時間</span>
                  <PhoneContactTimePicker
                  :scheduleList.sync="myRequest.hopeContactTime"/>
                  :scheduleList="myRequest.hopeContactTime"/>
              </div>
          </div>
        </div>
@@ -80,7 +84,7 @@
          :options="genderOptions" />
      </div>
      <div class="pam-paragraph">
        <div class="mdTxt">年齡</div>
        <div class="mdTxt">您的年齡</div>
        <SingleSelectBtn class="mt-10"
          :singleSelected.sync="myRequest.age"
          :options="ageRangeOptions" />
@@ -115,18 +119,30 @@
    </PopUpFrame>
    <PopUpFrame :isOpen.sync="sendReserve" @update:isOpen="closeReservePopUp">
        <div class="text--middle  mt-30 sendReserve-txt">預約成功!您預約的保險顧問會</div>
        <div class="text--middle  sendReserve-txt">儘速與您聯絡!</div>
        <div class="mdTxt mt-30 sendReserve-txt">預約成功!</div>
        <div class="mdTxt sendReserve-txt mb-30">您預約的顧問會儘速與您聯絡!</div>
        <div class="pam-app-review mb-10">
          <div class="mdTxt mb-10">對於
                <span class="mdTxt text--primary text--bold ">服務媒合</span>
                平台的整體服務,
            </div>
          <div class="mdTxt">您給予幾顆星評價?</div>
        </div>
        <el-rate v-model="score" class="pam-satisfaction-rate fix-chrome-click--issue"></el-rate>
        <div class="text--center mdTxt">
          <el-button @click="closeReservePopUp">略過</el-button>
          <el-button type="primary"
            @click="closeReservePopUp">
            我知道了
            @click="reviewPlatform">
            送出
          </el-button>
        </div>
    </PopUpFrame>
    <PopUpFrame :isOpen.sync="isEditPopup">
      <div class="text--middle mt-30 sendReserve-txt">是否繼續編輯預約單?</div>
      <div class="text--middle text--center mb-10">已於
        <span class="bold">{{appointmentTime | formatDate}}</span>
      進行預約,</div>
      <div class="text--middle text--center mb-30">是否繼續編輯?</div>
      <div class="text--center mdTxt">
        <el-button @click="$router.go(-1)">返回</el-button>
        <el-button @click="isEditPopup = false" type="primary">編輯</el-button>
@@ -137,20 +153,42 @@
<script lang="ts">
import { Vue, Component, State, Action, Watch, namespace } from 'nuxt-property-decorator';
import { addFavoriteConsultant, appointmentDemand, AppointmentParams, AppointmentRequests ,editAppointment,RegisterInfo } from '~/assets/ts/api/consultant';
import { getRequestQuestionFromStorage, getRequestsFromStorage, removeRequestQuestionFromStorage, setRequestsToStorage } from '~/assets/ts/storageRequests';
import { getRequestsFromStorage, removeRequestQuestionFromStorage, setRequestsToStorage } from '~/shared/storageRequests';
import _ from 'lodash';
import { Consultant } from '~/assets/ts/models/consultant.model';
import { ContactType } from '~/assets/ts/models/enum/ContactType';
import { Gender } from '~/assets/ts/models/enum/Gender';
import { Role } from '~/assets/ts/models/enum/Role';
import accountSettingService from '~/shared/services/account-setting.service';
import appointmentService from '~/shared/services/appointment.service';
import authService from '~/shared/services/auth.service';
import queryConsultantService from '~/shared/services/query-consultant.service';
import reviewsService from '~/shared/services/reviews.service';
import { Consultant } from '~/shared/models/consultant.model';
import { ContactType } from '~/shared/models/enum/ContactType';
import { Gender } from '~/shared/models/enum/Gender';
import { RegisterInfo } from '~/shared/models/registerInfo';
import { AppointmentParams, AppointmentRequests } from '~/shared/models/appointment.model';
import { UserSetting } from '~/shared/models/account.model';
import { SatisfactionType } from '~/shared/models/enum/satisfaction-type';
import { UserReviewParams } from '~/shared/models/reviews.model';
  const roleStorage = namespace('localStorage');
  @Component
  export default class Questionnaire extends Vue {
    @State('myConsultantList') myConsultantList!: Consultant[];
    @Action storeConsultantList!: () => Promise<number>;
    @roleStorage.Getter currentRole!:string;
    @State('myConsultantList')
    myConsultantList!: Consultant[];
    @Action
    storeConsultantList!: () => Promise<number>;
    @roleStorage.Getter
    isUserLogin!:boolean;
    @roleStorage.State
    recommendConsultantItem!:string;
    @roleStorage.Mutation
    storageUserInfo!: (params: RegisterInfo) => void;
    score = 0;
    genderOptions=[
      {
@@ -244,13 +282,14 @@
                  },
                  {
                      title:'分紅保單',
                      content:'分紅保單 分紅保單是兼具「分攤風險」與「紅利共享」特色的保單,具有一定穩定度,讓你可以同時享有壽險保障及紅利!'
                      content:'分紅保單是兼具「分攤風險」與「紅利共享」特色的保單,具有一定穩定度,讓您可以同時享有壽險保障及紅利!'
                  }
    ];
    myRequest: AppointmentRequests = {
      phone          : this.userInfo?.phone ? this.userInfo.phone                               : '',
      email          : this.userInfo?.email ? this.userInfo.email                               : '',
      name           : '',
      phone          : '',
      email          : '',
      contactType    : _.isEqual(this.userInfo?.contactType,ContactType.SMS) ? ContactType.PHONE: ContactType.EMAIL,
      gender         : '',
      age            : '',
@@ -269,33 +308,35 @@
    isEditBtn = false;
    appointmentId = 0;
    appointmentTime = '';
    ////////////////////////////////////////////////////////////////////////////
    beforeRouteEnter(to: any, from: any, next: any) {
      next(vm => {
        if (from.name === 'login' && !vm.isLogin) {
        const isUserLogin = authService.isUserLogin();
        if (from.name === 'login' && !isUserLogin) {
          vm.$router.go(-1);
          return;
        }
        if (!vm.isLogin) {
        if (!isUserLogin) {
          vm.$router.push('/login');
        }
      })
    }
    async fetch() {
      if (this.isLogin) {
        await this.storeConsultantList();
      };
    }
    mounted(): void {
      if (authService.isUserLogin()) {
        this.storeConsultantList();
      };
      this.setMyRequest();
    }
    private setMyRequest(): void {
      const storageMyRequest = getRequestsFromStorage();
      const storageMyQuestion = getRequestQuestionFromStorage();
      const storageMyRequirement = this.recommendConsultantItem ? JSON.parse(this.recommendConsultantItem).requirements:[];
      const contactTypePromise = accountSettingService.getUserAccountSetting();
      if (storageMyRequest) {
        this.myRequest = {
@@ -309,48 +350,115 @@
        };
      }
      if (storageMyQuestion) {
      if (storageMyRequirement) {
        this.myRequest = {
          ...this.myRequest,
          requirement: storageMyQuestion
          requirement: storageMyRequirement
        }
        removeRequestQuestionFromStorage();
      }
      contactTypePromise.then((contactTypeDetail) => {
            this.myRequest = {
              ...this.myRequest,
              ...contactTypeDetail
            }
      })
    }
    get phoneValid(): boolean {
      const rule = /^09[0-9]{8}$/;
      return this.myRequest.phone
            ? rule.test(this.myRequest.phone) && _.isEqual(this.myRequest.phone.length,10)
            : true;
    ////////////////////////////////////////////////////////////////////////////
    @Watch('myConsultantList')
    onMyConsultantListChange() {
      if (authService.isUserLogin() && this.myConsultantList.length > 0) {
          const editAppointment = this.getLatestReserved(this.$route.params.agentNo);
          if (editAppointment && editAppointment.agentNo) {
            this.myRequest = JSON.parse(JSON.stringify(editAppointment));
            if (!this.$route.query || this.$route.query.edit !== 'true') {
              this.isEditPopup = true;
            }
            this.isEditBtn = true;
          }
      }
    }
    get userInfo(): RegisterInfo {
      const initUserInfo = JSON.parse(localStorage.getItem('userInfo')!);
      return initUserInfo;
    private getLatestReserved(agentNo) {
      const agentInfo = this.myConsultantList.filter(item => item.agentNo === agentNo);
      const appointmentInfo = agentInfo.length > 0 && agentInfo[0].appointments
        ? agentInfo[0].appointments!
              .filter((appointment) => appointment.communicateStatus === 'reserved')
              .map((reversedAppointment) => (
                { ...reversedAppointment,
                  sortDate: new Date(reversedAppointment.appointmentDate)
                }))
              .sort((preAppointment, nextAppointment) => +nextAppointment.sortDate - +preAppointment.sortDate)[0]
        : null;
      return this.getReservedData(appointmentInfo);
    }
    get isDisabledSubmitBtn(): boolean {
           return _.includes(this.myRequest.contactType,ContactType.PHONE)
      ? !this.isHopeContactTimeDone()
      : !this.phoneValid;
    private getReservedData(appointmentInfo) {
      if (appointmentInfo) {
        const hopeContactTime = appointmentInfo!.hopeContactTime.split("'")
              .filter(item => item && item !== ',');
        this.getAppointmentId(appointmentInfo);
        return {
            ...appointmentInfo,
            hopeContactTime: hopeContactTime.map(item => {
                const info = item.split('、');
                return {
                    selectWeekOptions: info[0].split(','),
                    selectTimesOptions: info[1].split(',')
                }
            }),
            requirement: appointmentInfo.requirement.split(',')
          }
      } else {
        return null;
      }
    }
    get isLogin() {
      return this.currentRole === Role.USER;
    private getAppointmentId(appointmentInfo) {
      this.appointmentId = appointmentInfo.id;
      this.appointmentTime = appointmentInfo.lastModifiedDate
                  ? appointmentInfo.lastModifiedDate
                  : appointmentInfo.appointmentDate;
    }
    private isHopeContactTimeDone():boolean{
      return this.myRequest.hopeContactTime[0]?.selectWeekOptions.length >0 && this.myRequest.hopeContactTime[0]?.selectTimesOptions.length >0;
    }
    ////////////////////////////////////////////////////////////////////////////
    sentDemand() {
      if (this.isEditBtn) {
        this.sentEditAppointmentDemand();
        this.editAppointmentDemand();
      } else {
        addFavoriteConsultant([this.$route.params.agentNo]).then(res => this.sentAppointmentDemand());
        queryConsultantService.addFavoriteConsultant([this.$route.params.agentNo]).then(res => this.sentAppointmentDemand());
      }
       const editSettingInfo: UserSetting = {
          name: this.myRequest.name,
          phone: this.myRequest.phone,
          email: this.myRequest.email,
      }
      accountSettingService.updateAccountSetting(editSettingInfo).then((_) => {
          this.storageUserInfo(this.userInfo);
      });
    }
    private editAppointmentDemand() {
      const info = {
          ...this.myRequest,
          requirement: _.map(this.myRequest.requirement,o=>o).toString(),
          hopeContactTime: this.myRequest.phone && this.phoneValid ? this.getHopeContactTime() :'',
          id: this.appointmentId,
          otherRequirement: null
        }
      appointmentService.editAppointment(info).then(res => {
        this.sendReserve = true;
        this.myRequest.hopeContactTime = [];
        setRequestsToStorage(this.myRequest);
      });
    }
    private sentAppointmentDemand() {
@@ -361,33 +469,30 @@
          agentNo: this.$route.params.agentNo
        };
        appointmentDemand(data).then(res => {
        queryConsultantService.appointmentDemand(data).then(res => {
            this.sendReserve = true;
            this.myRequest.hopeContactTime = [];
            this.appointmentId = res['id'];
            setRequestsToStorage(this.myRequest);
        });
    }
    private sentEditAppointmentDemand() {
      const info = {
          ...this.myRequest,
          requirement: _.map(this.myRequest.requirement,o=>o).toString(),
          hopeContactTime: this.myRequest.phone && this.phoneValid ? this.getHopeContactTime() :'',
          id: this.appointmentId,
          otherRequirement: null
        }
        editAppointment(info).then(res => {
          this.sendReserve = true;
          this.myRequest.hopeContactTime = [];
          setRequestsToStorage(this.myRequest);
        });
    }
    getHopeContactTime() {
    private getHopeContactTime() {
        const selectedHopeContactTime = this.myRequest.hopeContactTime.filter((i) => i.selectWeekOptions?.length && i.selectTimesOptions?.length);
        return selectedHopeContactTime.map(i => {
            return `'${i.selectWeekOptions}、${i.selectTimesOptions}'`}
        ).toString();
    }
    reviewPlatform(): void {
      const reviewPlatformParams: UserReviewParams = {
        appointmentId: this.appointmentId,
        score: this.score,
        type: SatisfactionType.SYSTEM
      };
      reviewsService.reviewPlatform(reviewPlatformParams).then((_) => {
        this.closeReservePopUp();
      });
    }
    closeReservePopUp() {
@@ -395,74 +500,35 @@
        this.$router.push('/')
    }
    private getLatestReserved(agentNo) {
      const agentInfo = this.myConsultantList.filter(item => item.agentNo === agentNo);
    ////////////////////////////////////////////////////////////////////////////
      const appointmentInfo = agentInfo.length > 0 && agentInfo[0].appointments
        ? agentInfo[0].appointments!
              .filter((appointment) => appointment.communicateStatus !== 'contacted')
              .map((reversedAppointment) => {
                return {
                  ...reversedAppointment,
                  sortDate: new Date(reversedAppointment.appointmentDate)
                }
              })
              .sort((preAppointment, nextAppointment) => +nextAppointment.sortDate - +preAppointment.sortDate)[0]
        : null;
      return this.getReservedData(appointmentInfo);
    get phoneValid(): boolean {
      const rule = /^09[0-9]{8}$/;
      return this.myRequest.phone
            ? rule.test(this.myRequest.phone) && _.isEqual(this.myRequest.phone.length,10)
            : true;
    }
    private getReservedData(appointmentInfo) {
      if (appointmentInfo) {
        const hopeContactTime = appointmentInfo!.hopeContactTime.split("'")
              .filter(item => item && item !== ',');
        this.appointmentId = appointmentInfo.id;
        return {
            age: appointmentInfo.age,
            agentNo: appointmentInfo.agentNo,
            contactType: appointmentInfo.contactType,
            email: appointmentInfo.email || '',
            gender: appointmentInfo.gender,
            hopeContactTime: hopeContactTime.map(item => {
                const info = item.split('、');
                return {
                    selectWeekOptions: info[0].split(','),
                    selectTimesOptions: info[1].split(',')
                }
            }),
            job: appointmentInfo.job,
            phone: appointmentInfo.phone || '',
            requirement: appointmentInfo.requirement.split(',')
          }
      } else {
        return {
          age: '',
          agentNo: '',
          contactType: '',
          email: '',
          gender: '',
          hopeContactTime: [],
          job: '',
          phone: '',
          requirement: []
        }
      }
    get emailValid() {
      const rule = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
      return this.myRequest.email ? rule.test(this.myRequest.email) : true;
    }
    @Watch('myConsultantList') onMyConsultantListChange() {
      if (this.isLogin && this.myConsultantList.length > 0) {
          const editAppointment = this.getLatestReserved(this.$route.params.agentNo);
          if (editAppointment.agentNo) {
            this.myRequest = JSON.parse(JSON.stringify(editAppointment));
            if (!this.$route.query || this.$route.query.edit !== 'true') {
              this.isEditPopup = true;
            }
            this.isEditBtn = true;
            return;
          }
      }
    get userInfo(): RegisterInfo {
      const initUserInfo = JSON.parse(localStorage.getItem('userInfo')!);
      return initUserInfo;
    }
    get isDisabledSubmitBtn(): boolean {
           return _.includes(this.myRequest.contactType,ContactType.PHONE)
      ? !this.isHopeContactTimeDone() || !this.emailValid
      : !this.phoneValid;
    }
    private isHopeContactTimeDone():boolean{
      return this.myRequest.hopeContactTime[0]?.selectWeekOptions.length >0 && this.myRequest.hopeContactTime[0]?.selectTimesOptions.length >0;
    }
  }
</script>
@@ -471,7 +537,6 @@
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 26px;
}
//drawer最底下文字樣式
@@ -482,7 +547,9 @@
  color: #ED1B2E;
  cursor: pointer;
}
.error {
  color:$PRIMARY_RED
}
//送出按鈕樣式與排版
.ques-footer{
  justify-content: center;
@@ -544,7 +611,10 @@
      transform: translate(-12px, 0);
  }
}
.break{
  word-break: break-all;
  line-height: 1.2;
}
.ques-page--reset.pam-page-container {
  margin: 0px auto;
}
@@ -577,7 +647,7 @@
    @extend .text--middle,.mt-10 ;
    .ques-header__input{
      &.is-invalid{
        border: 2px solid $PRIMARY_RED !important;
        border: 1px solid $PRIMARY_RED !important;
      }
      flex: 1;
      height: 50px;
@@ -590,12 +660,24 @@
      -moz-box-sizing: border-box;
    }
  }
  .ml-4{
    margin-left: 4px;
  }
  .ques-container {
    position: relative;
    margin: 0px 20px;
  }
.pam-app-review{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pam-satisfaction-rate{
  margin-bottom: 45px;
}
  @include desktop{
  .ques-header{
@@ -623,5 +705,6 @@
  }
}
</style>