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/pages/quickFilter/index.vue | 213 +----------------------------------------------------
1 files changed, 4 insertions(+), 209 deletions(-)
diff --git a/PAMapp/pages/quickFilter/index.vue b/PAMapp/pages/quickFilter/index.vue
index c6ef025..cb9f95a 100644
--- a/PAMapp/pages/quickFilter/index.vue
+++ b/PAMapp/pages/quickFilter/index.vue
@@ -64,213 +64,8 @@
</div>
</template>
-<script lang="ts">
-import { Vue, Component, namespace } from 'nuxt-property-decorator';
-import { FastQueryParams } from '~/assets/ts/api/consultant';
-import { Consultant } from '~/assets/ts/models/consultant.model';
-import { Selected } from '~/components/QuickFilter/QuickFilterSelector.vue';
-import { fastQuery } from '~/assets/ts/api/consultant';
+<script src="./quick-filter.component.ts"></script>
-const localStorage = namespace('localStorage');
-@Component
-export default class QuickFilter extends Vue {
- @localStorage.Mutation storageQuickFilter!: (token: string) => void;
- @localStorage.Getter quickFilterSelectedData!: Selected[];
-
- isOpenQuestionPopUp = false;
- consultantList: Consultant[] = [];
- questionOption = {};
- confirmItem: Selected[] = [];
- 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'
- // }
- ];
-
- mounted() {
- if (this.quickFilterSelectedData && this.quickFilterSelectedData.length > 0) {
- this.confirmItem = this.quickFilterSelectedData;
- this.getRecommendList();
- }
- }
-
- gender(): string {
- const filter = this.confirmItem.filter(item => item.option === 'gender').map(i => i.value);
- return filter.length === 0 ? '' : filter[0];
- }
-
- avgScore(): number {
- const filter = this.confirmItem.filter(item => item.option === 'avgScore').map(i => i.value);
- return filter.length === 0 ? '' : filter[0];
- }
-
- communicationStyles(): string[] {
- return this.confirmItem.filter(item => item.option === 'communicationStyles').map(i => i.value);
- }
-
- isActive(name: string) {
- return name === 'gender' && !!this.gender()
- || name === 'avgScore' && !!this.avgScore()
- || name === 'communicationStyles' && !!this.communicationStyles().length
- }
-
- openPopUp(question: QuestionOption) {
- this.questionOption = question;
- this.isOpenQuestionPopUp =true;
- }
-
- removeTag(value: string) {
- this.confirmItem = this.confirmItem.filter(item => item.value !== value);
- this.confirmItem.length > 0 ? this.getRecommendList() : this.consultantList = [];
- }
-
- confirm(event: Selected) {
- this.setConfirmData(event);
- this.confirmItem.length > 0 ? this.getRecommendList() : this.consultantList = [];
- this.isOpenQuestionPopUp = false;
- }
-
- setConfirmData(event: Selected) {
- if (event.option === 'communicationStyles') {
- this.filterCommunicationStyles(event);
- } else {
- const findIndex = this.confirmItem.findIndex(item => item.option === event.option);
- findIndex === -1 ? this.confirmItem.push(event) : this.confirmItem[findIndex] = event;
- }
- }
-
- filterCommunicationStyles(event: Selected) {
- const confirmValue = this.confirmItem
- .filter(item => item.option === 'communicationStyles')
- .map(i => i.value);
- const pickerValue = event.value;
-
- this.confirmItem = this.confirmItem
- .filter(item => pickerValue.includes(item.value) || item.option !== 'communicationStyles');
-
- const addValue = pickerValue.filter(item => !confirmValue.includes(item)).map(i => {
- return {
- option: 'communicationStyles',
- value: i
- }
- })
- if (addValue.length > 0) {
- this.confirmItem.push(...addValue);
- }
- }
-
- getRecommendList() {
- const data: FastQueryParams = {
- gender: this.gender(),
- communicationStyles: this.communicationStyles(),
- avgScore: this.avgScore(),
- status: ''
- }
-
- fastQuery(data).then((res) => {
- this.consultantList = res.data;
- this.storageQuickFilter(JSON.stringify(this.confirmItem))
- })
- }
-
-}
-
-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;
- border-color: $CORAL;
-
- &.isActive {
- background-color: $CORAL;
- color: $PRIMARY_WHITE;
- }
- }
- .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