<template>
|
<div class="relative">
|
<el-carousel
|
height="600px"
|
:autoplay="false"
|
indicator-position="none"
|
arrow="never"
|
class="pam-consultant-carousel"
|
ref="carouselRef"
|
>
|
<el-carousel-item
|
v-for="(item, index) in consultantList"
|
:key="index"
|
>
|
<div
|
class="fill"
|
@touchstart="touchStart"
|
@touchend="moveCard"
|
>
|
<UiAvatar
|
:size="200"
|
:fileName="item.img"
|
class="mx-auto"
|
@click.native="showAgentDetail(item.agentNo)"
|
></UiAvatar>
|
<div class="mdTxt mt-30 mb-30 text--center">{{item.name}}(伯樂保險經紀人)</div>
|
<el-row>
|
<el-col :span="12">
|
<div class="smTxt_bold mb-10 text--prudential_grey">服務資歷</div>
|
<div class="mb-10">{{item.seniority}}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="smTxt_bold mb-10 text--prudential_grey">客戶滿意度</div>
|
<div>
|
<i class="icon-star pam-icon icon--yellow "></i>
|
{{item.avgScore}}</div>
|
</el-col>
|
</el-row>
|
<div class="smTxt_bold mt-10 mb-10 text--prudential_grey">專長領域</div>
|
<div>
|
<span
|
v-for="(i, index) in item.expertise"
|
:key="index"
|
class="p bold mr-30 mb-10 inline-block"
|
>#{{i}}</span>
|
</div>
|
<AddAndReservedBtns
|
:cusClass="'fixedBtn'"
|
:agentInfo="item"
|
@openPopUp="openPopUp"
|
></AddAndReservedBtns>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
|
<div class="absolute arrow-left-position" @click="prevCard">
|
<i class="icon-left pam-left-arrow"></i>
|
</div>
|
<div class="absolute arrow-right-position" @click="nextCard">
|
<i class="icon-right pam-right-arrow"></i>
|
</div>
|
|
<PopUpFrame :isOpen.sync="isVisiblePopUp"
|
>
|
<div class="text--center mdTxt">
|
<p class="mb-50">{{popUpTxt}}</p>
|
<p class="text--primary cursor--pointer"
|
@click="isVisiblePopUp = false">我知道了</p>
|
</div>
|
</PopUpFrame>
|
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { ElCarousel } from 'element-ui/types/carousel';
|
import { Vue, Component, Prop } from 'vue-property-decorator';
|
import { Consultants } from '~/assets/ts/api/consultant';
|
|
@Component
|
export default class QuickFilterConsultantList extends Vue {
|
@Prop() consultantList!: Consultants[];
|
isVisiblePopUp = false;
|
startPosition = 0;
|
endPosition = 0;
|
popUpTxt = '成功加入顧問清單';
|
|
touchStart(event: TouchEvent) {
|
this.startPosition = event.changedTouches[0].clientX;
|
}
|
|
moveCard(event: any) {
|
this.endPosition = event.changedTouches[0].clientX;
|
if (this.endPosition < this.startPosition) {
|
this.nextCard();
|
}
|
|
if (this.endPosition > this.startPosition) {
|
this.prevCard();
|
}
|
}
|
|
nextCard() {
|
(this.$refs.carouselRef as ElCarousel).next();
|
}
|
|
prevCard() {
|
(this.$refs.carouselRef as ElCarousel).prev();
|
}
|
|
openPopUp(txt: string) {
|
this.popUpTxt = txt;
|
this.isVisiblePopUp = true;
|
}
|
showAgentDetail(agentNo: string): void {
|
this.$router.push(`/agentInfo/${agentNo}`);
|
}
|
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.fill {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-content: center;
|
padding: 20px 30px 30px 30px;
|
}
|
|
.mx-auto {
|
margin: 0 auto;
|
}
|
|
.fixedBtn {
|
position: fixed;
|
bottom: 30px;
|
left: 50%;
|
transform: translateX(-50%);
|
}
|
|
.pam-left-arrow,.pam-right-arrow {
|
display: inline-block;
|
width: 50px;
|
height: 50px;
|
border-radius: 50px;
|
background-color: $LIGHT_GREY;
|
color: $CORAL;
|
z-index: 2;
|
cursor: pointer;
|
|
&:before {
|
display: block;
|
line-height: 50px;
|
}
|
}
|
|
.pam-right-arrow {
|
&:before {
|
margin-left: 15px;
|
}
|
}
|
|
.pam-left-arrow {
|
&:before {
|
margin-left: 25px;
|
}
|
}
|
|
.arrow-right-position {
|
top: 50%;
|
right: -60px;
|
transform: translateY(-50%);
|
}
|
|
.arrow-left-position {
|
top: 50%;
|
left: -60px;
|
transform: translateY(-50%);
|
}
|
|
.relative {
|
position: relative;
|
}
|
|
.absolute {
|
position: absolute;
|
}
|
|
.inline-block {
|
display: inline-block;
|
}
|
|
@media (min-width: 768px) {
|
.relative {
|
overflow: hidden;
|
}
|
|
.arrow-right-position {
|
right: -20px;
|
}
|
|
.arrow-left-position {
|
left: -20px;
|
}
|
}
|
|
</style>
|
