From 6a4966b8898509299cd4d43cc31e2ae2985d0cfe Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期三, 22 十二月 2021 14:04:29 +0800
Subject: [PATCH] update: TODO#132409 快速篩選增加年資選項 (完成 90%, 剩 btn 背景圖)
---
PAMapp/components/QuickFilter/QuickFilterSelector.vue | 151 +++++++++++++++++++++++++++++--------
PAMapp/pages/quickFilter/index.vue | 62 +++++++++++----
PAMapp/assets/ts/models/quickFilter.model.ts | 5 +
PAMapp/assets/ts/const/quickFilter-questionList.ts | 11 ++
PAMapp/assets/scss/utilities/_heading.scss | 4 +
5 files changed, 183 insertions(+), 50 deletions(-)
diff --git a/PAMapp/assets/scss/utilities/_heading.scss b/PAMapp/assets/scss/utilities/_heading.scss
index 933e0d7..6287ea0 100644
--- a/PAMapp/assets/scss/utilities/_heading.scss
+++ b/PAMapp/assets/scss/utilities/_heading.scss
@@ -22,6 +22,10 @@
font-weight: bold;
}
+.lighter {
+ font-weight: lighter;
+}
+
.smTxt_bold {
font-size: 16px;
font-weight: bold;
diff --git a/PAMapp/assets/ts/const/quickFilter-questionList.ts b/PAMapp/assets/ts/const/quickFilter-questionList.ts
index ea35dca..a31bc0a 100644
--- a/PAMapp/assets/ts/const/quickFilter-questionList.ts
+++ b/PAMapp/assets/ts/const/quickFilter-questionList.ts
@@ -1,3 +1,4 @@
+import { Seniority } from "../models/enum/seniority";
import { QuestionOption } from "../models/quickFilter.model";
export const questionList: QuestionOption[] = [
@@ -27,6 +28,16 @@
],
type: 'checkbox'
},
+ {
+ name: 'seniority',
+ title: '撟渲��',
+ detail: [
+ { name: '撟渲��', value: Seniority.YOUNG, subTitle: '蝯血僑頛犖銝�����', className: '' },
+ { name: '鞈楛', value: Seniority.SENIOR, subTitle: '����麾', className: '' },
+ { name: '銝��', value: Seniority.UNLIMITED, subTitle: '撟湧翩銝����', className: '' }
+ ],
+ type: 'radio'
+ }
// {
// name: 'status',
// title: '銝�����',
diff --git a/PAMapp/assets/ts/models/quickFilter.model.ts b/PAMapp/assets/ts/models/quickFilter.model.ts
index 9445659..2db9ea3 100644
--- a/PAMapp/assets/ts/models/quickFilter.model.ts
+++ b/PAMapp/assets/ts/models/quickFilter.model.ts
@@ -9,13 +9,16 @@
value: string;
name?: string;
className: string;
+ subTitle?: string
}
export interface FastQueryParams {
gender : string,
communicationStyles: string[],
avgScore : number,
- status : string
+ status : string,
+ /** "鞈楛"撣�"SENIOR"��"撟渲��"撣�"YOUNG"��"銝��"撣�"UNLIMITED" */
+ seniority : string
}
export interface Selected {
diff --git a/PAMapp/components/QuickFilter/QuickFilterSelector.vue b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
index e6800fb..b286ecf 100644
--- a/PAMapp/components/QuickFilter/QuickFilterSelector.vue
+++ b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
@@ -2,7 +2,7 @@
<div>
<div class="mb-10" v-if="questionOption.title !== '憿批��批'">
<span class="mdTxt"
- >{{questionOption.title === '憿批�遛��漲' ? '靽憿批�遛��漲' : questionOption.title}}
+ >{{questionOption.title}}
</span>
<span
class="smTxt_bold text--primary"
@@ -14,7 +14,10 @@
>������</span>
</div>
- <div class="quickBtnBlock" v-if="questionOption.name === 'communicationStyles'">
+ <!-------------------- 皞�◢� -------------------->
+ <div class="quickBtnBlock"
+ v-if="questionOption.name === 'communicationStyles'"
+ >
<el-checkbox-group
class="pam-quickFilter-checkbox"
v-model="pickedItem.communicationStyles"
@@ -29,8 +32,37 @@
></el-checkbox>
</el-checkbox-group>
</div>
-
- <div class="quickBtnBlock" v-else-if="questionOption.name === 'gender'">
+ <!-------------------- 撟渲�� -------------------->
+ <div class="quickBtnBlock pam-radio-group"
+ v-else-if="questionOption.name === 'seniority'"
+ >
+ <div
+ v-for="(i, index) in questionOption.detail"
+ :key="index"
+ class="pam-radio"
+ >
+ <input
+ :id="i.value"
+ type="radio"
+ name="seniority"
+ :value="i.value"
+ class="el-radio-input"
+ v-model="pickedItem.seniority"
+ >
+ <label
+ :for="i.value"
+ class="el-radio-label"
+ :class="i.className"
+ >
+ <p>{{i.name}}</p>
+ <p class="subtitle">{{i.subTitle}}</p>
+ </label>
+ </div>
+ </div>
+ <!-------------------- �批 -------------------->
+ <div class="quickBtnBlock"
+ v-else-if="questionOption.name === 'gender'"
+ >
<el-radio-group
class="pam-quickFilter-radio"
v-model="pickedItem.gender"
@@ -43,8 +75,8 @@
>{{i.name}}</el-radio>
</el-radio-group>
</div>
-
- <div v-else>
+ <!-------------------- 皛踵�漲 -------------------->
+ <div v-else>
<el-rate
v-if="!hideReviews"
class="pam-quickFilter-rate"
@@ -74,7 +106,8 @@
communicationStyles: [],
status: '',
gender: '',
- avgScore: 0
+ avgScore: 0,
+ seniority: ''
}
hideReviews = hideReviews ;
@@ -82,36 +115,34 @@
@Prop() isOpenQuestionPopUp!: boolean;
@Prop() confirmItem!: Selected[];
- @Watch('isOpenQuestionPopUp', {immediate: true}) onPopUpChange() {
+ @Watch('isOpenQuestionPopUp', {immediate: true})
+ onPopUpChange() {
this.pickedItem = {
- communicationStyles: this.communicationStyles,
+ communicationStyles: this.getCommunicationStyles(),
status: '',
- gender: this.gender,
- avgScore: this.avgScore
+ gender: this.getGender(),
+ avgScore: this.getAvgScore(),
+ seniority: this.getSeniority()
}
}
- get gender() {
- const filter = this.confirmItem.filter(item => item.option === 'gender');
- return filter.length > 0 ? filter[0].value : '';
+ @Emit('confirm')
+ confirm() {
+ const name = this.questionOption.name;
+ return {
+ option: name,
+ value: this.pickedItem[name]
+ }
}
- get avgScore() {
- const filter = this.confirmItem.filter(item => item.option === 'avgScore');
- return filter.length > 0 ? filter[0].value : 0;
- }
- get communicationStyles() {
- return this.confirmItem
- .filter(item => item.option === 'communicationStyles')
- .map(item => item.value);
- }
-
+ //////////////////////////////////////////////////////////////////
get isDisabled() {
const name = this.questionOption.name;
return name === 'gender' && !this.pickedItem[name]
|| name === 'avgScore' && !this.pickedItem[name]
|| name === 'communicationStyles' && !this.pickedItem[name].length
+ || name === 'seniority' && !this.pickedItem[name]
}
selectedCommunicationStyles() {
@@ -120,13 +151,31 @@
}
}
- @Emit('confirm')
- confirm() {
- const name = this.questionOption.name;
- return {
- option: this.questionOption.name,
- value: this.pickedItem[name]
- }
+
+ //////////////////////////////////////////////////////////////////
+ private getGender(): string {
+ return this.filterSingleSelected('gender');
+ }
+
+ private getAvgScore(): number {
+ return this.filterSingleSelected('avgScore');
+ }
+
+ private getCommunicationStyles(): string[] {
+ return this.confirmItem
+ .filter(item => item.option === 'communicationStyles')
+ .map(item => item.value);
+ }
+
+ private getSeniority(): string {
+ return this.filterSingleSelected('seniority');
+ }
+
+ private filterSingleSelected(name: string) {
+ const filter = this.confirmItem.filter(item => item.option === name);
+ return filter.length > 0
+ ? filter[0].value
+ : (name === 'avgScore' ? 0 : '');
}
}
</script>
@@ -136,8 +185,46 @@
.quickBtnBlock {
display: flex;
justify-content: space-between;
- align-content: space-between;
flex-wrap: wrap;
}
+ .pam-radio-group {
+ height: 240px;
+
+ .pam-radio {
+ width: 48%;
+ height: 110px;
+
+ .el-radio-input {
+ display: none;
+ }
+
+ .el-radio-label {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ box-shadow: 0 0 6px #22222229;
+ border-radius: 10px;
+ -webkit-tap-highlight-color: transparent;
+ font-size: 20px;
+ font-weight: bold;
+ color: $PRIMARY_BLACK;
+ cursor: pointer;
+
+ .subtitle {
+ font-size: 16px;
+ font-weight: lighter;
+ }
+ }
+
+ .el-radio-input:checked ~ .el-radio-label {
+ background-color: $PEACH;
+ color: $PRIMARY_WHITE;
+ }
+ }
+ }
+
</style>
\ No newline at end of file
diff --git a/PAMapp/pages/quickFilter/index.vue b/PAMapp/pages/quickFilter/index.vue
index 7c8764f..d978446 100644
--- a/PAMapp/pages/quickFilter/index.vue
+++ b/PAMapp/pages/quickFilter/index.vue
@@ -17,6 +17,10 @@
@removeTag="removeTag(item.value)"
>
<span v-if="item.option === 'gender'">{{item.value === 'male' ? '���' : '憟單��'}}</span>
+ <span v-else-if="item.option === 'seniority'" class="mdTxt lighter">
+ {{item.value | formatSeniorityTitle}}
+ <span class="smTxt">{{item.value | formatSenioritySubTitle}}</span>
+ </span>
<!-- TODO:���遛��漲 -->
<!-- <span v-else-if="item.option === 'avgScore'">{{item.value + '��誑銝遛��漲'}}</span> -->
<span v-else>{{item.value}}</span>
@@ -67,12 +71,25 @@
<script lang="ts">
import { Vue, Component, namespace } from 'nuxt-property-decorator';
import { Consultant } from '~/assets/ts/models/consultant.model';
-import { fastQuery } from '~/assets/ts/api/consultant';
import { questionList } from '~/assets/ts/const/quickFilter-questionList';
import { FastQueryParams, QuestionOption, Selected } from '~/assets/ts/models/quickFilter.model';
+import { fastQuery } from '~/assets/ts/api/consultant';
const localStorage = namespace('localStorage');
-@Component
+@Component({
+ filters: {
+ formatSeniorityTitle(value) {
+ if (value === 'SENIOR') return '鞈楛';
+ if (value === 'YOUNG') return '撟渲��';
+ return '銝��';
+ },
+ formatSenioritySubTitle(value) {
+ if (value === 'SENIOR') return '����麾';
+ if (value === 'YOUNG') return '蝯血僑頛犖銝�����';
+ return '撟湧翩銝����';
+ }
+ }
+})
export default class QuickFilter extends Vue {
@localStorage.Mutation storageQuickFilter!: (token: string) => void;
@localStorage.Getter quickFilterSelectedData!: Selected[];
@@ -110,25 +127,35 @@
}
isActive(name: string) {
- return name === 'gender' && !!this.gender()
- || name === 'avgScore' && !!this.avgScore()
- || name === 'communicationStyles' && !!this.communicationStyles().length
+ return name === 'gender' && !!this.getGender()
+ || name === 'avgScore' && !!this.getAvgScore()
+ || name === 'communicationStyles' && !!this.getCommunicationStyles().length
+ || name === 'seniority' && !!this.getSeniority()
}
//////////////// private ////////////////
- private gender(): string {
- const filter = this.confirmItem.filter(item => item.option === 'gender').map(i => i.value);
- return filter.length === 0 ? '' : filter[0];
+ private getGender(): string {
+ return this.filterSingleSelected('gender');
}
- private avgScore(): number {
- const filter = this.confirmItem.filter(item => item.option === 'avgScore').map(i => i.value);
- return filter.length === 0 ? '' : filter[0];
+ private getAvgScore(): number {
+ return this.filterSingleSelected('avgScore');
}
- private communicationStyles(): string[] {
+ private getSeniority(): string {
+ return this.filterSingleSelected('seniority');
+ }
+
+ private getCommunicationStyles(): string[] {
return this.confirmItem.filter(item => item.option === 'communicationStyles').map(i => i.value);
+ }
+
+ private filterSingleSelected(name: string) {
+ const filter = this.confirmItem.filter(item => item.option === name);
+ return filter.length > 0
+ ? filter[0].value
+ : (name === 'avgScore' ? 0 : '');
}
private setConfirmData(event: Selected) {
@@ -162,10 +189,11 @@
private getRecommendList() {
const data: FastQueryParams = {
- gender: this.gender(),
- communicationStyles: this.communicationStyles(),
- avgScore: this.avgScore(),
- status: ''
+ gender: this.getGender(),
+ communicationStyles: this.getCommunicationStyles(),
+ avgScore: this.getAvgScore(),
+ status: '',
+ seniority: this.getSeniority()
}
fastQuery(data).then((consultantList) => {
@@ -199,7 +227,7 @@
.quickBtnBlock {
display: flex;
width: 100%;
- // height: 132px;
+ height: 132px;
flex-wrap: wrap;
justify-content: space-between;
--
Gitblit v1.8.0