From bdae23a40c461c2c6b6ee614f661eac731c949c8 Mon Sep 17 00:00:00 2001 From: Mila <Mila@pollex.com.tw> Date: 星期三, 22 十二月 2021 14:12:05 +0800 Subject: [PATCH] Merge branch 'master' of https://192.168.0.10:8443/r/pcalife/PAM --- PAMapp/pages/recommendConsultant/result.vue | 236 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 236 insertions(+), 0 deletions(-) diff --git a/PAMapp/pages/recommendConsultant/result.vue b/PAMapp/pages/recommendConsultant/result.vue new file mode 100644 index 0000000..3695bfc --- /dev/null +++ b/PAMapp/pages/recommendConsultant/result.vue @@ -0,0 +1,236 @@ +<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__content-header"> + <div class="pam-rec-agent-card__avatar"> + <UiAvatar :fileName="info.img" ></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> + <!-- TODO:���遛��漲 --> + <el-col :span="12" v-if="!hideReviews"> + <div class="field__label"> + 摰X皛踵�漲 + </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="strictQueryList" + @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 {Vue,Component, State, namespace, Action} from 'nuxt-property-decorator'; +import { hideReviews } from '~/shared/const/hide-reviews'; +import { AgentOfStrictQuery } from '~/shared/models/strict-query.model'; + +const localStorage = namespace('localStorage'); + +@Component +export default class Reslut extends Vue{ + @State('strictQueryList') strictQueryList!: AgentOfStrictQuery[]; + @Action storeStrictQueryList!: (data: any) => Promise<number>; + @localStorage.State recommendConsultantItem!: string; + + pageList: any[] = []; + isVisiblePopUp = false; + popUpTxt = ''; + hideReviews = hideReviews; + mounted() { + 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.popUpTxt = txt; + 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; + + .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: 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> -- Gitblit v1.9.3