<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>
|
<div class="satisfaction-card" v-for="(item, index) in mapUnReviewLogList" :key="index">
|
<div class="satisfaction-card-content">
|
<UiAvatar :size="80" :agentNo="item.agentNo"></UiAvatar>
|
<div class="satisfaction-card-text">對於顧問
|
<span class="text--primary text--bold">{{item.agentName}}</span>
|
的整體服務，您給予幾顆星評價？
|
</div>
|
</div>
|
<el-rate v-model="item.score" class="pam-satisfaction-rate mt-10 fix-chrome-click--issue"></el-rate>
|
</div>
|
<div class="text--center mt-30">
|
<el-button type="primary" :disabled="isBtnDisabled">送出</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Action, State, Watch } from 'nuxt-property-decorator';
|
import { AppointmentLog } from '~/shared/models/appointment.model';
|
|
@Component({
|
layout: 'home'
|
})
|
export default class MySatisfactionList extends Vue {
|
|
@State
|
unReviewLogList!: AppointmentLog[];
|
|
mapUnReviewLogList: AppointmentReviewLog[] = [];
|
|
///////////////////////////////////////////////////////
|
|
@Watch('unReviewLogList')
|
onUnReviewLogListChange() {
|
if (this.unReviewLogList.length) {
|
this.mapUnReviewLogList = this.unReviewLogList.map(item => {
|
return {
|
...item,
|
satisfaction: 0
|
}
|
})
|
}
|
}
|
|
///////////////////////////////////////////////////////
|
|
get isBtnDisabled() {
|
if (this.mapUnReviewLogList.length) {
|
return this.mapUnReviewLogList.findIndex(item => item.satisfaction > 0) === -1;
|
}
|
return false;
|
}
|
}
|
|
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;
|
}
|
|
@include desktop {
|
justify-content: flex-start;
|
.satisfaction-card-text {
|
width : auto;
|
padding-left: 30px;
|
}
|
}
|
}
|
|
}
|
</style>
|
