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/components/Consultant/ConsultantCard.vue | 15 + PAMapp/components/Consultant-ques.vue | 106 ++++++----- PAMapp/assets/ts/storageRequests.ts | 10 + PAMapp/pages/questionnaire/_agentNo.vue | 330 ++++++++++++++++++++---------------- PAMapp/components/Client/ClientCard.vue | 15 + PAMapp/assets/ts/api/consultant.ts | 23 + PAMapp/assets/scss/utilities/_utilities.scss | 4 7 files changed, 300 insertions(+), 203 deletions(-) diff --git a/PAMapp/assets/scss/utilities/_utilities.scss b/PAMapp/assets/scss/utilities/_utilities.scss index e4e33bf..d452ae1 100644 --- a/PAMapp/assets/scss/utilities/_utilities.scss +++ b/PAMapp/assets/scss/utilities/_utilities.scss @@ -66,6 +66,10 @@ padding-left: 10px; } +.pl-20{ + padding-left: 20px; +} + .pam-paragraph { margin: 30px 0; } diff --git a/PAMapp/assets/ts/api/consultant.ts b/PAMapp/assets/ts/api/consultant.ts index eaef4a5..ff47e80 100644 --- a/PAMapp/assets/ts/api/consultant.ts +++ b/PAMapp/assets/ts/api/consultant.ts @@ -120,16 +120,25 @@ status: string } +export interface AppointmentRequests { + connectDevices: any[], + hopeContactTime: any, + email?: string, + job?: string, + otherJob?: string, + gender?: string, + myQuestion: any[], + age?: string, +} export interface AppointmentParams { - phone: string, - email: string, + phone?: string, + email?: string, contactType: string, - gender: string, - age: string, - job: string, + gender?: string, + age?: string, + job?: string, requirement: string, - hopeContactTime: string, - otherRequirement: string, + hopeContactTime?: string, agentNo: string } export interface StrictQueryParams{ diff --git a/PAMapp/assets/ts/storageRequests.ts b/PAMapp/assets/ts/storageRequests.ts new file mode 100644 index 0000000..46549ae --- /dev/null +++ b/PAMapp/assets/ts/storageRequests.ts @@ -0,0 +1,10 @@ +import { AppointmentRequests } from "./api/consultant"; + +export function getRequestsFromStorage(): AppointmentRequests { + const requests = localStorage.getItem('myRequests'); + return requests ? JSON.parse(requests) : null; +} + +export function setRequestsToStorage(myRequests: AppointmentRequests): void { + localStorage.setItem('myRequests', JSON.stringify(myRequests)); +} diff --git a/PAMapp/components/Client/ClientCard.vue b/PAMapp/components/Client/ClientCard.vue index 6bfcef1..1fffe7c 100644 --- a/PAMapp/components/Client/ClientCard.vue +++ b/PAMapp/components/Client/ClientCard.vue @@ -54,8 +54,8 @@ <p>�批嚗{gender}}</p> <p>撟湧翩嚗{client.age}}</p> <p>�璆哨�{client.job}}</p> - <p>��瘙�{client.requirement.replace(',', '��')}}</p> - <p v-for="(item, index) in hopeContactTime" :key="index">��蝯⊥�挾{{index + 1 | formatNumber}}嚗{item}}</p> + <p>��瘙�{client.requirement.split(',').join('��')}}</p> + <p v-for="(item, index) in hopeContactTime" :key="index">��蝯⊥�挾{{index + 1 | formatNumber}}嚗{ item | formatHopeContactTime}}</p> </div> <div class="mt-30 text--center" v-if="isReserved"> <el-button @click="markAppointment">璅酉�撌脤��蝯�</el-button> @@ -76,6 +76,15 @@ const upperNumber = ['�', '銝�', '鈭�', '銝�', '���', '鈭�', '�', '銝�', '�', '銋�', '���'] return upperNumber[index]; } + }, + formatHopeContactTime(item: string): string { + if (item) { + const [hopeDay, hopeTime] = item.split('��'); + const day = hopeDay.split(',').length > 6 ? '銝����' : hopeDay; + const time = hopeTime.split(',').length > 3 ? '銝����' : hopeTime; + return `${day}��${time}`; + } + return ''; } } }) @@ -205,4 +214,4 @@ .text-right { text-align: right; } -</style> \ No newline at end of file +</style> diff --git a/PAMapp/components/Consultant-ques.vue b/PAMapp/components/Consultant-ques.vue index 084fbfa..4bd6bad 100644 --- a/PAMapp/components/Consultant-ques.vue +++ b/PAMapp/components/Consultant-ques.vue @@ -2,48 +2,64 @@ <div> <div class="pam-tags"> <div class="pb-10" v-for="(qaItem,index) in questionList" :key="index"> - <el-button class="tags" :class="{'active': qaItem.selected}" - @click="selectQuestion(index)"> + <el-button class="tags" :class="{'active': qaItem.selected}" + @click="selectQuestion(index)"> {{qaItem.name}} - </el-button> - </div> + </el-button> + </div> </div> - + </div> </template> + <script lang="ts"> -import { Vue, Component, Emit} from 'vue-property-decorator'; +import { Vue, Component, Emit, Prop} from 'vue-property-decorator'; + @Component export default class ConsultantQues extends Vue{ showDialog = false; other = ''; otherQuestion = ''; - questionList=[ - { - name:'�摨瑁����', - selected:false - }, - { - name:'摮戊��', - selected:false - }, - { - name:'鞈閬��', - selected:false - }, - { - name:'璅暑��隡�', - selected:false - }, - { - name:'靽�瑼�/閬��', - selected:false - }, - { - name:'��靽����', - selected:false - } + + @Prop({ default: () => []}) selectedQuestions!: string[]; + + get questionList(): any[] { + return this.defaultQuestionList.map((question) => { + const isSeleted = (quesName: string): boolean => this.selectedQuestions.some((question) => question === quesName); + if (isSeleted(question.name)) { + question.selected = true; + } + return question; + } + ); + } + + defaultQuestionList = [ + { + name:'�摨瑁����', + selected:false + }, + { + name:'摮戊��', + selected:false + }, + { + name:'鞈閬��', + selected:false + }, + { + name:'璅暑��隡�', + selected:false + }, + { + name:'靽�瑼�/閬��', + selected:false + }, + { + name:'��靽����', + selected:false + } ]; @Emit('change') @@ -57,22 +73,22 @@ <style lang="scss"> .con-input{ input:focus,textarea:focus { - outline: none; - border: 1px solid #ED1B2E; + } +} -} -} .other-input{ height: 50px; width:316px; border:1px solid #CCCCCC; margin-top: 10px; } + .tags{ height: 47px; } + .qa-dialog-footer{ display: flex; justify-content: center; @@ -110,14 +126,14 @@ @include desktop { - .pam-tags{ - display:flex; - flex-wrap:wrap; - - } - .tags{ - margin-right: 10px; - height: 47px; - } + .pam-tags{ + display:flex; + flex-wrap:wrap; + + } + .tags{ + margin-right: 10px; + height: 47px; + } } -</style> \ No newline at end of file +</style> diff --git a/PAMapp/components/Consultant/ConsultantCard.vue b/PAMapp/components/Consultant/ConsultantCard.vue index 43f4d77..92bb8ef 100644 --- a/PAMapp/components/Consultant/ConsultantCard.vue +++ b/PAMapp/components/Consultant/ConsultantCard.vue @@ -58,11 +58,11 @@ <p>�批嚗{gender}}</p> <p>撟湧翩嚗{appointmentDetail.age}}</p> <p>�璆哨�{appointmentDetail.job}}</p> - <p>��瘙�{appointmentDetail.requirement.replace(',', '��')}}</p> + <p>��瘙�{appointmentDetail.requirement.split(',').join('��')}}</p> <p v-for="(item, index) in hopeContactTime" :key="index" - >��蝯⊥�挾{{index + 1 | formatNumber}}嚗{item}}</p> + >��蝯⊥�挾{{index + 1 | formatNumber}}嚗{ item | formatHopeContactTime }}</p> </div> </div> </Ui-Dialog> @@ -83,6 +83,15 @@ const upperNumber = ['�', '銝�', '鈭�', '銝�', '���', '鈭�', '�', '銝�', '�', '銋�', '���'] return upperNumber[index]; } + }, + formatHopeContactTime(item: string): string { + if (item) { + const [hopeDay, hopeTime] = item.split('��'); + const day = hopeDay.split(',').length > 6 ? '銝����' : hopeDay; + const time = hopeTime.split(',').length > 3 ? '銝����' : hopeTime; + return `${day}��${time}`; + } + return ''; } } }) @@ -258,4 +267,4 @@ height: 400px; } -</style> \ No newline at end of file +</style> 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:'��瑼Z�撌梁������蝚血����靘�◢�蝘餉��瘙�������������銝��' - }, - { - title:'��靽', - content:'���漲��������翰�祟�敺����雿�憿批����脰�������蝯行�����潘��隞乩������“������潦��' - }, - { - title:'�隞�', - content:'���漲��������翰�祟�敺����雿�憿批����脰�������蝯行�����潘��隞乩������“������潦��' - }, - ] + queaAboutList = [ + { + title:'�摨瑁����', + content:'蝒���������敺����犖��振摨剜����������������������靘��' + }, + { + title:'摮戊��', + content:'������嚗������� ���摮戊雿�����暑�������' + }, + { + title:'鞈閬��', + content:'�鞎∪�痊隞餃�������雲������������風嚗鈭箇����撥�����' + }, + { + title:'璅暑��隡�', + content:'��靽�������嚗��暑����車������犖�����挾���暑��閬��' + }, + { + title:'靽�瑼�/閬��', + content:'��瑼Z�撌梁������蝚血����靘�◢�蝘餉��瘙�������������銝��' + }, + { + 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