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

Mila

2021-10-27 19e0e4458a4f7410c6970887c5cc2f89302219a8

 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>