From 8d823f18353363e61b11b547c443aff8bbf85d95 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期四, 11 十一月 2021 17:05:14 +0800
Subject: [PATCH] TODO#130017 [預約前詢問] API 串接
---
PAMapp/components/Consultant/ConsultantCard.vue | 2
PAMapp/pages/questionnaire/_agentNo.vue | 98 ++++++++++++++++++++++++--------
PAMapp/assets/ts/api/consultant.ts | 30 ++++++----
PAMapp/components/AddAndReservedBtns.vue | 2
4 files changed, 94 insertions(+), 38 deletions(-)
diff --git a/PAMapp/assets/ts/api/consultant.ts b/PAMapp/assets/ts/api/consultant.ts
index a67f1f7..cfdfdb7 100644
--- a/PAMapp/assets/ts/api/consultant.ts
+++ b/PAMapp/assets/ts/api/consultant.ts
@@ -1,6 +1,7 @@
import axios from 'axios';
import { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios';
import { MessageBox } from 'element-ui';
+import { functionsIn } from 'lodash';
import Router from 'vue-router';
export const service = axios.create({
@@ -11,26 +12,14 @@
})
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);
});
@@ -59,6 +48,10 @@
return service.post('/consultant/favorite', {agentNoList})
}
+// ����岷���
+export function appointmentDemand(data: AppointmentParams) {
+ return service.post('/appointment/customer/create', data)
+}
export interface Consultants {
agentNo: string,
name: string,
@@ -76,4 +69,17 @@
communicationStyles: string[],
avgScore: number,
status: string
+}
+
+export interface AppointmentParams {
+ phone: string,
+ email: string,
+ contactType: string,
+ gender: string,
+ age: string,
+ job: string,
+ requirement: string,
+ hopeContactTime: string,
+ otherRequirement: string,
+ agentNo: string
}
\ No newline at end of file
diff --git a/PAMapp/components/AddAndReservedBtns.vue b/PAMapp/components/AddAndReservedBtns.vue
index bdc1244..41c3e04 100644
--- a/PAMapp/components/AddAndReservedBtns.vue
+++ b/PAMapp/components/AddAndReservedBtns.vue
@@ -51,7 +51,7 @@
}
reserveCommunication() {
- isLogin() ? this.$router.push('/questionnaire') : this.$router.push('/login');
+ isLogin() ? this.$router.push(`/questionnaire/${this.agentInfo.agentNo}`) : this.$router.push('/login');
}
@Emit('openPopUp') openPopUp(popUpTxt: string = '����憿批��') {
diff --git a/PAMapp/components/Consultant/ConsultantCard.vue b/PAMapp/components/Consultant/ConsultantCard.vue
index e771df0..2210e4c 100644
--- a/PAMapp/components/Consultant/ConsultantCard.vue
+++ b/PAMapp/components/Consultant/ConsultantCard.vue
@@ -99,7 +99,7 @@
reserveCommunication() {
const contactStatus = this.agentInfo.contactStatus;
if (contactStatus !== 'reserved' && contactStatus !== 'contacted') {
- isLogin() ? this.$router.push('/questionnaire') : this.$router.push('/login');
+ isLogin() ? this.$router.push(`/questionnaire/${this.agentInfo.agentNo}`) : this.$router.push('/login');
} else {
this.width = isMobileDevice() ? '80%' : '';
this.isVisibleDialog = true;
diff --git a/PAMapp/pages/questionnaire/index.vue b/PAMapp/pages/questionnaire/_agentNo.vue
similarity index 84%
rename from PAMapp/pages/questionnaire/index.vue
rename to PAMapp/pages/questionnaire/_agentNo.vue
index a6fadcc..8262e3f 100644
--- a/PAMapp/pages/questionnaire/index.vue
+++ b/PAMapp/pages/questionnaire/_agentNo.vue
@@ -1,29 +1,29 @@
<template>
<div class="pam-page">
- <div class="pb-18">
+ <div class="pb-18">
<span class="mdTxt required">隢�撣��憿批�誑�閰望�mail�蝜急�?</span>
<span class="hint">�銴</span>
</div>
<div class="pam-tags">
<el-button :class="{ 'active': isConnectMobile}" @click="toggleConnectDevice('mobile')" class="contactMax Btn">����</el-button>
- <el-button :class="{ 'active': isConnectEmail}" @click="toggleConnectDevice('email')" class="contactMax Btn">Email</el-button>
- </div>
+ <el-button :class="{ 'active': isConnectEmail}" @click="toggleConnectDevice('email')" class="contactMax Btn">Email</el-button>
+ </div>
<div class="connectDesktop">
<div v-if="isConnectMobile">
<span class="fz-20 phone-no">0912345678</span>
- </div>
+ </div>
<el-row class="pb-10 pt-10">
<el-input class="pam-input" v-if="isConnectEmail" placeholder="隢撓��摮隞嗡縑蝞�" v-model="email">
</el-input>
- </el-row>
+ </el-row>
<div v-if="isConnectMobile">
<div class="datepicker">
<span class="mdTxt required">�����蝯∠�靘踵���</span>
<PhoneContactTimePicker :scheduleList.sync="initScheduleList"/>
- </div>
+ </div>
</div>
</div>
-
+
<div class="mb-30">
<div>
@@ -35,7 +35,7 @@
</div>
<div>
<div class="pb-10 mdTxt pt-10">����批</div>
- <div class="mb-30 pam-tags">
+ <div class="mb-30 pam-tags">
<el-button class="desktopBtn tags" @click="gender = 'male'" :class="{ 'active': gender ==='male'}">���</el-button>
<el-button class="desktopBtn tags" @click="gender = 'female'" :class="{'active': gender === 'female'}">憟單��</el-button>
</div>
@@ -52,31 +52,31 @@
<el-button class="ageDesktopP2" @click="age = '70'" :class="{'active': age === '70'}">61-70甇�</el-button>
<el-button class="mb-10" @click="age = '71'" :class="{'active': age === '71'}">71甇脖誑銝�</el-button>
</div>
- </div>
-
+ </div>
+
<div class="mdTxt pt-10 pb-10">�璆�</div>
- <div class="job-pick" @click="showJobDrawer = true">
- <input class="fz-20 pl-18 input"
+ <div class="job-pick" @click="showJobDrawer = true">
+ <input class="fz-20 pl-18 input"
style="outline:none margin-right:-18px"
@click="showJobDrawer = true" placeholder="隢���" :value="staff === '�隞�' ? `�隞�, ${inputValue}` : staff">
-
+
<i class="icon-down down-icon " style="margin-right:18px" @click="showJobDrawer = true" ></i>
</div>
<div class="ques-footer pt-30">
- <el-button type="primary" @click="sendReserve = true">�</el-button>
+ <el-button type="primary" @click="sentDemand">�</el-button>
</div>
<PopUpFrame :isOpen.sync="showDrawer" :drawerSize=" '95%' ">
<div class="qaTextTitle mdTxt"><strong>�閬岷������</strong></div>
- <div class="qa-dialog">
+ <div class="qa-dialog">
<div v-for="(qaText,index) in queaAboutList" :key="index" >
<div class="pt-10">
<p class=" p bold">{{qaText.title}}</p>
<p class="p">{{qaText.content}}</p>
- </div>
+ </div>
</div>
</div>
- <div class="qa-dialog-footer mdTxt" @click="showDrawer = false"><p>������</p></div>
+ <div class="qa-dialog-footer mdTxt" @click="showDrawer = false"><p>������</p></div>
</PopUpFrame>
<PopUpFrame :isOpen.sync="showJobDrawer" drawerSize='60%'>
<div class="job-drawerTxt fz-20">
@@ -91,17 +91,18 @@
</div>
<div class="job-inputDiv"><input v-if="staff === '�隞�'" class="job-input mb-30 fz-20 pl-20" v-model="inputValue" > </div>
<el-button type="primary" class="job-drawerBtn" @click="showJobDrawer = false">蝣箏��</el-button>
- </div>
+ </div>
</PopUpFrame>
- <PopUpFrame :isOpen.sync="sendReserve">
+ <PopUpFrame :isOpen.sync="sendReserve" @update:isOpen="closeReservePopUp">
<div class="fz-20 mt-30 sendReserve-txt">�����������憿批���</div>
<div class="fz-20 sendReserve-txt">�����蝯∴��</div>
- <div class="qa-dialog-footer mdTxt" @click="sendReserve = false"><p>������</p></div>
+ <div class="qa-dialog-footer mdTxt" @click="closeReservePopUp"><p>������</p></div>
</PopUpFrame>
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
+import { appointmentDemand } from '~/assets/ts/api/consultant';
@Component
export default class Questionnaire extends Vue {
@@ -112,10 +113,10 @@
mobileNumber = '';
email = '';
inputValue='';
- selectedQuestion = [];
+ selectedQuestion: SelectedQuestion[] = [];
// staff:'in'|'out'|'jobOther'='in';
staff = '憭';
-
+
age:'20'|'30'|'40'|'50'|'55'|'60'|'70'|'71' = '20';
showDrawer= false;
showJobDrawer = false;
@@ -165,7 +166,7 @@
content:'���漲��������翰�祟�敺����雿�憿批����脰�������蝯行�����潘��隞乩������“������潦��'
},
]
-
+ agentNo!: string;
get disableActionButton(): boolean {
return true;
@@ -179,6 +180,10 @@
return this.connectDevices.includes('email');
}
+ mounted() {
+ this.agentNo = this.$route.params.agentNo;
+ }
+
toggleConnectDevice(selectDevice: 'mobile' | 'email'): void {
const deviceSelected = this.connectDevices.includes(selectDevice);
if (deviceSelected) {
@@ -189,6 +194,51 @@
this.connectDevices.push(selectDevice);
}
+ sentDemand() {
+ const data = {
+ phone: '09123456789',
+ email: this.email,
+ contactType: this.connectDevices.toString(),
+ gender: this.gender,
+ age: this.age,
+ job: this.staff,
+ requirement: this.getRequirement(),
+ hopeContactTime: this.getHopeContactTime(),
+ otherRequirement: '',
+ agentNo: this.agentNo
+ }
+ appointmentDemand(data).then(res => {
+ this.sendReserve = true
+ })
+ }
+
+ getRequirement() {
+ const requirement = this.selectedQuestion.filter(item => item.selected)
+ return requirement.map(item => item.name).toString();
+ }
+
+ getHopeContactTime() {
+ const initScheduleList = this.initScheduleList.map(item => {
+ return {
+ selectWeekOptions: item.selectWeekOptions.toString(),
+ selectTimesOptions: item.selectTimesOptions.toString()
+ }
+ })
+
+ return initScheduleList.map(i => {
+ return `'${i.selectWeekOptions},${i.selectTimesOptions}'`}
+ ).toString()
+ }
+
+ closeReservePopUp() {
+ this.sendReserve = false;
+ this.$router.push('/')
+ }
+ }
+
+ export interface SelectedQuestion {
+ name: string;
+ selected: boolean;
}
</script>
<style lang="scss">
@@ -359,7 +409,7 @@
.qa-dialog-footer{
display: flex;
justify-content: center;
- margin-bottom: 81px;
+ margin-bottom: 81px;
}
.el-button+.el-button{
margin-left: 0;
--
Gitblit v1.8.0