TODO#139894 [ footer -最下方說明與保經代合作 ] 文案修改

HelenHuang

2022-06-09 9bdb95c9e34cef640534e5e5a1e2225a80442000

 PAMapp/pages/recommendConsultant/result.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,304 @@
<template>
<div>
    <div class="mdTxt pb-10">嚴選顧問推薦</div>
    <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"
                :class="{
                  'match--level1': info.suitability === 100,
                  'match--level2': 50 < info.suitability && info.suitability < 100,
                  'match--level3': info.suitability < 51
                }">
                </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
                          :agentNo="info.agentNo" >
                        </UiAvatar>
                    </div>
                    <div class="pam-rec-agent-card__main-info">
                        <div class="text--middle  pt-10 rec-desktop-name">{{ info.name }}</div>
                        <div class="rec-role">{{ info.role }}</div>
                        <span class="rec-detail fix-chrome-click--issue"  @click="showAgentDetail(info.agentNo)">詳細資料</span>
                    </div>
                </div>
                <div class="pam-rec-agent-card__content-body">
                    <el-row type="flex" class="pam-paragraph">
                        <div class="field">
                            <div class="field__label">專長領域</div>
                            <div class="field__content expertieses-container">
                                <div class="pr-10 pb-10" v-for="(expert, index) in info.expertise" :key="index">
                                    #{{ expert }}
                                </div>
                            </div>
                        </div>
                    </el-row>

                    <el-row type="flex" class="pam-paragraph">
                        <el-col :span="12">
                            <div class="field__label">
                            æœå‹™è³‡æ­·
                            </div>
                            <div class="field__content">
                            {{ info.seniority }}
                            </div>
                        </el-col>
                        <el-col :span="12" v-if="!hideReviews">
                            <div class="field__label">
                            å®¢æˆ¶æ»¿æ„åº¦
                            </div>
                            <div class="field__content">
                                <i class="icon-star" style="color:#F2C75C"></i>
                            {{ info.avgScore }}
                            </div>
                        </el-col>
                    </el-row>

                </div>
                <div class="pam-rec-agent-card__content-footer">
                    <AddAndReservedBtns
                        :cusClass="'pam-rec-btns'"
                        :agentInfo="info"
                        @openPopUp="openPopUp"
                    ></AddAndReservedBtns>
                </div>
            </div>
        </li>
    </ul>

    <UiPagination
        class="mb-30"
        :totalList="strictResultList"
        @changePage="changePage"
        :pageSize = 6
    ></UiPagination>

    <PopUpFrame :isOpen.sync="isVisiblePopUp"
      >
        <div class="text--center mdTxt">
            <p class="mb-50">{{popUpTxt}}</p>
            <div class="text--center">
                <el-button
                    type="primary"
                    @click="isVisiblePopUp = false"
                >我知道了</el-button>
            </div>
        </div>
    </PopUpFrame>

</div>
</template>
<script lang="ts">
import { AgentOfStrictQuery } from '~/shared/models/strict-query.model';
import { hideReviews } from '~/shared/const/hide-reviews';
import { Vue,Component, State, namespace, Action, Getter} from 'nuxt-property-decorator';

const localStorage = namespace('localStorage');

@Component
export default class Result extends Vue{
    @State('strictQueryList')
    strictQueryList!: AgentOfStrictQuery[];

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

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

    @localStorage.State
    recommendConsultantItem!: string;

    pageList: any[] = [];
    isVisiblePopUp = false;
    popUpTxt = '已加入顧問清單';
    hideReviews = hideReviews;

    //////////////////////////////////////////////////////////////////////
    mounted(): void {
        if (this.recommendConsultantItem && this.strictQueryList.length === 0) {
            const strictQueryDto = JSON.parse(this.recommendConsultantItem);
            this.storeStrictQueryList(strictQueryDto);
        }

    }

    //////////////////////////////////////////////////////////////////////
    changePage(pageList: any[]) {
        this.pageList = pageList;
    }

    showAgentDetail(agentNo: string): void {
        this.$router.push(`/agentInfo/${agentNo}`);
    }

    openPopUp(txt: string) {
        this.isVisiblePopUp = true;
    }
}
</script>

<style lang="scss" scoped>
.pam-rec-agent-card {
    margin-bottom: 10px;
    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;
          transform: rotate(45deg);
          position:absolute;
          &.match--level3 {
            background-color: #C3A787;
          }
          &.match--level2 {
            background-color: #D0D0CE;
          }
          &.match--level1 {
            background-color: #F2C75C;
          }
        }
        .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;
            @include desktop {
              display: none;
            }
          }
          .value {
            font-size: 12px;
            color: #222222;
            @include desktop {
              padding-left: 8px;
            }
          }
        }
        .pam-rec-agent-card__content-header {
            display: flex;
            .pam-rec-agent-card__avatar {
                display: flex;
                flex-direction: row;
                margin-right: 20px;
            }
            .pam-rec-agent-card__main-info {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                .rec-role {
                    font-size: 16px;
                    color: $PRUDENTIAL_GREY;
                    font-weight: bold;
                    margin-top: 4px;
                }
                .rec-detail{
                    font-size: 20px;
                    color:$PRIMARY_RED;
                    font-weight: bold;
                    padding-top: 30px;
                    cursor: pointer;
                }
            }
        }
        .pam-rec-agent-card__content-body {
            height: 200px;
        }
    }
}

.field__label {
    font-size: 16px;
    color: $PRUDENTIAL_GREY;
    font-weight:bold;
    margin-bottom: 7px;
}
.field__content{
    font-size: 18px;
}
.expertieses-container {
    display: flex;
    flex-wrap: wrap;
}

@include desktop{
    .pam-rec-agent__list{
        display: flex;
        flex-wrap: wrap;
        flex-direction:row;
        width: 100%;
    }
    .pam-paragraph{
        margin-top: 10px;
    }
    .pam-rec-agent-card {
        border-radius: 10px;
        border: 1px solid $LIGHT_GREY;
        padding: 15px 20px 15px 20px;
        width: 170px;
        margin: 0 10px 10px 10px;

        .pam-rec-agent-card__content {
            .pam-rec-agent-card__content-header {
                display: flex;
                .pam-rec-agent-card__avatar {
                    display: flex;
                    flex-direction: row;
                    margin-right: 20px;
                }
                .pam-rec-agent-card__main-info {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    .rec-desktop-name{
                        font-size: 12px;
                        font-weight: bold;
                    }
                    .rec-role {
                        font-size: 12px;
                        color:$PRUDENTIAL_GREY;
                    }
                    .rec-detail{
                        font-size: 12px;
                        color:$PRIMARY_RED;
                        font-weight: bold;
                        padding-top: 10px;
                    }
                }
            }
        }
    }
    .field__label {
        font-size: 12px;
        color: $PRUDENTIAL_GREY;
        font-weight:bold;
        margin-bottom: 7px;
    }
    .field__content{
        font-size: 12px;
    }
    .expertieses-container {
        display: flex;
        flex-wrap: wrap;
    }
}
</style>