mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-06 18:56:44 +08:00
597 lines
20 KiB
Vue
597 lines
20 KiB
Vue
<template>
|
||
<div class="question-container">
|
||
<div class="question-header bg-white pt20 pb20 pr10 pl10" >
|
||
<h5 class="fs14">投保人信息</h5>
|
||
<div class="fs14 fieldContent">
|
||
<van-cell-group :border="false">
|
||
<van-field v-model="saleInsuredInfo.name" label="姓名" readonly required/>
|
||
<van-field :value="saleInsuredInfo.idType | idToText('insuredIdType')" label="证件类型" readonly required/>
|
||
<van-field v-model="saleInsuredInfo.idNo" label="证件号码" readonly required/>
|
||
<van-field v-model="saleInsuredInfo.mobile" label="联系方式" readonly required/>
|
||
<van-field v-model="saleInsuredInfo.occupationName" label="职业" readonly required/>
|
||
</van-cell-group>
|
||
</div>
|
||
<!-- <button class="btn" @click="clickBtn">返回</button> -->
|
||
<div class="evalDesc" >
|
||
<h5> {{questionInfo.questionHeadDesc}}</h5>
|
||
<h5>{{questionInfo.question1Desc}}</h5>
|
||
<h5>{{questionInfo.question2Desc}}</h5>
|
||
<h5>{{questionInfo.question3Desc}}</h5>
|
||
<h5>{{questionInfo.questionTailDesc}}</h5>
|
||
</div>
|
||
<div class="question-detail">
|
||
<div v-for="(item,idx) in questionList">
|
||
<!-- 单选框 -->
|
||
<div v-if="item.type=='radio'">
|
||
<p style="margin:2vh 0">{{ item.title }}</p>
|
||
<van-radio-group class="mb15" v-model="answerList[idx]" @change="handlerRadio($event,item,idx)">
|
||
<van-radio
|
||
class="mb15"
|
||
v-for="(itemRadio,idxRadio) in item.options"
|
||
:name="itemRadio.option"
|
||
:key="idxRadio"
|
||
>{{itemRadio.item}}
|
||
</van-radio>
|
||
</van-radio-group>
|
||
</div>
|
||
|
||
<!-- 多选框 -->
|
||
<div v-if="item.type=='checkbox'">
|
||
<p style="margin:2vh 0">{{ item.title }}</p>
|
||
<van-checkbox-group
|
||
v-model="answerList[idx]"
|
||
@change="handlerCheckbox($event,item,idx)"
|
||
>
|
||
<van-checkbox
|
||
class="mb15"
|
||
v-for="(itemCheckbox,idxCheckbox) in item.options"
|
||
:name="itemCheckbox.option"
|
||
:key="idxCheckbox"
|
||
shape="square"
|
||
>
|
||
|
||
{{itemCheckbox.item}}
|
||
<div class="question-detail-checkbox" v-if="showPurpose&&idxCheckbox==1" @click.stop>
|
||
<p class="c-link mt10 mb10 fs12">除本次投保外，您是否已为被保险人投保过类似损失补偿型保险产品（如百万医疗险等以报销住院费用为保障的产品）且保单目前仍在有效中？</p>
|
||
<van-radio-group v-model="CheckBoxExtraRadio" class="extraRadio flex pb10 fs10" direction="horizontal" @click.stop>
|
||
<van-radio
|
||
:name="part.option"
|
||
@click.stop v-for="(part,partIdx) in itemCheckbox.parts[0].options"
|
||
>
|
||
{{part.item}}
|
||
</van-radio>
|
||
</van-radio-group>
|
||
|
||
<van-field class="extraInput" label-width="0" v-model="CheckBoxExtraDesc" placeholder="请说明险种名称、保额：" v-if="CheckBoxExtraRadio === 'Y'" @click.stop/>
|
||
</div>
|
||
</van-checkbox>
|
||
</van-checkbox-group>
|
||
|
||
</div>
|
||
<!-- 输入框 -->
|
||
<div v-if="item.type=='input'" class="mb15">
|
||
<p class="budget-text">
|
||
<template v-for="(segment, index) in item.title.split(/\___/)" >
|
||
<!-- 显示文本片段 -->
|
||
{{ segment }}
|
||
<!-- 除了最后一个片段外，每个文本片段后都添加输入框 -->
|
||
<input
|
||
v-if="index < item.title.split(/\___/).length - 1"
|
||
type="number"
|
||
@input="handlerInput($event,item,idx,index)"
|
||
step="0.01"
|
||
min="0"
|
||
class="budget-input"
|
||
>
|
||
</template>
|
||
<div class="fs12 c-gray-base">请填写1-10000之间的整数</div>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="question-btn bottom-btn bg-white">
|
||
<van-button type="danger" size="large" :disabled="disabled" class="bottom-btn" @click="submitAnswer" v-no-more-click="1000">提交</van-button>
|
||
</div>
|
||
<PopupQuesResult
|
||
@reTestHandler="reTest"
|
||
@toInsureHandler="toInsure"
|
||
@clickOverlayHandler="clickOverlay"
|
||
:resultRiskType = "resultRiskType"
|
||
:showResultPopup="showResultPopup"
|
||
:showHasTested = "showHasTested"
|
||
:showNoTested="showNoTested"
|
||
:appntInfo="saleInsuredInfo"
|
||
/>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { getOrderDetail, saveEvalateAnswer } from '@/api/ebiz/sale/sale'
|
||
import PopupQuesResult from '@/components/common/PopupQuesResult'
|
||
export default {
|
||
name: 'Question',
|
||
components: {
|
||
PopupQuesResult
|
||
},
|
||
data() {
|
||
return {
|
||
saleInsuredInfo:{},
|
||
showPurpose:false,
|
||
showResultPopup:false,
|
||
showHasTested:false,
|
||
showNoTested:false,
|
||
answerList:[],
|
||
resultRiskType:null,
|
||
assessResult:null,
|
||
questionInfo:{},
|
||
questionList:[],
|
||
assessQuestionnaireDtoList:[],
|
||
CheckBoxExtraRadio:'',
|
||
CheckBoxExtraDesc:'',
|
||
disabled:true,
|
||
assessFlag:null,
|
||
fromEdit:""
|
||
}
|
||
},
|
||
watch: {
|
||
assessQuestionnaireDtoList: {
|
||
handler(newVal) {
|
||
if(newVal) {
|
||
console.log('检测到了长度', newVal)
|
||
if(newVal.length !== this.questionList.length){
|
||
this.disabled = true
|
||
}else{
|
||
if(Array.from(newVal).some(item=>!item)){
|
||
console.log('检测到了有空值', Array.from(newVal))
|
||
this.disabled = true
|
||
} else if(Array.from(newVal)[3].chooseDesc.split(',').length!=2||
|
||
Array.from(newVal)[3].chooseDesc.split(',').some(item=>!item)||
|
||
!Array.from(newVal)[4].chooseDesc
|
||
){
|
||
this.disabled = true
|
||
}else if(Array.from(newVal)[1].choose.length==0){
|
||
this.disabled = true
|
||
}else if(Array.from(newVal)[1].choose.length>0&&Array.from(newVal)[1].choose.includes('B')){
|
||
console.log('检测到了B', Array.from(newVal)[1])
|
||
if(Array.from(newVal)[1].subOption=='Y' && !Array.from(newVal)[1].subOptionContent){
|
||
this.disabled = true
|
||
}else if(Array.from(newVal)[1].subOption=='N'){
|
||
this.disabled = false
|
||
}else if(!Array.from(newVal)[1].subOption){
|
||
this.disabled = true
|
||
}
|
||
else{
|
||
this.disabled = false
|
||
}
|
||
}else{
|
||
this.disabled = false
|
||
}
|
||
}
|
||
}
|
||
},
|
||
deep: true
|
||
},
|
||
CheckBoxExtraRadio: {
|
||
handler(newVal) {
|
||
if(!!newVal&&this.answerList[1].includes('B')) {
|
||
// 创建一个新对象，保留原对象的所有属性，只修改subOption为空
|
||
if(newVal=='N'){
|
||
this.CheckBoxExtraDesc = ''
|
||
}
|
||
const updatedItem = {
|
||
...this.assessQuestionnaireDtoList[1],
|
||
subOption: newVal,
|
||
subOptionContent:newVal=='Y'?this.CheckBoxExtraDesc:null
|
||
};
|
||
this.$set(this.assessQuestionnaireDtoList, 1, updatedItem);
|
||
console.log('检测到了第一项数据', newVal,this.assessQuestionnaireDtoList)
|
||
}
|
||
},
|
||
},
|
||
CheckBoxExtraDesc:{
|
||
handler(newVal) {
|
||
if(this.answerList[1].includes('B')) {
|
||
// 创建一个新对象，保留原对象的所有属性，只修改subOption为空
|
||
const updatedItem = {
|
||
...this.assessQuestionnaireDtoList[1],
|
||
subOptionContent: newVal
|
||
};
|
||
this.$set(this.assessQuestionnaireDtoList, 1, updatedItem);
|
||
console.log('检测到了第一项数据', newVal,this.assessQuestionnaireDtoList)
|
||
}
|
||
},
|
||
},
|
||
'answerList.1': {
|
||
handler(newVal) {
|
||
console.log('检测到了第一项数据', newVal)
|
||
if(!newVal.includes('B')) {
|
||
this.CheckBoxExtraDesc = ''
|
||
this.CheckBoxExtraRadio =''
|
||
const updatedItem = {
|
||
...this.assessQuestionnaireDtoList[1],
|
||
subOption: null,
|
||
subOptionContent: null
|
||
};
|
||
this.$set(this.assessQuestionnaireDtoList, 1, updatedItem);
|
||
console.log('检测到了第一项数据', this.assessQuestionnaireDtoList)
|
||
|
||
}
|
||
|
||
},
|
||
}
|
||
},
|
||
|
||
mounted(){
|
||
this.$jump({
|
||
flag: 'navigation',
|
||
extra: {
|
||
title: '保险产品适当性评估问卷'
|
||
},
|
||
})
|
||
localStorage.setItem('evalateFrom', 'toEvaluate')
|
||
if (localStorage.isFrom == 'sale') {
|
||
setTimeout(() => {
|
||
EWebBridge.webCallAppInJs('webview_left_button', {
|
||
img: this.$assetsUrl + 'images/del-close-btn@3x.png',
|
||
intercept: '1' //是否拦截原生返回事件 1是 其他否
|
||
})
|
||
}, 100)
|
||
}
|
||
window.appCallBack = this.appCallBack
|
||
document.body.style.backgroundColor = '#fff'
|
||
const orderNo = this.$route.query.orderNo
|
||
|
||
getOrderDetail({ orderNo: this.$route.query.orderNo,userAssessLogic:true }).then(res => {
|
||
if (res.result == 0) {
|
||
//是否做过测评及是否超出限制
|
||
this.assessFlag = res.orderDTO.orderInfoDTO.assessFlag
|
||
this.questionInfo = res.orderDTO.orderInfoDTO.assessQuestionnaireDto
|
||
this.questionList = res.orderDTO.orderInfoDTO.assessQuestionnaireDto.questionList
|
||
this.ageList = res.orderDTO.orderInfoDTO.assessQuestionnaireDto.questionList[0].options.map(item=>item.item)
|
||
if (this.$CacheUtils.getLocItem('saleInsuredInfo')) {
|
||
this.saleInsuredInfo = JSON.parse(this.$CacheUtils.getLocItem('saleInsuredInfo'))
|
||
|
||
}else{
|
||
this.saleInsuredInfo = res.orderDTO.appntDTO
|
||
}
|
||
console.log('投保人信息',this.saleInsuredInfo)
|
||
this.handlerFirstQuestion()
|
||
console.log('this.ageList',this.ageList,this.questionList)
|
||
} else {
|
||
this.$toast(res.resultMessage)
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
appCallBack(data) {
|
||
if (data.trigger == 'left_button_click' && localStorage.isFrom == 'sale') {
|
||
return this.$dialog
|
||
.confirm({
|
||
className: 'dialog-delete',
|
||
title: '提示',
|
||
message: '退出流程可能会丢失部分数据，是否确认退出？',
|
||
cancelButtonColor: '#E9332E',
|
||
confirmButtonColor: '#FFFFFF'
|
||
})
|
||
.then(() => {
|
||
this.$jump({
|
||
flag: 'h5',
|
||
extra: {
|
||
title: '电子投保单列表',
|
||
forbidSwipeBack: 1, //当前页面禁止右滑返回
|
||
url: location.origin + `/#/sale/list`
|
||
},
|
||
routerInfo: {
|
||
path: `/sale/list`,
|
||
type: '1'
|
||
}
|
||
})
|
||
})
|
||
.catch(() => {
|
||
return
|
||
})
|
||
}
|
||
},
|
||
//单选框处理数据
|
||
handlerRadio(e,item, idx) {
|
||
this.$set(this.assessQuestionnaireDtoList,idx,{
|
||
orderNo:this.$route.query.orderNo,
|
||
questionNo:item.questionNo,
|
||
questionContent:item.title,
|
||
choose:e,
|
||
chooseContent:this.filterRadioElement('content',e,item),
|
||
subOption:null,
|
||
subOptionContent:null,
|
||
score:this.filterRadioElement('score',e,item),
|
||
chooseDesc:null,
|
||
})
|
||
// this.assessQuestionnaireDtoList[idx]={
|
||
// orderNo:this.$route.query.orderNo,
|
||
// questionNo:item.questionNo,
|
||
// questionContent:item.title,
|
||
// choose:e,
|
||
// chooseContent:this.filterRadioElement('content',e,item),
|
||
// subOption:null,
|
||
// subOptionContent:null,
|
||
// score:this.filterRadioElement('score',e,item),
|
||
// chooseDesc:null,
|
||
// }
|
||
console.log('answerList',this.answerList)
|
||
console.log('this.assessQuestionnaireDtoList',this.assessQuestionnaireDtoList)
|
||
},
|
||
|
||
//单选框筛选出分数和每项
|
||
filterRadioElement(el,e,item){
|
||
console.log('点击单选框',el,e,item)
|
||
if(el=='content'){
|
||
return item.options.find(item=>item.option==e).item.substring(2)
|
||
}else if(el=='score'){
|
||
return parseInt(item.options.find(item=>item.option==e).score)
|
||
}
|
||
},
|
||
|
||
//输入框处理组装数据
|
||
handlerInput(e,item,idx,index){
|
||
if(!Array.from(this.answerList)[idx] || this.answerList[idx].length==0){
|
||
this.answerList[idx] = []
|
||
}
|
||
let chooseDesc = ''
|
||
if(idx== 3){
|
||
if(index==0){
|
||
this.$set(this.answerList[idx], 0, e.target.value)
|
||
}else{
|
||
this.$set(this.answerList[idx], 1, e.target.value)
|
||
}
|
||
chooseDesc = this.answerList[idx].join(',')
|
||
}else if(idx== 4){
|
||
this.$set(this.answerList[idx], 0, e.target.value)
|
||
chooseDesc=this.answerList[idx][0]
|
||
}
|
||
this.$set(this.assessQuestionnaireDtoList,idx,{
|
||
orderNo:this.$route.query.orderNo,
|
||
questionNo:item.questionNo,
|
||
questionContent:item.title,
|
||
choose:null,
|
||
chooseContent:null,
|
||
subOption:null,
|
||
subOptionContent:null,
|
||
score:null,
|
||
chooseDesc,
|
||
})
|
||
console.log('answerList',this.answerList)
|
||
console.log('this.assessQuestionnaireDtoList',this.assessQuestionnaireDtoList)
|
||
},
|
||
|
||
handlerCheckbox(e,item, idx) {
|
||
if(e.includes('B')){
|
||
this.showPurpose = true
|
||
}else{
|
||
this.showPurpose = false
|
||
}
|
||
this.$set(this.assessQuestionnaireDtoList,idx,{
|
||
orderNo:this.$route.query.orderNo,
|
||
questionNo:item.questionNo,
|
||
questionContent:item.title,
|
||
choose:this.filterCheckBoxElement('letter',e,item),
|
||
chooseContent:this.filterCheckBoxElement('content',e,item),
|
||
score:this.filterCheckBoxElement('score',e,item),
|
||
chooseDesc:null,
|
||
subOption:this.CheckBoxExtraRadio?this.CheckBoxExtraRadio:null,
|
||
subOptionContent:this.CheckBoxExtraDesc?this.CheckBoxExtraDesc:null,
|
||
|
||
})
|
||
console.log('answerList',this.answerList)
|
||
console.log('this.assessQuestionnaireDtoList',this.assessQuestionnaireDtoList)
|
||
},
|
||
filterCheckBoxElement(el,e,item){
|
||
let filterEl = item.options.filter(cur=>e.includes(cur.option))
|
||
console.log('filterEl',filterEl)
|
||
if(el=='letter'){
|
||
let letter = filterEl.map(item=>item.option).join(',')
|
||
//let letter = filterEl.reduce((total,value)=>total+value.option,',')
|
||
console.log('letter',letter)
|
||
return letter
|
||
}else if(el=='content'){
|
||
let content = filterEl.map(value=>value.item.substring(2)).join(';')
|
||
//let content = filterEl.reduce((total,value)=>total+value.item+';','').substring(2)
|
||
console.log('content',content)
|
||
return content
|
||
//this.answerList[idx]
|
||
}else{
|
||
let score = filterEl.reduce((total,value)=>total+parseInt(value.score),0)
|
||
console.log('score',score)
|
||
return score
|
||
}
|
||
},
|
||
|
||
//处理第一个单选框并自动回显：根据投保人年龄区间，回显对应的选项，并组装数据；
|
||
handlerFirstQuestion(){
|
||
let age = this.saleInsuredInfo.age
|
||
console.log('投保人年龄',age)
|
||
let answer;
|
||
if(age<=18) {
|
||
answer = 'F'
|
||
}else if(age>=18&&age<=25) {
|
||
answer = "A"
|
||
}else if(age>=26&&age<=50) {
|
||
answer = "B"
|
||
}else if(age>=51&&age<=60) {
|
||
answer = "C"
|
||
}else if(age<=65) {
|
||
answer = "D"
|
||
}else{
|
||
answer = "E"
|
||
}
|
||
this.answerList[0] = answer //单选框自动回显
|
||
let firstChoice = this.questionList[0].options.filter(item=>item.option==answer)
|
||
console.log('res',firstChoice,this.questionList[0],this.questionList[0].options)
|
||
this.$set(this.assessQuestionnaireDtoList,0,{
|
||
orderNo:this.$route.query.orderNo,
|
||
questionNo:this.questionList[0].questionNo,
|
||
questionContent:this.questionList[0].title,
|
||
choose:answer,
|
||
chooseContent:this.filterRadioElement('content',answer,this.questionList[0]),
|
||
subOption:null,
|
||
subOptionContent:null,
|
||
score:this.filterRadioElement('score',answer,this.questionList[0]),
|
||
chooseDesc:null,
|
||
|
||
})
|
||
|
||
},
|
||
clickOverlay(){
|
||
this.showResultPopup = false
|
||
},
|
||
submitAnswer(){
|
||
if(this.answerList.length !=this.questionList.length){
|
||
return this.$toast('请填写完整信息')
|
||
|
||
}else{
|
||
if(Array.from(this.answerList).some(item=>!item)){
|
||
return this.$toast('请填写完整信息')
|
||
}else{
|
||
if(Array.from(this.answerList[3]).length!=2||(Array.from(this.answerList[3]).some(item=>!item))){
|
||
return this.$toast('请填写完整信息')
|
||
}else if(Array.from(this.answerList[1]).includes('B')&&this.CheckBoxExtraRadio=="Y"&&!this.CheckBoxExtraDesc)
|
||
{
|
||
return this.$toast('请您补充险种和保额信息。')
|
||
} else if(Array.from(this.answerList[1]).includes('B')&&!this.CheckBoxExtraRadio){
|
||
return this.$toast('请填写完整信息')
|
||
}else if(Array.from(this.answerList[1]).length==0){
|
||
return this.$toast('请填写完整信息')
|
||
}
|
||
|
||
}
|
||
}
|
||
let regex = /^([1-9]\d{0,3}|10000)$/;
|
||
if(Array.from(this.answerList[3]).some(item=>{return !regex.test(item)})
|
||
|| !regex.test(this.answerList[4][0])){
|
||
return this.$toast('请填写1-10000之间的整数')
|
||
}
|
||
if(this.assessFlag === '2'){
|
||
return this.$toast('已超过评估次数限制，无法重新评估')
|
||
}
|
||
this.getEvaluateResult()
|
||
},
|
||
|
||
//调用后端接口获取测评结果
|
||
getEvaluateResult(){
|
||
this.$toast.loading({
|
||
duration: 0, // 持续展示 toast
|
||
forbidClick: true, // 禁用背景点击
|
||
loadingType: 'spinner',
|
||
message: '加载中……'
|
||
})
|
||
saveEvalateAnswer({assessQuestionnaireDtoList:this.assessQuestionnaireDtoList})
|
||
.then(res =>{
|
||
this.$toast.clear()
|
||
if(res.result== '0'){
|
||
this.resultRiskType = res.content
|
||
this.showResultPopup = true
|
||
this.showNoTested = true
|
||
}else{
|
||
this.$toast(res.resultMessage)
|
||
}
|
||
}).catch(err =>{
|
||
this.$toast.clear()
|
||
console.log('err',err)
|
||
})
|
||
|
||
},
|
||
//未测评过，测评成功后重新测评
|
||
reTest(){
|
||
localStorage.setItem('evalateFrom', 'toEvaluate')
|
||
if(this.assessFlag === '2'){
|
||
return this.$toast('已超过评估次数限制，无法重新评估')
|
||
}else{
|
||
window.location.reload()
|
||
}
|
||
},
|
||
|
||
//继续投保，跳转至评估结果页
|
||
toInsure(){
|
||
this.showResultPopup = false
|
||
if(!!this.$route.query.edit&&(this.$route.query.edit=='1')){
|
||
this.$jump({
|
||
flag: 'h5',
|
||
extra: {
|
||
url: location.origin +`/#/common/evaluateResult?orderNo=${this.$route.query.orderNo}&&edit=1`
|
||
},
|
||
routerInfo: {
|
||
path: `/common/evaluateResult?orderNo=${this.$route.query.orderNo}&&edit=1`
|
||
}
|
||
})
|
||
}else{
|
||
this.$jump({
|
||
flag: 'h5',
|
||
extra: {
|
||
url: location.origin +`/#/common/evaluateResult?orderNo=${this.$route.query.orderNo}`
|
||
},
|
||
routerInfo: {
|
||
path: `/common/evaluateResult?orderNo=${this.$route.query.orderNo}`
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.question-container {
|
||
width: 100%;
|
||
padding-bottom:50px;
|
||
/deep/.question-detail{
|
||
margin-top:10px;
|
||
.van-checkbox{
|
||
align-items: flex-start;
|
||
}
|
||
// .question-detail-checkbox{
|
||
// padding: 10px;
|
||
// }
|
||
}
|
||
.question-header{
|
||
// height:calc(100vh - 40px);
|
||
//padding-bottom:20px;
|
||
overflow-y: auto;
|
||
/deep/ .fieldContent{
|
||
|
||
.van-cell__title,input{
|
||
color:#999;
|
||
font-size:12px;
|
||
}
|
||
}
|
||
.evalDesc{
|
||
h5{
|
||
font-size:15px;
|
||
color:#333;
|
||
}
|
||
|
||
}
|
||
}
|
||
.question-btn{
|
||
height:50px;
|
||
}
|
||
|
||
/deep/ .extraRadio{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 80%;
|
||
}
|
||
|
||
/deep/ .extraInput{
|
||
padding-left: 0;
|
||
margin-bottom:10px;
|
||
}
|
||
.budget-text{
|
||
input{
|
||
width:100px;
|
||
height:20px;
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
</style> |