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

Mila

2021-12-29 cc663139f6abd63f7deac4739b63db754baf595c

 PAMapp/pages/myAppointmentList.vue

@@ -6,20 +6,21 @@
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'appointmentList'}"
                    @click="tabClick('appointmentList')"
                    @click="clickTab('appointmentList')"
                >客戶預約
                    <span class="p">({{appointmentList.length}})</span>
                </div>
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'contactedList'}"
                    @click="tabClick('contactedList')"
                    @click="clickTab('contactedList')"
                >已聯絡
                    <span class="p">({{contactedList.length}})</span>
                </div>
            </div>

            <NuxtChild></NuxtChild>
            <NuxtChild keep-alive></NuxtChild>

        </div>

        <!-- DIALOG -->
@@ -40,23 +41,19 @@
</template>

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

import * as _ from 'lodash';

import { ClientInfo } from '~/assets/ts/models/client.model';
import { ClientInfo } from '~/shared/models/client.model';

const localStorage = namespace('localStorage');

@Component({
    layout: 'home',
    middleware: 'myAppointmentMiddleware'
    middleware: 'myAppointment'
})
export default class ClientReservedList extends Vue {

    activeTabName = 'appointmentList';
    appointmentList: ClientInfo[] = [];
    contactedList: ClientInfo[] = [];
    clients: ClientInfo[] = [];
    showNewAppointmentHint = false;

    @State('myAppointmentList')
    myAppointmentList!: ClientInfo[];
@@ -67,61 +64,100 @@
    @Action
    storeMyAppointmentList!: () => Promise<number>;

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

    @localStorage.Getter
    currentAppointmentIdFromMsg!: string;

    activeTabName         : string       = 'appointmentList';
    appointmentList       : ClientInfo[] = [];
    clients               : ClientInfo[] = [];
    contactedList         : ClientInfo[] = [];
    showNewAppointmentHint: boolean      = false;

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

    mounted() {
      this.storeMyAppointmentList();
    }

    destroyed() {
        this.storageClearAppointmentIdFromMsg();
    }

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

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

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

        if (this.currentAppointmentIdFromMsg) {
            this.redirectAppointmentStatus();
        }
    }

    //////////////////////////////////////////////////////////////////////
    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' : 'contactedList';
            this.$router.push(
                {
                    path: '/myAppointmentList/' + pathName,
                    query: {appointmentId: this.currentAppointmentIdFromMsg}
                }
            );
        }
    };

    mounted() {
      this.setActivatedTab();
      this.storeMyAppointmentList();
    @Watch('newAppointmentSum')
    newAppointmentSumChange(): void {
      this.showNewAppointmentHint = this.newAppointmentSum > 0;
    }

    @Watch('$route')
    onRouteChange() {
        const routeFullName = this.$route.name;
        if (routeFullName) {
            this.activeTabName = routeFullName.split('-')[1];
        }
    }

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

    get bannerClassName() {
        const routeName = this.$route.name || '';
        return this.routeFormatBannerClass(routeName);
    };

    tabClick(path: string) {
    clickTab(path: string): void {
      this.activeTabName = path;
      this.$router.push(`/myAppointmentList/${this.activeTabName}`);
    }

    //////////////////////////////////////////////////////////////////////
    get bannerClassName() {
      const routeName = this.$route.name || '';
      return this.routeFormatBannerClass(routeName);
    };

    // 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';
    };

    private setActivatedTab(): void {
      const routeFullName = this.$route.name;
      if (routeFullName) {
        this.activeTabName = routeFullName.split('-')[1];
      }
    }

}
</script>

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

    @media (min-width: 768px) {