update: TODO#132858 顧問經由簡訊或mail 點擊 url 查看客戶預約清單

Mila

2021-12-29 cc663139f6abd63f7deac4739b63db754baf595c

 PAMapp/components/Client/ClientCard.vue

@@ -2,6 +2,7 @@
    <div>
        <el-row
            type="flex"
            ref="clientCardRef"
            class="rowStyle cursor--pointer"
            justify="space-between"
            :class="{'new': newAppointment }"
@@ -94,15 +95,16 @@
</template>

<script lang="ts">
import { Vue, Component, Prop, Action } from 'nuxt-property-decorator';
import { Vue, Component, Prop, Action, namespace, Watch } from 'nuxt-property-decorator';

import appointmentService from '~/shared/services/appointment.service';
import UtilsService from '~/shared/services/utils.service';
import { hideReviews } from '~/shared/const/hide-reviews';
import { ClientInfo } from '~/shared/models/client.model';
import myConsultantService from '~/shared/services/my-consultant.service';
import { ElRow } from 'element-ui/types/row';


const localStorage = namespace('localStorage');
@Component({
    filters: {
        formatNumber(index: number) {
@@ -124,17 +126,27 @@
})
export default class ClientList extends Vue {
    @Action
    updateMyAppointment!: (data: ClientInfo) => void

    @Action
    storeConsultantList!: () => void;
    updateMyAppointment!: (data: ClientInfo) => void;

    @Prop()
    client!: ClientInfo;

    @localStorage.Mutation
    storageClearAppointmentIdFromMsg!: () => void;

    isVisibleDialog = false;
    dialogWidth = '';
    hideReviews = hideReviews;

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

    @Watch('$route', {immediate: true})
    onRouteChange() {
        const appointmentIdFromMsg = this.$route.query.appointmentId;
        if (appointmentIdFromMsg && +appointmentIdFromMsg === this.client.id) {
            this.openDetail();
        }
    }

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

@@ -194,6 +206,10 @@
    }

    openDetail() {
        setTimeout(() => {
            (this.$refs.clientCardRef as any).$el.classList.add('currentShowStyle');
        }, 0)

        this.dialogWidth = UtilsService.isMobileDevice() ? '80%' : '';
        this.isVisibleDialog = true;
    }
@@ -218,7 +234,16 @@
                updatedClient.consultantReadTime = new Date().toString();
                this.updateMyAppointment(updatedClient);
            });
        }
        };
        this.clearAppointmentIdFromMsg();
    }

    private clearAppointmentIdFromMsg() {
        this.storageClearAppointmentIdFromMsg();
        this.$router.push({query: {}});
        setTimeout(() => {
            (this.$refs.clientCardRef as ElRow).$el.classList.remove('currentShowStyle')
        },1000)
    }

}
@@ -231,11 +256,17 @@
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        transition: background-color 0.5s;

        &.new {
            border-left: solid 4px $YELLOW;
        }

        &.currentShowStyle {
            background-color: rgba(236, 195, 178, 0.5);
            transition: background-color 0.5s;
        }

        .unread {
            align-self: center;