add: 業務員細節 page、UiField 元件

Tomas

2021-10-29 4f2e9b65d2be8f7b79f29870259c53b4c39a3702

 PAMapp/pages/agentInfo/index.vue

@@ -1,3 +1,251 @@
<template>
    <div>業務員詳細資訊</div>
</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="mt-30">
        <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="mt-30">
        <UiField icon="company" label="服務地區">
          {{ agentInfo.serveArea }}
        </UiField>
      </el-row>

      <el-row
        type="flex"
        class="mt-30">
        <UiField icon="address" label="服務地區">
          {{ agentInfo.companyAddress }}
        </UiField>
      </el-row>

      <el-row
        type="flex"
        class="mt-30">
        <UiField span="12" icon="time" label="最後上線時間">
          {{ agentInfo.lastestLoginTime }}
        </UiField>
        <UiField span="12" icon="calender" label="服務資歷">
          {{ agentInfo.seniority }}
        </UiField>
      </el-row>

      <el-row
        type="flex"
        class="mt-30">
        <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-agent"></i>匹配度(找不到拼圖 icon) <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="mt-30">
        <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="mt-30">
        <UiField icon="flag" label="專長領域">
          <div class="pam-field-experts">
            <div class="text--secondary bold pr-10" v-for="(expert, index) in agentInfo.expertises" :key="index">
              #{{ expert }}
            </div>
          </div>
        </UiField>
      </el-row>

      <el-row
        type="flex"
        class="mt-30">
        <UiField icon="comment" label="個人理念">
          {{ agentInfo.concept }}
        </UiField>
      </el-row>

      <el-row
        type="flex"
        class="mt-30">
        <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="mt-30">
        <UiField icon="trophy" label="得獎經歷">
          {{ agentInfo.awards }}
        </UiField>
      </el-row>

      <el-row
        type="flex"
        justify="center"
        class="mt-30">
          <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: AgengInfo = {
    name: '蔡美眉',
    role: '伯樂保險經紀人',
    avgReviews: 4.8,
    title: '專案經理',
    phoneNumber: '0912345689',
    serveArea: '台北市地區、新北市地區',
    companyAddress: '台北市信義區忠孝東路一段1號',
    lastestLoginTime: new Date(),
    seniority: '4年2個月',
    suitability: 53,
    evaluation: 31,
    expertises: ['財務規劃', '資產移轉', '節稅', '樂活退休', '樂活退休'],
    concept: '壽險路上沒有捷徑，唯有給客戶信任感、安全感，才是最好的方法。從業以來，我一直秉持著「助人為快樂之本」的信念堅持著，她相信，一個好的業務人員，必須抱持著一顆熱心助人的心，才是永續經營壽險事業的不二法門。',
    experiences: ['台大財金系', '美莓有精算師執政'],
    awards: '入選：2020年伯樂十大最佳業務員 擁有證照：人身保險業務員證照、外幣收付保險證照、人身保險代理人證照、財產保險代理人證照'
  }

  get agentName(): string {
    return `${this.agentInfo.name}(${this.agentInfo.role})`;
  }
}

interface AgengInfo {
  name: string;
  role: string;
  avgReviews: number;
  title: string;
  phoneNumber: string;
  serveArea: string;
  companyAddress: string;
  lastestLoginTime: Date;
  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: #68737A;
  &.icon-primary {
    color: #ED1B2E;
  }
}
.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: #8DB9CA !important;
  }
}

.pam-field-evaluation {
  .el-progress-bar__inner {
    background-color: #5CB8B2 !important;
  }
}

.pam-field-experts {
  display: flex;
  flex-wrap: wrap;
}

.pam-progress-label {
  justify-content: space-between;
}

</style>