From df7e9c57ee754752e11ae0b4e2adb293d27e2f92 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期一, 25 十月 2021 18:12:16 +0800
Subject: [PATCH] TODO#128784 首頁-推薦保險顧問 畫面刻版+串假資料
---
PAMapp/plugins/api/home.ts | 74 ++++++++++++++
PAMapp/components/SwiperConsultantCard.vue | 46 +++++++++
PAMapp/plugins/service.ts | 23 ++++
PAMapp/pages/index.vue | 24 ++++
PAMapp/plugins/api/common.ts | 19 +++
PAMapp/components/Ui/UiSwiper.vue | 63 +++++++++---
PAMapp/nuxt.config.js | 3
7 files changed, 229 insertions(+), 23 deletions(-)
diff --git a/PAMapp/components/SwiperConsultantCard.vue b/PAMapp/components/SwiperConsultantCard.vue
new file mode 100644
index 0000000..3ff38c3
--- /dev/null
+++ b/PAMapp/components/SwiperConsultantCard.vue
@@ -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>
\ No newline at end of file
diff --git a/PAMapp/components/Ui/UiSwiper.vue b/PAMapp/components/Ui/UiSwiper.vue
index e2e66b5..cc9f26d 100644
--- a/PAMapp/components/Ui/UiSwiper.vue
+++ b/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%;
-}
-.swiper-slide {
- border: solid 1px;
- padding: 5px;
- cursor: pointer;
+.swiperStyle {
+ box-shadow: 0 0 6px #22222229;
+ border-radius: 10px;
+ padding: 45px 0 37px 0;
+ background-color: #FFFFFF;
+
+ .swiper-slide {
+ 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>
\ No newline at end of file
diff --git a/PAMapp/nuxt.config.js b/PAMapp/nuxt.config.js
index d09a98c..a5c8f21 100644
--- a/PAMapp/nuxt.config.js
+++ b/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
diff --git a/PAMapp/pages/index.vue b/PAMapp/pages/index.vue
index badeca7..75158e8 100644
--- a/PAMapp/pages/index.vue
+++ b/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,20 +8,36 @@
<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);
}
}
-</script>
+</script>
\ No newline at end of file
diff --git a/PAMapp/plugins/api/common.ts b/PAMapp/plugins/api/common.ts
new file mode 100644
index 0000000..f223eed
--- /dev/null
+++ b/PAMapp/plugins/api/common.ts
@@ -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));
+ }
+
+ }
+
+}
diff --git a/PAMapp/plugins/api/home.ts b/PAMapp/plugins/api/home.ts
new file mode 100644
index 0000000..847f329
--- /dev/null
+++ b/PAMapp/plugins/api/home.ts
@@ -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
+ }
\ No newline at end of file
diff --git a/PAMapp/plugins/service.ts b/PAMapp/plugins/service.ts
new file mode 100644
index 0000000..a4a5400
--- /dev/null
+++ b/PAMapp/plugins/service.ts
@@ -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;
+ }
+}
\ No newline at end of file
--
Gitblit v1.8.0