<template>
|
<div>
|
<div class="pam-satisfaction-banner"></div>
|
<div class="pam-container">
|
<div class="satisfaction-title">
|
<span class="mdTxt">滿意度調查</span>
|
<span class="ml-10 text--prudential_grey smTxt_bold">共 {{mapUnReviewLogList.length}} 筆</span>
|
</div>
|
<template v-if="mapUnReviewLogList.length">
|
<div class="satisfaction-card" v-for="(item, index) in mapUnReviewLogList" :key="index">
|
<div class="satisfaction-card-content" v-if="item.agentName">
|
<UiAvatar :size="80" :agentNo="item.agentNo"></UiAvatar>
|
<div class="satisfaction-card-text">對於顧問
|
<span class="text--primary text--bold">{{item.agentName}}</span>
|
的整體服務，您給予幾顆星評價？
|
</div>
|
</div>
|
<div class="satisfaction-card-content" v-else>
|
<div class="pam-satisfaction-avatar">
|
<span class="pam-satisfaction-avatar-txt">平台</span>
|
</div>
|
<div class="satisfaction-card-text" >對於
|
<span class="text--primary text--bold">服務媒合</span>
|
平台的整體服務，您給予幾顆星評價？
|
</div>
|
</div>
|
<el-rate
|
v-model="item.satisfaction"
|
class="pam-satisfaction-rate mt-10 fix-chrome-click--issue"
|
@change="isBtnDisabled = false"
|
></el-rate>
|
</div>
|
<div class="text--center mt-30" v-if="mapUnReviewLogList.length">
|
<el-button type="primary" :disabled="isBtnDisabled" @click="sent">送出</el-button>
|
</div>
|
</template>
|
<template v-else>
|
<div class="satisfaction-card">
|
<div class="satisfaction-card-content">
|
目前暫無需要您填寫的滿意度調查
|
</div>
|
</div>
|
</template>
|
</div>
|
|
<PopUpFrame :isOpen.sync="showConfirmPopup"
|
@closePopUp="closePopup">
|
<div class="text--center mdTxt">發送成功</div>
|
<div class="text--center mt-30">
|
<el-button @click="closePopup" type="primary">確定</el-button>
|
</div>
|
</PopUpFrame>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Action, State, Watch } from 'nuxt-property-decorator';
|
|
import reviewsService from '~/shared/services/reviews.service';
|
import { AppointmentLog } from '~/shared/models/appointment.model';
|
import { UserReviewParams } from '~/shared/models/reviews.model';
|
|
@Component({
|
layout: 'home'
|
})
|
export default class MySatisfactionList extends Vue {
|
|
@State
|
unReviewLogList!: AppointmentLog[];
|
|
@Action
|
storeMyAppointmentReviewLog!: () => void;
|
|
mapUnReviewLogList: AppointmentReviewLog[] = [];
|
showConfirmPopup = false;
|
isBtnDisabled = true;
|
|
///////////////////////////////////////////////////////
|
|
@Watch('unReviewLogList')
|
onUnReviewLogListChange() {
|
this.mapUnReviewLogList = this.unReviewLogList.map(item => {
|
return {
|
...item,
|
satisfaction: 0
|
}
|
})
|
}
|
|
///////////////////////////////////////////////////////
|
|
sent() {
|
const reviewParams: UserReviewParams[] = this.mapUnReviewLogList
|
.filter(item => item.satisfaction > 0)
|
.map(item => {
|
return {
|
appointmentId: item.appointmentId,
|
score: item.satisfaction,
|
type: item.type
|
}
|
})
|
|
reviewsService.allUserReviewsConsultants(reviewParams).then((res) => {
|
this.showConfirmPopup = true;
|
});
|
}
|
|
closePopup() {
|
this.showConfirmPopup = false;
|
this.storeMyAppointmentReviewLog();
|
}
|
|
}
|
|
interface AppointmentReviewLog extends AppointmentLog {
|
satisfaction: number;
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.pam-satisfaction-banner {
|
width : 100%;
|
height : 120px;
|
background-size : cover;
|
background-repeat : no-repeat;
|
background-position: center;
|
position : relative;
|
background-image : url('~/assets/images/satisfaction/banner_mob.svg');
|
}
|
|
@media (min-width: 768px) {
|
.pam-satisfaction-banner {
|
height : 150px;
|
background-image: url('~/assets/images/satisfaction/banner_web.svg');
|
}
|
}
|
|
.pam-container {
|
margin: 30px 20px;
|
}
|
|
@include desktop {
|
.pam-container {
|
width : 700px;
|
margin: 30px auto;
|
}
|
}
|
.satisfaction-card {
|
margin-top : 20px;
|
.satisfaction-card-content {
|
display : flex;
|
flex-direction : row;
|
justify-content: space-between;
|
.satisfaction-card-text {
|
width : 75%;
|
line-height : 28px;
|
align-self: center;
|
font-size: 20px;
|
padding-left: 10px;
|
}
|
.pam-satisfaction-avatar{
|
height: 80px;
|
width: 80px;
|
border-radius: 50%;
|
background-color:#F09491;
|
justify-content: center;
|
align-items: center;
|
display: flex;
|
.pam-satisfaction-avatar-txt{
|
font-size: 18px;
|
color: #fff;
|
}
|
}
|
|
@include desktop {
|
justify-content: flex-start;
|
.satisfaction-card-text {
|
width : auto;
|
padding-left: 30px;
|
}
|
}
|
}
|
|
}
|
</style>
|
