From 44a2b26932910f69a233c2ae437bcdd0bd0a78c6 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期四, 23 十二月 2021 11:30:36 +0800
Subject: [PATCH] update: TODO#132409 調整年資btn樣式
---
PAMapp/components/QuickFilter/QuickFilterSelector.vue | 180 ++++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 140 insertions(+), 40 deletions(-)
diff --git a/PAMapp/components/QuickFilter/QuickFilterSelector.vue b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
index 915eca1..5aeb163 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,9 +75,10 @@
>{{i.name}}</el-radio>
</el-radio-group>
</div>
-
+ <!-------------------- 皛踵�漲 -------------------->
<div v-else>
<el-rate
+ v-if="!hideReviews"
class="pam-quickFilter-rate"
v-model="pickedItem.avgScore"
></el-rate>
@@ -65,53 +98,51 @@
<script lang="ts">
import { Vue, Component, Prop, Watch, Emit } from 'nuxt-property-decorator';
-import { FastQueryParams } from '~/assets/ts/api/consultant';
-import { QuestionOption } from '~/pages/quickFilter/index.vue';
-
+import { hideReviews } from '~/shared/const/hide-reviews';
+import { FastQueryParams, QuestionOption, Selected } from '~/shared/models/quick-filter.model';
@Component
export default class QuickFilterDrawer extends Vue {
-
pickedItem: FastQueryParams = {
communicationStyles: [],
status: '',
gender: '',
- avgScore: 0
+ avgScore: 0,
+ seniority: ''
}
+ hideReviews = hideReviews ;
@Prop() questionOption!: QuestionOption;
@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,20 +151,32 @@
}
}
- @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');
+ }
-export interface Selected {
- option: string;
- value: any;
+ 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>
@@ -142,8 +185,65 @@
.quickBtnBlock {
display: flex;
justify-content: space-between;
- align-content: space-between;
flex-wrap: wrap;
}
-</style>
\ No newline at end of file
+ .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;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ cursor: pointer;
+
+ .subtitle {
+ @extend .smTxt_bold;
+ color: $PRUDENTIAL_GREY;
+ }
+
+ &.btn_unlimited {
+ background-image: url('~/assets/images/quickFilter/btn_unlimited.svg');
+ }
+
+ &.btn_senior {
+ background-image: url('~/assets/images/quickFilter/btn_senior.svg');
+ }
+
+ &.btn_young {
+ background-image: url('~/assets/images/quickFilter/btn_young.svg');
+ }
+ }
+
+ .el-radio-input:checked ~ .el-radio-label {
+ background-color: $PEACH;
+ color: $PRIMARY_WHITE;
+ .subtitle {
+ color: $PRIMARY_WHITE;
+ font-weight: lighter;
+ }
+ }
+ }
+ }
+
+</style>
--
Gitblit v1.8.0