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,8 +11,8 @@
                            :fileName="avatarFileName"
                            @click.native="showAgentDetail(agentInfo.agentNo)"
                        ></UiAvatar>
                            <!-- TODO:隱藏滿意度 -->
                        <div v-if="!hideReviews">    
                        <!-- 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}}
@@ -75,14 +75,14 @@
                        :key="index"
                    >連絡時段{{index + 1 | formatNumber}}：{{ item | formatHopeContactTime }}</p>
                    <div v-if="appointmentDetail.satisfactionScore">
                        <div class="mdTxt mt-10 mb-10" v-if="!hideReviews">滿意度</div>
                            <el-rate
                            :value="appointmentDetail.satisfactionScore"
                            class="pam-myDemand-dialog__rate"
                            disabled>
                            </el-rate>
                        </div>
                        <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="agentInfo.contactStatus === 'contacted'
                        && !appointmentDetail.satisfactionScore" class="dialogInfo-btn">
@@ -115,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>
@@ -163,6 +170,7 @@
    inputScore = 0;
    isCancelPopup = false;
    hideReviews = hideReviews;
    isConfirmPopup = false;

    get latestContactedAppointment(): Appointment | null {
        if (!(this.agentInfo && this.agentInfo.appointments && this.agentInfo.appointments.length)) return null;
@@ -193,7 +201,7 @@
                time = this.agentInfo.updateTime
                break;
            case 'picked':
                time = this.agentInfo.createTime
                time = this.agentInfo.updateTime
                break;
        }
        if (typeof time !== 'string') {
@@ -304,6 +312,9 @@
            this.storeConsultantList();
            this.isVisibleDialog = false;
            this.isCancelPopup = false;
            setTimeout(() => {
                this.isConfirmPopup = true;
            }, 300);
        });
    }

@@ -322,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 {