Files
ebiz-h5/src/views/ebiz/sale/NotifyingMessage.vue
yang.huaxiang c65ec217f7 Merge branch 'feature/GFRS-1991【待确定】APP检测结果优化-整理' into dev
# Conflicts:
#	src/assets/js/business-common.js
#	src/config/index.js
#	src/views/ebiz/sale/AccountInformation.vue
#	src/views/ebiz/sale/AddBeneficiaryInfo.vue
#	src/views/ebiz/sale/InsuredPerson.vue
2020-10-27 13:17:52 +08:00

732 lines
27 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="notifyingMessage-container redRadioCheckbox">
<div class="pb50">
<div class="allFalse">
<div style="background-color: rgb(245, 245, 245);padding-bottom:5px">
<index-bar></index-bar>
</div>
<div class="flex justify-content-s align-items-c bg-white pt20 pb20 pr10">
<span class="pl10">告知项目</span>
<div @click="allFalse" class="pr10">
<van-button type="danger" size="small">一键全否</van-button>
</div>
</div>
</div>
<div style="padding-top:120px">
<div v-for="(im, indx) in impartDTOS" :key="indx">
<van-collapse v-model="activeNames">
<van-collapse-item :name="indx + 1">
<div slot="title" class="flex align-items-c justify-content-s">
<!--投保人 0 2 4 6 8 10 被保险人 1 3 5 7 9 11-->
{{
relationToAppnt == '1'
? '投保人/被保险人' +
impartTypeNumber[im.impartType]
.replace('投保人', '')
.replace('被保人', '')
.replace('被保险人', '')
: impartTypeNumber[im.impartType]
}}
<!--{{ impartTypeNumber[im.impartType] }}-->
<div class="flex align-items-c justify-content-s">
<span>{{
im.impartType == 0 || im.impartType == 2 || im.impartType == 4 || im.impartType == 6 || im.impartType == 8 || im.impartType == 10
? saleInsuredInfo.name
: saleInsuredPersonInfo.name
}}</span>
<img :src="$assetsUrl + 'images/avatar.png'" class="w20 ml15" />
</div>
</div>
<!-- <div class="h50">
<img />
<span>请如实填写问题中的每一项情况并对出现的情况载体是框列举说明</span>
</div>-->
<div class="h50 mt10 flex align-items-c notifyingMessage-text">
<div class="ml15 w315 h35 flex">
<!-- <img :src="$assetsUrl + 'images/notifiy.png'" class="w18 h18 " /> -->
<van-icon name="info-o" class="w18 h18" size="20px" color="#4a90e2" />
<span class="fs12 ml10">请如实填写问题中的每一项情况并对出现的情况在提示框列举说明</span>
</div>
</div>
<!-- 第一题 -->
<div v-for="(item, index) in im.impartItemDTOS" :key="index">
<div class="mt10 pb2" v-if="item.impartCode != '2b'">
<div class="mb20 ml20">
<span>{{ item.impartCode + '.' + item.impartContent }}</span>
</div>
<van-radio-group
v-model="item.impartAnswer"
class="flex mb10 pb10"
@change="change(item.isSelect, $event, item.impartCode, im.impartType)"
v-validate="'required'"
data-vv-name="单选"
>
<van-radio name="0" class="mr150 ml70"></van-radio>
<van-radio name="1"></van-radio>
</van-radio-group>
<van-cell-group v-for="(it, ind) in item.questions" :key="ind">
<div v-if="it.extra">
<van-field v-model="it.answer" placeholder="请输入" :label="it.questionContent" clearable v-validate="'required'" data-vv-name="答案" />
</div>
</van-cell-group>
<div v-if="item.impartAnswer == '0'">
<van-cell-group v-for="(it, ind) in item.questions" :key="ind">
<van-field
v-model="it.answer"
placeholder="请输入"
:label="it.questionContent"
clearable
v-validate="'required'"
data-vv-name="答案"
v-if="!it.extra"
/>
</van-cell-group>
</div>
</div>
<div class="mt10 pb2" :class="{ special: !showFlag || !isShow }" v-else>
<!-- 被保险人题目为2b -->
<div v-if="im.impartType == 3 || im.impartType == 7 || im.impartType == 11">
<div class="mb20 ml20" v-if="item.impartCode == '2b' && showFlag && isShow">
<span>{{ item.impartCode + '.' + item.impartContent }}</span>
</div>
<van-cell-group v-for="(it, ind) in item.questions" :key="ind">
<div v-if="it.extra && showFlag && isShow">
<van-field v-model="it.answer" placeholder="请输入" :label="it.questionContent" clearable v-validate="'required'" data-vv-name="答案" />
</div>
</van-cell-group>
<div v-if="showFlag && isShow">
<van-cell-group v-for="(it, ind) in item.questions" :key="ind">
<van-field
v-model="it.answer"
placeholder="请输入"
:label="it.questionContent"
clearable
v-validate="'required'"
data-vv-name="答案"
v-if="!it.extra"
/>
</van-cell-group>
</div>
</div>
</div>
</div>
</van-collapse-item>
</van-collapse>
</div>
</div>
</div>
<div class="bottom-btn bg-white">
<van-button type="danger" size="large" @click="next" :disabled="isDisabled" v-no-more-click="1000">下一步</van-button>
</div>
</div>
</template>
<script>
import { Collapse, CollapseItem, RadioGroup, Radio, Field, CellGroup, Icon } from 'vant'
import { information, saveInformation, getOrderDetail } from '@/api/ebiz/sale/sale'
import utilsAge from '@/assets/js/utils/age'
import IndexBar from '@/components/ebiz/sale/IndexBar'
export default {
data() {
return {
// 告知信息
impartDTOS: [],
// 折叠面板
activeNames: [],
// 投保人信息
saleInsuredInfo: {},
// 被保险人信息
saleInsuredPersonInfo: {},
// 投被保险人是否同人 1为同一个人
relationToAppnt: '',
// 产品编码
productCodes: '',
// 是否可以点击
isDisabled: false,
// 默认显示被保险人根据后台返回
noRisk: false,
//是否存在附加险
isExistAdditionalRisk: false,
saleInsuredAge: '',
saleInsuredSex: '',
saleInsuredPersonAge: '',
saleInsuredPersonSex: '',
showFlag: false,
isShow: false,
isShows: false,
impartTypeNumber: {
'0': '投保人健康告知',
'2': '投保人财务告知',
'1': '被保险人健康告知',
'3': '被保险人财务告知',
'4': '投保人健康告知',
'5': '被保险人健康告知',
'6': '投保人财务告知',
'7': '被保险人财务告知',
'8': '投保人健康告知',
'10': '投保人财务告知',
'9': '被保险人健康告知',
'11': '被保险人财务告知'
},
salePageFlag: '5'
}
},
created() {
getOrderDetail({ orderNo: localStorage.orderNo }).then(res => {
// getOrderDetail({ orderNo: `8186270000000036` }).then(res => {
if (res.result == 0) {
//投被保险人关系
this.isExistAdditionalRisk = res.orderDTO.insuredDTOs[0].riskDTOLst.length > 1 ? true : false
console.log('this.is ====', this.isExistAdditionalRisk)
this.relationToAppnt = res.orderDTO.insuredDTOs[0].relationToAppnt
this.$utils.intLocalStorage(res)
this.saleInsuredInfo = JSON.parse(this.$CacheUtils.getLocItem('saleInsuredInfo'))
this.saleInsuredPersonInfo = JSON.parse(this.$CacheUtils.getLocItem('saleInsuredPersonInfo'))
//如果返回参数存在曾经提交的告知信息,获取曾经提交的告知信息
let insuredFinanceImpartDTO = res.orderDTO.appntDTO.financeImpartDTO //投保人财务告知集合
let insuredImpartDTO = res.orderDTO.appntDTO.impartDTO //投保人健康告知集合
let insuredPersionFinanceImpartDTO = res.orderDTO.insuredDTOs[0].financeImpartDTO //被保人财务告知集合
let insuredPersionImpartDTO = res.orderDTO.insuredDTOs[0].impartDTO //被保人健康告知集合
if (
insuredFinanceImpartDTO.impartItemDTOS ||
insuredImpartDTO.impartItemDTOS ||
insuredPersionFinanceImpartDTO.impartItemDTOS ||
insuredPersionImpartDTO.impartItemDTOS
) {
if (insuredFinanceImpartDTO.impartItemDTOS) {
this.impartDTOS.push({ impartItemDTOS: insuredFinanceImpartDTO.impartItemDTOS, impartType: insuredFinanceImpartDTO.impartType })
} else if (insuredPersionFinanceImpartDTO.impartItemDTOS && this.relationToAppnt == '1') {
this.impartDTOS.push({ impartItemDTOS: insuredPersionFinanceImpartDTO.impartItemDTOS, impartType: insuredPersionFinanceImpartDTO.impartType })
}
if (insuredImpartDTO.impartItemDTOS) {
this.impartDTOS.push({ impartItemDTOS: insuredImpartDTO.impartItemDTOS, impartType: insuredImpartDTO.impartType })
} else if (insuredPersionImpartDTO.impartItemDTOS && this.relationToAppnt == '1') {
this.impartDTOS.push({ impartItemDTOS: insuredPersionImpartDTO.impartItemDTOS, impartType: insuredPersionImpartDTO.impartType })
}
if (this.relationToAppnt != '1') {
if (insuredPersionFinanceImpartDTO.impartItemDTOS) {
this.impartDTOS.push({ impartItemDTOS: insuredPersionFinanceImpartDTO.impartItemDTOS, impartType: insuredPersionFinanceImpartDTO.impartType })
}
if (insuredPersionImpartDTO.impartItemDTOS) {
this.impartDTOS.push({ impartItemDTOS: insuredPersionImpartDTO.impartItemDTOS, impartType: insuredPersionImpartDTO.impartType })
}
}
this.impartDTOS.map(v => {
v.impartItemDTOS.map(i => {
i.isSelect =
this.formatDateTime() +
Math.random()
.toString(36)
.substr(2)
i.show = false
if (i.impartAnswer == '0') {
i.show = true
} else {
i.questions[0].answer = ''
}
})
})
} else {
// 获取告知消息
this.information()
}
//投被同人取到年纪和性别去判断是是否显示内容
this.saleInsuredAge = utilsAge.getAge(this.saleInsuredInfo.birthday, new Date())
this.saleInsuredSex = this.saleInsuredInfo.sex
//投被不同人取到年纪和性别去判断是是否显示内容
this.saleInsuredPersonAge = this.saleInsuredPersonInfo.age
this.saleInsuredPersonSex = this.saleInsuredPersonInfo.sex
} else {
this.$toast(res.resultMessage)
}
})
// this.relationToAppnt = `1`
this.productCodes = JSON.parse(localStorage.chooseProductCodes)
//this.information()
},
mounted() {
setTimeout(() => {
// eslint-disable-next-line no-undef
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 = '#F5F5F5'
if (!this.$route.query.edit) {
//如果不是编辑/导航条跳转进来的
localStorage.setItem('salePageFlag', this.salePageFlag)
} else if (this.$route.query.edit && !this.$route.query.salePageFlag) {
//如果从保单列表点击编辑按钮进入
this.salePageFlag = '5'
localStorage.setItem('salePageFlag', this.salePageFlag)
} else if (this.$route.query.salePageFlag) {
//如果是从导航栏点击进入
this.salePageFlag = localStorage.salePageFlag
}
},
methods: {
appCallBack(data) {
if (data.trigger == 'left_button_click') {
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
})
}
},
// 一键全否
allFalse() {
let that = this
that.impartDTOS.map(it => {
console.log('it', it.impartItemDTOS)
it.impartItemDTOS.map(itm => {
itm.impartAnswer = '1'
})
})
},
isShowList() {
let that = this
console.log(that.saleInsuredAge)
that.impartDTOS.map(item => {
if (item.impartType == 0 || item.impartType == 4) {
item.impartItemDTOS.map((items, index, array) => {
if (items.extra3) {
let obj = JSON.parse(items.extra3)
if (obj.age && obj.sex == '') {
array.splice(index, 1, '')
}
if (obj.age && obj.sex) {
//15题性别为男或者女并且小于14岁不显示
if (that.saleInsuredSex != obj.sex || (that.saleInsuredSex == obj.sex && that.saleInsuredAge < obj.age)) {
array.splice(index, 1, '')
}
}
}
})
}
if (item.impartType == 1 || item.impartType == 5) {
item.impartItemDTOS.map((items, index, array) => {
if (items.extra3) {
let obj = JSON.parse(items.extra3)
if (obj.age && obj.sex == '') {
//被保险人年纪大于2岁不显示该题
if (that.saleInsuredPersonAge > obj.age) {
array.splice(index, 1, '')
}
}
if (obj.age && obj.sex) {
if (that.saleInsuredPersonSex != obj.sex || (that.saleInsuredPersonSex == obj.sex && that.saleInsuredPersonAge < obj.age)) {
array.splice(index, 1, '')
}
}
}
})
}
// 被保险人财务告知添加判断
if (item.impartType == 3 || item.impartType == 7 || item.impartType == 11) {
item.impartItemDTOS.map(items => {
if (items.extra3) {
let obj = JSON.parse(items.extra3)
if (obj.age && obj.sex == '2') {
//小于18岁显示
if (that.saleInsuredPersonAge < Number(obj.age)) {
this.isShow = true
}
}
}
})
}
})
//去除数组里面的空字符串
that.impartDTOS.map(item => {
if (item.impartType == 0 || item.impartType == 4) {
let array = item.impartItemDTOS
for (var i = 0; i < array.length; i++) {
if (array[i] == '' || array[i] == null || typeof array[i] == undefined) {
array.splice(i, 1)
i = i - 1
}
}
}
if (item.impartType == 1 || item.impartType == 5) {
let array = item.impartItemDTOS
// eslint-disable-next-line no-redeclare
for (var i = 0; i < array.length; i++) {
if (array[i] == '' || array[i] == null || typeof array[i] == undefined) {
array.splice(i, 1)
i = i - 1
}
}
}
})
},
// 单选改变时候
change(item, val, impartCode, impartType) {
// console.log(item)
// console.log(val)
let that = this
if (val == '0') {
that.impartDTOS.map(it => {
it.impartItemDTOS.map(itm => {
if (item == itm.isSelect) {
// itm.isTrue = val
itm.show = true
}
})
})
// that.impartItemDTOS[item].show = true
} else {
that.impartDTOS.map(it => {
it.impartItemDTOS.map(itm => {
if (item == itm.isSelect) {
// itm.isTrue = val
itm.show = false
}
})
})
}
if (impartType == '3' || impartType == '7' || impartType == '11') {
if (impartCode == '2a') {
if (val == '0') {
this.showFlag = true
that.impartDTOS.map(it => {
it.impartItemDTOS.map(itm => {
if (itm.impartCode == '2b') {
itm.impartAnswer = '0'
}
})
})
} else {
this.showFlag = false
}
}
}
},
formatDateTime() {
var date = new Date()
var y = date.getFullYear()
var m = date.getMonth() + 1
m = m < 10 ? '0' + m : m
var d = date.getDate()
d = d < 10 ? '0' + d : d
var h = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
return y + m + d + h + minute + second
},
// 获取告知消息,
information() {
let that = this
let data = {
productCodes: JSON.parse(localStorage.chooseProductCodes),
// productCodes: ['GFRS_M0001'],
platform: 'app',
type: '2'
}
information(data).then(res => {
// console.log(res)
if (res.result == '0') {
res.productImpartLstDTO.impartDTOS.map(item => {
item.impartItemDTOS.map(im => {
im.isSelect =
this.formatDateTime() +
Math.random()
.toString(36)
.substr(2)
im.impartAnswer = ''
if (im.questions) {
if (im.questions.length == '0') {
let obj = {
answer: ''
}
im.questions.push(obj)
}
}
if (this.noRisk == false && im.extra4 == 'noRisk') {
this.noRisk = true
}
})
})
// 展示被保险人项产品 noRis为true
if (this.noRisk) {
res.productImpartLstDTO.impartDTOS.map((item, index, array) => {
if (item.impartType == '0') {
array.splice(index, 1)
}
if (item.impartType == '2') {
array.splice(index, 1)
}
})
}
if (this.relationToAppnt == '1') {
// 展示被保险人项产品 noRis为true 保障型:去除投保人告知,其他不变
if (this.noRisk) {
res.productImpartLstDTO.impartDTOS.map((item, index, array) => {
if (item.impartType == '0') {
array.splice(index, 1)
}
if (item.impartType == '2') {
array.splice(index, 1)
}
})
} else {
// 展示被保险人项产品 noRis为false 保障型、意外型:去除被保人告知,其他不变
res.productImpartLstDTO.impartDTOS.map((item, index, array) => {
if (item.impartType == '1' || item.impartType == '5') {
array.splice(index, 1)
}
})
res.productImpartLstDTO.impartDTOS.map((item, index, array) => {
if (item.impartType == '3' || item.impartType == '7') {
array.splice(index, 1)
}
})
}
that.impartDTOS = res.productImpartLstDTO.impartDTOS
that.isShowList()
//投被同人时候判断
this.activeNames.push(res.productImpartLstDTO.impartDTOS.length)
} else {
that.impartDTOS = res.productImpartLstDTO.impartDTOS
that.isShowList()
//投被不同人时候判断
this.activeNames.push(res.productImpartLstDTO.impartDTOS.length)
}
}
})
},
// 下一步
next() {
let that = this
that.$validator.validate().then(valid => {
if (valid) {
let obj = {}
let objInsured = {}
let financeImpartDTO = {}
let financeImpart = {}
// let arr = []
that.impartDTOS.map(item => {
// 投保人健康告知
if (item.impartType == '0' || item.impartType == '4' || item.impartType == '8') {
item.impartItemDTOS.map(i => {
delete i.isSelect
delete i.show
})
obj = item
return obj
} else if (item.impartType == '2' || item.impartType == '6' || item.impartType == '10') {
// 投保人财富
item.impartItemDTOS.map(i => {
delete i.isSelect
delete i.show
})
// console.log(item.impartType)
financeImpartDTO = item
return financeImpartDTO
} else if (item.impartType == '1' || item.impartType == '5' || item.impartType == '9') {
// 被保险人健康
item.impartItemDTOS.map(i => {
delete i.isSelect
delete i.show
// if (i.impartCode == '14a') {
// i.questions.map(items => {
// items.questionType = '4'
// })
// }
})
objInsured = item
return objInsured
} else if (item.impartType == '3' || item.impartType == '7' || item.impartType == '11') {
// 被保险人财富
item.impartItemDTOS.map(i => {
delete i.isSelect
delete i.show
})
financeImpart = item
return financeImpart
}
})
if (financeImpartDTO == {}) {
let data = {
orderType: 'IMPART_ORDER',
orderDTO: {
orderInfoDTO: {
orderNo: window.localStorage.getItem('orderNo'),
productCode: JSON.parse(localStorage.trialList)[0].productCode
},
// 投保人
appntDTO: {
impartDTO: obj
},
// 被保险人
insuredDTOs: [{ impartDTO: objInsured, financeImpartDTO: financeImpart }]
}
}
saveInformation(data).then(res => {
if (res.result == '0') {
localStorage.removeItem('changeCard')
if (!this.$route.query.salePageFlag) {
//不是从导航栏进入
localStorage.salePageFlag = '6'
}
that.$jump({
flag: 'h5',
extra: {
url: location.origin + '/#/sale/accountInformation'
},
routerInfo: {
path: '/sale/accountInformation'
}
})
} else {
this.$toast(res.resultMessage)
}
})
} else if (financeImpart == {}) {
let data = {
orderType: 'IMPART_ORDER',
orderDTO: {
orderInfoDTO: {
orderNo: window.localStorage.getItem('orderNo'),
productCode: JSON.parse(localStorage.trialList)[0].productCode
},
// 投保人
appntDTO: {
impartDTO: obj,
financeImpartDTO: financeImpartDTO
},
// 被保险人
insuredDTOs: [{ impartDTO: objInsured }]
}
}
saveInformation(data).then(res => {
if (res.result == '0') {
localStorage.removeItem('changeCard')
that.$jump({
flag: 'h5',
extra: {
url: location.origin + '/#/sale/AccountInformation'
},
routerInfo: {
path: '/sale/AccountInformation'
}
})
} else {
this.$toast(res.resultMessage)
}
})
} else {
let data = {
orderType: 'IMPART_ORDER',
orderDTO: {
orderInfoDTO: {
orderNo: window.localStorage.getItem('orderNo'),
productCode: JSON.parse(localStorage.trialList)[0].productCode
},
// 投保人
appntDTO: {
impartDTO: obj,
financeImpartDTO: financeImpartDTO
},
// 被保险人
insuredDTOs: [{ impartDTO: objInsured, financeImpartDTO: financeImpart }]
}
}
saveInformation(data).then(res => {
if (res.result == '0') {
localStorage.removeItem('changeCard')
that.$jump({
flag: 'h5',
extra: {
url: location.origin + '/#/sale/accountInformation'
},
routerInfo: {
path: '/sale/accountInformation'
}
})
} else {
this.$toast(res.resultMessage)
}
})
}
} else {
this.$toast(this.$validator.errors.all()[0])
}
})
}
},
beforeRouteLeave(to, from, next) {
document.body.style.backgroundColor = ''
next()
},
components: {
[Collapse.name]: Collapse,
[CollapseItem.name]: CollapseItem,
[RadioGroup.name]: RadioGroup,
[Radio.name]: Radio,
[Field.name]: Field,
[CellGroup.name]: CellGroup,
[Icon.name]: Icon,
[IndexBar.name]: IndexBar
}
}
</script>
<style lang="scss" scoped>
@import '@/assets/sass/variables.scss';
.notifyingMessage-text {
background: rgba(236, 249, 255, 1);
span {
color: #4a90e2;
}
}
/deep/ .van-field__label {
width: 38%;
}
/deep/ .van-cell__value {
margin-left: 20px;
}
/deep/.van-collapse-item__content {
padding: 0;
}
/deep/ .special .van-hairline--top-bottom:first-child::after {
border: none;
}
.allFalse {
position: fixed;
overflow: hidden;
z-index: 10;
width: 100%;
}
</style>