From 1f41a6596e600e00659f76dffde5a1d5f65c688d Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期二, 16 十一月 2021 09:50:09 +0800
Subject: [PATCH] TODO#130018 嚴選顧問推薦串接加入顧問 api
---
PAMapp/pages/recommendConsultant/result.vue | 315 ++++++++++++++++++++++------------------------------
1 files changed, 132 insertions(+), 183 deletions(-)
diff --git a/PAMapp/pages/recommendConsultant/result.vue b/PAMapp/pages/recommendConsultant/result.vue
index 25a5e55..98f9c98 100644
--- a/PAMapp/pages/recommendConsultant/result.vue
+++ b/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>
--
Gitblit v1.8.0