From b4d6944076f1df6eedaae35c4c2a7072fe988e8a Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期二, 30 四月 2024 15:34:02 +0800
Subject: [PATCH] update: package-lock.json
---
PAMapp/components/QuickFilter/QuickFilterSelector.vue | 186 +++++++++++++++++++++++++++++++++-------------
1 files changed, 134 insertions(+), 52 deletions(-)
diff --git a/PAMapp/components/QuickFilter/QuickFilterSelector.vue b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
index fabbf83..5baa545 100644
--- a/PAMapp/components/QuickFilter/QuickFilterSelector.vue
+++ b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
@@ -2,82 +2,180 @@
<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"
- 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">
+ <!-------------------- 撟渲�� -------------------->
+ <div class="quickBtnBlock"
+ v-else-if="questionOption.name === 'seniority'"
+ >
+ <el-radio-group
+ class="pam-quickFilter-radio pam-radio-group"
+ v-model="pickedItem.seniority"
+ >
<el-radio
v-for="(i, index) in questionOption.detail"
:key="index"
:label="i.value"
:class="i.className"
- ></el-radio>
+ >
+ <div>{{i.name}}</div>
+ <div class="subtitle">{{i.subTitle}}</div>
+ </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">
+ <!-------------------- �批 -------------------->
+ <div class="quickBtnBlock"
+ v-else-if="questionOption.name === 'gender'"
+ >
+ <el-radio-group
+ class="pam-quickFilter-radio"
+ v-model="pickedItem.gender"
+ >
<el-radio
- v-for="(i, index) in QuestionOption.detail"
+ 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
+ v-if="!hideReviews"
+ class="pam-rate mt-30"
+ 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 { hideReviews } from '~/shared/const/hide-reviews';
+import { FastQueryParams, QuestionOption, Selected } from '~/shared/models/quick-filter.model';
@Component
export default class QuickFilterDrawer extends Vue {
+ @Prop()
+ questionOption!: QuestionOption;
- pickedItem: selectedItem = {
- style: [],
- onlineState: '',
+ @Prop()
+ isOpenQuestionPopUp!: boolean;
+
+ @Prop()
+ confirmItem!: Selected[];
+
+ pickedItem: FastQueryParams = {
+ communicationStyles: [],
+ status: '',
gender: '',
- satisfaction: 0
+ avgScore: 0,
+ seniority: ''
}
+ hideReviews = hideReviews ;
- @PropSync('drawerVisible') isVisible!: boolean;
- @Prop() selectedItem!: selectedItem;
- @Prop() questionOption!: QuestionOption;
+ //////////////////////////////////////////////////////////////////
- @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.getCommunicationStyles(),
+ status: '',
+ gender: this.getGender(),
+ avgScore: this.getAvgScore(),
+ seniority: this.getSeniority()
}
}
+ @Emit('confirm')
+ confirm() {
+ const name = this.questionOption.name;
+ return {
+ option: name,
+ value: this.pickedItem[name]
+ }
+ }
+
+ //////////////////////////////////////////////////////////////////
+
+ 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() {
+ if (this.pickedItem.communicationStyles.length > 2) {
+ this.pickedItem.communicationStyles.shift();
+ }
+ }
+
+ //////////////////////////////////////////////////////////////////
+
+ 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>
@@ -86,28 +184,12 @@
.quickBtnBlock {
display: flex;
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
+ .pam-radio-group {
+ height: 240px;
+ flex-wrap: wrap;
+ }
+
+</style>
--
Gitblit v1.8.0