TODO#128785 首頁-我的顧問清單 畫面刻版

Mila

2021-10-27 19e0e4458a4f7410c6970887c5cc2f89302219a8

 PAMapp/pages/index.vue

@@ -11,11 +11,22 @@
                class="reserveConsultantBtn"
                @click="routerPush('/quickFilter')"
            >快速篩選</el-button>
            <h5 class="mdTxt mb-20">我的顧問清單</h5>
            <el-button @click="routerPush('/contactList/consultantList')">查看更多</el-button>
            <el-button @click="routerPush('/communication/consult')">諮詢</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="agents"></Ui-Swiper>
            <Ui-Swiper :agents="swiperAgents"></Ui-Swiper>
        </div>

    </div>
@@ -31,6 +42,7 @@
})
export default class MainComponent extends Vue {
    agents: Agents[] = [];
    swiperAgents: Agents[] = [];

    async asyncData(context: Context) {
        let agents: Agents[] = [];
@@ -39,13 +51,23 @@
            agents = result;
        })

        const swiperAgents = JSON.parse(JSON.stringify(agents));

        return {
            agents
            agents,
            swiperAgents
        }
    }

    routerPush(path: string) {
        this.$router.push(path);
    }

    removeAgent(agentId: number) {
        const findIndex = this.agents.findIndex((item, i) => {
            return item.id === agentId;
        })
        this.agents.splice(findIndex, 1)
    }
}

@@ -84,5 +106,21 @@
        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>