<template>
|
<div>
|
<el-row
|
type="flex"
|
justify="center">
|
<UiAvatar :size="150" :fileName="agentInfo.image"></UiAvatar>
|
</el-row>
|
|
<el-row
|
type="flex"
|
class="pt-10"
|
justify="center"
|
align="middle">
|
<i class="pam-icon icon--primary icon-star"></i>
|
<h3 class="mdTxt">{{ agentInfo.avgScore }}</h3>
|
</el-row>
|
|
<el-row
|
type="flex"
|
class="pt-10"
|
justify="center">
|
<h3 class="mdTxt">{{ agentName }}</h3>
|
</el-row>
|
|
<el-row
|
type="flex"
|
class="pam-paragraph">
|
<UiField :span="12" icon="agent" label="頭銜">
|
{{ agentInfo.title }}
|
</UiField>
|
<UiField :span="12" icon="phone" label="電話">
|
{{ agentInfo.phoneNumber }}
|
</UiField>
|
</el-row>
|
|
<el-row
|
type="flex"
|
class="pam-paragraph">
|
<UiField icon="company" label="服務地區">
|
{{ agentInfo.serveArea }}
|
</UiField>
|
</el-row>
|
|
<el-row
|
type="flex"
|
class="pam-paragraph">
|
<UiField icon="address" label="公司地址">
|
{{ agentInfo.companyAddress }}
|
</UiField>
|
</el-row>
|
|
<el-row
|
type="flex"
|
class="pam-paragraph">
|
<UiField :span="12" icon="time" label="最後上線時間">
|
{{ agentInfo.lastestLoginTime | formatDate }}
|
</UiField>
|
<UiField :span="12" icon="calender" label="服務資歷">
|
{{ agentInfo.seniority }}
|
</UiField>
|
</el-row>
|
|
<el-row
|
type="flex"
|
class="pam-paragraph">
|
<el-col :span="24" class="pam-field">
|
<div class="pam-field__label pam-progress__label">
|
<div>
|
<div class="pam-field__title">
|
<!-- TODO: 如從首頁推薦顧問進入，不會出現匹配度 [Tomas, 2021/10/29] -->
|
<i class="pam-icon icon-puzzle"></i>匹配度 <i class="text--primary icon-information"></i>
|
</div>
|
</div>
|
<div class="xsTxt">
|
{{ agentInfo.suitability }}%
|
</div>
|
</div>
|
<div class="pam-field__content pam-field-suitability pt-10">
|
<el-progress
|
:show-text="false"
|
:text-inside="true"
|
:stroke-width="15"
|
:percentage="agentInfo.suitability"></el-progress>
|
</div>
|
</el-col>
|
</el-row>
|
|
<el-row
|
type="flex"
|
class="pam-paragraph">
|
<el-col :span="24" class="pam-field">
|
<div class="pam-field__label pam-progress__label">
|
<div>
|
<div class="pam-field__title">
|
<i class="pam-icon icon-thumbs-up"></i>諮詢度表現 <i class="text--primary icon-information"></i>
|
</div>
|
</div>
|
<div class="xsTxt">
|
{{ agentInfo.evaluation }}/50 (近一個月/累計)
|
</div>
|
</div>
|
<div class="pam-field__content pam-field-evaluation pt-10">
|
<el-progress :show-text="false" :stroke-width="15" :percentage="agentInfo.evaluation * 2"></el-progress>
|
</div>
|
</el-col>
|
</el-row>
|
|
<el-row
|
type="flex"
|
class="pam-paragraph">
|
<UiField icon="flag" label="專長領域">
|
<div class="pam-field-experts">
|
<div class="text--orange bold pr-10" v-for="(expert, index) in agentInfo.expertises" :key="index">
|
#{{ expert }}
|
</div>
|
</div>
|
</UiField>
|
</el-row>
|
|
<el-row
|
type="flex"
|
class="pam-paragraph">
|
<UiField icon="comment" label="個人理念">
|
{{ agentInfo.concept }}
|
</UiField>
|
</el-row>
|
|
<el-row
|
type="flex"
|
class="pam-paragraph">
|
<UiField icon="school" label="個人背景">
|
<span v-for="(experience, index) in agentInfo.experiences" :key="index">
|
{{ experience }}<span v-if="index !== agentInfo.experiences.length - 1">, </span>
|
</span>
|
</UiField>
|
</el-row>
|
|
<el-row
|
type="flex"
|
class="pam-paragraph">
|
<UiField icon="trophy" label="得獎經歷">
|
{{ agentInfo.awards }}
|
</UiField>
|
</el-row>
|
|
<AddAndReservedBtns
|
:cusClass="'pam-paragraph'"
|
:agentInfo="agentInfo"
|
@openPopUp="openPopUp"
|
></AddAndReservedBtns>
|
|
<PopUpFrame :isOpen.sync="isVisiblePopUp"
|
>
|
<div class="text--center mdTxt">
|
<p class="mb-50">{{popUpTxt}}</p>
|
<p class="text--primary cursor--pointer fix-chrome-click--issue"
|
@click="isVisiblePopUp = false">我知道了</p>
|
</div>
|
</PopUpFrame>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Context } from '@nuxt/types';
|
import { Vue, Component } from 'vue-property-decorator';
|
import { getConsultantDetail } from '~/assets/ts/api/consultant';
|
|
@Component
|
export default class AgentInfoComponent extends Vue {
|
agentInfo!: AgentInfo;
|
isVisiblePopUp = false;
|
popUpTxt = '成功加入顧問清單';
|
async asyncData(context: Context) {
|
const agentNo = context.route.params.agentNo;
|
let agentInfo = {};
|
await getConsultantDetail(agentNo).then((res) => agentInfo = res.data )
|
return {
|
agentInfo
|
}
|
}
|
|
get agentName(): string {
|
return `${this.agentInfo.name}(${this.agentInfo.role})`;
|
}
|
|
openPopUp(txt: string) {
|
this.popUpTxt = txt;
|
this.isVisiblePopUp = true;
|
}
|
}
|
|
interface AgentInfo {
|
name: string;
|
agentNo:string;
|
role: string;
|
image: string;
|
avgScore: number;
|
title: string;
|
phoneNumber: string;
|
serveArea: string;
|
companyAddress: string;
|
lastestLoginTime: Date | null;
|
seniority: string;
|
suitability: number;
|
evaluation: number;
|
expertises: string[];
|
concept: string;
|
experiences: string[];
|
awards: string;
|
}
|
</script>
|
|
<style lang="scss">
|
.pam-icon {
|
font-size: 15px;
|
padding-right: 8px;
|
color: $PRUDENTIAL_GREY;
|
&.icon--primary {
|
color: $PRIMARY_RED;
|
}
|
}
|
.pam-field {
|
display: flex;
|
flex-direction: column;
|
.pam-field__label {
|
display: flex;
|
align-items: center;
|
.pam-icon {
|
font-size: 12px;
|
}
|
.pam-field__title {
|
font-size: 16px;
|
font-weight: bold;
|
}
|
}
|
}
|
|
.pam-field-suitability {
|
.el-progress-bar__inner {
|
background-color: $LIGHT_BLUE !important;
|
}
|
}
|
|
.pam-field-evaluation {
|
.el-progress-bar__inner {
|
background-color: $TEAL_GREEN!important;
|
}
|
}
|
|
.pam-field-experts {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.pam-progress__label {
|
justify-content: space-between;
|
flex-wrap: wrap;
|
line-height: 24px;
|
}
|
|
</style>
|
