【FIX】增加原测评文件

This commit is contained in:
勾通
2025-11-19 16:34:37 +08:00
parent f4c1be93a4
commit 09f1daff83
5 changed files with 1403 additions and 1 deletions

View File

@@ -0,0 +1,162 @@
<template>
<div class="popup-ques-result">
<van-popup
v-model="showResultPopup"
position="bottom"
class="result-popup"
@click-overlay = "clickOverlay('overlay')"
>
<div class="result-popup-title">
<span>您的适当性评估结果</span>
<van-icon name="cross" @click="clickOverlay('icon')"/>
</div>
<div class="result-popup-content">
<div class='content'>尊敬的{{appntInfo.name}}{{appntInfo.sex=='0'?'先生':'女士'}}</div>
<div class='content'>根据您填写的评估问卷本公司对您的保险需求及财务支付水平进行了综合评估结果反馈如下</div>
<div class='content'>您适合购买的产品类型为
<span class='product-type'>{{resultRiskType}}</span>
</div>
<div>
<div v-for="(item,idx) in productLevel" :key="idx" class="itemLevel">
{{ item }}
</div>
</div>
<div class='tips'>特别提示</div>
<div class='tips'> 本次评估结果及匹配意见供您决策参考并不代表本公司对上述产品的风险及收益作出实质性判断或者保证若您提供的信息发生任何重大变化建议您对所购买的产品及时进行重新审视以确保您的购买决定与您可承受的风险程度等实际情况一致</div>
<div class='tips'>建议您充分考察该产品的特征自行做出投保决定请您确保您的决定是独立自主真实的</div>
</div>
<!-- 未测评过底部按钮 -->
<div class="bottom-btn bg-white flex">
<van-button type="danger" square size="large" plain v-no-more-click="1000" @click="reTest" v-if="showRetest">重新测评</van-button>
<van-button type="danger" square size="large" v-no-more-click="1000" @click="toInsure">我已知晓继续投保</van-button>
</div>
<!-- 已测评过底部按钮 -->
<!-- <div class="bottom-btn bg-white flex testBtn" v-if="showHasTested">
<van-button type="danger" square size="large" plain v-no-more-click="1000" @click="goBack">上一步</van-button>
<van-button type="danger" square size="large" class="btn" v-no-more-click="1000" @click="goNext">已知晓继续投保</van-button>
<van-button type="danger" square size="large" v-no-more-click="1000" @click="reStart">重新评估</van-button>
</div> -->
</van-popup>
</div>
</template>
<script>
export default {
name: 'PopupQuesResult',
props: {
showResultPopup: {
type: Boolean,
default: false
},
showRetest: { //展示重新测评
type: Boolean,
default: false
},
appntInfo:{
type: Object,
default: () => {}
},
resultRiskType:{
type:String,
default:''
},
assessResultDescList:{
type:Array,
default: () => []
}
},
data() {
return {
//showNoTested: false
productLevel:[
'P1分类保险期限为一年期及以下的人身保险产品包括人寿保险、健康保险、意外伤害保险等',
'P2分类保险期限为一年期以上的普通型人身保险包括人寿保险、年金保险、健康保险、意外伤害保险等',
'P3分类专属商业养老保险、分红型人身保险、万能型人身保险其他符合本级特征描述的人身保险产品包括人寿保险、年金保险等',
'P4分类投资连结型人身保险、变额年金保险其他符合本级特征描述的人身保险产品包括人寿保险、年金保险等',
'P5分类符合本级特征描述的人身保险产品']
}
},
methods: {
clickOverlay(extra){
this.$emit('clickOverlayHandler',extra)
},
//1.未测评过弹窗按钮
//1.1 重新测评
reTest(){
this.$emit('reTestHandler')
},
//1.2 我已知晓,继续投保
toInsure(){
this.$emit('toInsureHandler')
},
}
}
</script>
<style lang="scss" scoped>
.popup-ques-result{
.result-popup{
.result-popup-title{
padding:10px 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
font-weight: bolder;
color:#000;
}
.result-popup-content{
padding:10px 10px 60px;
box-sizing:border-box;
.content{
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 5px;
.product-type{
color: #ee0a24;
font-weight: bold;
}
}
.tips{
font-size: 14px;
color: #000;
font-weight: bold;
margin-bottom: 5px;
}
.tips:nth-child(5){
padding:10px 0;
margin-bottom: 0;
color: #000;
font-weight: bold;
}
}
.result-popup-btn{
}
/deep/ .testBtn{
.van-button:first-child{
flex:1;
}
.van-button:nth-child(2){
flex:1.3;
border-right:1px solid #fff !important;
}
.van-button:nth-child(3){
flex:1;
}
}
.itemLevel{
font-size: 12px;
color:#999;
margin-bottom:5px;
}
}
}
</style>

View File

@@ -6,6 +6,7 @@ const calculatePremium = () => import('@/views/ebiz/common/CalculatePremium')
const defalut = () => import('@/views/ebiz/common/Defalut') const defalut = () => import('@/views/ebiz/common/Defalut')
const companyIntroduce = () => import('@/views/ebiz/common/CompanyIntroduce') const companyIntroduce = () => import('@/views/ebiz/common/CompanyIntroduce')
const productEvaResult = () => import('@/views/ebiz/common/productEvaResult') const productEvaResult = () => import('@/views/ebiz/common/productEvaResult')
const evaluateResult = () => import('@/views/ebiz/common/EvaluateResult')
export default [ export default [
{ {
@@ -68,6 +69,16 @@ export default [
index: 1 index: 1
} }
}, },
{
path: '/common/evaluateResult',
name: 'EvaluateResult',
component: evaluateResult,
meta: {
title: '评估结果',
index: 1
}
},
{ {
path: '/common/productEvaResult', path: '/common/productEvaResult',
name: 'productEvaResult', name: 'productEvaResult',

View File

@@ -38,6 +38,7 @@ const commitmentSelfProtect = () => import('@/views/ebiz/sale/commitmentSelfProt
const readDocuments = () => import('@/views/ebiz/sale/readDocuments') const readDocuments = () => import('@/views/ebiz/sale/readDocuments')
const signDocuments = () => import('@/views/ebiz/sale/signDocuments') const signDocuments = () => import('@/views/ebiz/sale/signDocuments')
const productEvaluate = () => import('@/views/ebiz/sale/productEvaluate') const productEvaluate = () => import('@/views/ebiz/sale/productEvaluate')
const questionEvaluate = () => import('@/views/ebiz/sale/questionEvaluate')
let riskName = localStorage.riskName let riskName = localStorage.riskName
/**@type {import("vue-router").RouteRecord[]} */ /**@type {import("vue-router").RouteRecord[]} */
@@ -354,5 +355,13 @@ export default [
meta: { meta: {
title: '保险产品适当性评估问卷' title: '保险产品适当性评估问卷'
} }
},
{
path: '/sale/questionEvaluate',
name: 'questionEvaluate',
component: questionEvaluate,
meta: {
title: '保险产品适当性评估问卷'
} }
},
] ]

View File

@@ -0,0 +1,230 @@
<template>
<div class="fit-wrapper">
<div v-if="assessResult == '1'" class="fit-container">
<img src="@/assets/images/ebiz/evalImg.png" alt="">
<div class="pt20 pb20 pr10 pl20">
<div class="fs18 pb6" v-for="(item,idx) in evalDescList " >{{idx+1}}{{ item }}</div>
<p class="green fw400 fs18 quitDesc">根据以上与适当性问卷匹配结果我司建议您终止投保关注该产品的特征及风险审慎作出投保决策 如您坚持投保请您确认和签署投保风险警示确认书</p>
</div>
<div class="footer-btn bottom-btn bg-white flex">
<van-button type="danger" size="large" plain square class="btn" @click="exitProcess" v-no-more-click="1000">终止投保</van-button>
<van-button type="danger" size="large" square class="btn" @click="showRisks = true" v-no-more-click="1000">已知晓上述提示本人仍继续投保</van-button>
</div>
</div>
<div v-if="assessResult === '0'" class="fit-container">
<img src="@/assets/images/ebiz/evalImg.png" alt="">
<div class="pt20 pb20 pr10 pl20 fs18">{{evalDesc}}</div>
<div class="bottom-btn bg-white flex">
<van-button type="danger" size="large" square class="btn" v-no-more-click="1000" @click="onConfirm">确认</van-button>
</div>
</div>
<van-dialog
v-model="showRisks"
title="投保风险警示确认书"
confirmButtonText="知晓并同意警示书,继续投保"
@confirm="onConfirm"
class="riskDialog"
>
<span>
  本人声明已了解及完全清楚产品责任风险情况保险利益不确定及不及时交纳保险费的风险经审慎考虑后仍坚持购买该产品并愿意承担由此可能产生的损失和其他后果购买该产品的决定系本人独立自主真实的意思表示
</span>
</van-dialog>
</div>
</template>
<script>
import { getOrderDetail, saveEvalateAnswer } from '@/api/ebiz/sale/sale'
export default {
name: 'EvaluateResult',
data(){
return {
assessResult:null, //适应性问卷评估结果 0通过 1不通过
showPopUp:true,
showRisks:false,
assessResultDescList:[],
evalDesc:'',//测评结果描述
evalDescList:[]
}
},
mounted(){
this.$jump({
flag: 'navigation',
extra: {
title: '评估结果'
},
})
document.body.style.backgroundColor = '#fff'
getOrderDetail({ orderNo: this.$route.query.orderNo,userAssessLogic:true }).then(res => {
if (res.result == 0) {
this.assessResultDescList = res.orderDTO.orderInfoDTO.assessResultDescMap
this.assessResult = res.orderDTO.orderInfoDTO.assessResult
if(Object.keys(this.assessResultDescList).includes('pass')&&this.assessResult==='0'){
this.evalDesc = this.assessResultDescList['pass'] + '。'
}else{
this.handlerAssessResultDesc()
}
console.log('this.assessResultDescList',this.assessResultDescList)
} else {
this.$toast(res.resultMessage)
}
})
},
methods:{
handlerAssessResultDesc(){
// 获取所有以1开头的属性键
// let numStr = ['1','2','3','4']
// let evalDesc = ''
//let evalDescList = []
// numStr.forEach(num=>{
// let keysStartWith = Object.keys(this.assessResultDescList).filter(key => key.startsWith(num));
// // 获取这些键对应的所有元素值组成的数组
// let filterValue = keysStartWith.map(key => {
// return this.assessResultDescList[key];
// });
// console.log('filterValue',filterValue)
// // if(filterValue.length==1){
// // filterValue.forEach(item=>{
// // let des = item[0]+''+item[1]+'。'
// // this.evalDescList.push(des)
// // })
// // }else if(filterValue.length>1){
// // filterValue.forEach(item=>{
// // let des = item[0]+''+item[1]+'。'
// // this.evalDescList.push(des)
// // })
// // //evalDesc += filterValue.map(item => item[0]).join('') +'' +filterValue[0][1]+'。'
// // //this.evalDescList.push(evalDesc)
// // }else return
// if(filterValue.length>=1){
// filterValue.forEach(item=>{
// this.evalDescList.push(item)
// })
// }
// })
let filterValue = Object.values(this.assessResultDescList)
if(filterValue.length>=1){
filterValue.forEach((item,index)=>{
this.evalDescList.push(item+'')
if(index === filterValue.length - 1){
this.evalDescList[index] = item + '。';
}
})
}
console.log('filterValue',filterValue)
// this.evalDesc = evalDesc
// console.log('this.evalDesc',this.evalDesc)
console.log('this.evalDescList',this.evalDescList)
},
//终止投保
exitProcess(){
this.$dialog.confirm(
{
className: 'dialog-delete',
title: '提示',
message: '退出流程可能会丢失部分数据,是否确认退出?',
cancelButtonColor: '#E9332E',
confirmButtonColor: '#FFFFFF'
})
.then(() => {
this.jumpList()
})
.catch(() => {
return
})
},
jumpList(){
saveEvalateAnswer({
operateType:'0',
orderNo:this.$route.query.orderNo
}).then(res=>{
if(res.result=='0'){
this.$jump({
flag: 'h5',
extra: {
title: '电子投保单列表',
forbidSwipeBack: 1, //当前页面禁止右滑返回
url: location.origin + `/#/sale/list`
},
routerInfo: {
path: `/sale/list`,
type: '1'
}
})
}else{
this.$toast(res.resultMessage)
}
})
},
//继续投保
onConfirm(){
this.$jump({
flag: 'h5',
extra: {
forbidSwipeBack: '1',
url: location.origin + '/#' + '/sale/beneficiary?orderNo=' + this.$route.query.orderNo,
needRefresh: '1'
},
routerInfo: {
path: '/sale/beneficiary?orderNo=' + this.$route.query.orderNo,
}
})
}
}
}
</script>
<style lang="scss" scoped>
.fit-wrapper{
width:100%;
height:100vh;
display:flex;
.fit-container{
padding:50px 0;
width:100%;
display:flex;
overflow: auto;
flex-direction: column;
justify-content: center;
align-items: center;
img{
width:179px;
height:126px;
padding:20px 0;
}
.quitDesc{
text-indent: 2em;
}
}
.footer-btn{
position:fixed;
bottom:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
.van-button:first-child{
flex:1;
}
.van-button:last-child{
flex:2;
}
}
/deep/ .riskDialog{
.van-dialog__header{
padding:20px 0;
font-size:16px;
}
.van-dialog__content{
padding:0 20px;
margin-bottom:10px;
font-size:14px;
}
.van-dialog__confirm{
font-size:16px;
color:#5ca7de;
}
}
}
</style>

View File

@@ -0,0 +1,990 @@
<template>
<div class="question-container">
<div class="question-header bg-white pt20 pb20 pr10 pl10" >
<h5 class="fs18 appntTitle">投保人信息</h5>
<div class="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 class="fs18"> {{questionInfo.questionHeadDesc}}</h5>
<h5 class="fs18">{{questionInfo.question1Desc}}</h5>
<h5 class="fs18">{{questionInfo.question2Desc}}</h5>
<h5 class="fs18">{{questionInfo.question3Desc}}</h5>
<h5 class="fs18">{{questionInfo.question4Desc}}</h5>
<h5 class="fs18">{{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 :disabled='disableEdit' class="mb15" v-model="answerList[idx]" @change="handlerRadio($event,item,idx)">
<van-radio
@click="clickHandler"
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
:disabled='disableEdit'
v-model="answerList[idx]"
@change="handlerCheckbox($event,item,idx)"
>
<van-checkbox
class="mb15"
@click="clickHandler"
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 :disabled='disableEdit' v-model="CheckBoxExtraRadio" class="extraRadio flex pb10 fs10" direction="horizontal" @click.stop>
<van-radio
@click="clickHandler"
: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" :readonly='disableEdit' label-width="0" v-model="CheckBoxExtraDesc" placeholder="请说明险种名称、保额:" v-if="CheckBoxExtraRadio === 'Y'" @click.stop="clickHandler"/>
</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
:readonly='disableEdit'
v-if="index < item.title.split(/\___/).length - 1"
type="number"
@click="clickHandler"
@input="handlerInput($event,item,idx,index)"
:value="answerList[idx] && answerList[idx][index] ? answerList[idx][index] : ''"
step="0.01"
min="0"
class="budget-input"
>
</template>
<div class="fs12 c-gray-base">请填写0-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"
:showRetest = "showRetest"
: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:[],
originalAssessQuestionnaireDtoList: [], // 存储原始数据,用于比较是否有修改
CheckBoxExtraRadio:'',
CheckBoxExtraDesc:'',
disabled:true,
assessFlag:null,
updateFlag:'1', // 默认为未修改状态
showRetest:true,
assessUpdateLimitFlag :null,
disableEdit:false, //禁用选项框
}
},
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
){
console.log('检测到了有空值1')
this.disabled = true
}else if(Array.from(newVal)[1].choose.length==0){
console.log('检测到了有空值2')
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){
console.log('检测到了有空值3')
this.disabled = true
}else if(Array.from(newVal)[1].subOption=='N'){
this.disabled = false
}else if(!Array.from(newVal)[1].subOption){
console.log('检测到了有空值4')
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'
this.getDetailInfo()
},
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
})
}
},
getDetailInfo(){
const orderNo = this.$route.query.orderNo
getOrderDetail({ orderNo: this.$route.query.orderNo,userAssessLogic:true }).then(res => {
if (res.result == 0) {
//是否做过测评及是否超出限制
this.assessUpdateLimitFlag = res.orderDTO.orderInfoDTO.assessUpdateLimitFlag
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.assessUpdateLimitFlag==='0'||this.assessFlag==='2'){
this.disableEdit = true
}
// 标记是否有历史评估数据
const hasHistoryData = res.orderDTO.orderInfoDTO.assessQuestionnaireDtoList &&
res.orderDTO.orderInfoDTO.assessQuestionnaireDtoList.length > 0
//获取测评结果,对数据进行回显
if(hasHistoryData){
// const hasHistoryData = [
// {
// "orderNo": "8186270000128527",
// "questionNo": "7",
// "questionContent": "7.您能够并愿意为购买保险支付保费的最长年期为?",
// "choose": "E",
// "chooseContent": "超过20年",
// "subOption": null,
// "subOptionContent": null,
// "score": "10",
// "chooseDesc": null,
// "appntIdNo": "130626198012270019",
// "appntName": "腊月二七",
// "appntIsFirst": "0",
// "assessDate": "2025-11-06T03:52:30.000+0000"
// },
// {
// "orderNo": "8186270000128527",
// "questionNo": "2",
// "questionContent": "2.您购买保险产品的目的?(可多选)",
// "choose": "A,B,C,D,E",
// "chooseContent": "为应对不时之需提供财务保障(死亡、意外、伤残、重大疾病等);为支付或补偿门诊、住院等医疗、保健的费用支出;为未来生活规划所需的资金,保单利益确定(养老、子女教育、退休收入等);可获利一定的浮动收益(例如:有分红、有最低保证利率的产品等);其他",
// "subOption": "Y",
// "subOptionContent": "uuuu",
// "score": "20",
// "chooseDesc": null,
// "appntIdNo": "130626198012270019",
// "appntName": "腊月二七",
// "appntIsFirst": "0",
// "assessDate": "2025-11-06T03:52:30.000+0000"
// },
// {
// "orderNo": "8186270000128527",
// "questionNo": "4",
// "questionContent": "4.您本次购买保险的保费预算是:一次性交清预算___万元期交预算每期保费*总交费期数)___万元。",
// "choose": null,
// "chooseContent": null,
// "subOption": null,
// "subOptionContent": null,
// "score": null,
// "chooseDesc": "8888,888",
// "appntIdNo": "130626198012270019",
// "appntName": "腊月二七",
// "appntIsFirst": "0",
// "assessDate": "2025-11-06T03:52:30.000+0000"
// },
// {
// "orderNo": "8186270000128527",
// "questionNo": "5",
// "questionContent": "5.您的家庭年收入约为折合人民币___万元。",
// "choose": null,
// "chooseContent": null,
// "subOption": null,
// "subOptionContent": null,
// "score": null,
// "chooseDesc": "888",
// "appntIdNo": "130626198012270019",
// "appntName": "腊月二七",
// "appntIsFirst": "0",
// "assessDate": "2025-11-06T03:52:30.000+0000"
// },
// {
// "orderNo": "8186270000128527",
// "questionNo": "6",
// "questionContent": "6.您能够并愿意为购买保险支付的期交保费之和占家庭年收入的比例是:",
// "choose": "D",
// "chooseContent": "70%以上",
// "subOption": null,
// "subOptionContent": null,
// "score": "10",
// "chooseDesc": null,
// "appntIdNo": "130626198012270019",
// "appntName": "腊月二七",
// "appntIsFirst": "0",
// "assessDate": "2025-11-06T03:52:30.000+0000"
// } ,
// {
// "orderNo": "8186270000128527",
// "questionNo": "3",
// "questionContent": "3.您希望享有最长保障或投资期限为多久?",
// "choose": "B",
// "chooseContent": "1-5年",
// "subOption": null,
// "subOptionContent": null,
// "score": "4",
// "chooseDesc": null,
// "appntIdNo": "130626198012270019",
// "appntName": "腊月二七",
// "appntIsFirst": "0",
// "assessDate": "2025-11-06T03:52:30.000+0000"
// },
// {
// "orderNo": "8186270000128527",
// "questionNo": "1",
// "questionContent": "1.您的年龄是?",
// "choose": "E",
// "chooseContent": "高于65岁",
// "subOption": null,
// "subOptionContent": null,
// "score": "-15",
// "chooseDesc": null,
// "appntIdNo": "130626198012270019",
// "appntName": "腊月二七",
// "appntIsFirst": "0",
// "assessDate": "2025-11-06T03:52:30.000+0000"
// },
// ]
// 将返回数组的每一项的orderNo替换为路由携带的然后赋值给assessQuestionnaireDtoList
const processedData = res.orderDTO.orderInfoDTO.assessQuestionnaireDtoList
.sort((a, b) => parseInt(a.questionNo) - parseInt(b.questionNo))
.map(item => {
return {
...item,
orderNo: this.$route.query.orderNo
}
})
// 设置当前数据
this.assessQuestionnaireDtoList = processedData
console.log('后端返回processedData',processedData)
console.log('后端返回assessQuestionnaireDtoList',this.assessQuestionnaireDtoList)
}
if (this.$CacheUtils.getLocItem('saleInsuredInfo')) {
this.saleInsuredInfo = JSON.parse(this.$CacheUtils.getLocItem('saleInsuredInfo'))
}else{
this.saleInsuredInfo = res.orderDTO.appntDTO
}
console.log('投保人信息',this.saleInsuredInfo,this.assessQuestionnaireDtoList)
console.log('this.ageList',this.ageList,this.questionList)
// 先处理第一个问题(年龄自动填充)
this.handlerFirstQuestion()
// 如果有后端返回的评估数据,进行回显,并保存原始数据
if(hasHistoryData) {
this.initFormDataFromAssessment()
// 所有数据初始化完成后,立即(同步)保存原始数据副本
// 使用同步方式而非 $nextTick确保在用户操作前完成
this.originalAssessQuestionnaireDtoList = JSON.parse(JSON.stringify(this.assessQuestionnaireDtoList))
this.updateFlag = '1' // 有历史数据且未修改
console.log('原始数据已保存updateFlag设置为1未修改')
} else {
// 没有历史数据,这是新填写的问卷
// 保存第一题填充后的数据作为"原始数据"(因为第一题是自动填充的,不算用户修改)
if (this.assessQuestionnaireDtoList.length > 0) {
this.originalAssessQuestionnaireDtoList = JSON.parse(JSON.stringify(this.assessQuestionnaireDtoList))
console.log('新问卷-保存第一题自动填充后的数据作为原始数据')
}
this.updateFlag = '0' // 新问卷,标记为已修改(需要保存)
console.log('新问卷updateFlag设置为0需要保存')
}
} else {
this.$toast(res.resultMessage)
}
})
},
clickHandler(){
if(this.assessFlag==='2'){
return this.$toast('当日评估不能超过2次一年累计评估不能超过8次')
}else{
if(this.assessUpdateLimitFlag==='0'){
return this.$toast('当日评估不能超过2次一年累计评估不能超过8次')
}
}
},
//单选框处理数据
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,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 no1 = this.assessQuestionnaireDtoList.findIndex(item=>item.questionNo=='1')
// 如果已经有第一题的数据从后端回显的则只更新answerList用于显示不修改assessQuestionnaireDtoList
const hasFirstQuestionData = this.assessQuestionnaireDtoList &&
this.assessQuestionnaireDtoList.length > 0 &&
this.assessQuestionnaireDtoList[no1] &&
this.assessQuestionnaireDtoList[no1].choose
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"
}
// 始终设置answerList用于页面显示
this.answerList[0] = hasFirstQuestionData ? this.assessQuestionnaireDtoList[no1].choose : answer
// 只有在没有回显数据时,才创建新的第一题数据
if (!hasFirstQuestionData) {
let firstChoice = this.questionList[0].options.filter(item=>item.option==answer)
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,
})
} else {
console.log('第一题已有回显数据,不重新创建')
}
},
clickOverlay(){
this.showResultPopup = false
this.getDetailInfo()
},
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 = /^(0|[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('请填写0-10000之间的整数')
}
this.checkDataChanged()
this.getEvaluateResult()
},
//调用后端接口获取测评结果
getEvaluateResult(){
this.$toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true, // 禁用背景点击
loadingType: 'spinner',
message: '加载中……'
})
saveEvalateAnswer({
assessQuestionnaireDtoList: this.assessQuestionnaireDtoList,
updateFlag: this.updateFlag // 0修改1未修改
})
.then(res =>{
this.$toast.clear()
if(res.result== '0'){
// 提交成功后,更新原始数据为当前数据
// 这样下次比较时就以这次提交的数据为基准
this.originalAssessQuestionnaireDtoList = JSON.parse(JSON.stringify(this.assessQuestionnaireDtoList))
this.updateFlag = '1' // 重置为未修改状态
console.log('提交成功,原始数据已更新为当前提交的数据')
getOrderDetail({ orderNo: this.$route.query.orderNo,userAssessLogic:true }).then(resp=>{
if(resp.result=='0'){
this.assessFlag = resp.orderDTO.orderInfoDTO.assessFlag //评估次数
this.assessUpdateLimitFlag = resp.orderDTO.orderInfoDTO.assessUpdateLimitFlag //0置灰其他情况可以点击不能修改重新评估按钮隐藏
if(this.assessUpdateLimitFlag==='0'||this.assessFlag==='2'){
this.disableEdit = true
this.showRetest = false
//隐藏测评按钮
}else{
this.showRetest = true
}
this.resultRiskType = res.content
this.showResultPopup = true
this.showNoTested = true
}else{
this.$toast(resp.resultMessage)
}
})
}else{
this.$toast(res.resultMessage)
}
}).catch(err =>{
this.$toast.clear()
console.log('err',err)
})
},
//未测评过,测评成功后重新测评
reTest(){
if(this.assessFlag==='2'){
return this.$toast('当日评估不能超过2次一年累计评估不能超过8次')
}else{
if(this.assessUpdateLimitFlag==='0'){
return this.$toast('当日评估不能超过2次一年累计评估不能超过8次')
}else{
window.location.reload()
}
}
},
// 根据assessQuestionnaireDtoList回显表单数据
initFormDataFromAssessment() {
if (!this.assessQuestionnaireDtoList || this.assessQuestionnaireDtoList.length === 0) return
// 遍历assessQuestionnaireDtoList根据问题编号回显数据
this.assessQuestionnaireDtoList.forEach((item, index) => {
// 找到对应的问题
const questionIndex = this.questionList.findIndex(q => q.questionNo === item.questionNo)
console.log('questionIndex',questionIndex )
if (questionIndex === -1) return
if (questionIndex === 0) return
const question = this.questionList[questionIndex]
console.log('question',question )
// 根据问题类型进行不同的回显处理
switch (question.type) {
case 'radio':
// 单选框回显
this.$set(this.answerList, questionIndex, item.choose)
break
case 'checkbox':
// 多选框回显
if (item.choose) {
// 将逗号分隔的选项转为数组
const chooseArray = item.choose.split(',')
console.log('chooseArray',chooseArray)
this.$set(this.answerList, questionIndex, chooseArray)
// 如果选择了B选项回显子选项
if (chooseArray.includes('B')) {
this.showPurpose = true
this.CheckBoxExtraRadio = item.subOption || ''
this.CheckBoxExtraDesc = item.subOptionContent || ''
}
}
break
case 'input':
// 输入框回显
if (item.chooseDesc) {
// 初始化answerList对应位置为数组
if (!this.answerList[questionIndex]) {
this.$set(this.answerList, questionIndex, [])
}
// 第四题和第五题特殊处理
if (questionIndex === 3) { // 第四题
// 第四题有两个输入框chooseDesc格式为"值1,值2"
const values = item.chooseDesc.split(',')
if (values.length >= 2) {
this.$set(this.answerList[questionIndex], 0, values[0])
this.$set(this.answerList[questionIndex], 1, values[1])
// 更新DOM中的输入框值
this.$nextTick(() => {
const inputs = document.querySelectorAll(`div[v-if="item.type=='input'"] input`)
if (inputs && inputs.length >= 2) {
inputs[0].value = values[0]
inputs[1].value = values[1]
}
})
}
} else if (questionIndex === 4) { // 第五题
// 第五题只有一个输入框chooseDesc直接就是值
this.$set(this.answerList[questionIndex], 0, item.chooseDesc)
// 更新DOM中的输入框值
this.$nextTick(() => {
const inputs = document.querySelectorAll(`div[v-if="item.type=='input'"] input`)
if (inputs && inputs.length >= 3) { // 第三个输入框是第五题的
inputs[2].value = item.chooseDesc
}
})
} else {
// 其他输入框的通用处理
const values = item.chooseDesc.split(',')
values.forEach((val, idx) => {
this.$set(this.answerList[questionIndex], idx, val)
})
}
}
break
}
})
console.log('表单数据回显完成', this.answerList)
},
// 检测数据是否发生变化
checkDataChanged() {
// 如果没有原始数据,不修改 updateFlag保持之前设置的值应该是 '0'
if (!this.originalAssessQuestionnaireDtoList || this.originalAssessQuestionnaireDtoList.length === 0) {
console.log('没有原始数据,保持 updateFlag 为:', this.updateFlag)
return
}
// 如果数据长度不一致,返回修改状态
if (this.assessQuestionnaireDtoList.length !== this.originalAssessQuestionnaireDtoList.length) {
console.log('数据长度不一致', {
current: this.assessQuestionnaireDtoList.length,
original: this.originalAssessQuestionnaireDtoList.length
})
this.updateFlag = '0'
return
}
console.log('========== 开始比较数据 ==========')
// 比较每一项数据
let isChanged = false
const changedDetails = []
for (let i = 0; i < this.assessQuestionnaireDtoList.length; i++) {
const current = this.assessQuestionnaireDtoList[i]
const original = this.originalAssessQuestionnaireDtoList[i]
// 详细比较每个字段
const fieldChanges = {
questionIndex: i,
questionNo: current.questionNo,
changes: {}
}
if (this.isValueChanged(current.choose, original.choose)) {
fieldChanges.changes.choose = { current: current.choose, original: original.choose }
}
if (this.isValueChanged(current.chooseContent, original.chooseContent)) {
fieldChanges.changes.chooseContent = { current: current.chooseContent, original: original.chooseContent }
}
if (this.isValueChanged(current.subOption, original.subOption)) {
fieldChanges.changes.subOption = { current: current.subOption, original: original.subOption }
}
if (this.isValueChanged(current.subOptionContent, original.subOptionContent)) {
fieldChanges.changes.subOptionContent = { current: current.subOptionContent, original: original.subOptionContent }
}
if (this.isValueChanged(current.chooseDesc, original.chooseDesc)) {
fieldChanges.changes.chooseDesc = { current: current.chooseDesc, original: original.chooseDesc }
}
if (this.isValueChanged(current.score, original.score)) {
fieldChanges.changes.score = { current: current.score, original: original.score }
}
if (Object.keys(fieldChanges.changes).length > 0) {
changedDetails.push(fieldChanges)
isChanged = true
}
}
// 只有在数据真正发生变化时才修改 updateFlag
// 如果数据未变化,保持原来的值不变
if (isChanged) {
this.updateFlag = '0' // 数据已修改
console.log('检测到数据变化,详细信息:', changedDetails)
console.log('updateFlag 设置为 0已修改')
} else {
console.log('数据未发生变化updateFlag 保持不变:', this.updateFlag)
}
console.log('========== 比较数据结束 ==========')
},
// 辅助函数判断两个值是否发生变化处理null、undefined、空字符串、类型转换等情况
isValueChanged(currentValue, originalValue) {
// 将null、undefined、空字符串都视为"空值"
const normalizeValue = (val) => {
if (val === null || val === undefined || val === '') {
return null
}
// 统一转换为字符串进行比较,避免类型不一致导致的误判
return String(val)
}
const normalizedCurrent = normalizeValue(currentValue)
const normalizedOriginal = normalizeValue(originalValue)
// 比较标准化后的值
const isChanged = normalizedCurrent !== normalizedOriginal
return isChanged
},
//继续投保,跳转至评估结果页
toInsure(){
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{
margin:5px 0;
.van-cell__title,input{
color:#999;
font-size:14px;
}
}
.appntTitle{
color:#333;
}
.evalDesc{
h5{
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>