update: TODO#131539 [我的顧問清單] 預約單可以修改/取消

Mila

2021-12-08 eda85197a4a979d33815481d07eebbc67df078b2

 PAMapp/components/Consultant/ConsultantCard.vue

@@ -69,7 +69,7 @@
                    >連絡時段{{index + 1 | formatNumber}}：{{ item | formatHopeContactTime }}</p>
                    <div v-if="appointmentDetail.satisfactionScore">
                    <div class="mdTxt mt-10 mb-10">滿意度</div>
                        <el-rate 
                        <el-rate
                            :value="appointmentDetail.satisfactionScore"
                            class="pam-myDemand-dialog__rate"
                            disabled>
@@ -77,10 +77,15 @@
                    </div>
                </div>

                <div v-if="agentInfo.contactStatus === 'contacted' 
                <div v-if="agentInfo.contactStatus === 'contacted'
                        && !appointmentDetail.satisfactionScore" class="dialogInfo-btn">
                    <el-button type="primary" 
                    <el-button type="primary"
                        @click.native="reviewsBtn = true">給予滿意度評分</el-button>
                </div>

                <div v-if="agentInfo.contactStatus === 'reserved'" class="text--center mt-10">
                    <el-button @click="isCancelPopup = true">取消預約</el-button>
                    <el-button @click="edit" type="primary">編輯</el-button>
                </div>
            </div>
        </Ui-Dialog>
@@ -88,23 +93,31 @@
            <div class="mdTxt">
                保險顧問滿意度
                <span class="hint">選取星星</span>
                <div class="dialogInfo-score"> 
                <div class="dialogInfo-score">
                    <el-rate v-model="inputScore" class="pam-quickFilter-rate"></el-rate>
                </div>
                <div class="dialogInfo-btn">
                    <el-button 
                    <el-button
                        type="primary"
                        :disabled="!inputScore"
                        @click="userReviewsConsultants">送出</el-button>
                </div>
            </div>
        </PopUpFrame>

        <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>
            </div>
        </PopUpFrame>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit, Action, State } from 'nuxt-property-decorator';
import { getAppointmentDetail, UserReviewsConsultantsParams, userReviewsConsultants  } from '~/assets/ts/api/consultant';
import { Vue, Component, Prop, Action } from 'nuxt-property-decorator';
import { getAppointmentDetail, UserReviewsConsultantsParams, userReviewsConsultants, cancelAppointment, AppointmentRequests  } from '~/assets/ts/api/consultant';
import { Consultant, Appointment } from '~/assets/ts/models/consultant.model';
import { isLogin } from '~/assets/ts/auth';
import { isMobileDevice } from '~/assets/ts/device';
@@ -138,7 +151,8 @@
    status = false;
    width: string = '';
    inputScore = 0;
    
    isCancelPopup = false;

    get latestContactedAppointment(): Appointment | null {
        if (!(this.agentInfo && this.agentInfo.appointments && this.agentInfo.appointments.length)) return null;
        const contactedAppointments: Appointment[] =  this.agentInfo.appointments
@@ -146,7 +160,13 @@
                                                        .sort((preAppointment, nextAppointment) => +nextAppointment.appointmentDate - +preAppointment.appointmentDate);
        return contactedAppointments[0];
    }
    

    get latestReservedAppointment(): Appointment {
        return this.agentInfo.appointments!
                .filter((appointment) => appointment.communicateStatus !== 'contacted')
                .sort((preAppointment, nextAppointment) => +nextAppointment.appointmentDate - +preAppointment.appointmentDate)[0];
    }

    appointmentDetail: any = {
        age:'',
        agentNo: '',
@@ -215,12 +235,9 @@
    }

    openPopUp() {
    const latestReservedAppointment = this.agentInfo.appointments!
                                        .filter((appointment) => appointment.communicateStatus !== 'contacted')
                                        .sort((preAppointment, nextAppointment) => +nextAppointment.appointmentDate - +preAppointment.appointmentDate)[0];
        getAppointmentDetail(this.latestContactedAppointment 
                            ? this.latestContactedAppointment.id 
                            : latestReservedAppointment.id).then(res => {
        getAppointmentDetail(this.latestContactedAppointment
                            ? this.latestContactedAppointment.id
                            : this.latestReservedAppointment.id).then(res => {
            this.appointmentDetail = {
                ...this.appointmentDetail,
                ...res.data
@@ -252,6 +269,19 @@
            this.storeConsultantList();
        });
    }

    cancel() {
        cancelAppointment(this.latestReservedAppointment.id).then(res => {
            this.storeConsultantList();
            this.isVisibleDialog = false;
            this.isCancelPopup = false;
        });
    }

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

</script>