From ac235850a9287dae6977c964213176fa7c86b140 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期四, 09 十二月 2021 14:42:20 +0800
Subject: [PATCH] Merge branch 'refactor/separate-vue' of ssh://192.168.0.10:29418/pcalife/PAM into refactor/separate-vue
---
PAMapp/pages/quickFilter/index.vue | 230 ++++++---------------------------------------------------
1 files changed, 25 insertions(+), 205 deletions(-)
diff --git a/PAMapp/pages/quickFilter/index.vue b/PAMapp/pages/quickFilter/index.vue
index 52889a6..cb9f95a 100644
--- a/PAMapp/pages/quickFilter/index.vue
+++ b/PAMapp/pages/quickFilter/index.vue
@@ -5,37 +5,26 @@
v-for="(question, index) in questionList"
:key="index"
class="subTitle quickBtn"
- :disabled="question.name === 'status'"
+ :class="{'isActive': isActive(question.name)}"
@click="openPopUp(question)"
>{{question.title}}</el-button>
</div>
<h5 class="mdTxt mb-10 mt-30">蝭拚璇辣</h5>
<div>
- <Ui-Tags
- v-if="selectedItem.gender"
- @removeTag="removeTag('gender')"
- >
- {{selectedItem.gender === 'male' ? '���' : '憟單��'}}
- </Ui-Tags>
- <Ui-Tags
- v-if="selectedItem.avgScore"
- @removeTag="removeTag('avgScore')"
- >
- {{selectedItem.avgScore + '��誑銝遛��漲'}}
- </Ui-Tags>
- <template v-if="selectedItem.communicationStyles">
- <Ui-Tags
- v-for="(item, index) in selectedItem.communicationStyles"
- :key="index"
- @removeTag="removeTag('communicationStyles', index)"
+ <template v-if="confirmItem.length > 0">
+ <UiTags
+ v-for="(item, index) in confirmItem" :key="index"
+ @removeTag="removeTag(item.value)"
>
- {{item}}
- </Ui-Tags>
+ <span v-if="item.option === 'gender'">{{item.value === 'male' ? '���' : '憟單��'}}</span>
+ <span v-else-if="item.option === 'avgScore'">{{item.value + '��誑銝遛��漲'}}</span>
+ <span v-else>{{item.value}}</span>
+ </UiTags>
</template>
-
- <div class="mb-10" v-if="selectedItem.onlineState"></div>
- <div class="emptyBox text--mid_grey"
- v-if="isEmpty">
+ <div
+ v-else
+ class="emptyBox text--mid_grey"
+ >
<p class="smTxt">撠蝭拚</p>
</div>
</div>
@@ -44,7 +33,7 @@
<span class="mdTxt">敹恍�祟���</span>
<span class="smTxt_bold text--prudential_grey ml-10">� {{consultantList.length}} 蝑�</span>
</div>
- <div class="recommend">
+ <div class="recommend pam-paragraph">
<img class="img" src="~/assets/images/quickFilter/recommend.svg" alt="">
<template v-if="consultantList.length > 0">
@@ -59,193 +48,24 @@
</div>
<PopUpFrame
- :isOpen.sync="questionPopUp"
- :drawerSize="questionOption.name === 'communicationStyles' ? '50%' : '30%'"
- @update:isOpen="closePopUp"
+ :isOpen.sync="isOpenQuestionPopUp"
+ :drawerSize="questionOption.name === 'communicationStyles' ? '55%' : '35%'"
+ :dialogWidth="'400px'"
+ class="pam-myDemand-dialog"
>
<QuickFilterSelector
ref="quickFilterRef"
- :drawerVisible.sync="questionPopUp"
+ :isOpenQuestionPopUp="isOpenQuestionPopUp"
:questionOption="questionOption"
- :selectedItem="selectedItem"
+ @confirm="confirm"
+ :confirmItem="confirmItem"
></QuickFilterSelector>
</PopUpFrame>
-
</div>
</template>
-<script lang="ts">
-import { Vue, Component } from 'nuxt-property-decorator';
-import { Consultants, FastQueryParams } from '~/assets/ts/api/consultant';
-import QuickFilterDrawer from '~/components/QuickFilter/QuickFilterSelector.vue';
-import { fastQuery } from '~/assets/ts/api/consultant';
+<script src="./quick-filter.component.ts"></script>
-@Component
-export default class QuickFilter extends Vue {
- questionPopUp = false;
- consultantList: Consultants[] = [];
- questionOption = {};
- selectedItem: FastQueryParams = {
- gender: '',
- avgScore: 0,
- communicationStyles: [],
- status: ''
- };
- questionList: QuestionOption[] = [
- {
- name: 'gender',
- title: '憿批��批',
- detail: [
- { name: '���', value: 'male', className: 'btn_man'},
- { name: '憟單��', value: 'female', className: 'btn_woman'}
- ],
- type: 'radio',
- },
- {
- name: 'avgScore',
- title: '憿批�遛��漲',
- detail: [],
- type: ''
- },
- {
- name: 'communicationStyles',
- title: '皞�◢�',
- detail: [
- { value: '雓寞��祕', className: 'btn_owl'},
- { value: '��翰銝餃��', className: 'btn_tiger'},
- { value: '���', className: 'btn_koala'},
- { value: '�隢◢頞�', className: 'btn_peacock'}
- ],
- type: 'checkbox'
- },
- {
- name: 'status',
- title: '銝�����',
- detail: [],
- type: 'radio'
- }
- ];
-
- get isEmpty() {
- return !this.selectedItem.gender
- && !this.selectedItem.avgScore
- && this.selectedItem.communicationStyles.length === 0
- && !this.selectedItem.status
- }
-
- openPopUp(question: QuestionOption) {
- this.questionOption = question;
- this.questionPopUp =true;
- }
-
- removeTag(type: string, index: number = 0) {
-
- if (type === 'gender') {
- this.selectedItem.gender = ''
- }
-
- if (type === 'avgScore') {
- this.selectedItem.avgScore = 0
- }
-
- if (type === 'communicationStyles') {
- this.selectedItem.communicationStyles.splice(index, 1)
- }
-
- this.isEmpty ? this.consultantList = [] : this.getRecommendList();
- }
-
- closePopUp() {
- this.selectedItem = JSON.parse(JSON.stringify((this.$refs.quickFilterRef as QuickFilterDrawer).pickedItem));
- this.getRecommendList();
- }
-
- getRecommendList() {
- const data = {
- gender: this.selectedItem.gender,
- communicationStyles: this.selectedItem.communicationStyles,
- avgScore: this.selectedItem.avgScore,
- status: this.selectedItem.status
- }
-
- fastQuery(data).then((res) => this.consultantList = res.data)
- }
-
-}
-
-export interface QuestionOption {
- title: string;
- detail: Detail[];
- type: string;
- name: string;
-}
-
-interface Detail {
- value: string;
- name?: string;
- className: string;
-}
-
-</script>
-
-<style lang="scss" scoped>
- .emptyBox {
- width: 100%;
- height: 100px;
- border: solid 1px $LIGHT_GREY;
- text-align: center;
- border-radius: 10px;
-
- .smTxt {
- line-height: 100px;
- }
- }
-
- .recommendStyle {
- box-shadow: 0 0 6px #00000029;
- background-color: $PRIMARY_WHITE;
- }
-
- .quickBtnBlock {
- display: flex;
- width: 100%;
- height: 132px;
- flex-wrap: wrap;
- justify-content: space-between;
-
- .quickBtn {
- width: 48%;
- height: 56px;
- text-align: center;
- box-shadow: 0 0 6px #22222229;
- border-radius: 10px;
- color: $PRIMARY_WHITE;
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- background-image: url('~/assets/images/quickFilter/btn_bg.svg');
-
- &:disabled {
- color: $PRIMARY_WHITE;
- border-color: $LIGHT_GREY;
- background-color: $LIGHT_GREY;
- background-image: none;
- }
- }
- .quickBtn+.quickBtn {
- margin-left: 0;
- }
-
- }
-
- .recommend {
- position: relative;
-
- .img {
- position: absolute;
- top: -50px;
- right: 10px;
- }
- }
-
-</style>
\ No newline at end of file
+<style lang="scss">
+ @import "./quick-filter.component.scss";
+</style>
--
Gitblit v1.8.0