From 19e0e4458a4f7410c6970887c5cc2f89302219a8 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期三, 27 十月 2021 14:23:57 +0800
Subject: [PATCH] TODO#128785 首頁-我的顧問清單 畫面刻版

---
 PAMapp/pages/index.vue |  115 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 files changed, 110 insertions(+), 5 deletions(-)

diff --git a/PAMapp/pages/index.vue b/PAMapp/pages/index.vue
index 83e5780..1177535 100644
--- a/PAMapp/pages/index.vue
+++ b/PAMapp/pages/index.vue
@@ -1,21 +1,126 @@
 <template>
-    <div>擐��
+    <div>
         <Ui-Carousel></Ui-Carousel>
-        <h5>��憿批��</h5>
-        <Ui-Swiper></Ui-Swiper>
+        <div class="content">
+            <h5 class="mdTxt mb-20">����憿批��</h5>
+            <el-button
+                class="reserveConsultantBtn"
+                @click="routerPush('/recommendConsultant')"
+            >������</el-button>
+            <el-button
+                class="reserveConsultantBtn"
+                @click="routerPush('/quickFilter')"
+            >敹恍�祟�</el-button>
+            <div class="rowStyle mb-20">
+                <div class="flex">
+                    <h5 class="mdTxt">���“���</h5>
+                    <span class="smTxt_bold align_center amount">� {{agents.length}} 蝑�</span>
+                </div>
+                <div
+                    class="mdTxt readMore"
+                    @click="routerPush('/contactList/consultantList')"
+                >���憭�</div>
+            </div>
+            <ConsultantList
+                :agents="agents.slice(0, 3)"
+                @removeAgent="removeAgent"
+            ></ConsultantList>
+            <h5 class="mdTxt mb-20 mt-32">��靽憿批��</h5>
+            <Ui-Swiper :agents="swiperAgents"></Ui-Swiper>
+        </div>
+
     </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component } from 'vue-property-decorator'
+import { Vue, Component } from 'nuxt-property-decorator';
+import { Agents } from '~/plugins/api/home';
+import { Context } from '@nuxt/types/app';
 
 @Component({
     layout: 'home'
 })
 export default class MainComponent extends Vue {
+    agents: Agents[] = [];
+    swiperAgents: Agents[] = [];
+
+    async asyncData(context: Context) {
+        let agents: Agents[] = [];
+
+        await context.$service.home.recommendConsultantList().then((result: Agents[]) => {
+            agents = result;
+        })
+
+        const swiperAgents = JSON.parse(JSON.stringify(agents));
+
+        return {
+            agents,
+            swiperAgents
+        }
+    }
+
     routerPush(path: string) {
-        this.$router.push('/' + path);
+        this.$router.push(path);
+    }
+
+    removeAgent(agentId: number) {
+        const findIndex = this.agents.findIndex((item, i) => {
+            return item.id === agentId;
+        })
+        this.agents.splice(findIndex, 1)
     }
 }
 
 </script>
+
+<style lang="scss" scoped>
+    .content {
+        padding: 0 20px;
+    }
+
+    .mb-20 {
+        margin: 0 0 20px 0;
+    }
+
+    .mt-32 {
+        margin-top: 32px;
+    }
+
+    .reserveConsultantBtn {
+        max-width: 340px;
+        width: 100%;
+        height: 110px;
+        border-radius: 10px;
+        box-shadow: 0px 0px 6px #22222229;
+        margin: 0 auto 17px auto;
+        font-size: 32px;
+        font-weight: 700;
+        color: #222222;
+
+        &:nth-child(3) {
+            margin-bottom: 42px;
+        }
+    }
+
+    .reserveConsultantBtn+.reserveConsultantBtn {
+        margin-left: 0px;
+    }
+
+    .rowStyle {
+        display: flex;
+        justify-content: space-between;
+        .flex {
+            display: flex;
+            .amount {
+                color: #68737A;
+                margin-left: 10px;
+                align-self: center;
+            }
+        }
+        .readMore {
+            color: #ED1B2E;
+            cursor: pointer;
+        }
+    }
+
+</style>
\ No newline at end of file

--
Gitblit v1.8.0