From 20b87b7eab9c600e2445548c4306ea1b8b37b275 Mon Sep 17 00:00:00 2001
From: HelenHuang <LinHuang@pollex.com.tw>
Date: 星期一, 06 十二月 2021 12:29:50 +0800
Subject: [PATCH] update#131467: [滿意度評分功能]-客戶進行滿意度評分API串接
---
PAMapp/pages/quickFilter/index.vue | 298 +++++++++++++++++++++++++++++++++--------------------------
1 files changed, 167 insertions(+), 131 deletions(-)
diff --git a/PAMapp/pages/quickFilter/index.vue b/PAMapp/pages/quickFilter/index.vue
index 146abaf..8961922 100644
--- a/PAMapp/pages/quickFilter/index.vue
+++ b/PAMapp/pages/quickFilter/index.vue
@@ -5,191 +5,235 @@
v-for="(question, index) in questionList"
:key="index"
class="subTitle quickBtn"
- :disabled="question.name === 'onlineState'"
-
- @click="openDrawer(question)"
+ :class="{'isActive': isActive(question.name)}"
+ @click="openPopUp(question)"
>{{question.title}}</el-button>
</div>
-
<h5 class="mdTxt mb-10 mt-30">蝭拚璇辣</h5>
<div>
- <el-tag
- v-if="selectedItem.gender"
- class="pam-tag p"
- closable
- type="''"
- @close="removeTag('gender')"
- >{{selectedItem.gender}}</el-tag>
- <el-tag
- v-if="selectedItem.satisfaction"
- class="pam-tag p"
- closable
- type="''"
- @close="removeTag('satisfaction')"
- >{{selectedItem.satisfaction + '��誑銝遛��漲'}}</el-tag>
-
- <template v-if="selectedItem.style.length > 0"
- >
- <el-tag
- v-for="(item, index) in selectedItem.style"
- :key="index"
- class="pam-tag p"
- closable
- type="''"
- @close="removeTag('style', index)"
- >{{item}}</el-tag>
+ <template v-if="confirmItem.length > 0">
+ <UiTags
+ v-for="(item, index) in confirmItem" :key="index"
+ @removeTag="removeTag(item.value)"
+ >
+ <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="!selectedItem.gender && !selectedItem.satisfaction && selectedItem.style.length === 0 && !selectedItem.onlineState">
+ <div
+ v-else
+ class="emptyBox text--mid_grey"
+ >
<p class="smTxt">撠蝭拚</p>
</div>
</div>
- <h5 class="mdTxt mb-10 mt-30">敹恍�祟���</h5>
- <template v-if="consultantList.length > 0">
- <QuickFilterConsultantCarousel></QuickFilterConsultantCarousel>
- </template>
+ <div class="mb-10 mt-30">
+ <span class="mdTxt">敹恍�祟���</span>
+ <span class="smTxt_bold text--prudential_grey ml-10">� {{consultantList.length}} 蝑�</span>
+ </div>
+ <div class="recommend pam-paragraph">
+ <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 :consultantList="consultantList"></QuickFilterConsultantList>
+ </template>
- <QuickFilterDrawer
- :drawerVisible.sync="questionDrawer"
- :questionOption="questionOption"
- :selectedItem="selectedItem"
- @selected="selected"
- ></QuickFilterDrawer>
+ <template v-else>
+ <div class="emptyBox text--mid_grey recommendStyle">
+ <p class="smTxt">撠��鞈��</p>
+ </div>
+ </template>
+ </div>
+
+ <PopUpFrame
+ :isOpen.sync="isOpenQuestionPopUp"
+ :drawerSize="questionOption.name === 'communicationStyles' ? '55%' : '35%'"
+ :dialogWidth="'400px'"
+ class="pam-myDemand-dialog"
+ >
+ <QuickFilterSelector
+ ref="quickFilterRef"
+ :isOpenQuestionPopUp="isOpenQuestionPopUp"
+ :questionOption="questionOption"
+ @confirm="confirm"
+ :confirmItem="confirmItem"
+ ></QuickFilterSelector>
+ </PopUpFrame>
</div>
</template>
<script lang="ts">
-import { Context } from '@nuxt/types';
-import { Vue, Component } from 'nuxt-property-decorator';
-import { Agents } from '~/plugins/api/home';
+import { Vue, Component, namespace } from 'nuxt-property-decorator';
+import { FastQueryParams } from '~/assets/ts/api/consultant';
+import { Consultants } from '~/assets/ts/models/consultant.model';
+import { Selected } from '~/components/QuickFilter/QuickFilterSelector.vue';
+import { fastQuery } from '~/assets/ts/api/consultant';
+const localStorage = namespace('localStorage');
@Component
export default class QuickFilter extends Vue {
- consultantList = [];
- questionDrawer = false;
+ @localStorage.Mutation storageQuickFilter!: (token: string) => void;
+ @localStorage.Getter quickFilterSelectedData!: Selected[];
+
+ isOpenQuestionPopUp = false;
+ consultantList: Consultants[] = [];
questionOption = {};
- selectedItem: selectedItem = {
- gender: '',
- satisfaction: 0,
- style: [],
- onlineState: ''
- };
+ confirmItem: Selected[] = [];
questionList: QuestionOption[] = [
{
name: 'gender',
title: '憿批��批',
- detail: ['���', '憟單��'],
+ detail: [
+ { name: '���', value: 'male', className: 'btn_man'},
+ { name: '憟單��', value: 'female', className: 'btn_woman'}
+ ],
type: 'radio'
},
{
- name: 'satisfaction',
+ name: 'avgScore',
title: '憿批�遛��漲',
detail: [],
type: ''
},
{
- name: 'style',
+ name: 'communicationStyles',
title: '皞�◢�',
- detail: ['雓寞��祕', '��翰銝餃��', '���', '�隢◢頞�'],
+ detail: [
+ { value: '雓寞��祕', className: 'btn_owl'},
+ { value: '��翰銝餃��', className: 'btn_tiger'},
+ { value: '���', className: 'btn_koala'},
+ { value: '�隢◢頞�', className: 'btn_peacock'}
+ ],
type: 'checkbox'
},
- {
- name: 'onlineState',
- title: '銝�����',
- detail: [],
- type: 'radio'
- }
+ // {
+ // name: 'status',
+ // title: '銝�����',
+ // detail: [],
+ // type: 'radio'
+ // }
];
- async asyncData(context: Context) {
- let consultantList: Agents[] = [];
-
- await context.$service.home.recommendConsultantList().then((result: Agents[]) => {
- consultantList = result;
- })
-
- return {
- consultantList,
+ mounted() {
+ if (this.quickFilterSelectedData && this.quickFilterSelectedData.length > 0) {
+ this.confirmItem = this.quickFilterSelectedData;
+ this.getRecommendList();
}
}
- openDrawer(question: QuestionOption) {
- this.questionDrawer = true;
+ 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;
}
- selected(event: selectedItem) {
-
- const name = event.name;
- if (name === 'gender') {
- this.selectedItem.gender = event.gender;
- }
-
- if (name === 'satisfaction') {
- this.selectedItem.satisfaction = event.satisfaction;
- }
-
- if (name === 'style'){
- this.selectedItem.style = event.style;
- }
-
+ removeTag(value: string) {
+ this.confirmItem = this.confirmItem.filter(item => item.value !== value);
+ this.confirmItem.length > 0 ? this.getRecommendList() : this.consultantList = [];
}
- removeTag(type: string, index: number = 0) {
+ confirm(event: Selected) {
+ this.setConfirmData(event);
+ this.confirmItem.length > 0 ? this.getRecommendList() : this.consultantList = [];
+ this.isOpenQuestionPopUp = false;
+ }
- if (type === 'gender') {
- this.selectedItem.gender = ''
+ 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: ''
}
- if (type === 'satisfaction') {
- this.selectedItem.satisfaction = 0
- }
-
- if (type === 'style') {
- this.selectedItem.style.splice(index, 1)
- }
-
+ fastQuery(data).then((res) => {
+ this.consultantList = res.data;
+ this.storageQuickFilter(JSON.stringify(this.confirmItem))
+ })
}
}
export interface QuestionOption {
title: string;
- detail: string[];
+ detail: Detail[];
type: string;
name: string;
}
-export interface selectedItem {
+interface Detail {
+ value: string;
name?: string;
- gender: string;
- satisfaction: number;
- style: string[];
- onlineState: 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;
}
}
- .bg-white {
+ .recommendStyle {
+ box-shadow: 0 0 6px #00000029;
background-color: $PRIMARY_WHITE;
}
@@ -205,35 +249,27 @@
height: 56px;
text-align: center;
box-shadow: 0 0 6px #22222229;
- border-color: $PRIMARY_WHITE;
border-radius: 10px;
- color: $PRIMARY_BLACK;
+ border-color: $CORAL;
- &:hover,&:focus {
- color: $PRIMARY_BLACK;
- border-color: $PRIMARY_WHITE;
- background-color: $PRIMARY_WHITE;
- }
-
- &:disabled {
+ &.isActive {
+ background-color: $CORAL;
color: $PRIMARY_WHITE;
- border-color: $LIGHT_GREY;
- background-color: $LIGHT_GREY;
}
}
.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;
}
}
--
Gitblit v1.8.0