From 945df9fec87c64d45f4a8878f302afe052a9bee3 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期五, 19 十一月 2021 15:15:55 +0800
Subject: [PATCH] update#130453: [諮詢前問項] : b. 再度登入時，進行預約諮詢前的問項資料會自動帶入，此為phase 1範圍，待處理
---
PAMapp/pages/questionnaire/_agentNo.vue | 330 ++++++++++++++++++++++++++++++------------------------
1 files changed, 185 insertions(+), 145 deletions(-)
diff --git a/PAMapp/pages/questionnaire/_agentNo.vue b/PAMapp/pages/questionnaire/_agentNo.vue
index 5875b91..b861187 100644
--- a/PAMapp/pages/questionnaire/_agentNo.vue
+++ b/PAMapp/pages/questionnaire/_agentNo.vue
@@ -4,56 +4,77 @@
<span class="mdTxt">��������鼠����‵撖思誑銝���(<i style="color: #FF0000">*</i>敹‵)</span>
</div>
<div class="pb-18">
- <span class="mdTxt required">隢�撣��憿批�誑�閰望�mail�蝜急�?</span>
+ <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>
+ <el-button
+ class="contactMax Btn"
+ :class="{ 'active': isConnectMobile }"
+ @click="toggleConnectDevice('mobile')"
+ >
+ ����
+ </el-button>
+ <el-button
+ class="contactMax Btn"
+ :class="{ 'active': isConnectEmail}"
+ @click="toggleConnectDevice('email')"
+ >
+ Email
+ </el-button>
</div>
<div class="connectDesktop">
<div v-if="isConnectMobile">
- <span class="fz-20 phone-no">0912345678</span>
+ <span class="fz-20 phone-no">
+ 0912345678
+ </span>
</div>
<el-row class="pb-10 pt-10">
- <el-input class="pam-input" v-if="isConnectEmail" placeholder="隢撓��摮隞嗡縑蝞�" v-model="email">
+ <el-input
+ v-if="isConnectEmail"
+ class="pam-input"
+ placeholder="隢撓��摮隞嗡縑蝞�"
+ v-model="myRequest.email">
</el-input>
</el-row>
<div v-if="isConnectMobile">
<div class="datepicker">
<span class="mdTxt required">�����蝯∠�靘踵���</span>
- <PhoneContactTimePicker :scheduleList.sync="initScheduleList"/>
+ <PhoneContactTimePicker
+ :scheduleList.sync="myRequest.hopeContactTime"/>
</div>
</div>
</div>
-
<div class="mb-30">
<div>
<div class="pb-10 mt-10 mdTxt required">�閬岷������
<span class="hint text--bold" @click="showDrawer = true">
<i class="icon-information text--bold" @click="showDrawer = true"></i>�銴</span></div>
- <ConsultantQues @change="selectedQuestion = $event" class="mb-30"/>
+ <ConsultantQues
+ @change="myRequest.myQuestion = $event"
+ :selectedQuestions="myRequest.myQuestion"
+ class="mb-30"/>
</div>
</div>
<div>
<div class="pb-10 mdTxt pt-10">����批</div>
<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>
+ <el-button class="desktopBtn tags" @click="myRequest.gender = 'male'" :class="{ 'active': myRequest.gender ==='male'}">���</el-button>
+ <el-button class="desktopBtn tags" @click="myRequest.gender = 'female'" :class="{'active': myRequest.gender === 'female'}">憟單��</el-button>
</div>
</div>
<div class="mdTxt pb-10">撟湧翩</div>
- <div class=" pam-age-tags">
+ <div class="pam-age-tags">
<div>
- <el-button class="ageDesktop" @click="age = '20'" :class="{'active': age === '20'}">20甇脖誑銝�</el-button>
- <el-button class="ageDesktop" @click="age = '30'" :class="{'active': age === '30'}">21-30甇�</el-button>
- <el-button class="ageDesktopP2" @click="age = '40'" :class="{'active': age === '40'}">31-40甇�</el-button>
- <el-button class="ageDesktop" @click="age = '50'" :class="{'active': age === '50'}">41-50甇�</el-button>
- <el-button class="ageDesktopP2" @click="age = '55'" :class="{'active': age === '55'}">46-55甇�</el-button>
- <el-button class="ageDesktop " @click="age = '60'" :class="{'active': age === '60'}">51-60甇�</el-button>
- <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>
+ <el-button class="ageDesktop" @click="myRequest.age = '20'" :class="{'active': myRequest.age === '20'}">20甇脖誑銝�</el-button>
+ <el-button class="ageDesktop" @click="myRequest.age = '30'" :class="{'active': myRequest.age === '30'}">21-30甇�</el-button>
+ <el-button class="ageDesktopP2" @click="myRequest.age = '40'" :class="{'active': myRequest.age === '40'}">31-40甇�</el-button>
+ <el-button class="ageDesktop" @click="myRequest.age = '50'" :class="{'active': myRequest.age === '50'}">41-50甇�</el-button>
+ <el-button class="ageDesktopP2" @click="myRequest.age = '55'" :class="{'active': myRequest.age === '55'}">46-55甇�</el-button>
+ <el-button class="ageDesktop " @click="myRequest.age = '60'" :class="{'active': myRequest.age === '60'}">51-60甇�</el-button>
+ <el-button class="ageDesktopP2" @click="myRequest.age = '70'" :class="{'active': myRequest.age === '70'}">61-70甇�</el-button>
+ <el-button class="mb-10" @click="myRequest.age = '71'" :class="{'active': myRequest.age === '71'}">71甇脖誑銝�</el-button>
</div>
</div>
@@ -61,16 +82,22 @@
<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>
+ @click="showJobDrawer = true"
+ placeholder="隢���"
+ :value="myRequest.job === '�隞�'
+ ? `�隞�, ${ myRequest.otherJob }`
+ : myRequest.job"
+ >
+ <i class="icon-down down-icon" style="margin-right:18px" @click="showJobDrawer = true" ></i>
</div>
-
<div class="ques-footer">
- <el-button type="primary"
- :disabled=" isInitScheduleDisabled || !isSelected"
- @click.native="sentDemand">�</el-button>
+ <el-button type="primary"
+ :disabled="isInitScheduleDisabled || !isSelectedQues"
+ @click.native="sentDemand"
+ >
+ �
+ </el-button>
</div>
<PopUpFrame :isOpen.sync="showDrawer" :drawerSize=" '95%' ">
@@ -78,7 +105,7 @@
<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 bold">{{qaText.title}}</p>
<p class="p">{{qaText.content}}</p>
</div>
</div>
@@ -87,21 +114,23 @@
<el-button type="primary" @click="showDrawer = false">������</el-button>
</div>
</PopUpFrame>
+
<PopUpFrame :isOpen.sync="showJobDrawer" drawerSize='60%'>
<div class="job-drawerTxt fz-20">
<div class="subTitle mt-18">�璆�</div>
<div class="radio-btn">
- <el-radio-group class="pam-radio-group--col" v-model="staff">
+ <el-radio-group class="pam-radio-group--col" v-model="myRequest.job">
<el-radio-button style="margin-top:30px" text-color='#F09491' label="憭"></el-radio-button>
<el-radio-button style="margin-top:30px" label="��"></el-radio-button>
<el-radio-button style="margin-top:30px" label="�隞�"></el-radio-button>
</el-radio-group>
</div>
- <div class="job-inputDiv"><input v-if="staff === '�隞�'" class="job-input mb-30 fz-20 pl-20" v-model="inputValue" > </div>
+ <div class="job-inputDiv"><input v-if="myRequest.job === '�隞�'" class="job-input mb-30 fz-20 pl-20" v-model="myRequest.otherJob" > </div>
<el-button type="primary" class="job-drawerBtn" @click="showJobDrawer = false">蝣箏��</el-button>
</div>
</PopUpFrame>
+
<PopUpFrame :isOpen.sync="sendReserve" @update:isOpen="closeReservePopUp">
<div class="fz-20 mt-30 sendReserve-txt">�����������憿批���</div>
<div class="fz-20 sendReserve-txt">�����蝯∴��</div>
@@ -115,159 +144,155 @@
</div>
</template>
+
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
-import { appointmentDemand } from '~/assets/ts/api/consultant';
-
+import { appointmentDemand, AppointmentParams, AppointmentRequests } from '~/assets/ts/api/consultant';
+import { getRequestsFromStorage, setRequestsToStorage } from '~/assets/ts/storageRequests';
@Component
export default class Questionnaire extends Vue {
- gender = '';
- connectDevices = new Array();
- mobileNumber = '';
- email = '';
- inputValue='';
- selectedQuestion: SelectedQuestion[] = [];
- staff = '';
+ myRequest: AppointmentRequests = {
+ connectDevices: [],
+ hopeContactTime: [{
+ selectWeekOptions:[],
+ selectTimesOptions:[],
+ }],
+ gender: '',
+ email: '',
+ job: '',
+ otherJob: '',
+ myQuestion: [],
+ age: '',
+ };
-
- age = '';
showDrawer= false;
showJobDrawer = false;
sendReserve = false;
- initScheduleList=[{
- selectWeekOptions:[],
- selectTimesOptions:[],
- }]
- queaAboutList=[
- {
- title:'�摨瑁����',
- content:'蝒���������敺����犖��振摨剜����������������������靘��'
- },
- {
- title:'摮戊��',
- content:'������嚗������� ���摮戊雿�����暑�������'
- },
- {
- title:'鞈閬��',
- content:'�鞎∪�痊隞餃�������雲������������風嚗鈭箇����撥�����'
- },
- {
- title:'璅暑��隡�',
- content:'��靽�������嚗��暑����車������犖�����挾���暑��閬��'
- },
- {
- title:'靽�瑼�/閬��',
- content:'��瑼Ｚ�撌梁������蝚血����靘�◢�蝘餉��瘙�������������銝��'
- },
- {
- title:'��靽',
- content:'���漲��������翰�祟�敺����雿�憿批����脰�������蝯行�����潘��隞乩������“������潦��'
- },
- {
- title:'�隞�',
- content:'���漲��������翰�祟�敺����雿�憿批����脰�������蝯行�����潘��隞乩������“������潦��'
- },
- ]
+ queaAboutList = [
+ {
+ title:'�摨瑁����',
+ content:'蝒���������敺����犖��振摨剜����������������������靘��'
+ },
+ {
+ title:'摮戊��',
+ content:'������嚗������� ���摮戊雿�����暑�������'
+ },
+ {
+ title:'鞈閬��',
+ content:'�鞎∪�痊隞餃�������雲������������風嚗鈭箇����撥�����'
+ },
+ {
+ title:'璅暑��隡�',
+ content:'��靽�������嚗��暑����車������犖�����挾���暑��閬��'
+ },
+ {
+ title:'靽�瑼�/閬��',
+ content:'��瑼Ｚ�撌梁������蝚血����靘�◢�蝘餉��瘙�������������銝��'
+ },
+ {
+ title:'��靽',
+ content:'���漲��������翰�祟�敺����雿�憿批����脰�������蝯行�����潘��隞乩������“������潦��'
+ }
+ ];
+
agentNo!: string;
get disableActionButton(): boolean {
return true;
};
-
get isConnectMobile(): boolean {
- return this.connectDevices.includes('mobile');
+ return this.myRequest.connectDevices.includes('mobile');
}
get isConnectEmail(): boolean {
- return this.connectDevices.includes('email');
+ return this.myRequest.connectDevices.includes('email');
+ }
+
+ get isSelectedQues(): boolean {
+ return !!this.myRequest.myQuestion.length;
+ }
+
+ get isInitScheduleDisabled() {
+ if (this.isConnectMobile && this.isConnectEmail) {
+ return !this.myRequest?.hopeContactTime[0]?.selectWeekOptions?.length
+ || !this.myRequest?.hopeContactTime[0]?.selectTimesOptions?.length
+ || !this.myRequest.email
+ } else if (this.isConnectMobile) {
+ return !this.myRequest?.hopeContactTime[0]?.selectWeekOptions?.length
+ || !this.myRequest?.hopeContactTime[0]?.selectTimesOptions?.length
+ } else if (this.isConnectEmail) {
+ return !this.myRequest.email
+ }
+ return true;
}
mounted() {
this.agentNo = this.$route.params.agentNo;
- }
- get isSelected() {
- return this.selectedQuestion.findIndex(i => i.selected)>=0
+ const storageMyRequest = getRequestsFromStorage();
+ if (storageMyRequest) {
+ this.myRequest = storageMyRequest;
+ }
}
toggleConnectDevice(selectDevice: 'mobile' | 'email'): void {
- const deviceSelected = this.connectDevices.includes(selectDevice);
+ const deviceSelected = this.myRequest.connectDevices.includes(selectDevice);
if (deviceSelected) {
- const deviceIndex = this.connectDevices.findIndex((device) => device === selectDevice);
- this.connectDevices.splice(deviceIndex, 1);
+ const deviceIndex = this.myRequest.connectDevices.findIndex((device) => device === selectDevice);
+ this.myRequest.connectDevices.splice(deviceIndex, 1);
if (selectDevice === 'mobile') {
- this.initScheduleList = [{
+ this.myRequest.hopeContactTime = [{
selectWeekOptions:[],
selectTimesOptions:[],
}]
}
if (selectDevice === 'email') {
- this.email = '';
+ this.myRequest.email = '';
}
return;
}
- this.connectDevices.push(selectDevice);
-
+ this.myRequest.connectDevices.push(selectDevice);
}
sentDemand() {
- const data = {
+ const data: AppointmentParams = {
phone: '09123456789',
- email: this.email,
- contactType: this.connectDevices.toString(),
- gender: this.gender,
- age: this.age,
- job: this.staff,
- requirement: this.getRequirement(),
+ email: this.myRequest.email,
+ contactType: this.myRequest.connectDevices.toString(),
+ gender: this.myRequest.gender,
+ age: this.myRequest.age,
+ job: this.myRequest.job !== '�隞�' ? this.myRequest.job : this.myRequest.otherJob,
+ requirement: this.myRequest.myQuestion
+ .filter((ques) => ques.selected)
+ .map((selQues) => selQues.name).toString(),
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();
+ appointmentDemand(data).then(res => {
+ this.sendReserve = true;
+ console.log('sendMyReq', this.myRequest.myQuestion);
+ this.myRequest.myQuestion = this.myRequest.myQuestion
+ .filter((ques) => ques.selected)
+ .map((selQues) => selQues.name);
+ setRequestsToStorage(this.myRequest);
+ });
}
getHopeContactTime() {
- const isFullDay = (selectedDay: string[]): boolean => selectedDay.length > 6;
- const isFullTime = (selectedTime: string[]): boolean => selectedTime.length > 3;
- const initScheduleList = this.initScheduleList.map(item => {
- return {
- selectWeekOptions: isFullDay(item.selectWeekOptions) ? '銝����' : item.selectWeekOptions.toString(),
- selectTimesOptions: isFullTime(item.selectTimesOptions) ? '銝����' : item.selectTimesOptions.toString()
- }
- })
-
- return initScheduleList.map(i => {
+ return this.myRequest.hopeContactTime.map(i => {
return `'${i.selectWeekOptions}��${i.selectTimesOptions}'`}
- ).toString()
+ ).toString();
}
closeReservePopUp() {
this.sendReserve = false;
this.$router.push('/')
- }
-
- get isInitScheduleDisabled() {
- console.log(this.isConnectMobile)
- if (this.isConnectMobile && this.isConnectEmail) {
- return !this.initScheduleList[0].selectWeekOptions.length || !this.initScheduleList[0].selectTimesOptions.length || !this.email
- } else if (this.isConnectMobile) {
- return !this.initScheduleList[0].selectWeekOptions.length || !this.initScheduleList[0].selectTimesOptions.length
- } else if (this.isConnectEmail) {
- return !this.email
- }
- return true;
}
}
@@ -276,6 +301,7 @@
selected: boolean;
}
</script>
+
<style lang="scss" scoped>
.input{
border:none;
@@ -302,43 +328,38 @@
margin-right: 30px;
}
.job-drawerTxt{
-
- input:focus,textarea:focus {
-
- outline: none;
-
- border: 1px solid #ED1B2E;
-
+ input:focus,textarea:focus {
+ outline: none;
+ border: 1px solid #ED1B2E;
+ }
}
-}
+
input:focus,textarea:focus {
-
outline: none;
-
border: 1px solid #FFFFFF;
-
}
+
.sendReserve-txt{
display: flex;
justify-content: center;
margin-top: 10px;
margin-bottom: 26px;
}
-.pl-20{
- padding-left: 20px;
-}
.job-inputDiv{
height:90px;
}
+
.jobBtn{
font-weight:bold;
}//�璆剝���,�������
+
.job-input{
height: 50px;
width: 294px;
border: 1px solid #FF0000;
}//�璆剝���,�隞撓�獢見撘�
+
.job-pick{
height: 50px;
border-radius:10px;
@@ -355,9 +376,11 @@
color: #ED1B2E;
cursor: pointer;
}//drawer��摨���見撘�
+
.mt-18{
margin-top: 18px;
}
+
.job-drawerTxt{
display: flex;
flex-direction: column;
@@ -385,8 +408,9 @@
border-style: solid;
pointer-events: none;
}
- }
+ }
}//�璆剝�������������見撘身摰�
+
.ques-footer{
justify-content: center;
margin: 30px 0;
@@ -418,19 +442,23 @@
}
}
}//����見撘����
+
.qa-dialog{
overflow-y:auto;
height: 500px;
margin-top: 20px;
}//閰喟敦���rawer銝剝�摰寧征��之撠身蝵�
+
.qaTextTitle{
margin-top:30px;
display: flex;
justify-content: center;
}//閰喟敦���rawer銝餉����
+
.el-drawer__container ::-webkit-scrollbar {
display: none;
- }
+}
+
.phone-no{
margin-bottom: 30px;
margin-left: 5px;
@@ -444,6 +472,7 @@
.el-button+.el-button{
margin-left: 0;
}
+
.down-icon{
color:#ED1B2E;
font-size: 25px;
@@ -451,27 +480,31 @@
justify-content: flex-end;
padding-top: 11px;
margin-left: -20px;
- }
+}
+
.job-txt{
align-self: center;
margin-left: 18px;
color:#D0D0CE;
-
}
+
.date-txt{
align-self: center;
margin-left: 18px;
color: #68737A;
}
+
.add-date{
color:#D0D0CE;
padding-top: 10px;
padding-bottom: 30px;
font-size: 20px;
}
+
.pb-16{
padding-bottom: 16px;
}
+
.date-pick{
height: 50px;
border-radius:10px;
@@ -479,6 +512,7 @@
display: flex;
justify-content: space-between;
}
+
.date-icon{
color:#ED1B2E;
font-size: 25px;
@@ -487,24 +521,30 @@
padding-right: 16px;
padding-top: 11px;
}
+
.addDate{
margin-left: -20px;
}
+
.ageTags{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
+
.datepicker{
display: flex;
flex-direction: column;
}
+
.pb-18{
padding-bottom: 18px;
}
+
.mr-20{
margin-right: 20px;
}
+
.pam-age-tags {
display: flex;
.el-button {
@@ -526,7 +566,7 @@
background-color: #F09491;
color: white;
}
- }
+ }
}
.required {
--
Gitblit v1.8.0