From 68e499e5eed17a2b1d2e47ee1790e16f001552f7 Mon Sep 17 00:00:00 2001 From: Mila <Mila@pollex.com.tw> Date: 星期三, 22 十二月 2021 16:21:28 +0800 Subject: [PATCH] Merge branch 'master' of https://192.168.0.10:8443/r/pcalife/PAM --- PAMapp/components/QuickFilter/QuickFilterConsultantList.vue | 93 ++++++++++++++++++++++++++-------------------- 1 files changed, 53 insertions(+), 40 deletions(-) diff --git a/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue b/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue index 149b42f..de08434 100644 --- a/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue +++ b/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue @@ -5,7 +5,7 @@ :autoplay="false" indicator-position="none" arrow="never" - class="pam-consultant-carousel" + class="pam-quickFilter-carousel" ref="carouselRef" > <el-carousel-item @@ -14,8 +14,8 @@ > <div class="fill" - @touchstart="touchStart" - @touchend="moveCard" + @touchstart="moveStart" + @touchend="moveEnd" > <UiAvatar :size="200" @@ -23,13 +23,16 @@ class="mx-auto" @click.native="showAgentDetail(item.agentNo)" ></UiAvatar> - <div class="mdTxt mt-30 mb-30 text--center">{{item.name}}(隡舀��蝬�鈭�)</div> + <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"> + <el-col :span="12" v-if="!hideReviews"> + <!-- TODO:���遛��漲 --> <div class="smTxt_bold mb-10 text--prudential_grey">摰X皛踵�漲</div> <div> <i class="icon-star pam-icon icon--yellow "></i> @@ -64,8 +67,12 @@ > <div class="text--center mdTxt"> <p class="mb-50">{{popUpTxt}}</p> - <p class="text--primary cursor--pointer" - @click="isVisiblePopUp = false">������</p> + <div class="text--center"> + <el-button + type="primary" + @click="isVisiblePopUp = false" + >������</el-button> + </div> </div> </PopUpFrame> @@ -75,28 +82,46 @@ <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'; +import { Consultant } from '~/shared/models/consultant.model'; +import { hideReviews } from '~/shared/const/hide-reviews'; @Component export default class QuickFilterConsultantList extends Vue { - @Prop() consultantList!: Consultants[]; + @Prop() consultantList!: Consultant[]; isVisiblePopUp = false; + popUpTxt = '����憿批��'; startPosition = 0; endPosition = 0; - popUpTxt = '����憿批��'; + startYPosition = 0; + endYPosition = 0; + hideReviews = hideReviews ; - touchStart(event: TouchEvent) { - this.startPosition = event.changedTouches[0].clientX; + openPopUp(txt: string) { + this.popUpTxt = txt; + this.isVisiblePopUp = true; } - moveCard(event: any) { - this.endPosition = event.changedTouches[0].clientX; - if (this.endPosition < this.startPosition) { - this.nextCard(); - } + showAgentDetail(agentNo: string): void { + this.$router.push(`/agentInfo/${agentNo}`); + } - if (this.endPosition > this.startPosition) { - this.prevCard(); + 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(); + } } } @@ -107,15 +132,6 @@ 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> @@ -147,7 +163,6 @@ border-radius: 50px; background-color: $LIGHT_GREY; color: $CORAL; - z-index: 2; cursor: pointer; &:before { @@ -156,28 +171,26 @@ } } - .pam-right-arrow { - &:before { - margin-left: 15px; - } + .pam-left-arrow:before { + margin-left: 25px; } - .pam-left-arrow { - &:before { - margin-left: 25px; - } + .pam-right-arrow:before { + margin-left: 15px; } .arrow-right-position { top: 50%; - right: -60px; + right: -40px; transform: translateY(-50%); + z-index: 3; } .arrow-left-position { top: 50%; - left: -60px; + left: -40px; transform: translateY(-50%); + z-index: 3; } .relative { @@ -206,4 +219,4 @@ } } -</style> \ No newline at end of file +</style> -- Gitblit v1.8.0