保誠-保戶業務員媒合平台
Mila
2021-12-10 93f58fa3ebf4fc50143138cff052353d274cfaa4
PAMapp/pages/agentInfo/_agentNo.vue
@@ -3,7 +3,7 @@
      <el-row
        type="flex"
        justify="center">
        <UiAvatar :size="150" :fileName="agentInfo.image"></UiAvatar>
        <UiAvatar :size="150" :fileName="agentInfo.img"></UiAvatar>
      </el-row>
      <el-row
@@ -28,9 +28,6 @@
        <UiField :span="12" icon="agent" label="頭銜">
          {{ agentInfo.title }}
        </UiField>
        <UiField :span="12" icon="phone" label="電話">
          {{ agentInfo.phoneNumber }}
        </UiField>
      </el-row>
      <el-row
@@ -53,22 +50,27 @@
        type="flex"
        class="pam-paragraph">
        <UiField :span="12" icon="time" label="最後上線時間">
          {{ agentInfo.lastestLoginTime | formatDate }}
          {{ agentInfo.latestLoginTime | formatDate }}
        </UiField>
        <UiField :span="12" icon="calender" label="服務資歷">
          {{ agentInfo.seniority }}
        </UiField>
      </el-row>
      <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">
                <!-- TODO: 如從首頁推薦顧問進入,不會出現匹配度 [Tomas, 2021/10/29] -->
                <i class="pam-icon icon-puzzle"></i>匹配度 <i class="text--primary icon-information"></i>
                <i class="pam-icon icon-puzzle"
                  ></i>匹配度
                  <i class="pl-5 text--primary icon-information" @click="alertFieldInfo('suitability')"></i>
              </div>
            </div>
            <div class="xsTxt">
@@ -80,10 +82,11 @@
              :show-text="false"
              :text-inside="true"
              :stroke-width="15"
              :percentage="agentInfo.suitability"></el-progress>
              :percentage="agentInfo.suitability">
            </el-progress>
          </div>
        </el-col>
      </el-row>
      </el-row> -->
      <el-row
        type="flex"
@@ -92,7 +95,8 @@
          <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>
                <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">
@@ -143,18 +147,38 @@
        </UiField>
      </el-row>
      <AddAndReservedBtns
        v-if="currentRole!==role.ADMIN"
        :cusClass="'pam-paragraph'"
        :agentInfo="agentInfo"
        @openPopUp="openPopUp"
        @openPopUp="alertAddSuccess"
      ></AddAndReservedBtns>
      <PopUpFrame :isOpen.sync="isVisiblePopUp"
      >
    <PopUpFrame :isOpen.sync="isAlertAddSuccess">
        <div class="text--center mdTxt">
            <p class="mb-50">{{popUpTxt}}</p>
            <p class="text--primary cursor--pointer"
                @click="isVisiblePopUp = false">我知道了</p>
            <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>
@@ -162,14 +186,21 @@
<script lang="ts">
import { Context } from '@nuxt/types';
import { namespace } from 'nuxt-property-decorator';
import { Vue, Component } from 'vue-property-decorator';
import { getConsultantDetail } from '~/assets/ts/api/consultant';
import { Role } from '~/assets/ts//models/enum/Role';
const roleStorage = namespace('localStorage');
@Component
export default class AgentInfoComponent extends Vue {
  @roleStorage.Getter currentRole!:string|null;
  role = Role;
  agentInfo!: AgentInfo;
  isVisiblePopUp = false;
  popUpTxt = '成功加入顧問清單';
  isAlertAddSuccess = false;
  isAlertFieldInfo = false;
  fieldInfoTitle = '';
  fieldInfoDesc = '';
  async asyncData(context: Context) {
    const agentNo = context.route.params.agentNo;
    let agentInfo = {};
@@ -183,30 +214,43 @@
    return `${this.agentInfo.name}(${this.agentInfo.role})`;
  }
  openPopUp(txt: string) {
        this.popUpTxt = txt;
        this.isVisiblePopUp = true;
  alertAddSuccess() {
      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;
    }
  }
}
interface AgentInfo {
  name: string;
  agentNo:string;
  role: string;
  image: string;
  avgScore: number;
  title: string;
  phoneNumber: string;
  serveArea: string;
  companyAddress: string;
  name            : string;
  agentNo         : string;
  role            : string;
  img             : 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;
  seniority       : string;
  suitability     : number;
  evaluation      : number;
  expertises      : string[];
  concept         : string;
  experiences     : string[];
  awards          : string;
}
</script>
@@ -231,6 +275,8 @@
    .pam-field__title {
      font-size: 16px;
      font-weight: bold;
      display: flex;
      align-items: center;
    }
  }
}