add#134745: 登入後，如果有過久無回應的顧問，進入此流程(belong to TODO#134717: [客戶] 取消預約再改選其他顧問(前端))

Tomas

2022-01-26 2e2107d8ec18bfd90936d9562e9685040d052eed

add#134745: 登入後，如果有過久無回應的顧問，進入此流程(belong to TODO#134717: [客戶] 取消預約再改選其他顧問(前端))

 PAMapp/pages/index.vue

@@ -45,41 +45,46 @@
        :width="appointmentDialogWidth"
        class="pam-myDemand-dialog pam-dialog-reserved"
      >
        <div v-if="appointmentDetail">
            <h5 class="subTitle text--center mb-30">預約成功</h5>
            <p class="smTxt">{{appointmentDetail.appointmentDate | formatDate}}</p>
            <div class="reserved-info">
                <p>姓名：{{appointmentDetail.name}}</p>
                <p>電話：{{appointmentDetail.phone}}</p>
                <p>Email：{{appointmentDetail.email}}</p>
                <p>性別：{{gender}}</p>
                <p>年齡：{{appointmentDetail.age | toAgeLabel }}</p>
                <p>職業：{{appointmentDetail.job}}</p>
                <p>需求：{{appointmentDetail.requirement.split(',').join('、')}}</p>
                <p
                    v-for="(item, index) in hopeContactTime"
                    :key="index"
                >連絡時段{{index + 1 | formatNumber}}：{{ item | formatHopeContactTime }}</p>
                <div v-if="appointmentDetail.satisfactionScore">
                    <div class="mdTxt mt-10 mb-10">滿意度</div>
                    <el-rate
                    :value="appointmentDetail.satisfactionScore"
                    class="pam-myDemand-dialog__rate"
                    disabled>
                    </el-rate>
                </div>
            </div>
          <div v-if="appointmentDetail">
              <h5 class="subTitle text--center mb-30">預約成功</h5>
              <p class="smTxt">{{appointmentDetail.appointmentDate | formatDate}}</p>
              <div class="reserved-info">
                  <p>姓名：{{appointmentDetail.name}}</p>
                  <p>電話：{{appointmentDetail.phone}}</p>
                  <p>Email：{{appointmentDetail.email}}</p>
                  <p>性別：{{gender}}</p>
                  <p>年齡：{{appointmentDetail.age | toAgeLabel }}</p>
                  <p>職業：{{appointmentDetail.job}}</p>
                  <p>需求：{{appointmentDetail.requirement.split(',').join('、')}}</p>
                  <p
                      v-for="(item, index) in hopeContactTime"
                      :key="index"
                  >連絡時段{{index + 1 | formatNumber}}：{{ item | formatHopeContactTime }}</p>
                  <div v-if="appointmentDetail.satisfactionScore">
                      <div class="mdTxt mt-10 mb-10">滿意度</div>
                      <el-rate
                      :value="appointmentDetail.satisfactionScore"
                      class="pam-myDemand-dialog__rate"
                      disabled>
                      </el-rate>
                  </div>
              </div>

            <div v-if="notScoreAppointmentYet" class="reserved-btn">
                <el-button type="primary"
                    @click.native="isShowReviewDialog = true">給予滿意度評分</el-button>
            </div>
        </div>
              <div v-if="notScoreAppointmentYet" class="reserved-btn">
                  <el-button type="primary"
                      @click.native="reviewsBtn = true">給予滿意度評分</el-button>
              </div>

              <div v-if="appointmentDetail.communicateStatus === 'reserved' && !isAppointment" class="text--center mt-10">
                  <el-button @click="isCancelPopup = true">取消預約</el-button>
                  <el-button @click="edit" type="primary">編輯</el-button>
              </div>
          </div>
      </Ui-Dialog>

      <PopUpFrame
        :isOpen.sync="isShowReAppointmentDialog"
        @closePopUp="removeUrlQueryParameter('notContactAppointmentIdFromMsg')"
        @closePopUp="removeUrlQueryParameter('notContactAppointmentId')"
      >
          <div class="pam-dialog-review">
              <div class="mt-30 text--middle" v-if="agentInfo">
@@ -137,16 +142,17 @@

<script lang="ts">
  import { Vue, Component, State, Action, Watch, namespace } from 'nuxt-property-decorator';
  import { Appointment, AppointmentClosedInfo } from '~/shared/models/appointment.model';
  import { Consultant } from '~/shared/models/consultant.model';
  import { ContactStatus } from '~/shared/models/enum/contact-status';
  import { UserReviewsConsultantsParams } from '~/shared/models/reviews.model';
  import { StrictQueryParams } from '~/shared/models/strict-query.model';

  import appointmentService from '~/shared/services/appointment.service';
  import reviewsService from '~/shared/services/reviews.service';
  import UtilsService from '~/shared/services/utils.service';
  import myConsultantService from '~/shared/services/my-consultant.service';
import { AgentInfo } from '~/shared/models/agent-info.model';
  import { Appointment, AppointmentClosedInfo } from '~/shared/models/appointment.model';
  import { Consultant } from '~/shared/models/consultant.model';
  import { UserReviewsConsultantsParams } from '~/shared/models/reviews.model';
  import { StrictQueryParams } from '~/shared/models/strict-query.model';
  import { AgentInfo } from '~/shared/models/agent-info.model';
  import { ContactStatus } from '~/shared/models/enum/contact-status';

  const localStorage = namespace('localStorage');
  const roleStorage = namespace('localStorage');
@@ -164,6 +170,9 @@

    @roleStorage.Getter
    isAdminLogin!: boolean;

    @roleStorage.Getter
    isUserLogin!: boolean;

    @Action
    storeRecommendList!: any;
@@ -257,6 +266,16 @@
        this.storeConsultantList();
        this.storageClearQuickFilter();
        this.storageClearRecommendConsultant();

        if (this.isUserLogin) {
          appointmentService.getNotContactAppointment().then((appointment) => {
            if (appointment) {
              this.$router.push({ query: { notContactAppointmentId: appointment.id + ''}});
              this.autoOpenAppointmentBy('askReAppointment', appointment.id);
            }
          });
        }

      }

    }
@@ -331,13 +350,18 @@
      this.$router.push(path);
    }

    edit() {
        this.isShowAppointmentDialog = false;
        this.$router.push({path: `/questionnaire/${this.agentInfo.agentNo}`, query: {'edit': 'true'}});
    }

    reAppointment(): void {
      appointmentService.cancelAppointment(this.appointmentDetail.id).then(() => {
        const requirements = this.appointmentDetail.requirement.split(',');
        this.storeConsultantList();
        this.storageStrickQueryItem({ requirements: requirements });
        this.storageClearNotContactAppointmentIdFromMsg();
        this.removeUrlQueryParameter('notContactAppointmentIdFromMsg');
        this.removeUrlQueryParameter('notContactAppointmentId');
        this.$router.push('/recommendConsultant');
      });
    }
@@ -346,8 +370,10 @@
      appointmentService.cancelAppointment(this.appointmentDetail.id).then(() => {
        this.storeConsultantList();
        this.storageClearNotContactAppointmentIdFromMsg();
        this.removeUrlQueryParameter('notContactAppointmentIdFromMsg');
        this.$router.push('');
        this.removeUrlQueryParameter('notContactAppointmentId');
        this.isShowReAppointmentDialog = false;
        this.isShowAppointmentDialog = false;
        this.$router.push('/');
      });
    }

@@ -375,18 +401,20 @@
          })
        }
        this.$router.push(newRouteQuery);
        this.storageClearSatisfactionIdFromMsg();
        this.storageClearNotContactAppointmentIdFromMsg();
    }

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

    get gender() {
    get gender(): string {
        if (this.appointmentDetail.gender) {
            return this.appointmentDetail.gender === 'male' ? '男性' : '女性';
        }
        return ''
    }

    get hopeContactTime() {
    get hopeContactTime(): string[] {
        const contactList = this.appointmentDetail.hopeContactTime
            .split("'").map((item: any) => item.slice(0, item.length));
        return contactList.filter((item: any) => !!item && item !== ",")
@@ -399,6 +427,10 @@
      return false;
    }

    get isAppointment(): boolean {
      return !!this.agentInfo['appointmentStatus'];
    }

  }

</script>

 PAMapp/shared/services/appointment.service.ts

@@ -79,6 +79,12 @@
  async deleteInterviewRecord(interviewRecordId) {
    return http.delete(`/interview_record/${interviewRecordId}`);
  }

  // 客戶取得最新預約的未處理預約單
  async getNotContactAppointment(): Promise<Appointment> {
    return http.get(`/appointment/customer/expiring/newest`).then((res) => res.data);
  }

}

export default new AppointmentService();