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