TODO#128784 首頁-推薦保險顧問 畫面刻版+串假資料

Mila

2021-10-25 df7e9c57ee754752e11ae0b4e2adb293d27e2f92

TODO#128784 首頁-推薦保險顧問 畫面刻版+串假資料

 PAMapp/components/SwiperConsultantCard.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,46 @@
<template>
    <div class="consultantCardStyle">
        <img class="avator" :src="agentInfo.img" alt="">
        <div class="name">{{agentInfo.name}}</div>
        <div class="star">{{agentInfo.satisfaction}}</div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { Agents } from '~/plugins/api/home';

@Component
export default class Avator extends Vue {
    @Prop() agentInfo!: Agents;
}
</script>

<style lang="scss" scoped>
    .consultantCardStyle {
        text-align: center;

        .avator {
            width: 80px;
            height: 80px;
            border-radius: 50px;
            margin: 0 auto 8px auto;
        }

        .name {
            font-size: 16px;
            font-weight: bold;
        }

        .star {
            font-size: 20px;

            &:before {
                content: '\2605';
                color: #ED1B2E;
                margin-right: 10px;
                font-size: 15px;
            }
        }
    }
</style>

 PAMapp/components/Ui/UiSwiper.vue

@@ -2,13 +2,14 @@
<div>
    <swiper ref="mySwiper"
      :options="swiperOptions"
      class="swiperStyle"
      @click-slide="clkItem"
    >
        <swiper-slide
          v-for="(i, index) in 5"
          v-for="(info, index) in agents"
          :key="index"
        >
          <span>連結到業務員{{i}}詳細資訊</span>
            <SwiperConsultantCard :agentInfo="info"></SwiperConsultantCard>
        </swiper-slide>

        <div class="swiper-button-prev" slot="button-prev"></div>
@@ -18,11 +19,14 @@
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { Vue, Component, Prop } from 'vue-property-decorator';
import { SwiperOptions } from 'swiper';
import { Agents } from '~/plugins/api/home'

@Component
export default class UiSwiper extends Vue {
    @Prop() agents!: Agents;

    swiperOptions: SwiperOptions = {
        loop: true,
        slideToClickedSlide: false,
@@ -32,14 +36,14 @@
        },
        breakpoints: {
          320: {
            slidesPerView: 2,
            slidesPerGroup: 2,
            spaceBetween: 20
            slidesPerView: 3,
            slidesPerGroup: 3,
            spaceBetween: 3
          },
          1024: {
            slidesPerView: 4,
            slidesPerGroup: 4,
            spaceBetween: 40
          768: {
            slidesPerView: 6,
            slidesPerGroup: 6,
            spaceBetween: 3
          }
        }
    }
@@ -48,16 +52,39 @@
      this.$router.push('/agentInfo')
    }
}


</script>

<style lang="scss" scoped>
.swiper-container {
  height: 80px;
  width: 90%;
}
.swiperStyle {
  box-shadow: 0 0 6px #22222229;
  border-radius: 10px;
  padding: 45px 0 37px 0;
  background-color: #FFFFFF;

.swiper-slide {
  border: solid 1px;
  padding: 5px;
  cursor: pointer;
}

  .swiper-button-next,.swiper-button-prev {
    background-color: white;
    top: 20px;
    height: 100%;

    &:after {
      font-size: 20px;
      font-weight: bold;
      color: #707A81;
    }
  }

  .swiper-button-prev {
    left: 0;
  }

  .swiper-button-next {
    right: 0;
  }
}
</style>

 PAMapp/nuxt.config.js

@@ -32,7 +32,8 @@
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '~/plugins/element-ui.js',
    { src: '~/plugins/vue-awesome-swiper.js', mode: 'client' }
    { src: '~/plugins/vue-awesome-swiper.js', mode: 'client' },
    '~/plugins/service.ts'
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components

 PAMapp/pages/index.vue

@@ -1,5 +1,5 @@
<template>
    <div>首頁
    <div>
        <Ui-Carousel></Ui-Carousel>
        <h5>預約顧問</h5>
        <el-button @click="routerPush('/recommendConsultant')">嚴選配對</el-button>
@@ -8,17 +8,33 @@
        <el-button @click="routerPush('/contactList/consultantList')">查看更多</el-button>
        <el-button @click="routerPush('/communication/consult')">諮詢</el-button>
        <h5>推薦顧問</h5>
        <Ui-Swiper></Ui-Swiper>
        <Ui-Swiper :agents="agents"></Ui-Swiper>
    </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[] = [];

    async asyncData(context: Context) {
        let agents: Agents[] = [];

        await context.$service.home.recommendConsultantList().then((result: Agents[]) => {
            agents = result;
        })

        return {
            agents
        }
    }

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

 PAMapp/plugins/api/common.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,19 @@


import axios from 'axios';

const LOCAL_DEV = false;

export class CommonService {

    withDebugData(debugData: any, apiPath: string) {

        if (LOCAL_DEV) {
            return axios.get(apiPath);
        } else {
            return new Promise((resolve) => resolve(debugData));
        }

    }

}

 PAMapp/plugins/api/home.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,74 @@

import { CommonService } from '~/plugins/api/common';

export default () => ({
    recommendConsultantList(){
        const debugData = [
            {
                id: 0,
                name: '張小美',
                img: 'https://randomuser.me/api/portraits/women/31.jpg',
                loginState: '上線',
                satisfaction: 4.8
            },
            {
                id: 1,
                name: '蔣帥哥',
                img: 'https://randomuser.me/api/portraits/men/32.jpg',
                loginState: '上線',
                satisfaction: 4
            },
            {
                id: 2,
                name: '林美女',
                img: 'https://randomuser.me/api/portraits/women/33.jpg',
                loginState: '離線',
                satisfaction: 5
            },
            {
                id: 3,
                name: '蔡美眉',
                img: 'https://randomuser.me/api/portraits/women/34.jpg',
                loginState: '上線',
                satisfaction: 4.3
            },
            {
                id: 4,
                name: '張小美',
                img: 'https://randomuser.me/api/portraits/women/35.jpg',
                loginState: '忙碌',
                satisfaction: 4.8
            },
            {
                id: 5,
                name: '蔣帥哥',
                img: 'https://randomuser.me/api/portraits/men/36.jpg',
                loginState: '離線',
                satisfaction: 4
            },
            {
                id: 6,
                name: '林美女',
                img: 'https://randomuser.me/api/portraits/women/37.jpg',
                loginState: '忙碌',
                satisfaction: 5
            },
            {
                id: 7,
                name: '蔡美眉',
                img: 'https://randomuser.me/api/portraits/women/38.jpg',
                loginState: '上線',
                satisfaction: 4.3
            }
        ]
        return CommonService.prototype.withDebugData(debugData, 'https://randomuser.me/api/')
    }
})

export interface Agents {
    id: number,
    name: string,
    img: string,
    loginState: string,
    satisfaction: number
  }

 PAMapp/plugins/service.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,23 @@
import Home from '~/plugins/api/home'
import { Inject, Context } from '@nuxt/types/app';

export default (context: Context, inject: Inject) => {

    const factories = {
        home: Home()
    };

    inject('service', factories);
}

declare module "vue/types/vue" {
    interface Vue {
        $service: any;
    }
}

declare module "@nuxt/types" {
    interface Context {
        $service: any;
    }
}