From 505f666d3ecf3688778c079a8bbfb366d695cf22 Mon Sep 17 00:00:00 2001
From: wayne <wayne8692wayne8692@gmail.com>
Date: 星期五, 12 十一月 2021 17:32:08 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
PAMapp/pages/questionnaire/_agentNo.vue | 179 +++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 125 insertions(+), 54 deletions(-)
diff --git a/PAMapp/pages/questionnaire/index.vue b/PAMapp/pages/questionnaire/_agentNo.vue
similarity index 73%
rename from PAMapp/pages/questionnaire/index.vue
rename to PAMapp/pages/questionnaire/_agentNo.vue
index 13314cc..ff76472 100644
--- a/PAMapp/pages/questionnaire/index.vue
+++ b/PAMapp/pages/questionnaire/_agentNo.vue
@@ -1,41 +1,41 @@
<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>
<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 />
+ <ConsultantQues @change="selectedQuestion = $event" class="mb-30"/>
</div>
</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,94 +52,84 @@
<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"
+ :disabled=" isInitScheduleDisabled || !isSelected"
+ @click="sentDemand">�</el-button>
</div>
- <UiDrawer :is-visible.sync="showDrawer" size='95%'>
-
- <div class="qaTextTitle mdTxt">�閬岷������</div>
-
- <div class="qa-dialog">
+ <PopUpFrame :isOpen.sync="showDrawer" :drawerSize=" '95%' ">
+ <div class="qaTextTitle mdTxt"><strong>�閬岷������</strong></div>
+ <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>
- </UiDrawer>
-
- <UiDrawer :is-visible.sync="showJobDrawer" size='60%'>
-
+ <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">
<div class="subTitle mt-18">�璆�</div>
- <!-- <p class="mt-30 fz-20" @click="staff ='��'" :class="{'jobBtn':staff === '��' }">��</p> -->
+
<div class="radio-btn">
<el-radio-group class="pam-radio-group--col" v-model="staff">
- <el-radio-button style="margin-top:30px" label="憭"></el-radio-button>
+ <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>
<el-button type="primary" class="job-drawerBtn" @click="showJobDrawer = false">蝣箏��</el-button>
- </div>
- </UiDrawer>
- <UiDrawer :is-visible.sync="sendReserve">
- <div class="fz-20 mt-30">�����������憿批���</div>
+ </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>
- <div class="qa-dialog-footer mdTxt" @click="sendReserve = false"><p>������</p></div>
- </UiDrawer>
+ <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 {
gender: 'male'|'female' = 'male';
- // connectTarget:'mobile'|'email'='mobile';
- connectDevices = ['1111'];
+ connectDevices = new Array();
mobileNumber = '';
email = '';
inputValue='';
- // staff:'in'|'out'|'jobOther'='in';
+ selectedQuestion: SelectedQuestion[] = [];
staff = '憭';
+
age:'20'|'30'|'40'|'50'|'55'|'60'|'70'|'71' = '20';
showDrawer= false;
showJobDrawer = false;
sendReserve = false;
- // datepicker Dto
- initScheduleList=[
- {
+ initScheduleList=[{
selectWeekOptions:[],
selectTimesOptions:[],
- }
- ]
+ }]
- // editJob(targetJob: string): void {
- // const isExist = this.jobList.find((job) => job === targetJob);
- // if (isExist) {
- // const jobIndex = this.jobList.findIndex((job) => job === targetJob);
- // this.jobList.splice(jobIndex, 1);
- // } else {
- // this.jobList.push(targetJob);
- // }
- // }
queaAboutList=[
{
title:'�摨瑁����',
@@ -170,11 +160,12 @@
content:'���漲��������翰�祟�敺����雿�憿批����脰�������蝯行�����潘��隞乩������“������潦��'
},
]
-
+ agentNo!: string;
get disableActionButton(): boolean {
return true;
};
+
get isConnectMobile(): boolean {
return this.connectDevices.includes('mobile');
@@ -184,16 +175,92 @@
return this.connectDevices.includes('email');
}
+ mounted() {
+ this.agentNo = this.$route.params.agentNo;
+ }
+ get isSelected() {
+ return this.selectedQuestion.findIndex(i => i.selected)>=0
+ }
+
toggleConnectDevice(selectDevice: 'mobile' | 'email'): void {
const deviceSelected = this.connectDevices.includes(selectDevice);
if (deviceSelected) {
const deviceIndex = this.connectDevices.findIndex((device) => device === selectDevice);
this.connectDevices.splice(deviceIndex, 1);
+
+ if (selectDevice === 'mobile') {
+ this.initScheduleList = [{
+ selectWeekOptions:[],
+ selectTimesOptions:[],
+ }]
+ }
+
+ if (selectDevice === 'email') {
+ this.email = '';
+ }
return;
}
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('/')
+ }
+
+ 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;
+ }
+ }
+
+ export interface SelectedQuestion {
+ name: string;
+ selected: boolean;
}
</script>
<style lang="scss">
@@ -270,6 +337,7 @@
.ques-footer{
display: flex;
justify-content: center;
+
}
.job-inputDiv{
height:90px;
@@ -288,6 +356,7 @@
border:1px solid #D0D0CE ;
display: flex;
justify-content: space-between;
+ background-color: #FFFFFF;
}
.qa-dialog-footer{
@@ -363,7 +432,7 @@
.qa-dialog-footer{
display: flex;
justify-content: center;
- margin-bottom: 81px;
+ margin-bottom: 81px;
}
.el-button+.el-button{
margin-left: 0;
@@ -411,7 +480,9 @@
padding-right: 16px;
padding-top: 11px;
}
-
+.addDate{
+ margin-left: -20px;
+}
.ageTags{
display: flex;
flex-wrap: wrap;
--
Gitblit v1.8.0