refactor: AgentDetail

Tomas

2021-12-15 0b35f2321cd1ea6fea2ef4e0854ad2c0461ee97a

 PAMapp/components/Consultant/ConsultantCard.vue

@@ -1,8 +1,8 @@
<template>
    <div>
        <el-row type="flex" class="rowStyle">
        <el-row type="flex" class="rowStyle" :class="{'new': !agentInfo.customerViewTime }">

            <el-col :xs="2" :sm="1" :class="{'state': agentInfo.new}"></el-col>
            <el-col :xs="2" :sm="1"></el-col>
            <el-col :xs="22" :sm="23">
                <el-row type="flex">
                    <el-col class="flex_column" :xs="5" :sm="3">
@@ -11,7 +11,8 @@
                            :fileName="avatarFileName"
                            @click.native="showAgentDetail(agentInfo.agentNo)"
                        ></UiAvatar>
                        <div>
                        <!-- TODO:隱藏滿意度 -->
                        <div v-if="!hideReviews">
                            <i class="icon-star pam-icon icon--yellow satisfaction"  v-if="!(latestContactedAppointment && !latestContactedAppointment.satisfactionScore)"></i>
                            <span v-if="agentInfo.contactStatus === 'contacted' && latestContactedAppointment && latestContactedAppointment.satisfactionScore">
                                {{ latestContactedAppointment && latestContactedAppointment.satisfactionScore}}
@@ -45,7 +46,7 @@
                            @click="reserveCommunication"
                            :class="agentInfo.contactStatus + 'Btn'"
                        >{{ contactTxt }}</el-button>
                        <div class="updateTime">
                        <div class="updateTime mt-10">
                            {{ displayTime | formatDate }}
                        </div>
                    </el-col>
@@ -75,13 +76,13 @@
                    >連絡時段{{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>
                        <el-rate
                        :value="appointmentDetail.satisfactionScore"
                        class="pam-myDemand-dialog__rate"
                        disabled>
                        </el-rate>
                    </div>
                </div>

                <div v-if="agentInfo.contactStatus === 'contacted'
                        && !appointmentDetail.satisfactionScore" class="dialogInfo-btn">
@@ -114,8 +115,15 @@
        <PopUpFrame :isOpen.sync="isCancelPopup">
            <div class="text--center mdTxt">是否取消此筆預約？</div>
            <div class="text--center mt-30">
                <el-button @click="isCancelPopup = false">取消</el-button>
                <el-button @click="cancel" type="primary">確定</el-button>
                <el-button @click="isCancelPopup = false">否</el-button>
                <el-button @click="cancel" type="primary">是</el-button>
            </div>
        </PopUpFrame>

        <PopUpFrame :isOpen.sync="isConfirmPopup">
            <div class="text--center mdTxt">已成功取消此筆預約</div>
            <div class="text--center mt-30">
                <el-button @click="isConfirmPopup = false" type="primary">確定</el-button>
            </div>
        </PopUpFrame>
    </div>
@@ -127,6 +135,7 @@
import { Consultant, Appointment } from '~/assets/ts/models/consultant.model';
import { isMobileDevice } from '~/assets/ts/device';
import { Role } from '~/assets/ts/models/enum/Role';
import { hideReviews } from '~/assets/ts/const/hide-reviews';

const roleStorage = namespace('localStorage');
@Component({
@@ -160,6 +169,8 @@
    width: string = '';
    inputScore = 0;
    isCancelPopup = false;
    hideReviews = hideReviews;
    isConfirmPopup = false;

    get latestContactedAppointment(): Appointment | null {
        if (!(this.agentInfo && this.agentInfo.appointments && this.agentInfo.appointments.length)) return null;
@@ -173,10 +184,10 @@
        return this.agentInfo.appointments!
                .filter((appointment) => appointment.communicateStatus !== 'contacted')
                .map((reversedAppointment) => {
                  return {
                    return {
                    ...reversedAppointment,
                    sortDate: new Date(reversedAppointment.appointmentDate)
                  }
                    }
                })
                .sort((preAppointment, nextAppointment) => +nextAppointment.sortDate - +preAppointment.sortDate)[0];
    }
@@ -190,7 +201,7 @@
                time = this.agentInfo.updateTime
                break;
            case 'picked':
                time = this.agentInfo.createTime
                time = this.agentInfo.updateTime
                break;
        }
        if (typeof time !== 'string') {
@@ -301,6 +312,9 @@
            this.storeConsultantList();
            this.isVisibleDialog = false;
            this.isCancelPopup = false;
            setTimeout(() => {
                this.isConfirmPopup = true;
            }, 300);
        });
    }

@@ -319,13 +333,10 @@
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        border-left: 4px solid transparent;

        .state {
            width: 10px;
            height: 10px;
            border-radius: 50px;
            background-color: $YELLOW;
            margin: auto 0;
        &.new {
            border-color: $YELLOW;
        }

        .satisfaction {