From abfd26bb700d93a92da6a04703b0187d4acaaeb5 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 22 十二月 2021 10:13:02 +0800
Subject: [PATCH] refactor: move ts folder to shared folder
---
PAMapp/pages/recommendConsultant/result.vue | 294 ++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 202 insertions(+), 92 deletions(-)
diff --git a/PAMapp/pages/recommendConsultant/result.vue b/PAMapp/pages/recommendConsultant/result.vue
index 6c8d44c..0b0c85e 100644
--- a/PAMapp/pages/recommendConsultant/result.vue
+++ b/PAMapp/pages/recommendConsultant/result.vue
@@ -1,126 +1,236 @@
<template>
<div>
- <div>��憿批��</div>
+ <div class="mdTxt pb-10">��憿批��</div>
<ul class="pam-rec-agent__list">
- <li class="pam-rec-agent-card" v-for="(info,index) in recAgentList" :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__avatar">
- <img :src="info.avatar" class="avatar">
+ <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="fz-20 pt-10">{{ info.name }}</div>
- <div class="rec-company">{{ info.company }}</div>
- <span class="rec-detail pt-30">閰喟敦鞈��</span>
+ <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>
- <span class="rec-sub-title">撠����</span>
- <div>
- {{info.expertise}}
+ <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">
+ 摰Ｘ皛踵�漲
+ </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>
-import {Vue,Component} from 'vue-property-decorator';
+<script lang="ts">
+import {Vue,Component, State, namespace, Action} from 'nuxt-property-decorator';
+import { AgentOfStrictQuery } from '~/shared/api/consultant';
+import { hideReviews } from '~/shared/const/hide-reviews';
+
+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;
- recAgentList =[
- {
- avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
- name:'�蝢��',
- company:'隡舀��蝬�鈭�',
- expertise:'#鞎∪���� #鞈頧宏 #蝭�蝔� #璅暑��隡�',
- seniority:'1撟�2���',
- avgScore:4.8
- },
- {
- avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
- name:'鞈�',
- company:'擙剝��蝬�鈭�',
- expertise:'#鞎∪���� #鞈頧宏 #蝭�蝔� #璅暑��隡�',
- seniority:'1撟�2���',
- avgScore:4.8
- },
- {
- avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
- name:'�摰嗅弧',
- company:'���收靽蝬�鈭�',
- expertise:'#鞎∪���� #鞈頧宏 #蝭�蝔� #璅暑��隡�',
- seniority:'1撟�2���',
- avgScore:4.8
- },
- {
- avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
- name:'撘萄���',
- company:'擙剝��蝬�鈭�',
- expertise:'#鞎∪���� #鞈頧宏 #蝭�蝔� #璅暑��隡�',
- seniority:'1撟�2���',
- avgScore:4.8
- },
- {
- avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
- name:'���戊',
- company:'���收靽蝬�鈭�',
- expertise:'#鞎∪���� #鞈頧宏 #蝭�蝔� #璅暑��隡�',
- seniority:'1撟�2���',
- avgScore:4.8
- },
- {
- avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
- name:'�撣亙',
- company:'擙剝��蝬�鈭�',
- expertise:'#鞎∪���� #鞈頧宏 #蝭�蝔� #璅暑��隡�',
- seniority:'1撟�2���',
- avgScore:4.8
+ 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 {
- width: 270px;
- .pam-rec-agent-card__avatar {
+ .pam-rec-agent-card__content-header {
display: flex;
- flex-direction: row;
- .avatar{
- width: 120px;
- height: 120px;
- border-radius: 50%;
+ .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__main-info {
- display: flex;
- flex-direction: column;
- margin-left:19px;
- .rec-company{
- font-size: 16px;
- color: $PRUDENTIAL_GREY;
- font-weight:bold;
- margin-top: 4px;
- margin-bottom: 30px;
- }
- .rec-detail{
- font-size: 20px;
- color:$PRIMARY_RED;
- font-weight: bold;
- }
- }
- .rec-sub-title{
- font-size: 16px;
- color: $PRUDENTIAL_GREY;
- font-weight:bold;
+ .pam-rec-agent-card__content-body {
+ height: 200px;
}
}
}
-</style>
\ No newline at end of file
+
+.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