From 41daebaa3ffd0b99aac703208e4b6b2ec41c274e Mon Sep 17 00:00:00 2001
From: 劉鈞霖 <benson@gmail.com>
Date: 星期五, 19 十一月 2021 17:44:15 +0800
Subject: [PATCH] [ Update ] 修正可複選文案，將共用 css 先拉出，調整預約顧問 背景
---
PAMapp/components/QuickFilter/QuickFilterSelector.vue | 108 ++++++++++++++++++++++++++++++++++--------------------
1 files changed, 68 insertions(+), 40 deletions(-)
diff --git a/PAMapp/components/QuickFilter/QuickFilterSelector.vue b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
index cb2017b..b972c52 100644
--- a/PAMapp/components/QuickFilter/QuickFilterSelector.vue
+++ b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
@@ -7,7 +7,7 @@
<span
class="smTxt_bold text--primary"
v-if="questionOption.name === 'communicationStyles'"
- >�銴</span>
+ >(�銴)</span>
<span
class="smTxt_bold text--primary"
v-if="questionOption.name === 'avgScore'"
@@ -15,7 +15,10 @@
</div>
<div class="quickBtnBlock" v-if="questionOption.name === 'communicationStyles'">
- <el-checkbox-group class="pam-quickFilter-checkbox" v-model="pickedItem.communicationStyles">
+ <el-checkbox-group
+ class="pam-quickFilter-checkbox"
+ v-model="pickedItem.communicationStyles"
+ >
<el-checkbox
v-for="(i, index) in questionOption.detail"
:key="index"
@@ -27,7 +30,10 @@
</div>
<div class="quickBtnBlock" v-else-if="questionOption.name === 'gender'">
- <el-radio-group class="pam-quickFilter-radio" v-model="pickedItem.gender">
+ <el-radio-group
+ class="pam-quickFilter-radio"
+ v-model="pickedItem.gender"
+ >
<el-radio
v-for="(i, index) in questionOption.detail"
:key="index"
@@ -37,25 +43,27 @@
</el-radio-group>
</div>
- <div class="quickBtnBlock" v-else-if="questionOption.name === 'status'">
- <el-radio-group class="pam-quickFilter-radio" v-model="pickedItem.status">
- <el-radio
- v-for="(i, index) in QuestionOption.detail"
- :key="index"
- :label="i.value"
- :class="i.className"
- ></el-radio>
- </el-radio-group>
+ <div v-else>
+ <el-rate
+ class="pam-quickFilter-rate"
+ v-model="pickedItem.avgScore"
+ ></el-rate>
</div>
- <div v-else>
- <el-rate class="pam-quickFilter-rate" v-model="pickedItem.avgScore"></el-rate>
+ <div class="text--center mt-30">
+ <el-button
+ class="pam-select-confirm"
+ type="primary"
+ @click="confirm"
+ :disabled="isDisabled"
+ >蝣箄��</el-button>
</div>
+
</div>
</template>
<script lang="ts">
-import { Vue, Component, PropSync, Prop, Watch } from 'nuxt-property-decorator';
+import { Vue, Component, Prop, Watch, Emit } from 'nuxt-property-decorator';
import { FastQueryParams } from '~/assets/ts/api/consultant';
import { QuestionOption } from '~/pages/quickFilter/index.vue';
@@ -69,16 +77,56 @@
avgScore: 0
}
- @PropSync('drawerVisible') isVisible!: boolean;
- @Prop() selectedItem!: FastQueryParams;
@Prop() questionOption!: QuestionOption;
+ @Prop() isOpenQuestionPopUp!: boolean;
+ @Prop() confirmItem!: Selected[];
- @Watch('selectedItem', {deep: true, immediate: true}) watchSelected(newValue: FastQueryParams) {
- if (newValue) {
- this.pickedItem = JSON.parse(JSON.stringify(this.selectedItem))
+ @Watch('isOpenQuestionPopUp') onPopUpChange() {
+ this.pickedItem = {
+ communicationStyles: this.communicationStyles,
+ status: '',
+ gender: this.gender,
+ avgScore: this.avgScore
}
}
+ get gender() {
+ const filter = this.confirmItem.filter(item => item.option === 'gender');
+ return filter.length > 0 ? filter[0].value : '';
+ }
+
+ 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
+ }
+
+ @Emit('confirm')
+ confirm() {
+ const name = this.questionOption.name;
+ return {
+ option: this.questionOption.name,
+ value: this.pickedItem[name]
+ }
+ }
+
+}
+
+export interface Selected {
+ option: string;
+ value: any;
}
</script>
@@ -89,26 +137,6 @@
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
-
- .quickBtn {
- width: 48%;
- height: 110px;
- text-align: center;
- box-shadow: 0 0 6px #22222229;
- padding: auto 0 auto 0;
- border-radius: 10px;
- color: $PRIMARY_BLACK;
-
- &:hover,&:focus {
- color: $PRIMARY_BLACK;
- border-color: $PRIMARY_WHITE;
- background-color: $PRIMARY_WHITE;
- }
- }
-
- .quickBtn+.quickBtn {
- margin-left: 0;
- }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0