update#130453: [諮詢前問項] : b. 再度登入時，進行預約諮詢前的問項資料會自動帶入，此為phase 1範圍，待處理

Tomas

2021-11-19 945df9fec87c64d45f4a8878f302afe052a9bee3

update#130453: [諮詢前問項] : b. 再度登入時，進行預約諮詢前的問項資料會自動帶入，此為phase 1範圍，待處理

 PAMapp/assets/scss/utilities/_utilities.scss

@@ -66,6 +66,10 @@
  padding-left: 10px;
}

.pl-20{
  padding-left: 20px;
}

.pam-paragraph {
  margin: 30px 0;
}

 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{

 PAMapp/assets/ts/storageRequests.ts

¤ñ¹ï·sÀÉ®×
@@ -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));
}

 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>
</style>

 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>
</style>

 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>
</style>

 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">請問您希望保險顧問以電話或Email聯繫您呢?</span>
            <span class="mdTxt required">請問您希望保險顧問以電話或Email聯繫您呢?</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:'全面檢視自己的保障結構是否符合現在或未來的風險移轉需求，透過「斷、捨、離」把錢花在刀口上。'
                    },
                    {
                        title:'防疫保單',
                        content:'匹配度是透過嚴選配對或快速篩選後，將每一位保險顧問資料進行比對後排序推薦給您的媒合數值，您可以作為選擇適合顧問的參考值。'
                    },
                    {
                        title:'其他',
                        content:'匹配度是透過嚴選配對或快速篩選後，將每一位保險顧問資料進行比對後排序推薦給您的媒合數值，您可以作為選擇適合顧問的參考值。'
                    },
                ]
                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.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;
}//詳細問題drawer中間內容空間大小設置

.qaTextTitle{
    margin-top:30px;
    display: flex;
    justify-content: center;
}//詳細問題drawer主要標題

.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 {