<template>
|
<div>
|
<el-row
|
type="flex"
|
justify="center">
|
<UiAvatar
|
:size="150"
|
:agentNo="agentInfo.agentNo">
|
</UiAvatar>
|
</el-row>
|
|
<el-row
|
type="flex"
|
class="pt-10"
|
justify="center"
|
align="middle" v-if="!hideReviews">
|
<!-- TODO:隱藏滿意度 -->
|
<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
|
v-if="currentRole === role.ADMIN"
|
type="flex"
|
class="pam-paragraph">
|
<UiField :span="12" icon="phone" label="手機號碼">
|
{{ agentInfo.phoneNumber }}
|
</UiField>
|
</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>
|
|
<!-- TODO: 依據 2021/12/10 10:30 與 Charles 的討論，先隱藏匹配度欄位的顯示 [Tomas, 2021/12/10] -->
|
<!-- REF: https://reurl.cc/OkO6Q9-->
|
|
<!-- <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>
|
|
<div class="consultant-edit-btn">
|
<UiField icon="flag" label="溝通風格">
|
<div class="text--orange bold pr-10 "
|
v-for="(communicationStyle, index) in displayCommunicationStyleList"
|
:key="index">
|
#{{ communicationStyle }}</div>
|
</UiField>
|
</div>
|
|
<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.expertise" :key="index">
|
#{{ expert }}
|
</div>
|
</div>
|
</UiField>
|
</el-row>
|
|
<el-row
|
type="flex"
|
class="pam-paragraph">
|
<UiField icon="comment" label="個人理念" class="agent-info-textarea">
|
{{ agentInfo.concept }}
|
</UiField>
|
</el-row>
|
|
<el-row
|
type="flex"
|
class="pam-paragraph">
|
<UiField icon="school" label="個人背景" class="agent-info-textarea">
|
<span>
|
{{ agentInfo.experiences }}
|
</span>
|
</UiField>
|
</el-row>
|
|
<el-row
|
type="flex"
|
class="pam-paragraph">
|
<UiField icon="trophy" label="得獎經歷" class="agent-info-textarea">
|
{{ 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
|
: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 class="consultant-edit-btn" v-if="currentRole === role.ADMIN">
|
<el-button type="primary" @click.native="$router.push(`/agentInfo/edit/${agentInfo.agentNo}`)">編輯帳戶資訊</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Context } from '@nuxt/types';
|
import { namespace } from 'nuxt-property-decorator';
|
import { Vue, Component } from 'vue-property-decorator';
|
|
import myConsultantService from '~/shared/services/my-consultant.service';
|
import { AgentInfo } from '~/shared/models/agent-info.model';
|
import { hideReviews } from '~/shared/const/hide-reviews';
|
import { Role } from '~/shared/models/enum/Role';
|
|
const roleStorage = namespace('localStorage');
|
|
@Component
|
export default class AgentInfoComponent extends Vue {
|
|
@roleStorage.Getter currentRole!:string|null;
|
|
agentInfo!: AgentInfo;
|
role = Role;
|
isAlertAddSuccess = false;
|
isAlertFieldInfo = false;
|
fieldInfoTitle = '';
|
fieldInfoDesc = '';
|
hideReviews = hideReviews ;
|
|
//////////////////////////////////////////////////////////////////////
|
|
async asyncData(context: Context) {
|
const agentNo = context.route.params.agentNo;
|
return {
|
agentInfo: await myConsultantService.getConsultantDetail(agentNo).then((res) => res)
|
}
|
}
|
|
//////////////////////////////////////////////////////////////////////
|
|
alertAddSuccess(): void {
|
this.isAlertAddSuccess = true;
|
}
|
|
alertFieldInfo(field: string): void {
|
this.isAlertFieldInfo = true;
|
switch(field) {
|
case 'suitability':
|
this.fieldInfoTitle = '匹配度';
|
this.fieldInfoDesc = '匹配度是透過嚴選配對或快速篩選後，將每一位保險顧問資料進行比對後排序推薦給您的媒合數值，您可以作為選擇適合顧問的參考值。';
|
break;
|
case 'evaluation':
|
this.fieldInfoTitle = '諮詢度表現';
|
this.fieldInfoDesc = '諮詢度表現是將每一位保險顧問近一個月回覆諮詢數量進行比對後排序推薦給您的媒合數值。';
|
break;
|
}
|
}
|
|
get agentName(): string {
|
return `${this.agentInfo.name}(${this.agentInfo.role})`;
|
}
|
|
get displayCommunicationStyleList(): string[] {
|
return this.agentInfo.communicationStyle.split('、').filter((item) => item);
|
}
|
|
}
|
|
</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;
|
display: flex;
|
align-items: center;
|
}
|
}
|
}
|
|
.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;
|
}
|
.consultant-edit-btn{
|
display: flex;
|
justify-content: center;
|
}
|
|
.pam-field{
|
display: flex;
|
}
|
.agent-info-textarea{
|
word-break: break-all;
|
word-wrap: break-word;
|
}
|
</style>
|
