From 168d6c7a2272354e2a365a7c1b20e15d87546e2f Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期三, 10 十一月 2021 15:36:14 +0800
Subject: [PATCH] update: 快速篩選圖檔
---
PAMapp/components/QuickFilter/QuickFilterSelector.vue | 16 +++-
PAMapp/pages/quickFilter/index.vue | 115 ++++++++++++++++++++++++++------------
PAMapp/assets/scss/vendors/elementUI/_radio.scss | 16 +++++
PAMapp/assets/scss/vendors/elementUI/_checkbox.scss | 28 +++++++++
4 files changed, 133 insertions(+), 42 deletions(-)
diff --git a/PAMapp/assets/scss/vendors/elementUI/_checkbox.scss b/PAMapp/assets/scss/vendors/elementUI/_checkbox.scss
index e65c6b4..e174cc5 100644
--- a/PAMapp/assets/scss/vendors/elementUI/_checkbox.scss
+++ b/PAMapp/assets/scss/vendors/elementUI/_checkbox.scss
@@ -23,11 +23,39 @@
padding-left: 0;
text-align: center;
line-height: 110px;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
}
&.is-checked {
background-color: #22222229;
}
}
+
+ .btn_koala {
+ .el-checkbox__label {
+ background-image: url('~/assets/images/quickFilter/btn_koala.svg');
+ }
+ }
+
+ .btn_owl {
+ .el-checkbox__label {
+ background-image: url('~/assets/images/quickFilter/btn_owl.svg');
+ }
+ }
+
+ .btn_peacock {
+ .el-checkbox__label {
+ background-image: url('~/assets/images/quickFilter/btn_peacock.svg');
+ }
+ }
+
+ .btn_tiger {
+ .el-checkbox__label {
+ background-image: url('~/assets/images/quickFilter/btn_tiger.svg');
+ }
+ }
+
}
diff --git a/PAMapp/assets/scss/vendors/elementUI/_radio.scss b/PAMapp/assets/scss/vendors/elementUI/_radio.scss
index d538a51..e56a30c 100644
--- a/PAMapp/assets/scss/vendors/elementUI/_radio.scss
+++ b/PAMapp/assets/scss/vendors/elementUI/_radio.scss
@@ -21,7 +21,9 @@
display: block;
line-height: 110px;
padding-left: 0;
-
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
}
&.is-checked {
@@ -41,4 +43,16 @@
border: none;
}
}
+}
+
+.btn_woman {
+ .el-radio__label {
+ background-image: url('~/assets/images/quickFilter/btn_woman.svg');
+ }
+}
+
+.btn_man {
+ .el-radio__label {
+ background-image: url('~/assets/images/quickFilter/btn_man.svg');
+ }
}
\ No newline at end of file
diff --git a/PAMapp/components/QuickFilter/QuickFilterSelector.vue b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
index 18d8a2b..fabbf83 100644
--- a/PAMapp/components/QuickFilter/QuickFilterSelector.vue
+++ b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
@@ -19,8 +19,9 @@
<el-checkbox
v-for="(i, index) in questionOption.detail"
:key="index"
- :label="i"
- :name="i"
+ :label="i.value"
+ :name="i.value"
+ :class="i.className"
></el-checkbox>
</el-checkbox-group>
</div>
@@ -30,7 +31,9 @@
<el-radio
v-for="(i, index) in questionOption.detail"
:key="index"
- :label="i"></el-radio>
+ :label="i.value"
+ :class="i.className"
+ ></el-radio>
</el-radio-group>
</div>
@@ -39,7 +42,9 @@
<el-radio
v-for="(i, index) in QuestionOption.detail"
:key="index"
- :label="i"></el-radio>
+ :label="i.value"
+ :class="i.className"
+ ></el-radio>
</el-radio-group>
</div>
@@ -50,7 +55,7 @@
</template>
<script lang="ts">
-import { Vue, Component, PropSync, Prop, Watch, Emit } from 'nuxt-property-decorator';
+import { Vue, Component, PropSync, Prop, Watch } from 'nuxt-property-decorator';
import { QuestionOption, selectedItem } from '~/pages/quickFilter/index.vue';
@Component
@@ -72,6 +77,7 @@
this.pickedItem = JSON.parse(JSON.stringify(this.selectedItem))
}
}
+
}
</script>
diff --git a/PAMapp/pages/quickFilter/index.vue b/PAMapp/pages/quickFilter/index.vue
index 72b49a3..9f56a03 100644
--- a/PAMapp/pages/quickFilter/index.vue
+++ b/PAMapp/pages/quickFilter/index.vue
@@ -6,7 +6,6 @@
:key="index"
class="subTitle quickBtn"
:disabled="question.name === 'onlineState'"
-
@click="openPopUp(question)"
>{{question.title}}</el-button>
</div>
@@ -41,14 +40,23 @@
</div>
</div>
- <h5 class="mdTxt mb-10 mt-30">敹恍�祟���</h5>
- <template v-if="consultantList.length > 0">
- <QuickFilterConsultantList></QuickFilterConsultantList>
- </template>
+ <div class="mb-10 mt-30">
+ <span class="mdTxt">敹恍�祟���</span>
+ <span class="smTxt_bold text--prudential_grey ml-10">� 0 蝑�</span>
+ </div>
+ <div class="recommend">
+ <img class="img" src="~/assets/images/quickFilter/recommend.svg" alt="">
- <template v-else>
- <div class="emptyBox bg-white"></div>
- </template>
+ <template v-if="consultantList.length > 0">
+ <QuickFilterConsultantList></QuickFilterConsultantList>
+ </template>
+
+ <template v-else>
+ <div class="emptyBox text--mid_grey recommendStyle">
+ <p class="smTxt">撠��鞈��</p>
+ </div>
+ </template>
+ </div>
<Ui-Drawer
:isVisible.sync="questionDrawer"
@@ -63,7 +71,7 @@
></QuickFilterSelector>
</Ui-Drawer>
- <Ui-Dialog :isVisible.sync="dialog"
+ <Ui-Dialog :isVisible.sync="questionDialog"
@closeDialog="closePopUp"
>
<QuickFilterSelector
@@ -82,10 +90,11 @@
import { Consultants } from '~/assets/ts/api/consultant';
import { isMobileDevice } from '~/assets/ts/device';
import QuickFilterDrawer from '~/components/QuickFilter/QuickFilterSelector.vue';
+import { fastQuery } from '~/assets/ts/api/consultant';
@Component
export default class QuickFilter extends Vue {
- dialog = false;
+ questionDialog = false;
consultantList = [];
questionDrawer = false;
questionOption = {};
@@ -99,8 +108,15 @@
{
name: 'gender',
title: '憿批��批',
- detail: ['���', '憟單��'],
- type: 'radio'
+ detail: [
+ {
+ value: '���',
+ className: 'btn_man'
+ }, {
+ value: '憟單��',
+ className: 'btn_woman'
+ }],
+ type: 'radio',
},
{
name: 'satisfaction',
@@ -111,7 +127,20 @@
{
name: 'style',
title: '皞�◢�',
- detail: ['雓寞��祕', '��翰銝餃��', '���', '�隢◢頞�'],
+ detail: [
+ {
+ value: '雓寞��祕',
+ className: 'btn_owl'
+ },{
+ value: '��翰銝餃��',
+ className: 'btn_tiger'
+ },{
+ value: '���',
+ className: 'btn_koala'
+ }, {
+ value: '�隢◢頞�',
+ className: 'btn_peacock'
+ }],
type: 'checkbox'
},
{
@@ -125,9 +154,9 @@
async asyncData(context: Context) {
let consultantList: Consultants[] = [];
- await context.$service.home.recommendConsultantList().then((result: Consultants[]) => {
- consultantList = result;
- })
+ // await context.$service.home.recommendConsultantList().then((result: Consultants[]) => {
+ // consultantList = result;
+ // })
return {
consultantList,
@@ -136,7 +165,7 @@
openPopUp(question: QuestionOption) {
this.questionOption = question;
- isMobileDevice() ? this.questionDrawer = true : this.dialog = true;
+ isMobileDevice() ? this.questionDrawer = true : this.questionDialog = true;
}
removeTag(type: string, index: number = 0) {
@@ -157,15 +186,29 @@
closePopUp() {
this.selectedItem = JSON.parse(JSON.stringify((this.$refs.quickFilterRef as QuickFilterDrawer).pickedItem));
+
+ const data = {
+ gender: 'male',
+ communicationStyle: '雓寞��祕',
+ avgScore: 5,
+ status: 'online'
+ }
+
+ fastQuery(data).then((res) => console.log(res))
}
}
export interface QuestionOption {
title: string;
- detail: string[];
+ detail: Detail[];
type: string;
name: string;
+}
+
+interface Detail {
+ value: string;
+ className: string;
}
export interface selectedItem {
@@ -181,16 +224,17 @@
.emptyBox {
width: 100%;
height: 100px;
-
border: solid 1px $LIGHT_GREY;
text-align: center;
+ border-radius: 10px;
.smTxt {
line-height: 100px;
}
}
- .bg-white {
+ .recommendStyle {
+ box-shadow: 0 0 6px #00000029;
background-color: $PRIMARY_WHITE;
}
@@ -206,36 +250,35 @@
height: 56px;
text-align: center;
box-shadow: 0 0 6px #22222229;
- border-color: $PRIMARY_WHITE;
border-radius: 10px;
- color: $PRIMARY_BLACK;
-
- &:hover,&:focus {
- color: $PRIMARY_BLACK;
- border-color: $PRIMARY_WHITE;
- background-color: $PRIMARY_WHITE;
- }
+ 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;
}
- .is-disabled {
- background-color: $LIGHT_GREY;
- color: $PRIMARY_WHITE;
+ }
- &:hover,&:focus {
- color: $PRIMARY_WHITE;
- border-color: $LIGHT_GREY;
- background-color: $LIGHT_GREY;
- }
+ .recommend {
+ position: relative;
+
+ .img {
+ position: absolute;
+ top: -50px;
+ right: 10px;
}
+
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0