<template>
|
<div>
|
|
<template v-if="agents.length > 0">
|
<ConsultantCard
|
v-for="(agent, index) in agents"
|
:key="index"
|
:agentInfo="agent"
|
></ConsultantCard>
|
</template>
|
<template v-if="isLogin && agents.length === 0">
|
<div class="emptyRowStyle">
|
<div class="smTxt txt">您目前無已選顧問</div>
|
</div>
|
</template>
|
<template v-if="!isLogin">
|
<div class="emptyRowStyle">
|
<div class="mdTxt login" @click="$router.push('/login')">登入</div>
|
<div class="smTxt txt">查看更多</div>
|
</div>
|
</template>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Prop } from 'nuxt-property-decorator';
|
import { Consultants } from '~/assets/ts/api/consultant';
|
import { isLogin } from '~/assets/ts/auth';
|
|
@Component
|
export default class ConsultantList extends Vue {
|
@Prop() agents!: Consultants[];
|
|
get isLogin() {
|
return isLogin();
|
}
|
|
}
|
</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>
|
