<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>
|
</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.latestLoginTime | formatDate }}
|
</UiField>
|
<UiField :span="12" icon="calender" label="服務資歷">
|
{{ agentInfo.seniority }}
|
</UiField>
|
</el-row>
|
|
<el-row
|
type="flex"
|
v-if="agentInfo.suitability"
|
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-puzzle"
|
></i>匹配度
|
<i class="pl-5 text--primary icon-information" @click="alertFieldInfo('suitability')"></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="pl-5 text--primary icon-information" @click="alertFieldInfo('evaluation')"></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.expertiseList" :key="index">
|
{{ experience }}<span v-if="index !== agentInfo.expertiseList.length - 1">, </span>
|
</span>
|
</UiField>
|
</el-row>
|
|
<el-row
|
type="flex"
|
class="pam-paragraph">
|
<UiField icon="trophy" label="得獎經歷">
|
{{ agentInfo.awards }}
|
</UiField>
|
</el-row>
|
|
|
<AddAndReservedBtns
|
v-if="currentRole!==role.ADMIN"
|
:cusClass="'pam-paragraph'"
|
:agentInfo="agentInfo"
|
@openPopUp="alertAddSuccess"
|
></AddAndReservedBtns>
|
|
<PopUpFrame :isOpen.sync="isAlertAddSuccess">
|
<div class="text--center mdTxt">
|
<p class="mb-50">成功加入顧問清單</p>
|
<div class="text--center">
|
<el-button
|
type="primary"
|
@click="isAlertAddSuccess = false"
|
>我知道了</el-button>
|
</div>
|
</div>
|
</PopUpFrame>
|
|
<PopUpFrame
|
drawerSize="40%"
|
:isOpen.sync="isAlertFieldInfo"
|
>
|
<div class="text--center mdTxt fs-18">
|
<p>{{ fieldInfoTitle }}</p>
|
<p class="mt-20 text--left text--regular">{{ fieldInfoDesc }}</p>
|
<div class="text--center mt-30">
|
<el-button
|
type="primary"
|
@click="isAlertFieldInfo = false"
|
>我知道了</el-button>
|
</div>
|
</div>
|
</PopUpFrame>
|
</div>
|
</template>
|
|
<script src="./agent-info.component.ts"></script>
|
|
<style lang="scss">
|
@import "./agent-info.component.scss";
|
</style>
|
