From bf6ad8eecf59e08504178d97625b5ddd080f1d08 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期三, 17 十一月 2021 09:56:21 +0800
Subject: [PATCH] update 預約清單更改 layout

---
 PAMapp/pages/myAppointmentList.vue |  119 +++++++++++++++++++++++++++++++++++++++++------------------
 1 files changed, 82 insertions(+), 37 deletions(-)

diff --git a/PAMapp/pages/myAppointmentList.vue b/PAMapp/pages/myAppointmentList.vue
index aad9709..5f9e103 100644
--- a/PAMapp/pages/myAppointmentList.vue
+++ b/PAMapp/pages/myAppointmentList.vue
@@ -1,64 +1,109 @@
 <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>
+
+
     </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 { 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[] = [];
 
-    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!: any;
 
-        contactedList = clients
+    mounted() {
+     this.storeMyAppointmentList();
+
+     if (this.$route.name) {
+         console.log('mounted route')
+         this.activeTabName = this.$route.name.split('-')[1]
+     }
+    }
+
+    @Watch('myAppointmentList')
+    onMyAppointmentListChange() {
+        this.contactedList = this.myAppointmentList
             .filter(item => item.communicateStatus === 'contacted')
             .sort((a, b) => a.appointmentDate > b.appointmentDate ? -1 : 1);
-        appointmentList = clients
-            .filter(item => item.communicateStatus === 'reserved')
+        this.appointmentList = this.myAppointmentList
+            .filter(item => item.communicateStatus !== 'contacted')
             .sort((a, b) => a.appointmentDate > b.appointmentDate ? -1 : 1);;
-
-        return {
-            clients,
-            contactedList,
-            appointmentList
-        }
     }
 
     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>
\ No newline at end of file
+</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 {
+        padding: 30px 20px;
+    }
+</style>
\ No newline at end of file

--
Gitblit v1.8.0