[ Update ] 修正可複選文案，將共用 css 先拉出，調整預約顧問 背景

劉鈞霖

2021-11-19 41daebaa3ffd0b99aac703208e4b6b2ec41c274e

 PAMapp/pages/questionnaire/_agentNo.vue

@@ -1,56 +1,84 @@
<template>
    <div class="ques-page">
        <div class="pb-18">
            <span class="mdTxt  required">請問您希望保險顧問以電話或Email聯繫您呢?</span>
            <span class="mdTxt">在預約之前，請幫助我們填寫以下問題(<i style="color: #FF0000">*</i>必填)</span>
        </div>
        <div class="pb-18">
            <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"/>
            <div class="pb-10 mt-10 mdTxt required">
                想要詢問的問題
                <span class="hint text--bold">
                    (可複選)
                </span>
                <i class="icon-information text--bold" @click="showDrawer = true"></i>
            </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="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>

@@ -58,16 +86,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%' ">
@@ -75,187 +109,194 @@
                <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>
                </div>
            <div class="qa-dialog-footer mdTxt" @click="showDrawer = false"><p>我知道了</p></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="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>
            <div class="qa-dialog-footer mdTxt" @click="closeReservePopUp"><p>我知道了</p></div>
            <div class="text--center mdTxt">
                <el-button
                    type="primary"
                    @click="closeReservePopUp"
                >我知道了</el-button>
            </div>
        </PopUpFrame>

    </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 initScheduleList = this.initScheduleList.map(item => {
                        return {
                            selectWeekOptions: item.selectWeekOptions.toString(),
                            selectTimesOptions: item.selectTimesOptions.toString()
                        }
                    })

                    return initScheduleList.map(i => {
                        return `'${i.selectWeekOptions},${i.selectTimesOptions}'`}
                    ).toString()
                    return this.myRequest.hopeContactTime.map(i => {
                        return `'${i.selectWeekOptions}、${i.selectTimesOptions}'`}
                    ).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;
                }
    }

@@ -264,6 +305,7 @@
        selected: boolean;
    }
</script>

<style lang="scss" scoped>
.input{
    border:none;
@@ -290,43 +332,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;
@@ -343,9 +380,11 @@
    color: #ED1B2E;
    cursor: pointer;
}//drawer最底下文字樣式

.mt-18{
    margin-top: 18px;
}

.job-drawerTxt{
    display: flex;
    flex-direction: column;
@@ -373,8 +412,9 @@
    border-style: solid;
    pointer-events: none;
    }
    }
  }
}//職業選項內所有文字排版與按鈕樣式設定

.ques-footer{
    justify-content: center;
    margin: 30px 0;
@@ -406,19 +446,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;
@@ -432,6 +476,7 @@
.el-button+.el-button{
    margin-left: 0;
}

.down-icon{
        color:#ED1B2E;
        font-size: 25px;
@@ -439,27 +484,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;
@@ -467,6 +516,7 @@
    display: flex;
    justify-content: space-between;
}

.date-icon{
    color:#ED1B2E;
        font-size: 25px;
@@ -475,24 +525,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 {
@@ -514,7 +570,7 @@
        background-color: #F09491;
        color: white;
    }
    }
  }
}

.required {
@@ -527,14 +583,6 @@
    }
}

.hint {
    font-size: 16px;
    color: #ED1B2E;
    font-weight: bold;
    .icon-information {
        padding: 0 5px;
    }
}
@include desktop {

    .contactMax{
@@ -556,4 +604,4 @@
    }
}

</style>
</style>