<template>
|
<div>
|
<template v-if="agentList.length > 0">
|
<ConsultantCard
|
v-for="(agent, index) in agentList"
|
:key="index"
|
:agentInfo="agent"
|
></ConsultantCard>
|
</template>
|
<template v-if="isUserLogin && agentList.length === 0">
|
<div class="emptyRowStyle">
|
<div class="smTxt txt">{{ noDataPlaceholder }}</div>
|
</div>
|
</template>
|
<template v-if="!isUserLogin">
|
<div class="emptyRowStyle">
|
<div class="mdTxt login fix-chrome-click--issue" @click="$router.push('/login')">登入 | 註冊</div>
|
<div class="smTxt txt ">查看更多</div>
|
</div>
|
</template>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Consultant } from '~/shared/models/consultant.model';
|
import { Vue, Component, Prop } from 'nuxt-property-decorator';
|
import authService from '~/shared/services/auth.service';
|
|
@Component
|
export default class ConsultantList extends Vue {
|
@Prop()
|
agents!: Consultant[];
|
|
@Prop()
|
title! : string;
|
|
isUserLogin = false;
|
|
//////////////////////////////////////////////////////////////////////
|
|
get agentList(){
|
return this.agents.map((agentDto)=>
|
({...agentDto,customerScore:0,})
|
)
|
}
|
|
get noDataPlaceholder(): string {
|
return this.title === 'contactedList'
|
? '您目前無已聯絡顧問'
|
: '您目前無已選顧問';
|
}
|
|
//////////////////////////////////////////////////////////////////////
|
|
mounted() {
|
this.isUserLogin = authService.isUserLogin();
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
.emptyRowStyle {
|
background-color: $PRIMARY_WHITE;
|
width: 100%;
|
height: 100px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.login {
|
color: $PRIMARY_RED;
|
cursor: pointer;
|
}
|
|
.txt {
|
color: $PRUDENTIAL_GREY;
|
margin-left: 17px;
|
}
|
}
|
|
</style>
|
