<template>
|
<div>
|
<template v-if="clients.length > 0">
|
<ClientCard
|
v-for="(client, index) in clients"
|
:key="index"
|
:client="client"
|
></ClientCard>
|
</template>
|
<template v-else>
|
<div class="emptyRowStyle">
|
<div class="smTxt txt">{{title === 'reservedList' ? '您目前無已預約客戶' : '您目前無已聯絡客戶'}}</div>
|
</div>
|
</template>
|
</div>
|
</template>
|
|
<script lang='ts'>
|
import { Vue, Component, Prop } from 'nuxt-property-decorator';
|
import { ClientInfo } from '~/assets/ts/api/appointment';
|
|
@Component
|
export default class ClientList extends Vue {
|
@Prop() clients!: ClientInfo[];
|
@Prop() title!: string;
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.emptyRowStyle {
|
background-color: $PRIMARY_WHITE;
|
width: 100%;
|
height: 100px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.txt {
|
color: $PRUDENTIAL_GREY;
|
margin-left: 17px;
|
}
|
}
|
</style>
|
