update: 1. 新增約訪預約資訊頭像圖片和型別icon，微調對齊方式 2. 約訪結案列表的樣式修正並調整進度條色彩

charlie

2022-01-22 38b68f92b9a47ca3947985d6b581603fe05106c7

 PAMapp/pages/myAppointmentList.vue

@@ -1,28 +1,28 @@
<template>
    <div>
        <div class="pam-myAppointment-banner"></div>
    <InterviewNotification></InterviewNotification>
        <div class="pam-container">
            <div class="pam-cus-tabs mb-30">
            <div class="pam-cus-tabs mb-10">
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'appointmentList'}"
                    @click="clickTab('appointmentList')"
                >
                  <span class="smTxt">未聯絡({{ appointmentList.length }})</span>
                  <span class="smTxt">未聯絡({{ appointmentItemSum }})</span>
                </div>
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'contactedList'}"
                    @click="clickTab('contactedList')"
                >
                  <span class="smTxt">約訪中({{ appointmentList.length }})</span>
                  <span class="smTxt">約訪中({{ contactedItemSum }})</span>
                </div>
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'closedList'}"
                    @click="clickTab('closedList')"
                >
                  <span class="smTxt">結案({{ closedList.length }})</span>
                  <span class="smTxt">結案({{ closedItemSum }})</span>
                </div>
            </div>

@@ -56,6 +56,7 @@
import { ContactStatus } from '~/shared/models/enum/contact-status';

const localStorage = namespace('localStorage');
const appointmentStore = namespace('appointment.store');

@Component({
    layout: 'home',
@@ -63,14 +64,23 @@
})
export default class ClientReservedList extends Vue {

    @State('myAppointmentList')
    @appointmentStore.State('myAppointmentList')
    myAppointmentList!: Appointment[];

    @State('myNewAppointmentSum')
    @appointmentStore.Getter('newAppointmentSum')
    newAppointmentSum!: number;

    @Action
    storeMyAppointmentList!: () => Promise<number>;
    @appointmentStore.Getter('appointmentItemSum')
    appointmentItemSum!: number;

    @appointmentStore.Getter('contactedItemSum')
    contactedItemSum!: number;

    @appointmentStore.Getter('closedItemSum')
    closedItemSum!: number;

    @appointmentStore.Action
    getMyAppointmentList!: () => Promise<Appointment[]>;

    @localStorage.Mutation
    storageClearAppointmentIdFromMsg!: () => void;
@@ -79,16 +89,13 @@
    currentAppointmentIdFromMsg!: string;

    activeTabName          : string        = 'appointmentList';
    appointmentList        : Appointment[] = [];
    contactedList          : Appointment[] = [];
    closedList             : Appointment[] = [];
    contactStatus          = ContactStatus;
    showNewAppointmentHint: boolean        = false;

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

    mounted() {
      this.storeMyAppointmentList();
      this.getMyAppointmentList();
    }

    destroyed() {
@@ -99,24 +106,23 @@

    @Watch('myAppointmentList')
    onMyAppointmentListChange(): void {
        this.appointmentList = this.myAppointmentList
            .filter(item => item.communicateStatus === this.contactStatus.RESERVED);
        this.contactedList = this.myAppointmentList
            .filter((item) => item.communicateStatus === this.contactStatus.CONTACTED);
        this.closedList = this.myAppointmentList
            .filter(item => item.communicateStatus === this.contactStatus.DONE || item.communicateStatus === this.contactStatus.CLOSE );
        if (this.currentAppointmentIdFromMsg) {
            this.redirectAppointmentStatus();
        }
    }

    // TODO: 調整程式碼 [Tomas, 2022/1/14 12:02]
    private redirectAppointmentStatus() {
        const currentAppointmentIndex = this.myAppointmentList
            .findIndex(item => item.id === +this.currentAppointmentIdFromMsg);
        if (currentAppointmentIndex > -1) {
            const communicateStatus = this.myAppointmentList[currentAppointmentIndex].communicateStatus;
            const pathName = communicateStatus === 'reserved' ? 'appointmentList' : 'closedList';
            let pathName = 'closedList'
            if (communicateStatus === this.contactStatus.RESERVED || communicateStatus === this.contactStatus.PICKED) {
              pathName = 'contactedList';
            }
            if (communicateStatus === this.contactStatus.CONTACTED) {
              pathName = 'contactedList';
            }
            this.$router.push(
                {
                    path: '/myAppointmentList/' + pathName,