From 7c291a812e980917bc9f64a3f251f2a08ae7f157 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期三, 10 十一月 2021 18:05:34 +0800
Subject: [PATCH] TODO#130020 [快速篩選] API 串接
---
PAMapp/components/QuickFilter/QuickFilterSelector.vue | 35 +++++---
PAMapp/pages/quickFilter/index.vue | 113 +++++++++++----------------
PAMapp/components/Consultant/ConsultantCard.vue | 3
PAMapp/layouts/default.vue | 2
PAMapp/components/QuickFilter/QuickFilterConsultantList.vue | 8 +
PAMapp/assets/ts/api/consultant.ts | 33 ++++++++
6 files changed, 108 insertions(+), 86 deletions(-)
diff --git a/PAMapp/assets/ts/api/consultant.ts b/PAMapp/assets/ts/api/consultant.ts
index b5711ac..3b669ae 100644
--- a/PAMapp/assets/ts/api/consultant.ts
+++ b/PAMapp/assets/ts/api/consultant.ts
@@ -1,5 +1,7 @@
import axios from 'axios';
-import { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios'
+import { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios';
+import { MessageBox } from 'element-ui';
+import Router from 'vue-router';
export const service = axios.create({
baseURL: 'http://localhost:8080/api',
@@ -9,14 +11,26 @@
})
service.interceptors.request.use(function (config: AxiosRequestConfig) {
+ window.$nuxt.$loading.start();
return config;
}, function (error: AxiosError) {
return Promise.reject(error);
});
service.interceptors.response.use(function (response: AxiosResponse) {
+ window.$nuxt.$loading.finish();
return response;
}, function (error: AxiosError) {
+ console.log(error.request.status)
+ const errorCode = error.request.status;
+ if (errorCode === 401) {
+ window.$nuxt.$router.push('/login');
+ } else {
+ // MessageBox.alert(error.request.statusText, errorCode, {
+ // confirmButtonText: '蝣箏��' });
+ }
+
+ window.$nuxt.$loading.finish();
return Promise.reject(error);
});
@@ -35,6 +49,16 @@
return service.get('/consultant/favorite');
}
+// 敹恍�祟�
+export function fastQuery(data: FastQueryParams) {
+ return service.post('/consultant/fastQuery', data)
+}
+
+// ��憿批��
+export function addFavoriteConsultant(agentNoList: string[]) {
+ return service.post('/consultant/favorite', agentNoList)
+}
+
export interface Consultants {
agentNo: number,
name: string,
@@ -45,4 +69,11 @@
updateTime: Date,
seniority: string,
contactStatus?: string;
+}
+
+export interface FastQueryParams {
+ gender: string,
+ communicationStyles: string[],
+ avgScore: number,
+ status: string
}
\ No newline at end of file
diff --git a/PAMapp/components/Consultant/ConsultantCard.vue b/PAMapp/components/Consultant/ConsultantCard.vue
index baa10d8..47965a1 100644
--- a/PAMapp/components/Consultant/ConsultantCard.vue
+++ b/PAMapp/components/Consultant/ConsultantCard.vue
@@ -66,6 +66,7 @@
<script lang="ts">
import { Vue, Component, Prop, Emit } from 'nuxt-property-decorator';
import { Consultants } from '~/assets/ts/api/consultant';
+import { isLogin } from '~/assets/ts/auth';
import { isMobileDevice } from '~/assets/ts/device';
@Component
@@ -96,7 +97,7 @@
reserveCommunication() {
if (this.agentInfo.contactStatus === 'picked') {
- this.$router.push('/communication/myDemand')
+ isLogin() ? this.$router.push('/questionnaire') : this.$router.push('/login');
} else {
this.width = isMobileDevice() ? '80%' : '';
this.isVisibleDialog = true;
diff --git a/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue b/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue
index d213f80..888f309 100644
--- a/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue
+++ b/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue
@@ -45,7 +45,7 @@
<span>憿批��</span>
</el-button>
<el-button
- @click="$router.push('/communication/myDemand')"
+ @click="reserveCommunication"
type="primary"
>�脰����</el-button>
</div>
@@ -85,6 +85,7 @@
<script lang="ts">
import { ElCarousel } from 'element-ui/types/carousel';
import { Vue, Component } from 'vue-property-decorator';
+import { isLogin } from '~/assets/ts/auth';
import { isMobileDevice } from '~/assets/ts/device';
@Component
@@ -125,6 +126,11 @@
: this.isVisibleDialog = true;
}
+ reserveCommunication() {
+ isLogin() ? this.$router.push('/questionnaire') : this.$router.push('/login');
+ }
+
+
}
</script>
diff --git a/PAMapp/components/QuickFilter/QuickFilterSelector.vue b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
index fabbf83..9ed3f66 100644
--- a/PAMapp/components/QuickFilter/QuickFilterSelector.vue
+++ b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
@@ -6,16 +6,16 @@
</span>
<span
class="smTxt_bold text--primary"
- v-if="questionOption.name === 'style'"
+ 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"
@@ -33,12 +33,12 @@
:key="index"
:label="i.value"
:class="i.className"
- ></el-radio>
+ >{{i.name}}</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 === 'status'">
+ <el-radio-group class="pam-quickFilter-radio" v-model="pickedItem.status">
<el-radio
v-for="(i, index) in QuestionOption.detail"
:key="index"
@@ -49,30 +49,35 @@
</div>
<div v-else>
- <el-rate class="pam-quickFilter-rate" v-model="pickedItem.satisfaction"></el-rate>
+ <el-rate class="pam-quickFilter-rate" v-model="pickedItem.avgScore"></el-rate>
</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 { FastQueryParams } from '~/assets/ts/api/consultant';
+import { QuestionOption } from '~/pages/quickFilter/index.vue';
@Component
export default class QuickFilterDrawer extends Vue {
- pickedItem: selectedItem = {
- style: [],
- onlineState: '',
+ pickedItem: FastQueryParams = {
+ communicationStyles: [],
+ status: '',
gender: '',
- satisfaction: 0
+ avgScore: 0
+ }
+
+ mounted() {
+ console.log(this.questionOption, 'questionOption')
}
@PropSync('drawerVisible') isVisible!: boolean;
- @Prop() selectedItem!: selectedItem;
+ @Prop() selectedItem!: FastQueryParams;
@Prop() questionOption!: QuestionOption;
- @Watch('selectedItem', {deep: true, immediate: true}) watchSelected(newValue: selectedItem) {
+ @Watch('selectedItem', {deep: true, immediate: true}) watchSelected(newValue: FastQueryParams) {
if (newValue) {
this.pickedItem = JSON.parse(JSON.stringify(this.selectedItem))
}
diff --git a/PAMapp/layouts/default.vue b/PAMapp/layouts/default.vue
index ef09d65..72f1566 100644
--- a/PAMapp/layouts/default.vue
+++ b/PAMapp/layouts/default.vue
@@ -24,7 +24,7 @@
}
noBanner(routerName : string) {
- return routerName.match('communication') || routerName.match('agentInfo');
+ return routerName.match('questionnaire') || routerName.match('agentInfo');
}
mounted() {
diff --git a/PAMapp/pages/quickFilter/index.vue b/PAMapp/pages/quickFilter/index.vue
index 9f56a03..dd7dd5a 100644
--- a/PAMapp/pages/quickFilter/index.vue
+++ b/PAMapp/pages/quickFilter/index.vue
@@ -5,7 +5,7 @@
v-for="(question, index) in questionList"
:key="index"
class="subTitle quickBtn"
- :disabled="question.name === 'onlineState'"
+ :disabled="question.name === 'status'"
@click="openPopUp(question)"
>{{question.title}}</el-button>
</div>
@@ -15,19 +15,19 @@
v-if="selectedItem.gender"
@removeTag="removeTag('gender')"
>
- {{selectedItem.gender}}
+ {{selectedItem.gender === 'male' ? '���' : '憟單��'}}
</Ui-Tags>
<Ui-Tags
- v-if="selectedItem.satisfaction"
- @removeTag="removeTag('satisfaction')"
+ v-if="selectedItem.avgScore"
+ @removeTag="removeTag('avgScore')"
>
- {{selectedItem.satisfaction + '��誑銝遛��漲'}}
+ {{selectedItem.avgScore + '��誑銝遛��漲'}}
</Ui-Tags>
- <template v-if="selectedItem.style.length > 0">
+ <template v-if="selectedItem.communicationStyles">
<Ui-Tags
- v-for="(item, index) in selectedItem.style"
+ v-for="(item, index) in selectedItem.communicationStyles"
:key="index"
- @removeTag="removeTag('style', index)"
+ @removeTag="removeTag('communicationStyles', index)"
>
{{item}}
</Ui-Tags>
@@ -35,14 +35,14 @@
<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">
+ v-if="isEmpty">
<p class="smTxt">撠蝭拚</p>
</div>
</div>
<div class="mb-10 mt-30">
<span class="mdTxt">敹恍�祟���</span>
- <span class="smTxt_bold text--prudential_grey ml-10">� 0 蝑�</span>
+ <span class="smTxt_bold text--prudential_grey ml-10">� {{consultantList.length}} 蝑�</span>
</div>
<div class="recommend">
<img class="img" src="~/assets/images/quickFilter/recommend.svg" alt="">
@@ -60,7 +60,7 @@
<Ui-Drawer
:isVisible.sync="questionDrawer"
- :size="questionOption.name === 'style' ? '50%' : '30%'"
+ :size="questionOption.name === 'communicationStyles' ? '50%' : '30%'"
@closeDrawer="closePopUp"
>
<QuickFilterSelector
@@ -85,9 +85,8 @@
</template>
<script lang="ts">
-import { Context } from '@nuxt/types';
import { Vue, Component } from 'nuxt-property-decorator';
-import { Consultants } from '~/assets/ts/api/consultant';
+import { FastQueryParams } 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';
@@ -98,69 +97,52 @@
consultantList = [];
questionDrawer = false;
questionOption = {};
- selectedItem: selectedItem = {
+ selectedItem: FastQueryParams = {
gender: '',
- satisfaction: 0,
- style: [],
- onlineState: ''
+ avgScore: 0,
+ communicationStyles: [],
+ status: ''
};
questionList: QuestionOption[] = [
{
name: 'gender',
title: '憿批��批',
detail: [
- {
- value: '���',
- className: 'btn_man'
- }, {
- value: '憟單��',
- className: 'btn_woman'
- }],
+ { 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: [
- {
- value: '雓寞��祕',
- className: 'btn_owl'
- },{
- value: '��翰銝餃��',
- className: 'btn_tiger'
- },{
- value: '���',
- className: 'btn_koala'
- }, {
- value: '�隢◢頞�',
- className: 'btn_peacock'
- }],
+ { value: '雓寞��祕', className: 'btn_owl'},
+ { value: '��翰銝餃��', className: 'btn_tiger'},
+ { value: '���', className: 'btn_koala'},
+ { value: '�隢◢頞�', className: 'btn_peacock'}
+ ],
type: 'checkbox'
},
{
- name: 'onlineState',
+ name: 'status',
title: '銝�����',
detail: [],
type: 'radio'
}
];
- async asyncData(context: Context) {
- let consultantList: Consultants[] = [];
-
- // await context.$service.home.recommendConsultantList().then((result: Consultants[]) => {
- // consultantList = result;
- // })
-
- return {
- consultantList,
- }
+ get isEmpty() {
+ return !this.selectedItem.gender
+ && !this.selectedItem.avgScore
+ && this.selectedItem.communicationStyles.length === 0
+ && !this.selectedItem.status
}
openPopUp(question: QuestionOption) {
@@ -174,27 +156,31 @@
this.selectedItem.gender = ''
}
- if (type === 'satisfaction') {
- this.selectedItem.satisfaction = 0
+ if (type === 'avgScore') {
+ this.selectedItem.avgScore = 0
}
- if (type === 'style') {
- this.selectedItem.style.splice(index, 1)
+ 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: 'male',
- communicationStyle: '雓寞��祕',
- avgScore: 5,
- status: 'online'
+ gender: this.selectedItem.gender,
+ communicationStyles: this.selectedItem.communicationStyles,
+ avgScore: this.selectedItem.avgScore,
+ status: this.selectedItem.status
}
- fastQuery(data).then((res) => console.log(res))
+ fastQuery(data).then((res) => this.consultantList = res.data)
}
}
@@ -208,16 +194,10 @@
interface Detail {
value: string;
+ name?: string;
className: string;
}
-export interface selectedItem {
- name?: string;
- gender: string;
- satisfaction: number;
- style: string[];
- onlineState: string;
-}
</script>
<style lang="scss" scoped>
@@ -278,7 +258,6 @@
top: -50px;
right: 10px;
}
-
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0