From 2b4ffaea5c43c32a9335d4aa9becceea220ce68c Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期三, 03 十一月 2021 09:16:58 +0800
Subject: [PATCH] TODO#129054 我的顧問清單 畫面刻版

---
 PAMapp/pages/index.vue |   87 ++++++++++++++++++-------------------------
 1 files changed, 37 insertions(+), 50 deletions(-)

diff --git a/PAMapp/pages/index.vue b/PAMapp/pages/index.vue
index 9a447a3..a85fe90 100644
--- a/PAMapp/pages/index.vue
+++ b/PAMapp/pages/index.vue
@@ -1,34 +1,31 @@
 <template>
     <div>
         <Ui-Carousel></Ui-Carousel>
-        <div class="content">
-            <h5 class="mdTxt mb-20">����憿批��</h5>
+        <div class="page-container">
+            <h5 class="mdTxt mb-30">����憿批��</h5>
             <el-button
-                class="reserveConsultantBtn"
+                class="reserveBtn"
                 @click="routerPush('/recommendConsultant')"
             >������</el-button>
             <el-button
-                class="reserveConsultantBtn"
+                class="reserveBtn"
                 @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>
+            <el-row class="mb-30 rowStyle">
+                <el-col :span="16">
+                    <span class="mdTxt">���“���</span>
+                    <span class="smTxt_bold amount">� {{consultantList.length}} 蝑�</span>
+                </el-col>
+                <el-col :span="8" class="mdTxt readMore"
+                    @click.native="routerPush('/myConsultantList/consultantList')">���憭�</el-col>
+            </el-row>
             <ConsultantList
-                :agents="agents.slice(0, 3)"
+                :agents="consultantList.slice(0, 3)"
                 @removeAgent="removeAgent"
             ></ConsultantList>
-            <h5 class="mdTxt mb-20 mt-32">��靽憿批��</h5>
-            <Ui-Swiper :agents="swiperAgents"></Ui-Swiper>
+            <h5 class="mdTxt mb-30 mt-30">��靽憿批��</h5>
+            <ConsultantSwiper :agents="agents"></ConsultantSwiper>
         </div>
-
     </div>
 </template>
 
@@ -42,20 +39,20 @@
 })
 export default class MainComponent extends Vue {
     agents: Agents[] = [];
-    swiperAgents: Agents[] = [];
+    consultantList: Agents[] = [];
 
     async asyncData(context: Context) {
         let agents: Agents[] = [];
-
+        let consultantList: Agents[] = [];
         await context.$service.home.recommendConsultantList().then((result: Agents[]) => {
             agents = result;
         })
 
-        const swiperAgents = JSON.parse(JSON.stringify(agents));
+        consultantList = agents.filter(item => item.contactStatus !== 'contacted');
 
         return {
             agents,
-            swiperAgents
+            consultantList
         }
     }
 
@@ -63,11 +60,11 @@
         this.$router.push(path);
     }
 
-    removeAgent(agentId: number) {
+    removeAgent(agentNo: number) {
         const findIndex = this.agents.findIndex((item, i) => {
-            return item.id === agentId;
+            return item.agentNo === agentNo;
         })
-        this.agents.splice(findIndex, 1)
+        this.consultantList.splice(findIndex, 1)
     }
 }
 
@@ -75,20 +72,11 @@
 
 <style lang="scss" scoped>
 
-    .content {
-        padding: 0 20px;
+    .page-container {
+        padding: 0px 20px 30px 20px;
     }
 
-    .mb-20 {
-        margin: 0 0 20px 0;
-    }
-
-    .mt-32 {
-        margin-top: 32px;
-    }
-
-    .reserveConsultantBtn {
-        max-width: 340px;
+    .reserveBtn {
         width: 100%;
         height: 110px;
         border-radius: 10px;
@@ -103,36 +91,35 @@
         }
     }
 
-    .reserveConsultantBtn+.reserveConsultantBtn {
+    .reserveBtn+.reserveBtn {
         margin-left: 0px;
     }
 
     .rowStyle {
-        display: flex;
-        justify-content: space-between;
-        .flex {
-            display: flex;
-            .amount {
-                color: $PRUDENTIAL_GREY;
-                margin-left: 10px;
-                align-self: center;
-            }
+        .amount {
+            color: $PRUDENTIAL_GREY;
         }
         .readMore {
             color: $PRIMARY_RED;
             cursor: pointer;
+            text-align: right;
         }
     }
 
     @include desktop {
-        .content{
+        .page-container {
             width: 700px;
             margin: 0 auto;
         }
 
-        .reserveConsultantBtn:nth-child(2) {
-            margin-right: 15px;
+        .reserveBtn {
+            max-width: 340px;
+
+            &:nth-child(2) {
+                margin-right: 15px;
+            }
         }
+
     }
 
 </style>

--
Gitblit v1.8.0