<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">您目前無已選顧問</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 { Vue, Component, Prop, namespace } from 'nuxt-property-decorator';
|
import { Consultant } from '~/assets/ts/models/consultant.model';
|
import { Role } from '~/assets/ts/models/enum/Role';
|
|
const roleStorage = namespace('localStorage');
|
|
@Component
|
export default class ConsultantList extends Vue {
|
@Prop() agents!: Consultant[];
|
@roleStorage.Getter isUserLogin!:boolean;
|
|
get agentList(){
|
return this.agents.map((agentDto)=>
|
({...agentDto,customerScore:0,})
|
)
|
}
|
|
}
|
</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>
|
