Merge branch 'master' of https://192.168.0.10:8443/r/pcalife/PAM

HelenHuang

2021-12-06 9cb6d5f92ad7aeda45ad1fe6482dcfc63d17be2b

 PAMapp/pages/myAppointmentList.vue

@@ -1,59 +1,133 @@
<template>
    <div>
        <div class="pam-cus-tabs mb-30">
            <div
                class="cus-tab-item"
                :class="{'is-active': activeTabName === 'appointmentList'}"
                @click="tabClick('appointmentList')"
            >客戶預約
                <span class="p">({{appointmentList.length}})</span>
        <div class="pam-myAppointment-banner"></div>
        <div class="pam-container">
            <div class="pam-cus-tabs mb-30">
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'appointmentList'}"
                    @click="tabClick('appointmentList')"
                >客戶預約
                    <span class="p">({{appointmentList.length}})</span>
                </div>
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'contactedList'}"
                    @click="tabClick('contactedList')"
                >已聯絡
                    <span class="p">({{contactedList.length}})</span>
                </div>
            </div>
            <div
                class="cus-tab-item"
                :class="{'is-active': activeTabName === 'contactedList'}"
                @click="tabClick('contactedList')"
            >已聯絡
                <span class="p">({{contactedList.length}})</span>
            </div>

            <NuxtChild></NuxtChild>
        </div>

        <NuxtChild
            :contactedList="contactedList"
            :appointmentList="appointmentList"
        ></NuxtChild>
        <PopUpFrame
             :isOpen.sync="showNewAppointmentNumber"
        >
            <div class="text--center mdTxt">
                <p class="mb-50">你有 <span class="text--primary">{{newAppointmentNumber}}</span> 則新的預約</p>
                <div class="text--center">
                    <el-button
                        type="primary"
                        @click="showNewAppointmentNumber = false"
                    >我知道了</el-button>
                </div>
            </div>
        </PopUpFrame>
    </div>
</template>

<script lang="ts">
import { Context } from '@nuxt/types';
import { Vue, Component } from 'nuxt-property-decorator';
import { ClientInfo, getMyAppointmentList } from '~/assets/ts/api/appointment';
import { Vue, Component, State, Action, Watch } from 'nuxt-property-decorator';
import { allAppointmentsView, ClientInfo } from '~/assets/ts/api/appointment';
import * as _ from 'lodash';

@Component
@Component({
    layout: 'home'
})
export default class ClientReservedList extends Vue {
    activeTabName = 'appointmentList';
    appointmentList: ClientInfo[] = [];
    contactedList: ClientInfo[] = [];
    clients: ClientInfo[] = [];
    newAppointmentNumber: number = 0;
    showNewAppointmentNumber = false;

    async asyncData(context: Context) {
        let appointmentList: ClientInfo[] = [];
        let contactedList: ClientInfo[] = [];
        let clients: ClientInfo[] = [];
        await getMyAppointmentList().then((res: any) => clients = res.data)
    @State('myAppointmentList') myAppointmentList!: ClientInfo[];
    @Action storeMyAppointmentList!: () => Promise<number>;

        contactedList = clients.filter(item => item.communicateStatus === 'contacted');
        appointmentList = clients.filter(item => item.communicateStatus === 'reserved');
        return {
            clients,
            contactedList,
            appointmentList
        }
    mounted() {
     this.storeMyAppointmentList().then(newDataLength => {
         this.newAppointmentNumber = newDataLength;
         if (this.newAppointmentNumber > 0) {
             this.showNewAppointmentNumber = true;
             allAppointmentsView().then(res => res);
         }
    });

     if (this.$route.name) {
         this.activeTabName = this.$route.name.split('-')[1]
     }
    }

    @Watch('myAppointmentList')
    onMyAppointmentListChange() {
        this.contactedList = this.myAppointmentList
            .filter(item => item.communicateStatus === 'contacted');

        this.appointmentList = this.myAppointmentList
            .filter(item => item.communicateStatus !== 'contacted');
    }

    tabClick(path: string) {
        this.activeTabName = path;
        this.$router.push('/myAppointmentList/' + this.activeTabName)
    }

    get route(): string{
        const routeName = this.$route.name;
        return routeName ? routeName:'';
    };

    get bannerClassName() {
        return this.routeFormatBannerClass(this.route);
    };

    // format to {page}-banner or pam-no-banner tag
    private routeFormatBannerClass(route: string): string {
        const needBannerTags = ['myAppointmentList-appointmentList', 'myAppointmentList-contactedList'];
        return _.includes(needBannerTags, route) ? route + '-banner' : 'pam-no-banner';
    };

}
</script>
</script>

<style lang="scss" scoped>
    .pam-myAppointment-banner {
        width: 100%;
        height: 120px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        background-image: url('~/assets/images/myAppointmentList/agent_banner_mob.svg');
    }

    @media (min-width: 768px) {
        .pam-myAppointment-banner {
            background-image: url('~/assets/images/myAppointmentList/agent_banner_web.svg');
        }
    }

    .pam-container {
        margin: 30px 20px;
    }

    @include desktop {
        .pam-container {
            width: 700px;
            margin: 30px auto;
        }
    }
</style>