From 544f91e63a01f37e7b79db99609eec99b1afafd9 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期一, 13 十二月 2021 11:07:31 +0800
Subject: [PATCH] fixed: 使用 isUserLogin / isAdminLogin 判斷顧問/客戶是否登入
---
PAMapp/pages/questionnaire/_agentNo.vue | 1054 +++++++++++++++++++++++++++++++--------------------------
1 files changed, 569 insertions(+), 485 deletions(-)
diff --git a/PAMapp/pages/questionnaire/_agentNo.vue b/PAMapp/pages/questionnaire/_agentNo.vue
index 8262e3f..1ed02c8 100644
--- a/PAMapp/pages/questionnaire/_agentNo.vue
+++ b/PAMapp/pages/questionnaire/_agentNo.vue
@@ -1,383 +1,499 @@
<template>
- <div class="pam-page">
- <div class="pb-18">
- <span class="mdTxt required">隢�撣��憿批�誑�閰望�mail�蝜急�?</span>
- <span class="hint">�銴</span>
+ <div class="ques-page--reset" v-if="isUserLogin">
+ <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="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 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="connectDesktop">
- <div v-if="isConnectMobile">
- <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>
- </el-row>
- <div v-if="isConnectMobile">
- <div class="datepicker">
- <span class="mdTxt required">�����蝯∠�靘踵���</span>
- <PhoneContactTimePicker :scheduleList.sync="initScheduleList"/>
- </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"/>
- </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>
- </div>
- </div>
- <div class="mdTxt pb-10">撟湧翩</div>
- <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>
- </div>
- </div>
-
- <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="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="sentDemand">�</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="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" 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>
- </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="closeReservePopUp"><p>������</p></div>
- </PopUpFrame>
</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>
+ <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">
+ {{isEditBtn ? '��' : '�'}}
+ </el-button>
+ </div>
+ </div>
+
+ <PopUpFrame :isOpen.sync="showDrawer">
+ <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>
+
+ <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"
+ @click="closeReservePopUp">
+ ������
+ </el-button>
+ </div>
+ </PopUpFrame>
+
+ <PopUpFrame :isOpen.sync="isEditPopup">
+ <div class="text--middle mt-30 sendReserve-txt">��蝜潛�楊頛舫��嚗�</div>
+ <div class="text--center mdTxt">
+ <el-button @click="$router.go(-1)">餈��</el-button>
+ <el-button @click="isEditPopup = false" type="primary">蝺刻摩</el-button>
+ </div>
+ </PopUpFrame>
+ </div>
</template>
+
<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator';
-import { appointmentDemand } from '~/assets/ts/api/consultant';
+import { Vue, Component, State, Action, Watch, namespace } from 'nuxt-property-decorator';
+import { addFavoriteConsultant, appointmentDemand, AppointmentParams, AppointmentRequests ,editAppointment,RegisterInfo } from '~/assets/ts/api/consultant';
+import { getRequestQuestionFromStorage, getRequestsFromStorage, removeRequestQuestionFromStorage, setRequestsToStorage } from '~/assets/ts/storageRequests';
+import _ from 'lodash';
+import { Consultant } from '~/assets/ts/models/consultant.model';
+import { ContactType } from '~/assets/ts/models/enum/ContactType';
+import { Gender } from '~/assets/ts/models/enum/Gender';
+import { Role } from '~/assets/ts/models/enum/Role';
-@Component
- export default class Questionnaire extends Vue {
+ const roleStorage = namespace('localStorage');
+ @Component
+ export default class Questionnaire extends Vue {
+ @State('myConsultantList') myConsultantList!: Consultant[];
+ @Action storeConsultantList!: () => Promise<number>;
+ @roleStorage.Getter isUserLogin!:boolean;
- gender: 'male'|'female' = 'male';
- // connectTarget:'mobile'|'email'='mobile';
- connectDevices = ['1111'];
- mobileNumber = '';
- email = '';
- inputValue='';
- selectedQuestion: SelectedQuestion[] = [];
- // staff:'in'|'out'|'jobOther'='in';
- staff = '憭';
+ genderOptions=[
+ {
+ title:'���',
+ label:Gender.MALE,
+ },
+ {
+ title:'憟單��',
+ label:Gender.FEMALE,
+ }
+ ];
- age:'20'|'30'|'40'|'50'|'55'|'60'|'70'|'71' = '20';
- showDrawer= false;
- showJobDrawer = false;
- sendReserve = false;
- // datepicker Dto
- initScheduleList=[{
- selectWeekOptions:[],
- selectTimesOptions:[],
- }]
+ requirementOptions=[
+ {
+ title:'�摨瑁����',
+ label:'�摨瑁����',
+ },
+ {
+ title:'摮戊��',
+ label:'摮戊��',
+ },
+ {
+ title:'鞈閬��',
+ label:'鞈閬��',
+ },
+ {
+ title:'璅暑��隡�',
+ label:'璅暑��隡�',
+ },
+ {
+ title:'靽�瑼�/閬��',
+ label:'靽�瑼�/閬��',
+ },
+ {
+ title:'����',
+ label:'����',
+ },
+ ];
- // 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:'�摨瑁����',
- content:'蝒���������敺����犖��振摨剜����������������������靘��'
- },
- {
- title:'摮戊��',
- content:'������嚗������� ���摮戊雿�����暑�������'
- },
- {
- title:'鞈閬��',
- content:'�鞎∪�痊隞餃�������雲������������風嚗鈭箇����撥�����'
- },
- {
- title:'璅暑��隡�',
- content:'��靽�������嚗��暑����車������犖�����挾���暑��閬��'
- },
- {
- title:'靽�瑼�/閬��',
- content:'��瑼Ｚ�撌梁������蝚血����靘�◢�蝘餉��瘙�������������銝��'
- },
- {
- title:'��靽',
- content:'���漲��������翰�祟�敺����雿�憿批����脰�������蝯行�����潘��隞乩������“������潦��'
- },
- {
- title:'�隞�',
- content:'���漲��������翰�祟�敺����雿�憿批����脰�������蝯行�����潘��隞乩������“������潦��'
- },
- ]
- agentNo!: string;
+ ageRangeOptions=[
+ {
+ title:'20甇脖誑銝�',
+ label:'under_20',
+ },
+ {
+ title:'21-30 甇�',
+ label:'21-30'
+ },
+ {
+ title:'31-40 甇�',
+ label:'31-40'
+ },
+ {
+ title:'41-50 甇�',
+ label:'41-50'
+ },
+ {
+ title:'51-60 甇�',
+ label:'51-60',
+ },
+ {
+ title:'61-70 甇�',
+ label:'61-70',
+ },
+ {
+ title:'71 甇脖誑銝�',
+ label:'over_71',
+ }
+ ];
- get disableActionButton(): boolean {
- return true;
- };
+ quesAboutList = [
+ {
+ title:'�摨瑁����',
+ content:'����澈擃憿批末嚗�靽�兢蝳�嚗��������嚗��飩������摮拙��粥銝��頝荔�犖����迤閬����'
+ },
+ {
+ title:'摮戊��',
+ content:'摮拙���������葦銋摮貊��撠靘�蒂�雿嚗飛���������������瓷嚗��楝銝���韏瑕飛��'
+ },
+ {
+ title:'鞈閬��',
+ content:'��迤��瓷撖��雓寡�����嚗鈭箇�����蝳西瓷��◢�����Ⅱ靽�蝛拙��嚗�摰嗆��靘�末��皞���'
+ },
+ {
+ title:'璅暑��隡�',
+ content:'�銝�頛拙����隡��摮���翰瘣鳴�停敺�����������隡瓷����撌勗�帘摰�嚗蝎曉蔗���僑鈭箇�������'
+ },
+ {
+ title:'靽�瑼�/閬��',
+ content:'��瑼Ｚ�撌梁������蝚血����靘�◢�蝘餉��瘙��'
+ },
+ {
+ title:'����',
+ content:'���� ���������憸券�����鈭怒�����嚗���摰帘摰漲嚗��隞亙��澈��ˊ�靽���嚗�'
+ }
+ ];
- get isConnectMobile(): boolean {
- return this.connectDevices.includes('mobile');
- }
+ myRequest: AppointmentRequests = {
+ phone : this.userInfo?.phone ? this.userInfo.phone : '',
+ email : this.userInfo?.email ? this.userInfo.email : '',
+ contactType : _.isEqual(this.userInfo?.contactType,ContactType.SMS) ? ContactType.PHONE: ContactType.EMAIL,
+ gender : '',
+ age : '',
+ job : '',
+ requirement : [],
+ hopeContactTime: [{
+ selectWeekOptions : [],
+ selectTimesOptions: [],
+ }],
+ agentNo: '',
+ };
- get isConnectEmail(): boolean {
- return this.connectDevices.includes('email');
- }
+ showDrawer= false;
+ sendReserve = false;
+ isEditPopup = false;
+ isEditBtn = false;
- mounted() {
- this.agentNo = this.$route.params.agentNo;
- }
+ appointmentId = 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);
- return;
- }
- this.connectDevices.push(selectDevice);
- }
+ beforeRouteEnter(to: any, from: any, next: any) {
+ next(vm => {
+ const isUserLogin = vm.$store.getters['localStorage/isUserLogin'];
+ if (from.name === 'login' && !isUserLogin) {
+ vm.$router.go(-1);
+ return;
+ }
- 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('/')
- }
+ if (!isUserLogin) {
+ vm.$router.push('/login');
+ }
+ })
}
- export interface SelectedQuestion {
- name: string;
- selected: boolean;
+ async fetch() {
+ if (this.isUserLogin) {
+ await this.storeConsultantList();
+ };
}
+
+ mounted(): void {
+ this.setMyRequest();
+ }
+
+ private setMyRequest(): void {
+ const storageMyRequest = getRequestsFromStorage();
+ const storageMyQuestion = getRequestQuestionFromStorage();
+
+ if (storageMyRequest) {
+ this.myRequest = {
+ ...storageMyRequest,
+ hopeContactTime: storageMyRequest.hopeContactTime?.length
+ ? storageMyRequest.hopeContactTime
+ : [{
+ selectWeekOptions: [],
+ selectTimesOptions: [],
+ }],
+ };
+ }
+
+ if (storageMyQuestion) {
+ this.myRequest = {
+ ...this.myRequest,
+ requirement: storageMyQuestion
+ }
+ removeRequestQuestionFromStorage();
+ }
+ }
+
+ get phoneValid(): boolean {
+ const rule = /^09[0-9]{8}$/;
+ return this.myRequest.phone
+ ? rule.test(this.myRequest.phone) && _.isEqual(this.myRequest.phone.length,10)
+ : true;
+ }
+
+ get userInfo(): RegisterInfo {
+ const initUserInfo = JSON.parse(localStorage.getItem('userInfo')!);
+ return initUserInfo;
+ }
+
+ get isDisabledSubmitBtn(): boolean {
+ return _.includes(this.myRequest.contactType,ContactType.PHONE)
+ ? !this.isHopeContactTimeDone()
+ : !this.phoneValid;
+ }
+
+ private isHopeContactTimeDone():boolean{
+ return this.myRequest.hopeContactTime[0]?.selectWeekOptions.length >0 && this.myRequest.hopeContactTime[0]?.selectTimesOptions.length >0;
+ }
+
+ sentDemand() {
+ if (this.isEditBtn) {
+ this.sentEditAppointmentDemand();
+ } else {
+ addFavoriteConsultant([this.$route.params.agentNo]).then(res => this.sentAppointmentDemand());
+ }
+
+ }
+
+ private sentAppointmentDemand() {
+ const data: AppointmentParams = {
+ ...this.myRequest,
+ requirement: _.map(this.myRequest.requirement,o=>o).toString(),
+ hopeContactTime: this.myRequest.phone && this.phoneValid ? this.getHopeContactTime() :'',
+ agentNo: this.$route.params.agentNo
+ };
+
+ appointmentDemand(data).then(res => {
+ this.sendReserve = true;
+ this.myRequest.hopeContactTime = [];
+ setRequestsToStorage(this.myRequest);
+ });
+ }
+
+ private sentEditAppointmentDemand() {
+ const info = {
+ ...this.myRequest,
+ requirement: _.map(this.myRequest.requirement,o=>o).toString(),
+ hopeContactTime: this.myRequest.phone && this.phoneValid ? this.getHopeContactTime() :'',
+ id: this.appointmentId,
+ otherRequirement: null
+ }
+ editAppointment(info).then(res => {
+ this.sendReserve = true;
+ this.myRequest.hopeContactTime = [];
+ setRequestsToStorage(this.myRequest);
+ });
+ }
+
+ getHopeContactTime() {
+ const selectedHopeContactTime = this.myRequest.hopeContactTime.filter((i) => i.selectWeekOptions?.length && i.selectTimesOptions?.length);
+ return selectedHopeContactTime.map(i => {
+ return `'${i.selectWeekOptions}��${i.selectTimesOptions}'`}
+ ).toString();
+ }
+
+ closeReservePopUp() {
+ this.sendReserve = false;
+ this.$router.push('/')
+ }
+
+ private getLatestReserved(agentNo) {
+ const agentInfo = this.myConsultantList.filter(item => item.agentNo === agentNo);
+
+ const appointmentInfo = agentInfo.length > 0 && agentInfo[0].appointments
+ ? agentInfo[0].appointments!
+ .filter((appointment) => appointment.communicateStatus !== 'contacted')
+ .map((reversedAppointment) => {
+ return {
+ ...reversedAppointment,
+ sortDate: new Date(reversedAppointment.appointmentDate)
+ }
+ })
+ .sort((preAppointment, nextAppointment) => +nextAppointment.sortDate - +preAppointment.sortDate)[0]
+ : null;
+ return this.getReservedData(appointmentInfo);
+ }
+
+ private getReservedData(appointmentInfo) {
+ if (appointmentInfo) {
+ const hopeContactTime = appointmentInfo!.hopeContactTime.split("'")
+ .filter(item => item && item !== ',');
+ this.appointmentId = appointmentInfo.id;
+ return {
+ age: appointmentInfo.age,
+ agentNo: appointmentInfo.agentNo,
+ contactType: appointmentInfo.contactType,
+ email: appointmentInfo.email || '',
+ gender: appointmentInfo.gender,
+ hopeContactTime: hopeContactTime.map(item => {
+ const info = item.split('��');
+ return {
+ selectWeekOptions: info[0].split(','),
+ selectTimesOptions: info[1].split(',')
+ }
+ }),
+ job: appointmentInfo.job,
+ phone: appointmentInfo.phone || '',
+ requirement: appointmentInfo.requirement.split(',')
+ }
+ } else {
+ return {
+ age: '',
+ agentNo: '',
+ contactType: '',
+ email: '',
+ gender: '',
+ hopeContactTime: [],
+ job: '',
+ phone: '',
+ requirement: []
+ }
+ }
+ }
+
+ @Watch('myConsultantList') onMyConsultantListChange() {
+ if (this.isUserLogin && this.myConsultantList.length > 0) {
+ const editAppointment = this.getLatestReserved(this.$route.params.agentNo);
+
+ if (editAppointment.agentNo) {
+ this.myRequest = JSON.parse(JSON.stringify(editAppointment));
+ if (!this.$route.query || this.$route.query.edit !== 'true') {
+ this.isEditPopup = true;
+ }
+ this.isEditBtn = true;
+ return;
+ }
+ }
+ }
+ }
</script>
-<style lang="scss">
-.el-radio-button__orig-radio:checked+.el-radio-button__inner{
- background-color: #FFFFFF;
- color: black;
- border-color:none;
- border:none;
- box-shadow: none;
- font-weight: bold;
-}
-.el-radio-button:first-child .el-radio-button__inner{
- border-left:none;
-}
-.el-radio-button__inner {
- border:none;
- font-size: 20px;
-}
-.radio-btn{
- display: flex;
- flex-direction: column;
- margin-top: 30px;
-}
-.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;
-
-}
+<style lang="scss" scoped>
.sendReserve-txt{
- display: flex;
- justify-content: center;
- margin-top: 10px;
- margin-bottom: 26px;
-}
-.pl-20{
- padding-left: 20px;
-}
-.ques-footer{
- display: flex;
- justify-content: center;
-}
-.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;
+ display: flex;
+ justify-content: center;
+ margin-top: 10px;
+ margin-bottom: 26px;
}
+//drawer��摨���見撘�
.qa-dialog-footer{
- display: flex;
- justify-content: center;
- margin-bottom: 81px;
- color: #ED1B2E;
-}//drawer��摨���見撘�
-.mt-18{
- margin-top: 18px;
+ display: flex;
+ justify-content: center;
+ margin-bottom: 81px;
+ color: #ED1B2E;
+ cursor: pointer;
}
-.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;
- }
- }
-}//�璆剝�������������見撘身摰�
+
+//����見撘����
.ques-footer{
- display: flex;
- flex-direction: column;
- align-items: center;
- .el-button {
+ 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;
+ @extend .text--middle ;
&.el-button--default {
color: $PRIMARY_RED;
background-color: #FFFFFF;
@@ -387,154 +503,122 @@
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;
}
-}//����見撘����
+ }
+}
+
+//閰喟敦���rawer銝剝�摰寧征��之撠身蝵�
.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;
+ overflow-y:auto;
+ height: 60vh;
+ margin-top: 20px;
}
-.qa-dialog-footer{
- display: flex;
- justify-content: center;
- margin-bottom: 81px;
-}
-.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;
+//閰喟敦���rawer銝餉����
+.qaTextTitle{
+ margin-top:30px;
+ display: flex;
+ justify-content: center;
}
-.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;
- }
- }
+ display: flex;
+ flex-direction: column;
}
.required {
+ position: relative;
+ &::before {
+ content: '*';
+ position: absolute;
+ color: #FF0000;
+ transform: translate(-12px, 0);
+ }
+}
+
+.ques-page--reset.pam-page-container {
+ margin: 0px auto;
+}
+
+.ques-header {
+ position: relative;
+}
+
+.ques-header__mob-banner {
+ width: 100%;
+ min-height: 80px;
+ background-color: #F8F9FA;
+ background-image: url('~/assets/images/questionnaire/reserve_bg_mob.svg');
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+}
+
+ .ques-header__info {
position: relative;
- &::before {
- content: '*';
- position: absolute;
- color: #FF0000;
- transform: translate(-12px, 0);
+ padding:30px 20px;
+ margin: 0px 20px;
+ background-color: #B3E7E3;
+ border-radius: 10px;
+ }
+
+ .ques-header__input-block {
+ display: flex;
+ align-items: center;
+ @extend .text--middle,.mt-10 ;
+ .ques-header__input{
+ &.is-invalid{
+ border: 2px solid $PRIMARY_RED !important;
+ }
+ flex: 1;
+ height: 50px;
+ border-radius: 10px;
+ border: 1px #CCCCCC solid;
+ background-color: $PRIMARY_WHITE;
+ padding: 15px 10px;
+ box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
}
+ }
+
+ .ques-container {
+ position: relative;
+ margin: 0px 20px;
+ }
+
+
+ @include desktop{
+ .ques-header{
+ display: flex;
+ justify-content: flex-end;
+ min-height: 460px;
+ background-image: url('~/assets/images/questionnaire/reserve_bg_web.svg');
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: bottom;
+ }
+ .ques-header__mob-banner{
+ display: none;
+ }
+ .ques-header__info{
+ margin: 30px 20px;
+ width:500px;
+ min-height: 400px;
+ -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+ -moz-box-sizing: border-box; /* Firefox, other Gecko */
+ box-sizing: border-box;
+ }
+ .ques-container{
+ margin: 0px;
+ }
}
-.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>
-</style>
\ No newline at end of file
--
Gitblit v1.8.0