<template>
|
<div class="user-reviews-page">
|
<section class="mdTxt">
|
查看紀錄
|
</section>
|
|
<section class="user-reviews-header">
|
<div class="header-title mdTxt">
|
滿意度紀錄
|
</div>
|
</section>
|
<div class="user-reviews-page">
|
|
<template v-if="reviewLogList.length">
|
<section class="user-reviews-content">
|
<div
|
class="user-reviews-card"
|
v-for="(appointmentLog, index) in reviewLogList"
|
:key="index">
|
<div class="user-reviews-card-content" v-if="isUserLogin">
|
您對<span class="mdTxt">{{ ` ${appointmentLog.agentName} ` }}</span>做了 <UiReviewScore :score="appointmentLog.score" /> 評價！
|
</div>
|
<div class="user-reviews-card-content" v-else>
|
{{ `${appointmentLog.customerName} `}} 對您做了 <UiReviewScore :score="appointmentLog.score" /> 評價！
|
</div>
|
<div class="user-reviews-card-date">
|
<div class="date">
|
<UiDateFormat
|
:date="appointmentLog.lastModifiedDate"
|
onlyShowSection="DAY" />
|
</div>
|
<div class="time">
|
<UiDateFormat
|
:date="appointmentLog.lastModifiedDate"
|
onlyShowSection="TIME" />
|
</div>
|
</div>
|
</div>
|
</section>
|
</template>
|
<template v-else>
|
<section class="user-reviews-content">
|
<div
|
class="user-reviews-card empty">
|
<div class="user-reviews-card-content">
|
暫無資料
|
</div>
|
</div>
|
</section>
|
</template>
|
|
</div>
|
</div>
|
|
</template>
|
<script lang="ts">
|
import { AppointmentLog } from '~/shared/models/appointment.model';
|
import { Vue, Component, Prop, Watch } from 'nuxt-property-decorator';
|
import authService from '~/shared/services/auth.service';
|
|
@Component
|
export default class ReviewRecords extends Vue{
|
|
@Prop()
|
reviewLogList!: AppointmentLog[];
|
|
isUserLogin = false;
|
|
//////////////////////////////////////////////////////////////////////
|
|
mounted() {
|
this.isUserLogin = authService.isUserLogin();
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.user-reviews-page{
|
margin-bottom:155px;
|
.user-reviews-header{
|
height: 43px;
|
margin-top: 28px;
|
display: flex;
|
justify-content: center;
|
border-bottom: 2px solid black;
|
}
|
.user-reviews-content{
|
.user-reviews-card{
|
display: flex;
|
justify-content: space-between;
|
margin-top: 26px;
|
border-bottom: 1px solid #707070;
|
height: 54px;
|
padding-bottom: 15px;
|
.user-reviews-card-content{
|
width: 242px;
|
padding-right:50px;
|
line-height: 1.2;
|
font-size: 20px;
|
margin-left: 15px;
|
}
|
.user-reviews-card-date{
|
font-size: 12px;
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
margin-right: 15px;
|
width:52px;
|
.date{
|
margin-bottom: 2px;
|
|
}
|
}
|
&.empty {
|
border-color: transparent;
|
}
|
}
|
}
|
}
|
@include desktop{
|
.user-reviews-card-content{
|
flex: 1;
|
}
|
}
|
</style>
|
