add#129055 - [預約前詢問] 前端畫面刻版

HelenHuang

2021-11-05 f7a9180515f4ea273cfc1d0a02ada466b6fc17c1

add#129055 - [預約前詢問] 前端畫面刻版

 PAMapp/pages/questionnaire/index.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,491 @@
<template>
    <div class="pam-page">
        <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>  
        </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 pb-16">手機連絡的方便時間</span>
                    <span class="mdTxt pb-10">時段一</span>
                    <div class="date-pick"><div class="fz-20 date-txt">請選擇</div><i class="icon-calender date-icon"></i></div>
                    <span class="add-date"><i class="icon-add "></i>新增時段</span>
                </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 />
            </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="sendReserve = true">送出</el-button>
        </div>

        <UiDrawer :is-visible.sync="showDrawer" size='95%'>
            
            <div class="qaTextTitle mdTxt">想要詢問的問題</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>  
        </UiDrawer>
            
        <UiDrawer  :is-visible.sync="showJobDrawer" size='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" 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>                
        </UiDrawer>
        <UiDrawer :is-visible.sync="sendReserve">
            <div class="fz-20 mt-30">預約成功！您預約的保險顧問會</div>
            <div class="fz-20 sendReserve-txt">儘速與您聯絡！</div>
            <div class="qa-dialog-footer mdTxt" @click="sendReserve = false"><p>我知道了</p></div>  
        </UiDrawer>
    </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component
    export default class Questionnaire extends Vue {

                gender: 'male'|'female' = 'male';
                // connectTarget:'mobile'|'email'='mobile';
                connectDevices = ['1111'];
                mobileNumber = '';
                email = '';
                inputValue='';
                // staff:'in'|'out'|'jobOther'='in';
                staff = '外勤';
            
                age:'20'|'30'|'40'|'50'|'55'|'60'|'70'|'71' = '20';
                showDrawer= false;
                showJobDrawer = false;
                sendReserve = false;


                // 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:'匹配度是透過嚴選配對或快速篩選後，將每一位保險顧問資料進行比對後排序推薦給您的媒合數值，您可以作為選擇適合顧問的參考值。'
                    },
                ]
                

                get disableActionButton(): boolean {
                    return true;
                };

                get isConnectMobile(): boolean {
                    return this.connectDevices.includes('mobile');
                }

                get isConnectEmail(): boolean {
                    return this.connectDevices.includes('email');
                }

                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);
                }
                add():{
                    
                }

    }
</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;

}
.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;
}

.qa-dialog-footer{
    display: flex;
    justify-content: center;
    margin-bottom: 81px;
    color: #ED1B2E;
}//drawer最底下文字樣式
.mt-18{
    margin-top: 18px;
}
.job-drawerTxt{
    display: flex;
    flex-direction: column;
    align-items: center;
    .el-button {
    width: 120px;
    height:50px;
    background-color: #ED1B2E;
    color:#FFFFFF;
    font-weight: normal;
    @extend .fz-20;
    &.el-button--default {
        color: $PRIMARY_RED;
        background-color: #FFFFFF;
        border-color: $PRIMARY_RED;
    }
    &.el-button--primary {
        background-color: $PRIMARY_RED;
        border-color: $PRIMARY_RED;
    }
    }
}//職業選項內所有文字排版與按鈕樣式設定
.ques-footer{
    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;
    }
    }
}//送出按鈕樣式與排版
.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;
}
.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;

}
.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;
}

.ageTags{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.datepicker{
    display: flex;
    flex-direction: column;
}
.pb-18{
    padding-bottom: 18px;
}
.mr-20{
    margin-right: 20px;
}
.pam-age-tags {
    display: flex;
    .el-button {
    border-width: 2px;
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: normal;
    @extend .fz-20;
    &.el-button--default {
        color: black;
        background-color: #FFFFFF;
        border-color: #D0D0CE;
    }
    &.el-button--primary {
        background-color: $PRIMARY_RED;
        border-color: #D0D0CE;
    }
    &.active {
        background-color: #F09491;
        color: white;
    }
    }
}

.required {
    position: relative;
    &::before {
        content: '*';
        position: absolute;
        color: #FF0000;
        transform: translate(-12px, 0);
    }
}

.hint {
    font-size: 16px;
    color: #ED1B2E;
    font-weight: bold;
    .icon-information {
        padding: 0 5px;
    }
}
@include desktop {
    .contactMax{
        margin-right: 10px;
    }
    .connectDesktop{
        display: flex;
        flex-direction: column;
    }
    .desktopBtn{
        margin-right: 10px;
        height:47px
    }
    .ageDesktop{
        margin-right: 10px;
    }
    .ageDesktopP2{
        margin-right: 10px;
    }
}

</style>