From 497f54b264eba626b77e79fec2ca6947ccae19e4 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期二, 14 十二月 2021 15:45:23 +0800
Subject: [PATCH] refactor: myAppointmentList

---
 PAMapp/pages/myAppointmentList.vue |  143 +++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 143 insertions(+), 0 deletions(-)

diff --git a/PAMapp/pages/myAppointmentList.vue b/PAMapp/pages/myAppointmentList.vue
new file mode 100644
index 0000000..ba395a1
--- /dev/null
+++ b/PAMapp/pages/myAppointmentList.vue
@@ -0,0 +1,143 @@
+<template>
+    <div>
+        <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>
+
+            <NuxtChild></NuxtChild>
+        </div>
+
+        <!-- DIALOG -->
+        <PopUpFrame
+             :isOpen.sync="showNewAppointmentHint"
+        >
+            <div class="text--center mdTxt">
+                <p class="mb-50">雿�� <span class="text--primary">{{ newAppointmentSum }}</span> �������</p>
+                <div class="text--center">
+                    <el-button
+                        type="primary"
+                        @click="showNewAppointmentHint = false"
+                    >������</el-button>
+                </div>
+            </div>
+        </PopUpFrame>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, State, Action, Watch } from 'nuxt-property-decorator';
+
+import * as _ from 'lodash';
+
+import { ClientInfo } from '~/assets/ts/models/client.model';
+
+@Component({
+    layout: 'home',
+    middleware: 'myAppointmentMiddleware'
+})
+export default class ClientReservedList extends Vue {
+
+    activeTabName = 'appointmentList';
+    appointmentList: ClientInfo[] = [];
+    contactedList: ClientInfo[] = [];
+    clients: ClientInfo[] = [];
+    showNewAppointmentHint = false;
+
+    @State('myAppointmentList')
+    myAppointmentList!: ClientInfo[];
+
+    @State('myNewAppointmentSum')
+    newAppointmentSum!: number;
+
+    @Action
+    storeMyAppointmentList!: () => Promise<number>;
+
+    @Watch('myAppointmentList')
+    onMyAppointmentListChange() {
+        this.contactedList = this.myAppointmentList
+            .filter(item => item.communicateStatus === 'contacted');
+
+        this.appointmentList = this.myAppointmentList
+            .filter(item => item.communicateStatus !== 'contacted');
+    }
+
+    //////////////////////////////////////////////////////////////////////
+
+    mounted() {
+      this.setActivatedTab();
+      this.storeMyAppointmentList();
+      this.showNewAppointmentHint = this.newAppointmentSum > 0;
+    }
+
+    //////////////////////////////////////////////////////////////////////
+
+    get bannerClassName() {
+        const routeName = this.$route.name || '';
+        return this.routeFormatBannerClass(routeName);
+    };
+
+    tabClick(path: string) {
+      this.activeTabName = path;
+      this.$router.push(`/myAppointmentList/${this.activeTabName}`);
+    }
+
+    //////////////////////////////////////////////////////////////////////
+    // 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;
+        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>

--
Gitblit v1.8.0