ADD:#135212 [嚴選配對] 結果頁面顯示匹配度資訊(前端)

HelenHuang

2022-02-15 df439775f9806bac93b39051382e658d92c6c04e

ADD:#135212 [嚴選配對] 結果頁面顯示匹配度資訊(前端)

 PAMapp/pages/recommendConsultant/result.vue

@@ -4,6 +4,14 @@
    <ul class="pam-rec-agent__list">
        <li class="pam-rec-agent-card" v-for="(info,index) in pageList" :key="index">
            <div class="pam-rec-agent-card__content">

              <div class="pam-rec-agent-card-suitability">
                </div>

                <div class="pam-rec-agent-card-suitability-text">
                  <div class="label">匹配度</div>
                  <div class="value">{{info.suitability}}%</div>
                </div>
                <div class="pam-rec-agent-card__content-header">
                    <div class="pam-rec-agent-card__avatar">
                        <UiAvatar
@@ -62,7 +70,7 @@

    <UiPagination
        class="mb-30"
        :totalList="strictQueryList"
        :totalList="strictResultList"
        @changePage="changePage"
        :pageSize = 6
    ></UiPagination>
@@ -85,7 +93,7 @@
<script lang="ts">
import { AgentOfStrictQuery } from '~/shared/models/strict-query.model';
import { hideReviews } from '~/shared/const/hide-reviews';
import { Vue,Component, State, namespace, Action} from 'nuxt-property-decorator';
import { Vue,Component, State, namespace, Action, Getter} from 'nuxt-property-decorator';

const localStorage = namespace('localStorage');

@@ -96,6 +104,9 @@

    @Action
    storeStrictQueryList!: (data: any) => Promise<number>;

    @Getter('strictResultList')
    strictResultList!: AgentOfStrictQuery[];

    @localStorage.State
    recommendConsultantItem!: string;
@@ -111,6 +122,7 @@
            const strictQueryDto = JSON.parse(this.recommendConsultantItem);
            this.storeStrictQueryList(strictQueryDto);
        }

    }

    //////////////////////////////////////////////////////////////////////
@@ -123,7 +135,6 @@
    }

    openPopUp(txt: string) {
        this.popUpTxt = txt;
        this.isVisiblePopUp = true;
    }
}
@@ -135,8 +146,34 @@
    border-radius: 10px;
    border: 1px solid $LIGHT_GREY;
    padding: 20px 33px;
    overflow: hidden;

    .pam-rec-agent-card__content {
      position: relative;
        .pam-rec-agent-card-suitability{
          left: -125px;
          top: -108px;
          width: 150px;
          height: 150px;
          background-color: #F2C75C;
          transform: rotate(45deg);
          position:absolute;
        }
        .pam-rec-agent-card-suitability-text{
          position: absolute;
          left: -25px;
          top: -10px;
          z-index: 5;
          line-height: 1.3;
          .label {
            font-size: 10px;
            color: #68737A;
          }
          .value {
            font-size: 12px;
            color: #222222;
          }
        }
        .pam-rec-agent-card__content-header {
            display: flex;
            .pam-rec-agent-card__avatar {

 PAMapp/shared/models/strict-query.model.ts

@@ -16,9 +16,12 @@
  name         : string;
  img          : string;
  expertise    : string[];
  suitability  : number;
  avgScore     : number;
  contactStatus: null;
  updateTime   : null;
  seniority    : string;
  role         : string;
  new          : boolean;
  latestAppointmentId :null
}

 PAMapp/store/index.ts

@@ -23,6 +23,13 @@
        return this.context.getters['localStorage/isUserLogin'];
    }

    get strictResultList(): AgentOfStrictQuery[] {
      const perfectMatchList = this.strictQueryList.filter((i) => i.suitability === 100);
      return perfectMatchList.length > 5
            ? perfectMatchList
            : this.strictQueryList;
    }

    @Mutation
    updateRecommend(data: Consultant[]) {
      this.recommendList = data;
@@ -35,7 +42,7 @@

    @Mutation
    updateStrictQueryList(data: AgentOfStrictQuery[]) {
        this.strictQueryList = data;
        this.strictQueryList = data.sort((a, b) => b.suitability - a.suitability);
    }

    @Mutation