From b6661a090e8bcf8f45be24a01b6a7bb08e3aaff1 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 08 十二月 2021 08:50:04 +0800
Subject: [PATCH] refactor: pages component - separate vue files
---
PAMapp/components/QuickFilter/QuickFilterSelector.vue | 135 ++++++++++++++++++++++++++++-----------------
1 files changed, 84 insertions(+), 51 deletions(-)
diff --git a/PAMapp/components/QuickFilter/QuickFilterSelector.vue b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
index fabbf83..3ec2120 100644
--- a/PAMapp/components/QuickFilter/QuickFilterSelector.vue
+++ b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
@@ -6,79 +6,132 @@
</span>
<span
class="smTxt_bold text--primary"
- v-if="questionOption.name === 'style'"
- >�銴</span>
+ v-if="questionOption.name === 'communicationStyles'"
+ >(��憭��蝔�)</span>
<span
class="smTxt_bold text--primary"
- v-if="questionOption.name === 'satisfaction'"
+ v-if="questionOption.name === 'avgScore'"
>������</span>
</div>
- <div class="quickBtnBlock" v-if="questionOption.name === 'style'">
- <el-checkbox-group class="pam-quickFilter-checkbox" v-model="pickedItem.style">
+ <div class="quickBtnBlock" v-if="questionOption.name === 'communicationStyles'">
+ <el-checkbox-group
+ class="pam-quickFilter-checkbox"
+ v-model="pickedItem.communicationStyles"
+ >
<el-checkbox
v-for="(i, index) in questionOption.detail"
:key="index"
:label="i.value"
:name="i.value"
:class="i.className"
+ @change="selectedCommunicationStyles"
></el-checkbox>
</el-checkbox-group>
</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"
:label="i.value"
:class="i.className"
- ></el-radio>
- </el-radio-group>
- </div>
-
- <div class="quickBtnBlock" v-else-if="questionOption.name === 'loginState'">
- <el-radio-group class="pam-quickFilter-radio" v-model="pickedItem.loginState">
- <el-radio
- v-for="(i, index) in QuestionOption.detail"
- :key="index"
- :label="i.value"
- :class="i.className"
- ></el-radio>
+ >{{i.name}}</el-radio>
</el-radio-group>
</div>
<div v-else>
- <el-rate class="pam-quickFilter-rate" v-model="pickedItem.satisfaction"></el-rate>
+ <el-rate
+ class="pam-quickFilter-rate"
+ v-model="pickedItem.avgScore"
+ ></el-rate>
</div>
+
+ <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 { QuestionOption, selectedItem } from '~/pages/quickFilter/index.vue';
+import { Vue, Component, Prop, Watch, Emit } from 'nuxt-property-decorator';
+import { FastQueryParams } from '~/assets/ts/models/fast-query-params.model';
+import { Selected } from '~/assets/ts/models/selected.model';
+import { QuestionOption } from '~/pages/quickFilter/index.vue';
@Component
export default class QuickFilterDrawer extends Vue {
- pickedItem: selectedItem = {
- style: [],
- onlineState: '',
+ pickedItem: FastQueryParams = {
+ communicationStyles: [],
+ status: '',
gender: '',
- satisfaction: 0
+ avgScore: 0
}
- @PropSync('drawerVisible') isVisible!: boolean;
- @Prop() selectedItem!: selectedItem;
@Prop() questionOption!: QuestionOption;
+ @Prop() isOpenQuestionPopUp!: boolean;
+ @Prop() confirmItem!: Selected[];
- @Watch('selectedItem', {deep: true, immediate: true}) watchSelected(newValue: selectedItem) {
- if (newValue) {
- this.pickedItem = JSON.parse(JSON.stringify(this.selectedItem))
+ @Watch('isOpenQuestionPopUp', {immediate: true}) 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
+ }
+
+ selectedCommunicationStyles() {
+ if (this.pickedItem.communicationStyles.length > 2) {
+ this.pickedItem.communicationStyles.shift();
+ }
+ }
+
+ @Emit('confirm')
+ confirm() {
+ const name = this.questionOption.name;
+ return {
+ option: this.questionOption.name,
+ value: this.pickedItem[name]
}
}
}
+
</script>
<style lang="scss" scoped>
@@ -88,26 +141,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
+</style>
--
Gitblit v1.8.0