保誠-保戶業務員媒合平台
Tomas
2023-08-05 e86a7e7259c1f53d71797513b4a66eefaab2cec0
PAMapp/components/Consultant/ConsultantCard.vue
@@ -1,22 +1,33 @@
<template>
    <div>
        <el-row type="flex" class="rowStyle" :class="{'new': !agentInfo.customerViewTime }">
        <el-row type="flex" class="rowStyle" :class="{'new': !agentInfo.customerViewTime && $route.name !== 'myConsultantList-contactedList' }">
            <el-col class="flex_column pl-5" :xs="5" :sm="3">
                <UiAvatar
                    :size="50"
                    :agentNo="agentInfo.agentNo"
                    @click.native="showAgentDetail(agentInfo.agentNo)"
                ></UiAvatar>
                <!-- TODO:隱藏滿意度 -->
                <div v-if="!hideReviews">
                    <i class="icon-star pam-icon icon--yellow satisfaction"  v-if="notScoreAppointmentYet"></i>
                    <span v-if="notScoreAppointmentYet">
                        {{ agentInfo.satisfactionScore }}
                    </span>
                    <div class="unfilled text--center "
                        style="display:flex"
                        v-if="notScoreAppointmentYet">未填<br />滿意度</div>
                    <span v-if="agentInfo.contactStatus !== 'contacted'">{{ agentInfo.avgScore }}</span>
                <div v-if="!hideReviews" style="display: flex; justify-content: flex-start; align-items: center; margin-top: 6px; font-size: 12px">
                    <i v-if="isAppointment ? agentInfo.appointmentScore : agentInfo.avgScore"
                      class="icon-star pam-icon icon--yellow satisfaction"
                       style="margin-top: 0"></i>
                    <template v-if="isAppointment">
                      <template v-if="agentInfo.appointmentStatus === 'closed'
                                    || agentInfo.appointmentStatus === 'done'">
                        <span v-if="agentInfo.appointmentScore">
                            {{ agentInfo.appointmentScore }}
                        </span>
                        <div class="unfilled text--center "
                            style="display:flex"
                            v-else>未填<br />滿意度</div>
                      </template>
                    </template>
                    <template v-else>
                      <span v-if="agentInfo.avgScore">{{ agentInfo.avgScore }}</span>
                      <span class="unfilled text--center "
                          style="display:flex" v-else>尚無<br />滿意度</span>
                    </template>
                </div>
            </el-col>
            <el-col :xs="10" :sm="15">
@@ -34,7 +45,7 @@
                    @click="isRemoveAgentPopup = true"
                >移除</div>
                <div
                    v-if="notScoreAppointmentYet"
                    v-if="notScoreAppointmentYet && (agentInfo.appointmentStatus === 'closed' || agentInfo.appointmentStatus === 'done')"
                    class="text--primary text--underline cursor--pointer xsTxt text--bold"
                    @click="reviewsBtn = true">給予滿意度評分</div>
            </el-col>
@@ -45,7 +56,7 @@
                    :class="actionBtnStyle"
                >{{ actionBtnLabel }}</el-button>
                <div class="updateTime mt-10">
                    {{ agentInfo.updateTime | formatDate }}
                    {{ (isAppointment ? agentInfo.appointmentLastModifiedDate : agentInfo.updateTime)  | formatDate }}
                </div>
            </el-col>
        </el-row>
@@ -57,7 +68,7 @@
        >
            <div v-if="appointmentDetail">
                <h5 class="subTitle text--center mb-30">預約成功</h5>
                <p class="smTxt">{{appointmentDetail.appointmentDate | formatDate}}</p>
                <p class="smTxt">{{appointmentDetail.appointmentDate | formatDate}} 建立</p>
                <div class="reserved-info">
                    <p>姓名:{{appointmentDetail.name}}</p>
                    <p>電話:{{appointmentDetail.phone}}</p>
@@ -65,22 +76,23 @@
                    <p>性別:{{gender}}</p>
                    <p>年齡:{{appointmentDetail.age | toAgeLabel }}</p>
                    <p>職業:{{appointmentDetail.job}}</p>
                    <p>需求:{{appointmentDetail.requirement.split(',').join('、')}}</p>
                    <p>諮詢方式:{{appointmentDetail.consultationMethod | toConsultationMethod }}</p>
                    <p>需求:{{appointmentDetail.requirement ? 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 v-if="appointmentDetail.appointmentScore">
                        <div class="mdTxt mt-10 mb-10">滿意度</div>
                        <el-rate
                        :value="appointmentDetail.satisfactionScore"
                        :value="appointmentDetail.appointmentScore"
                        class="pam-myDemand-dialog__rate"
                        disabled>
                        </el-rate>
                    </div>
                </div>
                <div v-if="notScoreAppointmentYet" class="reserved-btn">
                <div v-if="notScoreAppointmentYet && (agentInfo.appointmentStatus === 'closed' || agentInfo.appointmentStatus === 'done')" class="reserved-btn">
                    <el-button type="primary"
                        @click.native="reviewsBtn = true">給予滿意度評分</el-button>
                </div>
@@ -151,7 +163,8 @@
import { hideReviews } from '~/shared/const/hide-reviews';
import { Consultant, ConsultantWithAppointmentId } from '~/shared/models/consultant.model';
import { Appointment } from '~/shared/models/appointment.model';
import { UserReviewsConsultantsParams } from '~/shared/models/reviews.model';
import { SatisfactionType } from '~/shared/models/enum/satisfaction-type';
import { UserReviewParams } from '~/shared/models/reviews.model';
const localStorage = namespace('localStorage');
@Component({
@@ -162,15 +175,15 @@
                return upperNumber[index];
            }
        },
        formatHopeContactTime(item: string): string {
      formatHopeContactTime(item: string): string {
        if (item) {
            const [hopeDay, hopeTime] = item.split('、');
            const day = hopeDay.split(',').length > 6 ? '不限日期' : hopeDay;
            const time = hopeTime.split(',').length > 3 ? '不限時間' : hopeTime;
            return `${day}、${time}`;
            }
            return '';
          const [hopeDay, hopeTime] = item.split('、');
          const day = hopeDay.split(',').length > 6 ? '不限日期' : hopeDay;
          const time = hopeTime.split(',').length > 3 ? '不限時間' : hopeTime;
          return `${day}、${time}`;
        }
        return ''; // 修正:移至 if (item) 的內部
      },
    }
})
export default class ConsultantCard extends Vue {
@@ -212,13 +225,14 @@
        otherRequirement  : null,
        phone             : "",
        requirement       : '',
        satisfactionScore : 0,
        appointmentScore : 0,
    };
    get notScoreAppointmentYet(): boolean {
      const isAppointment = !!this.agentInfo['appointmentStatus'];
      if (!isAppointment) return false;
      return this.agentInfo['appointmentStatus'] !== 'contacted' ? !this.agentInfo['appointmentScore'] : false;
      return isAppointment
            ? !this.agentInfo['appointmentScore']
            : !this.agentInfo.avgScore
    }
    get isAppointment(): boolean {
@@ -256,31 +270,34 @@
        }
        return ''
    }
    get actionBtnLabel() {
      const isAppointment = !!this.agentInfo['appointmentStatus'];
      if (isAppointment) {
        if (this.agentInfo['appointmentStatus'] === 'contacted') {
            return '已聯絡';
        }
        if (this.agentInfo['appointmentStatus'] === 'reserved') {
            return '已預約';
        }
        if (this.agentInfo['appointmentStatus'] === 'done') {
            return '已成交';
        }
        if (this.agentInfo['appointmentStatus'] === 'closed') {
            return '未成交';
        }
      } else {
        if (this.agentInfo.contactStatus === 'contacted') {
            return '已聯絡';
        }
        if (this.agentInfo.contactStatus === 'reserved') {
            return '已預約';
        }
  get actionBtnLabel() {
    const isAppointment = !!this.agentInfo['appointmentStatus'];
    if (isAppointment) {
      if (this.agentInfo['appointmentStatus'] === 'contacted') {
        return '已聯絡';
      }
        return '進行預約';
      if (this.agentInfo['appointmentStatus'] === 'reserved') {
        return '已預約';
      }
      if (this.agentInfo['appointmentStatus'] === 'done') {
        return '已成交';
      }
      if (this.agentInfo['appointmentStatus'] === 'closed') {
        return '未成交';
      }
    } else {
      if (this.agentInfo.contactStatus === 'contacted') {
        return '已聯絡';
      }
      if (this.agentInfo.contactStatus === 'reserved') {
        return '已預約';
      }
    }
    return '進行預約';
  }
    get actionBtnStyle() {
      const isAppointment = !!this.agentInfo['appointmentStatus'];
@@ -340,7 +357,7 @@
        appointmentService.getAppointmentDetail(appointmentId!).then(res => {
            this.appointmentDetail = {
                ...res,
                satisfactionScore:  this.agentInfo['appointmentScore'],
                appointmentScore:  this.agentInfo['appointmentScore'],
            };
            this.width = UtilsService.isMobileDevice() ? '80%' : '';
            this.isVisibleDialog = true;
@@ -368,11 +385,12 @@
                          ? this.agentInfo['appointmentId']
                          : this.latestNotClosedAppointment.id;
        const reviewParams: UserReviewsConsultantsParams = {
        const reviewParams: UserReviewParams = {
            appointmentId: appointmentId,
            score: this.inputScore,
            type : SatisfactionType.APPOINTMENT,
        }
        this.appointmentDetail.satisfactionScore = this.inputScore;
        this.appointmentDetail.appointmentScore = this.inputScore;
        reviewsService.userReviewsConsultants(reviewParams).then((res) => {
            this.reviewsBtn = false;