<template>
|
<div>
|
<template v-if="agents.length > 0">
|
<ConsultantCard
|
v-for="(agent, index) in agents"
|
:key="index"
|
:agentInfo="agent"
|
@removeAgent="removeAgent"
|
></ConsultantCard>
|
</template>
|
<template v-else-if="noLogin">
|
<div class="emptyRowStyle">
|
<div class="mdTxt login" @click="$router.push('/login')">登入</div>
|
<div class="smTxt txt">查看更多已選顧問</div>
|
</div>
|
</template>
|
<template v-else>
|
<div class="emptyRowStyle">
|
<div class="smTxt txt">您目前無已選顧問</div>
|
</div>
|
</template>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Prop, Emit } from 'nuxt-property-decorator';
|
import { Agents } from '~/plugins/api/home';
|
|
@Component
|
export default class ConsultantList extends Vue {
|
@Prop() agents!: Agents[];
|
|
noLogin = false;
|
|
@Emit('removeAgent') removeAgent(agentId: number) {
|
return agentId;
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.emptyRowStyle {
|
background-color: #FFFFFF;
|
width: 100%;
|
height: 100px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.login {
|
color: #ED1B2E;
|
cursor: pointer;
|
}
|
|
.txt {
|
color: #68737A;
|
margin-left: 17px;
|
}
|
}
|
|
</style>
|
