保誠-保戶業務員媒合平台
wayne
2022-02-17 a3716f72066d25d745f4d5103ff23a553c3e102b
PAMapp/components/Client/ClientList.vue
@@ -2,14 +2,14 @@
    <div>
        <template v-if="clients.length > 0">
            <ClientCard
                v-for="(client, index) in clients"
                :key="index"
                v-for="(client) in clients"
                :key="client.id"
                :client="client"
            ></ClientCard>
        </template>
        <template v-else>
            <div class="emptyRowStyle">
                <div class="smTxt txt">{{title === 'reservedList' ? '您目前無已預約客戶' : '您目前無已聯絡客戶'}}</div>
            <div class="client-list--empty">
                <div class="smTxt txt">{{ noDataPlaceholder }}</div>
            </div>
        </template>
    </div>
@@ -17,17 +17,31 @@
<script lang='ts'>
import { Vue, Component, Prop } from 'nuxt-property-decorator';
import { ClientInfo } from '~/assets/ts/api/appointment';
import { Appointment } from '~/shared/models/appointment.model';
@Component
export default class ClientList extends Vue {
    @Prop() clients!: ClientInfo[];
    @Prop() clients!: Appointment[];
    @Prop() title!: string;
    //////////////////////////////////////////////////////////////////////
    get noDataPlaceholder(): string {
      let noDataWording = '您目前無已結案的預約單';
      if (this.title === 'contactedList') {
        noDataWording = '您目前無約訪中的預約單';
      }
      if (this.title === 'reservedList') {
        noDataWording = '您目前無未聯絡的預約單';
      }
      return noDataWording;
    }
}
</script>
<style lang="scss" scoped>
    .emptyRowStyle {
    .client-list--empty {
        background-color: $PRIMARY_WHITE;
        width: 100%;
        height: 100px;
@@ -40,4 +54,4 @@
            margin-left: 17px;
        }
    }
</style>
</style>