<template>
|
<div class="relative">
|
<el-carousel
|
height="600px"
|
:autoplay="false"
|
indicator-position="none"
|
arrow="never"
|
class="pam-quickFilter-carousel"
|
ref="carouselRef"
|
>
|
<el-carousel-item
|
v-for="(item, index) in consultantList"
|
:key="index"
|
>
|
<div
|
class="fill"
|
@touchstart="moveStart"
|
@touchend="moveEnd"
|
>
|
<UiAvatar
|
:size="200"
|
:agentNo="item.agentNo"
|
class="mx-auto"
|
@click.native="showAgentDetail(item.agentNo)"
|
></UiAvatar>
|
<div class="mdTxt mt-30 mb-30 text--center"
|
>{{item.name}}<span v-if="item.role">({{item.role}})</span>
|
</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" v-if="!hideReviews">
|
<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>
|
<div class="text--center">
|
<el-button
|
type="primary"
|
@click="isVisiblePopUp = false"
|
>我知道了</el-button>
|
</div>
|
</div>
|
</PopUpFrame>
|
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Consultant } from '~/shared/models/consultant.model';
|
import { ElCarousel } from 'element-ui/types/carousel';
|
import { hideReviews } from '~/shared/const/hide-reviews';
|
import { Vue, Component, Prop } from 'vue-property-decorator';
|
|
@Component
|
export default class QuickFilterConsultantList extends Vue {
|
@Prop()
|
consultantList!: Consultant[];
|
|
isVisiblePopUp = false;
|
popUpTxt = '成功加入顧問清單';
|
startPosition = 0;
|
endPosition = 0;
|
startYPosition = 0;
|
endYPosition = 0;
|
hideReviews = hideReviews ;
|
|
//////////////////////////////////////////////////////////////////
|
|
moveStart(event: TouchEvent) {
|
this.startPosition = event.changedTouches[0].clientX;
|
this.startYPosition = event.changedTouches[0].clientY;
|
}
|
|
moveEnd(event: TouchEvent) {
|
this.endPosition = event.changedTouches[0].clientX;
|
this.endYPosition = event.changedTouches[0].clientY;
|
if (Math.abs(this.endYPosition - this.startYPosition) < 50) {
|
if (this.endPosition < this.startPosition) {
|
this.nextCard();
|
return;
|
}
|
|
if (this.endPosition > this.startPosition) {
|
this.prevCard();
|
}
|
}
|
}
|
|
//////////////////////////////////////////////////////////////////
|
|
openPopUp(txt: string) {
|
this.popUpTxt = txt;
|
this.isVisiblePopUp = true;
|
}
|
|
showAgentDetail(agentNo: string): void {
|
this.$router.push(`/agentInfo/${agentNo}`);
|
}
|
|
nextCard() {
|
(this.$refs.carouselRef as ElCarousel).next();
|
}
|
|
prevCard() {
|
(this.$refs.carouselRef as ElCarousel).prev();
|
}
|
|
}
|
</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;
|
cursor: pointer;
|
|
&:before {
|
display: block;
|
line-height: 50px;
|
}
|
}
|
|
.pam-left-arrow:before {
|
margin-left: 25px;
|
}
|
|
.pam-right-arrow:before {
|
margin-left: 15px;
|
}
|
|
.arrow-right-position {
|
top: 50%;
|
right: -40px;
|
transform: translateY(-50%);
|
z-index: 3;
|
}
|
|
.arrow-left-position {
|
top: 50%;
|
left: -40px;
|
transform: translateY(-50%);
|
z-index: 3;
|
}
|
|
.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>
|
