保誠-保戶業務員媒合平台
HelenHuang
2022-06-09 9bdb95c9e34cef640534e5e5a1e2225a80442000
PAMapp/pages/record/index.vue
@@ -1,48 +1,66 @@
<template>
<div class="user-reviews-page">
    <section class="mdTxt">
        查看紀錄
    </section>
    <section class="user-reviews-header">
        <div class="header-title mdTxt">
            滿意度紀錄
        </div>
    </section>
    <section class="user-reviews-content">
        <div
            class="user-reviews-card"
            v-for="(appointmentLog, index) in myAppointmentReviewLogList"
            :key="index">
            <div class="user-reviews-card-content" v-if="currentRole === 'user'">
                您對<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>
<div>
    <ReviewRecords
      :reviewLogList="reviewLogList"
    ></ReviewRecords>
</div>
</template>
<script lang="ts">
import { Vue, Component, Action, State } from 'nuxt-property-decorator';
<script src="./record.component.ts"></script>
import { AppointmentLog } from '~/shared/models/appointment.model';
<style lang="scss">
  @import "./record.component.scss";
@Component
export default  class Reviews extends Vue{
    @State('reviewLogList')
    reviewLogList!: AppointmentLog[];
}
</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;
                }
            }
        }
    }
}
@include desktop{
    .user-reviews-card-content{
        flex: 1;
    }
}
</style>