From b6661a090e8bcf8f45be24a01b6a7bb08e3aaff1 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 08 十二月 2021 08:50:04 +0800
Subject: [PATCH] refactor: pages component - separate vue files
---
PAMapp/pages/questionnaire/_agentNo.vue | 719 ++++++++++-------------------------------------------------
1 files changed, 121 insertions(+), 598 deletions(-)
diff --git a/PAMapp/pages/questionnaire/_agentNo.vue b/PAMapp/pages/questionnaire/_agentNo.vue
index b861187..9e60e96 100644
--- a/PAMapp/pages/questionnaire/_agentNo.vue
+++ b/PAMapp/pages/questionnaire/_agentNo.vue
@@ -1,611 +1,134 @@
<template>
- <div class="ques-page">
- <div class="pb-18">
- <span class="mdTxt">��������鼠����‵撖思誑銝���(<i style="color: #FF0000">*</i>敹‵)</span>
+ <div class="ques-page--reset" v-if="isLogin">
+ <div class="ques-header">
+ <div class="ques-header__mob-banner"></div>
+ <div
+ class="ques-header__info"
+ v-if="myRequest.contactType==='phone'">
+ <div class="text--middle">
+ <div class="mdTxt">雿���蝜急撘�</div>
+ <div class="mt-10">
+ <span>�����</span>
+ <span>{{myRequest.phone}}</span>
+ </div>
+ </div>
+ <div class="mt-30">
+ <div class="datepicker required">
+ <span class="mdTxt">�����蝯∠�靘踵���</span>
+ <PhoneContactTimePicker
+ :scheduleList.sync="myRequest.hopeContactTime"/>
+ </div>
+ </div>
+ <div class="mt-30">
+ <div class="mdTxt">�隞��蝜急撘�</div>
+ <div class="ques-header__input-block">
+ <span>Email嚗�</span>
+ <input class="ques-header__input"
+ placeholder="隢撓�"
+ v-model="myRequest.email">
+ </div>
+ </div>
</div>
- <div class="pb-18">
- <span class="mdTxt required">隢�撣��憿批�誑�閰望�mail�蝜急�?</span>
- <span class="hint">�銴</span>
+ <div class="ques-header__info" v-else>
+ <div class="text--middle">
+ <div class="mdTxt">雿���蝜急撘�</div>
+ <div class="mt-10 ques-header__input-block">
+ <span>Email嚗�</span>
+ <span>{{myRequest.email}}</span>
+ </div>
+ </div>
+ <div class="mt-30">
+ <div class="mdTxt">�隞��蝜急撘�</div>
+ <div class="ques-header__input-block">
+ <span>�����</span>
+ <input class="ques-header__input"
+ :class="{'is-invalid': !phoneValid}"
+ placeholder="隢撓�"
+ maxlength="10"
+ v-model="myRequest.phone">
+ </div>
+ <div class="error mt-5 " style="margin-left:65px">
+ <span v-show="!phoneValid">����Ⅳ�撘�炊</span>
+ </div>
+ </div>
+ <div class="mt-30" v-if="myRequest.phone && phoneValid">
+ <div class="datepicker">
+ <span class="mdTxt">�����蝯∠�靘踵���</span>
+ <PhoneContactTimePicker
+ :scheduleList.sync="myRequest.hopeContactTime"/>
+ </div>
+ </div>
</div>
- <div class="pam-tags">
- <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="ques-container">
+ <div class="pam-paragraph">
+ <div class="mdTxt">
+ �閬岷������
+ <span class="hint text--bold">
+ (�銴)
+ </span>
+ <i class="icon-information text--bold" @click="showDrawer = true"></i>
</div>
- <div class="connectDesktop">
- <div v-if="isConnectMobile">
- <span class="fz-20 phone-no">
- 0912345678
- </span>
- </div>
- <el-row class="pb-10 pt-10">
- <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="myRequest.hopeContactTime"/>
- </div>
- </div>
- </div>
+ <MultiSelectBtn class="mt-10"
+ :mutiSelect.sync="myRequest.requirement"
+ :options="requirementOptions" />
+ </div>
+ <div class="pam-paragraph">
+ <div class="mdTxt">����批</div>
+ <SingleSelectBtn class="mt-10"
+ :singleSelected.sync="myRequest.gender"
+ :options="genderOptions" />
+ </div>
+ <div class="pam-paragraph">
+ <div class="mdTxt">撟湧翩</div>
+ <SingleSelectBtn class="mt-10"
+ :singleSelected.sync="myRequest.age"
+ :options="ageRangeOptions" />
+ </div>
+ <div class="pam-paragraph">
+ <CareerSelect :careerSelect.sync="myRequest.job"/>
+ </div>
+ <div class="pam-paragraph ques-footer">
+ <el-button type="primary"
+ :disabled="isDisabledSubmitBtn"
+ @click.native="sentDemand">
+ �
+ </el-button>
+ </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="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="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>
- <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>
+ <PopUpFrame :isOpen.sync="showDrawer" :drawerSize=" '95%' ">
+ <div class="qaTextTitle mdTxt">
+ <strong>�閬岷������</strong>
+ </div>
+ <div class="qa-dialog">
+ <div v-for="(qaText,index) in quesAboutList" :key="index" >
+ <div class="pt-10">
+ <p class="p bold">{{qaText.title}}</p>
+ <p class="p">{{qaText.content}}</p>
+ </div>
+ </div>
+ </div>
+ <div class="text--center mdTxt mt-10">
+ <el-button type="primary" @click="showDrawer = false">������</el-button>
+ </div>
+ </PopUpFrame>
- <div class="mdTxt pt-10 pb-10">�璆�</div>
- <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="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">
+ <PopUpFrame :isOpen.sync="sendReserve" @update:isOpen="closeReservePopUp">
+ <div class="text--middle mt-30 sendReserve-txt">�����������憿批���</div>
+ <div class="text--middle sendReserve-txt">�����蝯∴��</div>
+ <div class="text--center mdTxt">
<el-button type="primary"
- :disabled="isInitScheduleDisabled || !isSelectedQues"
- @click.native="sentDemand"
- >
- �
+ @click="closeReservePopUp">
+ ������
</el-button>
</div>
-
- <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 class="text--center mdTxt mt-10">
- <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="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="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>
- <div class="text--center mdTxt">
- <el-button
- type="primary"
- @click="closeReservePopUp"
- >������</el-button>
- </div>
- </PopUpFrame>
-
- </div>
+ </PopUpFrame>
+ </div>
</template>
-<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator';
-import { appointmentDemand, AppointmentParams, AppointmentRequests } from '~/assets/ts/api/consultant';
-import { getRequestsFromStorage, setRequestsToStorage } from '~/assets/ts/storageRequests';
+<script src="./questionnaire.component.ts"></script>
-@Component
- export default class Questionnaire extends Vue {
-
- myRequest: AppointmentRequests = {
- connectDevices: [],
- hopeContactTime: [{
- selectWeekOptions:[],
- selectTimesOptions:[],
- }],
- gender: '',
- email: '',
- job: '',
- otherJob: '',
- myQuestion: [],
- age: '',
- };
-
- showDrawer= false;
- showJobDrawer = false;
- sendReserve = false;
-
- 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.myRequest.connectDevices.includes('mobile');
- }
-
- get isConnectEmail(): boolean {
- 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;
- const storageMyRequest = getRequestsFromStorage();
- if (storageMyRequest) {
- this.myRequest = storageMyRequest;
- }
- }
-
- toggleConnectDevice(selectDevice: 'mobile' | 'email'): void {
- const deviceSelected = this.myRequest.connectDevices.includes(selectDevice);
- if (deviceSelected) {
- const deviceIndex = this.myRequest.connectDevices.findIndex((device) => device === selectDevice);
- this.myRequest.connectDevices.splice(deviceIndex, 1);
-
- if (selectDevice === 'mobile') {
- this.myRequest.hopeContactTime = [{
- selectWeekOptions:[],
- selectTimesOptions:[],
- }]
- }
-
- if (selectDevice === 'email') {
- this.myRequest.email = '';
- }
- return;
- }
- this.myRequest.connectDevices.push(selectDevice);
- }
-
- sentDemand() {
- const data: AppointmentParams = {
- phone: '09123456789',
- 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(),
- agentNo: this.agentNo
- };
-
- 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() {
- return this.myRequest.hopeContactTime.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" scoped>
-.input{
- border:none;
- border-radius: 10px;
-}
-.pl-18{
- padding-left: 18px;
-}
-.ageDesktop{
- margin-bottom: 10px;
- margin-right: 20px;
- height:47px;
-}
-.ageDesktopP2{
- margin-right: 30px;
- margin-bottom: 10px;
- height:47px;
-}
-
-.ml-5{
- margin-left: -5px;
-}
-.mr-25{
- margin-right: 30px;
-}
-.job-drawerTxt{
- 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;
-}
-
-.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;
- border:1px solid #D0D0CE ;
- display: flex;
- justify-content: space-between;
- background-color: #FFFFFF;
-}
-
-.qa-dialog-footer{
- display: flex;
- justify-content: center;
- margin-bottom: 81px;
- color: #ED1B2E;
- cursor: pointer;
-}//drawer��摨���見撘�
-
-.mt-18{
- margin-top: 18px;
-}
-
-.job-drawerTxt{
- display: flex;
- flex-direction: column;
- align-items: center;
- .el-button {
- width: 120px;
- height:50px;
- background-color: #ED1B2E;
- color:#FFFFFF;
- font-weight: normal;
- @extend .fz-20;
- &.el-button--default {
- color: $PRIMARY_RED;
- background-color: #FFFFFF;
- border-color: $PRIMARY_RED;
- }
- &.el-button--primary {
- background-color: $PRIMARY_RED;
- border-color: $PRIMARY_RED;
- }
- &.is-disabled {
- color: $PRIMARY_WHITE;
- background-color: $MID_GREY;
- border-color: $MID_GREY;
- border-style: solid;
- pointer-events: none;
- }
- }
-}//�璆剝�������������見撘身摰�
-
-.ques-footer{
- justify-content: center;
- margin: 30px 0;
- display: flex;
- flex-direction: column;
- align-items: center;
- .el-button {
- width: 120px;
- height:50px;
- background-color: #ED1B2E;
- color:#FFFFFF;
- font-weight: normal;
- @extend .fz-20;
- &.el-button--default {
- color: $PRIMARY_RED;
- background-color: #FFFFFF;
- border-color: $PRIMARY_RED;
- }
- &.el-button--primary {
- background-color: $PRIMARY_RED;
- border-color: $PRIMARY_RED;
- }
- &.is-disabled {
- color: $PRIMARY_WHITE;
- background-color: $MID_GREY;
- border-color: $MID_GREY;
- border-style: solid;
- pointer-events: none;
- }
- }
-}//����見撘����
-
-.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;
-}
-.qa-dialog-footer{
- display: flex;
- justify-content: center;
- margin-bottom: 81px;
- cursor: pointer;
-}
-.el-button+.el-button{
- margin-left: 0;
-}
-
-.down-icon{
- color:#ED1B2E;
- font-size: 25px;
- display: flex;
- 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;
- border:1px solid #D0D0CE ;
- display: flex;
- justify-content: space-between;
-}
-
-.date-icon{
- color:#ED1B2E;
- font-size: 25px;
- display: flex;
- justify-content: flex-end;
- 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 {
- border-width: 2px;
- border-radius: 30px;
- padding: 10px 20px;
- font-weight: normal;
- @extend .fz-20;
- &.el-button--default {
- color: black;
- background-color: #FFFFFF;
- border-color: #D0D0CE;
- }
- &.el-button--primary {
- background-color: $PRIMARY_RED;
- border-color: #D0D0CE;
- }
- &.active {
- background-color: #F09491;
- color: white;
- }
- }
-}
-
-.required {
- position: relative;
- &::before {
- content: '*';
- position: absolute;
- color: #FF0000;
- transform: translate(-12px, 0);
- }
-}
-
-.hint {
- font-size: 16px;
- color: #ED1B2E;
- font-weight: bold;
- .icon-information {
- padding: 0 5px;
- }
-}
-@include desktop {
-
- .contactMax{
- margin-right: 10px;
- }
- .connectDesktop{
- display: flex;
- flex-direction: column;
- }
- .desktopBtn{
- margin-right: 10px;
- height:47px
- }
- .ageDesktop{
- margin-right: 10px;
- }
- .ageDesktopP2{
- margin-right: 10px;
- }
-}
-
+<style lang="scss">
+ @import "./questionnaire.component.scss";
</style>
--
Gitblit v1.8.0