refactor: pages component - separate vue files

Tomas

2021-12-08 b6661a090e8bcf8f45be24a01b6a7bb08e3aaff1

 PAMapp/pages/agentInfo/_agentNo.vue

@@ -130,8 +130,8 @@
        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 v-for="(experience, index) in agentInfo.expertiseList" :key="index">
            {{ experience }}<span v-if="index !== agentInfo.expertiseList.length - 1">, </span>
          </span>
        </UiField>
      </el-row>
@@ -182,124 +182,8 @@
    </div>
</template>

<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;
  isAlertAddSuccess = false;
  isAlertFieldInfo = false;
  fieldInfoTitle = '';
  fieldInfoDesc = '';

  async asyncData(context: Context) {
    const agentNo = context.route.params.agentNo;
    let agentInfo = {};
    await getConsultantDetail(agentNo).then((res) => agentInfo = res.data )
    return {
      agentInfo
    }
  }

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

  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;
  lastestLoginTime: Date | null;
  seniority       : string;
  suitability     : number;
  evaluation      : number;
  expertises      : string[];
  concept         : string;
  experiences     : string[];
  awards          : string;
}
</script>
<script src="./agent-info.component.ts"></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;
}

  @import "./agent-info.component.scss";
</style>