TODO#130018 嚴選顧問推薦串接加入顧問 api

Mila

2021-11-16 1f41a6596e600e00659f76dffde5a1d5f65c688d

TODO#130018 嚴選顧問推薦串接加入顧問 api

 PAMapp/assets/scss/vendors/elementUI/_avatar.scss

@@ -6,4 +6,20 @@
.pam-avatar>img {
  width: 100%;
  object-position: center top;
}

.pam-rec-agent-card__avatar {
  .pam-avatar {
    width: 120px;
    height: 120px;
  }
}

@include desktop {
  .pam-rec-agent-card__avatar {
    .pam-avatar {
      width: 80px;
      height: 80px;
    }
  }
}

 PAMapp/assets/scss/vendors/elementUI/_button.scss

@@ -87,3 +87,25 @@
    pointer-events: none;
  }
}

@include desktop {
  .pam-rec-btns {
    justify-content:none;
    .el-button:nth-child(1) {
        width: 90px;
        height: 43px;
        font-size: 14px;
        display: flex;
        justify-content: center;
        padding-top: 12px;
        }
    .el-button:nth-child(2) {
        width: 90px;
        height: 43px;
        font-size: 14px;
        display: flex;
        justify-content: center;
        padding-top: 12px;
    }
  }
}

 PAMapp/pages/recommendConsultant/result.vue

@@ -2,76 +2,77 @@
<div>
    <div class="mdTxt pb-10">嚴選顧問推薦</div>
    <ul class="pam-rec-agent__list">
        <li class="pam-rec-agent-card" v-for="(strictQueryList,index) in pageList" :key="index">
        <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__content-header">
                <div class="pam-rec-agent-card__avatar">
                    
                    
                    <UiAvatar :size="120" :fileName="strictQueryList.img" ></UiAvatar>
                </div>
                <div class="pam-rec-agent-card__main-info">
                    <div class="fz-20 pt-10 rec-desktop-name">{{ strictQueryList.name }}</div>
                    <div class="rec-role">{{ strictQueryList.role }}</div>
                    <span class="rec-detail"  @click="showAgentDetail(strictQueryList.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 class="pam-rec-agent-card__avatar">
                        <UiAvatar :fileName="info.img" ></UiAvatar>
                    </div>
                    <div class="field__content expertieses-container">
                    <div class="pr-10 pb-10" v-for="(expert, index) in strictQueryList.expertise" :key="index">
                        #{{ expert }}
                    </div>
                    <div class="pam-rec-agent-card__main-info">
                        <div class="fz-20 pt-10 rec-desktop-name">{{ info.name }}</div>
                        <div class="rec-role">{{ info.role }}</div>
                        <span class="rec-detail"  @click="showAgentDetail(info.agentNo)">詳細資料</span>
                    </div>
                </div>
                </el-row>
                <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">
                    {{ strictQueryList.seniority }}
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="field__label">
                    客戶滿意度
                    </div>
                    <div class="field__content">
                        <i class="icon-star" style="color:#F2C75C"></i>
                    {{ strictQueryList.avgScore }}
                    </div>
                    </el-col>
                </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">
                            <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">
                <el-row
                    type="flex"
                    justify="center"
                    >
                    <el-button class="btn">+ 顧問清單</el-button>
                    <el-button class="btn2" type="primary" style="margin-left: 10px" @click="$router.push('/questionnaire')"
                    >進行預約</el-button>
                </el-row>

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

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

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

</div>
</template>
@@ -84,6 +85,8 @@
    @State('strictQueryList') strictQueryList!: AgentOfStrictQuery;

    pageList: any[] = [];
    isVisiblePopUp = false;
    popUpTxt = '';

    changePage(pageList: any[]) {
        this.pageList = pageList;
@@ -91,57 +94,49 @@
    showAgentDetail(agentNo: string): void {
        this.$router.push(`/agentInfo/${agentNo}`);
    }


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

<style lang="scss" scoped>
.btn{
    width: 139px;
    height: 47px;
}
.btn2{
    width: 120px;
    height: 47px;
}

.pam-rec-agent-card {
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px solid $LIGHT_GREY;
    padding: 20px 33px;
    margin-right:-20px;
    margin-left:-20px;
    

    .pam-rec-agent-card__content {
        width: 270px;
        .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;
            .pam-rec-agent-card__avatar {
                display: flex;
                flex-direction: row;
                margin-right: 20px;
            }
            .rec-detail{
                font-size: 20px;
                color:$PRIMARY_RED;
                font-weight: bold;
                padding-top: 30px;
                cursor: pointer;
            .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;
        }
    }
}
@@ -161,110 +156,64 @@
}

@include desktop{
.btn{
    width: 90px;
    height: 43px;
    margin-left: 29px;
    margin-right: 0px
}
.btn2{
    width: 90px;
    height: 43px;
}
    .page-container{}
    .pam-rec-agent__list{
        display: flex;
        flex-wrap: wrap;
        flex-direction:row;
        width: auto;
        width: 100%;
    }
    .pam-paragraph{
        margin-top: 10px;
    }
    .pam-rec-agent-card {
        margin-right: 20px;
        margin-bottom: 10px;
        border-radius: 10px;
        border: 1px solid $LIGHT_GREY;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 28px;
        padding-right: 20px;
        width: 30%;
        margin-left: 10px;
    
    .pam-rec-agent-card__content {
        padding: 15px 20px 15px 20px;
        width: 170px;
        .pam-rec-agent-card__content-header {
        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;
        .pam-rec-agent-card__avatar {
            display: flex;
            flex-direction: row;
            margin-right: 20px;
            .avatar{
                width: 80px;
                height: 80px;
                border-radius: 50%;
                margin-bottom: 10px;
            }
        }
        .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;
            }
        }
        }
        flex-wrap: wrap;
    }
    
    }
.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;
    
}
.btn{
    width: 90px;
    height: 43px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    padding-top: 12px;
    margin-right: 20px;
}
.btn2{
    width: 90px;
    height: 43px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    padding-top: 12px;
    margin-right: -10px;
}
.el-row--flex.is-justify-center{
    justify-content:none;
}
}
</style>