mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-07 20:36:44 +08:00
466 lines
19 KiB
Vue
466 lines
19 KiB
Vue
<template>
|
||
<div class="detail-container pb50">
|
||
<van-collapse v-model="activeNames">
|
||
<!-- 保单信息 -->
|
||
<van-collapse-item title="保单信息" name="1" class="pb10 pt10">
|
||
<van-cell-group>
|
||
<van-cell title="保单号" :value="OrderInfoDTO.contNo" />
|
||
<van-cell title="生效日期" :value="OrderInfoDTO.cvaliDate" />
|
||
<van-cell title="保单状态" :value="OrderInfoDTO.contState" />
|
||
<van-cell title="签收状态" :value="OrderInfoDTO.orderStatusText" />
|
||
<van-cell v-if="OrderInfoDTO.receiptDate != null && OrderInfoDTO.receiptDate != ''" title="签收日期" :value="OrderInfoDTO.receiptDate" />
|
||
</van-cell-group>
|
||
</van-collapse-item>
|
||
|
||
<!-- 投保人信息 -->
|
||
<van-collapse-item title="投保人信息" name="2" class="detail-title pb10">
|
||
<van-cell-group>
|
||
<van-cell title="投保人" :value="appntDTO.name" />
|
||
<van-cell title="性别" :value="appntDTO.sexText" />
|
||
<van-cell title="证件类型" :value="appntDTO.idTypeText" />
|
||
<van-cell title="证件号码" :value="appntDTO.idNo" />
|
||
<van-cell title="联系电话" :value="appntDTO.mobileStar" />
|
||
<!-- <van-cell title="新市民身份" v-if="manageComCode == '45'" :value="appntDTO.isNewPeopleFlagText" />-->
|
||
<!-- <van-cell v-if="appntDTO.isNewPeopleFlagText == '是' && manageComCode == '45'" title="新市民类型" :value="appntDTO.npTypeTypeText" />-->
|
||
</van-cell-group>
|
||
</van-collapse-item>
|
||
|
||
<!-- 多被保险人信息 -->
|
||
<div v-for="(item, index) in insuredDTOs" :key="index" class="pb10">
|
||
<van-collapse-item title="被保险人信息" :name="index + 40" class="pb10">
|
||
<van-cell-group>
|
||
<!-- <van-cell title="是投保人的" :value="item.relationToAppnt" /> -->
|
||
<van-cell title="姓名" :value="item.name" />
|
||
<van-cell title="性别" :value="item.sexText" />
|
||
<van-cell title="证件类型" :value="item.idTypeText" />
|
||
<van-cell title="证件号码" :value="item.idNo" />
|
||
<van-cell title="联系电话" :value="item.mobile" />
|
||
<!-- <van-cell title="新市民身份" v-if="manageComCode == '45'" :value="item.isNewPeopleFlagText" />-->
|
||
<!-- <van-cell v-if="item.isNewPeopleFlagText == '是' && manageComCode == '45'" title="新市民类型" :value="item.npTypeText" />-->
|
||
</van-cell-group>
|
||
</van-collapse-item>
|
||
<div v-for="(itm, i) in item.bnfDTOs" :key="i" class="pb10">
|
||
<!-- 受益人信息 -->
|
||
<van-collapse-item title="受益人信息" :name="i + 81">
|
||
<van-cell-group>
|
||
<van-cell title="受益人" :value="itm.bnfTypeText" />
|
||
<div v-if="itm.bnfType == '1'">
|
||
<van-cell title="姓名" :value="itm.name" />
|
||
<van-cell title="性别" :value="itm.sexText" />
|
||
<!-- <van-cell title="是被保险人的" :value="itm.relationText" /> -->
|
||
<van-cell title="受益比例" :value="`${itm.bnfLot * 100}%`" v-if="itm.bnfLot != null" />
|
||
<van-cell title="证件类型" :value="itm.idTypeText" />
|
||
<van-cell title="证件号码" :value="itm.idNo" />
|
||
</div>
|
||
</van-cell-group>
|
||
</van-collapse-item>
|
||
</div>
|
||
<div v-for="(it, ind) in list" :key="it.riskName" class="pb10">
|
||
<van-collapse-item title="险种信息" :name="ind + 10">
|
||
<van-cell-group>
|
||
<van-cell title="险种名称" :value="it.riskName" />
|
||
<van-cell title="保险期间" :value="it.insuYear" />
|
||
|
||
<!-- <van-cell title="交费期间" :value="Number(it.years) > 30 ? '至70周岁' : `${it.years}年交`" /> -->
|
||
<van-cell title="交费期间" :value="it.payIntv" />
|
||
|
||
<van-cell title="险种保额(元)" :value="it.amt | moneyFormat" />
|
||
<van-cell title="险种保费(元)" :value="it.mainPremDetail | moneyFormat" />
|
||
<van-collapse-item title="附加险信息" :name="num + 61" v-for="(i, num) in it.addtion" :key="num">
|
||
<van-cell-group>
|
||
<van-cell title="险种名称" :value="i.riskName" />
|
||
<van-cell title="保险期间" :value="i.insuYear" />
|
||
|
||
<!-- <van-cell title="交费期间" :value="Number(i.years) > 30 ? '至70周岁' : `${i.years}年交`" /> -->
|
||
<van-cell title="交费期间" :value="i.payIntv" />
|
||
<van-cell title="险种保额(元)" v-if="i.amt == '1' || i.amt == '2' || i.amt == '3'" :value="`计划${i.amt}`"></van-cell>
|
||
<van-cell title="险种保额(元)" :value="i.amt | moneyFormat" v-else />
|
||
<van-cell title="险种保费(元)" :value="i.prem | moneyFormat" />
|
||
</van-cell-group>
|
||
</van-collapse-item>
|
||
</van-cell-group>
|
||
</van-collapse-item>
|
||
</div>
|
||
</div>
|
||
</van-collapse>
|
||
<van-dialog v-model="show" title="提示" show-cancel-button @confirm="authConfirm(authCode)" @cancel="clearTimer">
|
||
<p class="p10 fs14">为确保是您本人操作，短信验证码已发送至您手机号{{ encyCustomerMobile }}，请您输入验证码以完成后续投保操作。</p>
|
||
<van-cell-group class="flex align-items-c pr5 mb15">
|
||
<van-field maxlength="6" placeholder="请输入短信验证码" v-model="authCode" clearable label-width="0" />
|
||
<van-button type="danger" plain size="small" class="w160 p0" @click="getAuthCode" :disabled="codeDisabled" v-no-more-click="2000">{{
|
||
codeDisabled ? `${countDown}s后重新获取` : '获取验证码'
|
||
}}</van-button>
|
||
</van-cell-group>
|
||
</van-dialog>
|
||
<!-- 2019-09-27 版上线不含“回执签收” marked by panglizong on 2019-09-26 -->
|
||
<div class="bottom-btn bg-white">
|
||
<van-button type="danger" size="large" @click="next" v-if="OrderInfoDTO.orderStatus == '0'" v-no-more-click="1000">回执签收</van-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Collapse, CollapseItem, Cell, CellGroup, Button, Field, Dialog } from 'vant'
|
||
import { getPolicyDetail, getReceiptSign } from '@/api/ebiz/serve/serve'
|
||
import { getAuthCode, autchCodeCheck } from '@/api/ebiz/sale/sale'
|
||
import { checkPhone } from '@/api/ebiz/customer/customer'
|
||
import dataDictionary from '@/assets/js/utils/data-dictionary' //根据数据字典进行页面展示
|
||
import { formatAllRisk } from '@/assets/js/utils/formatRiskList'
|
||
import riskRules from '@/views/ebiz/common/risk-rules'
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false, // 获取短信验证码
|
||
codeDisabled: false, // 获取验证码按钮是否禁用
|
||
timeId: null, // 计时器ID
|
||
countDown: 60, // 倒计时
|
||
authCode: '', // 验证码
|
||
smsAuthNum: 3,
|
||
operaFlag: null,
|
||
encyCustomerMobile: null,
|
||
customerMobile: null,
|
||
sid: null,
|
||
//人脸识别认证次数
|
||
faceAuthCount: {
|
||
appnt: 0,
|
||
insured: 0,
|
||
weixin: 0
|
||
},
|
||
// 折叠面板
|
||
activeNames: ['1'],
|
||
// 保单基本信息
|
||
OrderInfoDTO: {},
|
||
// 投保人信息
|
||
appntDTO: {},
|
||
// 被保险人信息
|
||
insuredDTOs: [],
|
||
// 保单号
|
||
contNo: '',
|
||
manageComCode:'',//代理人管理机构 52贵州 45广西
|
||
list: []
|
||
}
|
||
},
|
||
created() {
|
||
setTimeout(() => {
|
||
// 右上角的显示
|
||
window.EWebBridge.webCallAppInJs('webview_right_button', {
|
||
btns: [
|
||
{
|
||
img: this.$assetsUrl + 'images/share@3x.png'
|
||
}
|
||
]
|
||
})
|
||
}, 1000)
|
||
window['appCallBack'] = this.appCallBack
|
||
// 获取保单详情
|
||
this.getPolicyDetail()
|
||
},
|
||
async mounted() {
|
||
let dataReturn = await riskRules.getAgentInfoFunc(this)
|
||
this.manageComCode = dataReturn.manageComCode
|
||
},
|
||
components: {
|
||
[Collapse.name]: Collapse,
|
||
[CollapseItem.name]: CollapseItem,
|
||
[Cell.name]: Cell,
|
||
[CellGroup.name]: CellGroup,
|
||
[Button.name]: Button,
|
||
[Field.name]: Field,
|
||
[Dialog.name]: Dialog
|
||
},
|
||
methods: {
|
||
// 获取短信验证码
|
||
getAuthCode() {
|
||
this.codeDisabled = true
|
||
//倒计时
|
||
this.timeId = setInterval(() => {
|
||
this.countDown--
|
||
if (this.countDown <= 0) {
|
||
window.clearInterval(this.timeId)
|
||
this.codeDisabled = false
|
||
this.countDown = 60
|
||
}
|
||
}, 1000)
|
||
getAuthCode({
|
||
operateType: 'appntInfoEntry',
|
||
type: 'H5',
|
||
operateCode: this.customerMobile,
|
||
system: 'agentApp',
|
||
operateCodeType: '0'
|
||
}).then(res => {
|
||
console.log(res)
|
||
if (res.result == 0) {
|
||
this.sid = res.sessionId
|
||
} else {
|
||
this.$toast(res.resultMessage)
|
||
}
|
||
})
|
||
},
|
||
// 验证码确认事件
|
||
async authConfirm() {
|
||
//清理计时器
|
||
this.clearTimer()
|
||
this.changeSubmit()
|
||
},
|
||
// 清理计时器
|
||
clearTimer() {
|
||
window.clearInterval(this.timeId)
|
||
this.timeId = null
|
||
this.countDown = 60
|
||
this.codeDisabled = false
|
||
},
|
||
//提交变更申请
|
||
async changeSubmit() {
|
||
if (null == this.sid) {
|
||
this.$toast('请先进行发送短信验证码')
|
||
return
|
||
}
|
||
let res = await autchCodeCheck({
|
||
smsId: this.sid,
|
||
code: this.authCode
|
||
})
|
||
if (res.result == 0) {
|
||
this.toNextPage()
|
||
} else {
|
||
this.$toast(res.resultMessage)
|
||
}
|
||
},
|
||
realPeopelCheck() {
|
||
this.$toast.loading({
|
||
// 持续展示 toast
|
||
duration: 0,
|
||
// 禁用背景点击s
|
||
forbidClick: true,
|
||
loadingType: 'spinner',
|
||
message: '加载中……'
|
||
})
|
||
let data = {
|
||
name: this.appntDTO.name,
|
||
idType: this.appntDTO.idType,
|
||
idNo: this.appntDTO.idNo,
|
||
mobile: this.appntDTO.mobile
|
||
}
|
||
this.customerMobile = this.appntDTO.mobile
|
||
this.encyCustomerMobile = this.customerMobile.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
|
||
this.authCode = null
|
||
// eslint-disable-next-line no-unused-vars
|
||
return new Promise((resolve, reject) => {
|
||
checkPhone(data).then(res => {
|
||
if (res.result == '0') {
|
||
console.log(res)
|
||
this.show = true
|
||
} else {
|
||
Dialog.confirm({
|
||
title: '提示',
|
||
message: '抱歉，您预留的手机号非您本人的手机号！',
|
||
showCancelButton: false
|
||
})
|
||
}
|
||
})
|
||
})
|
||
},
|
||
// 获取保单详情
|
||
getPolicyDetail() {
|
||
let that = this
|
||
let data = {
|
||
policyNo: window.localStorage.getItem('policyNo')
|
||
}
|
||
|
||
getPolicyDetail(data).then(res => {
|
||
if (res.result == '0') {
|
||
let appntDTO = res.content.appntDTO
|
||
let orderInfoDTO = res.content.orderInfoDTO
|
||
// 保单信息
|
||
if (orderInfoDTO.orderStatus == '0') {
|
||
orderInfoDTO.orderStatusText = '未签收'
|
||
} else if (orderInfoDTO.orderStatus == '1') {
|
||
orderInfoDTO.orderStatusText = '已签收'
|
||
} else {
|
||
orderInfoDTO.orderStatusText = ''
|
||
}
|
||
//团险渠道 查看团单号
|
||
if (orderInfoDTO.saleChnl === '2' || orderInfoDTO.saleChnl === '团险') {
|
||
orderInfoDTO.contNo=orderInfoDTO.grpContNo;
|
||
}
|
||
// 测试用
|
||
// orderInfoDTO.orderStatus = '0'
|
||
that.OrderInfoDTO = orderInfoDTO
|
||
// 投保人信息
|
||
this.filterData(dataDictionary.sex, 'sex', appntDTO)
|
||
this.filterData(dataDictionary.isNewPeopleFlag, 'isNewPeopleFlag', appntDTO)
|
||
this.filterData(dataDictionary.npType, 'isNewPeopleFlag', appntDTO)
|
||
this.filterData(dataDictionary.idType, 'idType', appntDTO)
|
||
that.appntDTO = appntDTO
|
||
this.$CacheUtils.setLocItem('saleInsuredInfo', JSON.stringify(appntDTO))
|
||
// 被保险人信息
|
||
res.content.insuredDTOs.map(insured => {
|
||
insured.riskDTOLst.map(risk => {
|
||
Number(risk.payIntv)
|
||
switch (risk.payIntv) {
|
||
case -1:
|
||
risk.payIntv = '不定期交'
|
||
break
|
||
case 0:
|
||
risk.payIntv = '一次交清'
|
||
break
|
||
case 1:
|
||
risk.payIntv = '月交'
|
||
break
|
||
case 3:
|
||
risk.payIntv = '季交'
|
||
break
|
||
case 6:
|
||
risk.payIntv = '半年交'
|
||
break
|
||
case 12:
|
||
risk.payIntv = '年交'
|
||
break
|
||
}
|
||
if (risk.insuYear == '70') {
|
||
risk.insuYear = '至70周岁'
|
||
} else if (risk.insuYear == '75') {
|
||
risk.insuYear = '至75周岁'
|
||
} else if (risk.insuYear == '80') {
|
||
risk.insuYear = '至80周岁'
|
||
} else if (risk.insuYear == '106') {
|
||
risk.insuYear = '终身'
|
||
} else {
|
||
risk.insuYear = risk.insuYearFlag == 'D' ? `${risk.insuYear}天` : `${risk.insuYear}年`
|
||
}
|
||
})
|
||
this.filterData(dataDictionary.sex, 'sex', insured)
|
||
this.filterData(dataDictionary.isNewPeopleFlag, 'isNewPeopleFlag', insured)
|
||
this.filterData(dataDictionary.npType, 'npType', insured)
|
||
this.filterData(dataDictionary.idType, 'idType', insured)
|
||
this.filterData(dataDictionary.relationToAppnt, 'relation', insured)
|
||
insured.bnfDTOs.map(bnf => {
|
||
this.filterData(dataDictionary.bnfType, 'bnfType', bnf)
|
||
this.filterData(dataDictionary.sex, 'sex', bnf)
|
||
this.filterData(dataDictionary.isNewPeopleFlag, 'isNewPeopleFlag', bnf)
|
||
this.filterData(dataDictionary.npType, 'npType', bnf)
|
||
this.filterData(dataDictionary.idType, 'idType', bnf)
|
||
this.filterData(dataDictionary.relationToAppnt, 'relation', bnf)
|
||
})
|
||
})
|
||
|
||
that.insuredDTOs = res.content.insuredDTOs
|
||
this.list = formatAllRisk(this.insuredDTOs[0].riskDTOLst)
|
||
} else {
|
||
this.$toast(res.resultMessage)
|
||
}
|
||
})
|
||
},
|
||
appCallBack(data) {
|
||
if (data.trigger == 'right_button_click') {
|
||
console.log(this.$CacheUtils.getLocItem('saleInsuredInfo'))
|
||
EWebBridge.webCallAppInJs('bridge', {
|
||
flag: 'share',
|
||
extra: {
|
||
title: '国富人寿保单回执签字',
|
||
content: '国富人寿保单回执签收',
|
||
url:
|
||
location.origin +
|
||
'/#/serve/airSign?policyNo=' +
|
||
localStorage.policyNo +
|
||
'&token=' +
|
||
localStorage.token +
|
||
'&saleInsuredInfo=' +
|
||
encodeURI(this.$CacheUtils.getLocItem('saleInsuredInfo')),
|
||
// url: 'http://47.96.143.111/#/proposal/exhibition?proposalNo=' + localStorage.orderNo + '&token=' + localStorage.token,
|
||
img: this.$assetsUrl + 'images/logo.png'
|
||
}
|
||
})
|
||
}
|
||
},
|
||
//根据数据字典 将后端返回的数据渲染到页面中
|
||
filterData(dictionary, key, pageData) {
|
||
dictionary.forEach(item => {
|
||
if (pageData[key] == item.id) {
|
||
pageData[key + 'Text'] = item.text //渲染页面使用的字段
|
||
}
|
||
})
|
||
},
|
||
// 回执签收
|
||
next() {
|
||
this.toNextPage()
|
||
// let that = this
|
||
// if (this.faceAuthCount.appnt < this.smsAuthNum) {
|
||
// if (this.appntDTO.idType == '1') {
|
||
// //证件类型为身份证时，进行人脸识别
|
||
// EWebBridge.webCallAppInJs('face_auth', {
|
||
// number: this.appntDTO.idNo, //身份证号码
|
||
// name: this.appntDTO.name //姓名
|
||
// }).then(data => {
|
||
// this.$toast.loading({
|
||
// duration: 0, // 持续展示 toast
|
||
// forbidClick: true, // 禁用背景点击
|
||
// loadingType: 'spinner',
|
||
// message: '加载中……'
|
||
// })
|
||
// this.$toast.clear()
|
||
// if (JSON.parse(data).state == '1') {
|
||
// this.toNextPage()
|
||
// } else {
|
||
// that.faceAuthCount.appnt++
|
||
// if (that.faceAuthCount.appnt >= this.smsAuthNum) {
|
||
// this.realPeopelCheck()
|
||
// }
|
||
// }
|
||
// })
|
||
// } else {
|
||
// this.toNextPage()
|
||
// }
|
||
// } else {
|
||
// this.realPeopelCheck()
|
||
// }
|
||
},
|
||
toNextPage() {
|
||
let params = {
|
||
contNo: window.localStorage.getItem('policyNo')
|
||
}
|
||
getReceiptSign(params).then(res => {
|
||
if (res.result == '0') {
|
||
this.$toast.clear()
|
||
window.localStorage.setItem('insurance-policyUrl', res.signUrl)
|
||
window.localStorage.setItem('detailJump', '1')
|
||
window.localStorage.setItem('contNo', this.OrderInfoDTO.contNo)
|
||
window.localStorage.setItem('orderNo', this.OrderInfoDTO.orderNo)
|
||
window.localStorage.setItem('orderStatus', this.OrderInfoDTO.orderStatus)
|
||
this.$CacheUtils.setLocItem('saleInsuredInfo', JSON.stringify(this.appntDTO))
|
||
this.$jump({
|
||
flag: 'h5',
|
||
extra: {
|
||
url: location.origin + '/#/sale/signatureOfElectronic',
|
||
forbidSwipeBack: '1',
|
||
title: '保险合同签收回执电子确认书签名'
|
||
},
|
||
routerInfo: {
|
||
path: '/sale/signatureOfElectronic'
|
||
}
|
||
})
|
||
} else {
|
||
this.$toast(res.resultMessage)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.detail-container {
|
||
.van-hairline--top-bottom::after {
|
||
border: none;
|
||
}
|
||
/deep/ .van-collapse-item__content {
|
||
padding-top: 0;
|
||
}
|
||
/deep/.van-collapse-item__title {
|
||
padding-left: 30px;
|
||
}
|
||
/deep/ .van-cell__value {
|
||
text-align: left !important;
|
||
}
|
||
}
|
||
</style>
|