From 20b87b7eab9c600e2445548c4306ea1b8b37b275 Mon Sep 17 00:00:00 2001
From: HelenHuang <LinHuang@pollex.com.tw>
Date: 星期一, 06 十二月 2021 12:29:50 +0800
Subject: [PATCH] update#131467: [滿意度評分功能]-客戶進行滿意度評分API串接
---
PAMapp/components/QuickFilter/QuickFilterConsultantList.vue | 142 ++++++++++++++++++++---------------------------
1 files changed, 60 insertions(+), 82 deletions(-)
diff --git a/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue b/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue
index d213f80..02671ad 100644
--- a/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue
+++ b/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue
@@ -5,111 +5,88 @@
:autoplay="false"
indicator-position="none"
arrow="never"
- class="pam-consultant-carousel"
+ class="pam-quickFilter-carousel"
ref="carouselRef"
>
<el-carousel-item
- v-for="(item, index) in 5"
+ v-for="(item, index) in consultantList"
:key="index"
>
<div
class="fill"
- @touchstart="touchStart"
- @touchend="moveCard"
>
- <el-avatar
+ <UiAvatar
:size="200"
- class="mx-auto cursor--pointer"
- @click="$router.push('/agentInfo')"
- src=""
- />
- <div class="mdTxt mt-30 mb-10 text--center">�蝢��(隡舀��蝬�鈭�)</div>
+ :fileName="item.img"
+ 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">銝�撟�12���</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"></i>
- 4.8</div>
+ <i class="icon-star pam-icon icon--yellow "></i>
+ {{item.avgScore}}</div>
</el-col>
</el-row>
- <div class="smTxt_bold mb-10 text--prudential_grey">撠����</div>
- <div class="p bold">#鞎∪����</div>
- </div>
- <div class="fixedBtn text--center">
- <el-button @click="addConsultant">
- <i class="icon-add smTxt"></i>
- <span>憿批��</span>
- </el-button>
- <el-button
- @click="$router.push('/communication/myDemand')"
- type="primary"
- >�脰����</el-button>
+ <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="nextCard">
+ <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>
- <Ui-Drawer
- :isVisible.sync="isVisibleDrawer"
+ <PopUpFrame :isOpen.sync="isVisiblePopUp"
>
<div class="text--center mdTxt">
- <p class="mb-50">����憿批��</p>
- <p class="text--primary cursor--pointer"
- @click="isVisibleDrawer = false">������</p>
+ <p class="mb-50">{{popUpTxt}}</p>
+ <div class="text--center">
+ <el-button
+ type="primary"
+ @click="isVisiblePopUp = false"
+ >������</el-button>
+ </div>
</div>
- </Ui-Drawer>
-
- <Ui-Dialog
- :isVisible.sync="isVisibleDialog"
- >
- <div class="text--center mdTxt">
- <p class="mb-50">����憿批��</p>
- <p class="text--primary cursor--pointer"
- @click="isVisibleDialog = false">������</p>
- </div>
- </Ui-Dialog>
+ </PopUpFrame>
</div>
</template>
<script lang="ts">
import { ElCarousel } from 'element-ui/types/carousel';
-import { Vue, Component } from 'vue-property-decorator';
-import { isMobileDevice } from '~/assets/ts/device';
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import { Consultants } from '~/assets/ts/models/consultant.model';
+
@Component
export default class QuickFilterConsultantList extends Vue {
- isVisibleDrawer = false;
- isVisibleDialog = false;
- startPosition = 0;
- endPosition = 0;
-
- 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();
- return;
- }
-
- if (this.endPosition > this.startPosition) {
- this.prevCard();
- return;
- }
- }
+ @Prop() consultantList!: Consultants[];
+ isVisiblePopUp = false;
+ popUpTxt = '����憿批��';
nextCard() {
(this.$refs.carouselRef as ElCarousel).next();
@@ -119,12 +96,13 @@
(this.$refs.carouselRef as ElCarousel).prev();
}
- addConsultant() {
- isMobileDevice()
- ? this.isVisibleDrawer = true
- : this.isVisibleDialog = true;
+ openPopUp(txt: string) {
+ this.popUpTxt = txt;
+ this.isVisiblePopUp = true;
}
-
+ showAgentDetail(agentNo: string): void {
+ this.$router.push(`/agentInfo/${agentNo}`);
+ }
}
</script>
@@ -146,7 +124,6 @@
bottom: 30px;
left: 50%;
transform: translateX(-50%);
- width: 100%;
}
.pam-left-arrow,.pam-right-arrow {
@@ -156,7 +133,6 @@
border-radius: 50px;
background-color: $LIGHT_GREY;
color: $CORAL;
- z-index: 2;
cursor: pointer;
&:before {
@@ -165,28 +141,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 {
@@ -197,6 +171,10 @@
position: absolute;
}
+ .inline-block {
+ display: inline-block;
+ }
+
@media (min-width: 768px) {
.relative {
overflow: hidden;
--
Gitblit v1.8.0