<template>
|
<div class="ques-page--reset" v-if="isLogin">
|
<div class="ques-header">
|
<div class="ques-header__mob-banner"></div>
|
<div
|
class="ques-header__info"
|
v-if="myRequest.contactType==='phone'">
|
<div class="text--middle">
|
<div class="mdTxt">你指定的聯繫方式</div>
|
<div class="mt-10">
|
<span>手機：</span>
|
<span>{{myRequest.phone}}</span>
|
</div>
|
</div>
|
<div class="mt-30">
|
<div class="datepicker required">
|
<span class="mdTxt">手機連絡的方便時間</span>
|
<PhoneContactTimePicker
|
:scheduleList.sync="myRequest.hopeContactTime"/>
|
</div>
|
</div>
|
<div class="mt-30">
|
<div class="mdTxt">其他備用聯繫方式</div>
|
<div class="ques-header__input-block">
|
<span>Email：</span>
|
<input class="ques-header__input"
|
placeholder="請輸入"
|
v-model="myRequest.email">
|
</div>
|
</div>
|
</div>
|
<div class="ques-header__info" v-else>
|
<div class="text--middle">
|
<div class="mdTxt">你指定的聯繫方式</div>
|
<div class="mt-10 ques-header__input-block">
|
<span>Email：</span>
|
<span>{{myRequest.email}}</span>
|
</div>
|
</div>
|
<div class="mt-30">
|
<div class="mdTxt">其他備用聯繫方式</div>
|
<div class="ques-header__input-block">
|
<span>手機：</span>
|
<input class="ques-header__input"
|
:class="{'is-invalid': !phoneValid}"
|
placeholder="請輸入"
|
maxlength="10"
|
v-model="myRequest.phone">
|
</div>
|
<div class="error mt-5 " style="margin-left:65px">
|
<span v-show="!phoneValid">手機號碼格式有誤</span>
|
</div>
|
</div>
|
<div class="mt-30" v-if="myRequest.phone && phoneValid">
|
<div class="datepicker">
|
<span class="mdTxt">手機連絡的方便時間</span>
|
<PhoneContactTimePicker
|
:scheduleList.sync="myRequest.hopeContactTime"/>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="ques-container">
|
<div class="pam-paragraph">
|
<div class="mdTxt">
|
想要詢問的問題
|
<span class="hint text--bold">
|
(可複選)
|
</span>
|
<i class="icon-information text--bold" @click="showDrawer = true"></i>
|
</div>
|
<MultiSelectBtn class="mt-10"
|
:mutiSelect.sync="myRequest.requirement"
|
:options="requirementOptions" />
|
</div>
|
<div class="pam-paragraph">
|
<div class="mdTxt">您的性別</div>
|
<SingleSelectBtn class="mt-10"
|
:singleSelected.sync="myRequest.gender"
|
:options="genderOptions" />
|
</div>
|
<div class="pam-paragraph">
|
<div class="mdTxt">年齡</div>
|
<SingleSelectBtn class="mt-10"
|
:singleSelected.sync="myRequest.age"
|
:options="ageRangeOptions" />
|
</div>
|
<div class="pam-paragraph">
|
<CareerSelect :careerSelect.sync="myRequest.job"/>
|
</div>
|
<div class="pam-paragraph ques-footer">
|
<el-button type="primary"
|
:disabled="isDisabledSubmitBtn"
|
@click.native="sentDemand">
|
{{isEditBtn ? '更新' : '送出'}}
|
</el-button>
|
</div>
|
</div>
|
|
<PopUpFrame :isOpen.sync="showDrawer" :drawerSize=" '95%' ">
|
<div class="qaTextTitle mdTxt">
|
<strong>想要詢問的問題</strong>
|
</div>
|
<div class="qa-dialog">
|
<div v-for="(qaText,index) in quesAboutList" :key="index" >
|
<div class="pt-10">
|
<p class="p bold">{{qaText.title}}</p>
|
<p class="p">{{qaText.content}}</p>
|
</div>
|
</div>
|
</div>
|
<div class="text--center mdTxt mt-10">
|
<el-button type="primary" @click="showDrawer = false">我知道了</el-button>
|
</div>
|
</PopUpFrame>
|
|
<PopUpFrame :isOpen.sync="sendReserve" @update:isOpen="closeReservePopUp">
|
<div class="text--middle mt-30 sendReserve-txt">預約成功！您預約的保險顧問會</div>
|
<div class="text--middle sendReserve-txt">儘速與您聯絡！</div>
|
<div class="text--center mdTxt">
|
<el-button type="primary"
|
@click="closeReservePopUp">
|
我知道了
|
</el-button>
|
</div>
|
</PopUpFrame>
|
|
<PopUpFrame :isOpen.sync="isEditPopup">
|
<div class="text--middle mt-30 sendReserve-txt">是否繼續編輯預約單？</div>
|
<div class="text--center mdTxt">
|
<el-button @click="$router.go(-1)">返回</el-button>
|
<el-button @click="isEditPopup = false" type="primary">編輯</el-button>
|
</div>
|
</PopUpFrame>
|
</div>
|
</template>
|
|
<script src="./questionnaire.component.ts"></script>
|
|
<style lang="scss">
|
@import "./questionnaire.component.scss";
|
</style>
|
