<template>
|
<div>
|
<div class="flex mb-30">
|
<div
|
class="cus-tab-item"
|
:class="{'is-active': activeTabName === 'consultantList'}"
|
@click="tabClick('consultantList')"
|
>顧問清單
|
<span class="p">({{consultantList.length}})</span>
|
</div>
|
<div
|
class="cus-tab-item"
|
:class="{'is-active': activeTabName === 'contactedList'}"
|
@click="tabClick('contactedList')"
|
>已聯絡
|
<span class="p">({{contactedList.length}})</span>
|
</div>
|
</div>
|
|
<NuxtChild
|
:contactedList="contactedList"
|
:consultantList="consultantList"
|
@remove="removeAgent"
|
></NuxtChild>
|
</div>
|
</template>
|
|
<script lang='ts'>
|
import { Context } from '@nuxt/types';
|
import { Vue, Component, Watch } from 'vue-property-decorator';
|
import { Route } from 'vue-router/types/router.d'
|
import { Agents } from '~/plugins/api/home';
|
|
@Component
|
export default class myConsultantList extends Vue {
|
activeTabName = 'consultantList';
|
agents: Agents[] = [];
|
contactedList: Agents[] = [];
|
consultantList: Agents[] = [];
|
|
tabClick(path: string) {
|
this.activeTabName = path;
|
this.$router.push('/myConsultantList/' + this.activeTabName)
|
}
|
|
async asyncData(context: Context) {
|
let agents: Agents[] = [];
|
let contactedList: Agents[] = [];
|
let consultantList: Agents[] = [];
|
|
await context.$service.home.recommendConsultantList().then((result: Agents[]) => {
|
agents = result;
|
})
|
|
contactedList = agents.filter(item => item.contactStatus === 'contacted');
|
consultantList = agents.filter(item => item.contactStatus !== 'contacted');
|
|
return {
|
agents,
|
contactedList,
|
consultantList
|
}
|
}
|
|
removeAgent(agentNo: number) {
|
const fintIndex = this.consultantList.findIndex(item => item.agentNo === agentNo);
|
this.consultantList.splice(fintIndex, 1);
|
}
|
|
@Watch('$route') watchRouter(currentRoute: Route) {
|
const pathArray = currentRoute.fullPath.split('/');
|
this.activeTabName = pathArray[pathArray.length - 1];
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.flex {
|
display: flex;
|
width: 100%;
|
height: 45px;
|
|
.cus-tab-item {
|
width: 50%;
|
text-align: center;
|
font-size: 24px;
|
border-bottom: solid 3px $LIGHT_GREY;
|
cursor: pointer;
|
}
|
|
.is-active {
|
font-weight: bold;
|
border-bottom: solid 3px $PRIMARY_BLACK;
|
|
}
|
}
|
|
</style>
|
