<template>
|
<div>
|
<el-row
|
type="flex"
|
justify="center">
|
<el-avatar
|
size="large"
|
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
|
</el-avatar>
|
</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.avgReviews }}</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"></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>
|
|
<el-row
|
type="flex"
|
justify="center"
|
class="pam-paragraph">
|
<el-button>+ 顧問清單</el-button>
|
<el-button type="primary">進行預約</el-button>
|
</el-row>
|
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component } from 'vue-property-decorator';
|
|
@Component
|
export default class AgentInfoComponent extends Vue {
|
agentInfo: AgentInfo = {
|
name: '蔡美眉',
|
role: '伯樂保險經紀人',
|
avgReviews: 4.8,
|
title: '專案經理',
|
phoneNumber: '0912345689',
|
serveArea: '台北市地區、新北市地區',
|
companyAddress: '台北市信義區忠孝東路一段1號',
|
lastestLoginTime: 'Sun Nov 15 1987 00:00:00 GMT+0800 (台北標準時間)',
|
seniority: '4年2個月',
|
suitability: 53,
|
evaluation: 31,
|
expertises: ['財務規劃', '資產移轉', '節稅', '樂活退休'],
|
concept: '壽險路上沒有捷徑，唯有給客戶信任感、安全感，才是最好的方法。從業以來，我一直秉持著「助人為快樂之本」的信念堅持著，她相信，一個好的業務人員，必須抱持著一顆熱心助人的心，才是永續經營壽險事業的不二法門。',
|
experiences: ['台大財金系', '美莓有精算師執照'],
|
awards: '入選：2020年伯樂十大最佳業務員 擁有證照：人身保險業務員證照、外幣收付保險證照、人身保險代理人證照、財產保險代理人證照'
|
}
|
|
get agentName(): string {
|
return `${this.agentInfo.name}(${this.agentInfo.role})`;
|
}
|
}
|
|
interface AgentInfo {
|
name: string;
|
role: string;
|
avgReviews: number;
|
title: string;
|
phoneNumber: string;
|
serveArea: string;
|
companyAddress: string;
|
lastestLoginTime: string;
|
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>
|
