[NEW]【保全-退保】新增退保信息、确认页

This commit is contained in:
yuweiqi
2020-04-15 22:04:16 +08:00
parent 9cd43f9b60
commit f45333d267
2 changed files with 788 additions and 2 deletions

View File

@@ -1 +1,418 @@
<!--退保-保全代办确认页-->
<!--退保-保全代办确认页-->
<template>
<div class="surrender-confirmation-container pb50">
<div style="border-bottom: 1px solid #ebedf0" class="fs14 pl10 pv12 bg-white">
<p>
<span>尊敬的</span>
<span class="red">{{ orderInfo.accountName }}</span
>先生/女士, 您好!
</p>
<p class="mt10">
<span>您的</span>
<span class="red">退保</span>已由代理人代办请确认信息并进行提交:
</p>
</div>
<van-cell-group class="mt10 cont-info-container">
<!-- 保单信息 -->
<p style="border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">保单信息</p>
<van-cell title="保单号" :value="orderInfo.riskName" />
<van-cell title="产品名称" :value="orderInfo.riskName" />
<van-cell title="投保人" :value="orderInfo.appntName" />
<van-cell title="被保险人" :value="orderInfo.insuredName" />
<van-cell title="保单生效日期" :value="orderInfo.cvaliDate" />
<van-cell title="退保金额" :value="orderInfo.accountMoney" />
<van-cell title="万能险退保手续费比例" :value="orderInfo.ratio" />
</van-cell-group>
<!-- 账号信息 -->
<van-cell-group class="mt10 cont-info-container">
<p style="border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">账号信息</p>
<van-cell title="开户人姓名" :value="accountInfo.accountName" />
<van-cell title="退款账户" :value="accountInfo.accountName" />
<van-cell title="开户银行">
<div class="red" slot="default">{{ accountInfo.newBank }}</div>
</van-cell>
<van-cell title="银行账号">
<div class="red" slot="default">{{ accountInfo.newBankNo }}</div>
</van-cell>
<van-cell title="开户行所在地" :value="accountInfo.accountName" />
<van-cell title="退保原因" :value="accountInfo.accountName" />
</van-cell-group>
<van-cell-group class="fs14 mt10 pl15 pr15 pb20">
<p class="pt20 pb20">以下内容需要您阅读确认:</p>
<p>需阅读</p>
<p class="mb10 mt10">
<span class="red">国富人寿人身保险退保协议</span>
<img :src="src" v-if="documentStatus == '3'" />
</p>
<p class="start">点击开始按钮进行相关操作</p>
</van-cell-group>
<!-- 短信验证 -->
<van-dialog
v-model="show"
title="短信确认"
show-cancel-button
cancelButtonColor="#4FC6B3"
class="dialog-delete"
confirmButtonColor="#FFFFFF"
@confirm="authConfirm(authCode)"
@cancel="clearTimer"
>
<p class="p10 fs14">向此手机发送验证码确认用户身份</p>
<p class="p10 fs14" style="border-bottom: 1px solid #ebedf0">{{ customerMobile }}</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>
<div class="bottom-btn bg-white">
<van-button
:type="submitForbidden ? '' : 'danger'"
:color="submitForbidden ? 'gray' : ''"
v-if="isSigned || submitForbidden"
size="large"
:disabled="nextDisabled || submitForbidden"
@click="show = true"
v-no-more-click="2000"
>提交申请</van-button
>
<!-- <van-button color="gray" v-else-if="submitForbidden" size="large" disabled>提交申请失败</van-button> -->
<!-- <van-button color="gray" v-else-if="linkInvalid" size="large" disabled>链接已失效</van-button>
<van-button color="gray" v-else-if="isCanceled" size="large" disabled>代理人已撤销</van-button> -->
<van-button type="danger" v-else size="large" @click="start" v-no-more-click="2000">开始</van-button>
</div>
</div>
</template>
<script>
import { Field, Cell, CellGroup, Dialog } from 'vant'
import { customerInfoShare, orderDetail, authCode, changeStatus, queryCancel } from '@/api/ebiz/preserve/preserve'
import { checkSignInvalid } from '@/api/ebiz/sale/sale'
export default {
name: 'RenewalConfirmation',
components: {
[Field.name]: Field,
[Cell.name]: Cell,
[CellGroup.name]: CellGroup,
[Dialog.name]: Dialog
},
data() {
return {
//账号信息
accountInfo: {
accountName: '张三',
newBank: '工商银行',
newBankNo: '1122334455667899076'
},
//保单信息
orderInfo: {
riskName: '国富人寿八桂无忧',
appntName: '张三',
insuredName: '李四',
cvaliDate: '2020-02-02',
accountMoney: '130.00',
ratio: '70%'
},
show: false, // 获取短信验证码
codeDisabled: false, // 获取验证码按钮是否禁用
timeId: null, // 计时器ID
countDown: 60, // 倒计时
authCode: '', // 验证码
src: this.$assetsUrl + 'images/u6490.png', // 图片路径
newBank: '', //新开户银行
newBankNo: '', //新银行卡号
customerMobile: '',
sessionId: '',
nextDisabled: true,
signInvalid: '',
isSigned: false, //是否签完名了
submitForbidden: false, //是否提交申请失败
linkInvalid: false, //链接是否失效
isCanceled: false, //是否撤销
documentStatus: '' //签名状态
}
},
async created() {
this.$route.query.customerInfo && (localStorage.customerInfo = decodeURI(this.$route.query.customerInfo))
this.$route.query.token && (localStorage.token = this.$route.query.token)
this.customerMobile = JSON.parse(localStorage.customerInfo).customerMobile
//是否已经签名
if (sessionStorage.customerSign && JSON.parse(sessionStorage.customerSign).isSign) {
this.isSigned = true
} else {
this.isSigned = false
//token签名
if (this.$route.query.signInvalid) {
localStorage.signInvalid = this.$route.query.signInvalid
this.signInvalid = this.$route.query.signInvalid
//token是否过期
let resData = await this.checkSignInvalid(this.signInvalid)
if (resData == '1') {
this.linkInvalid = false
} else {
this.linkInvalid = true
}
}
}
this.init()
},
methods: {
start() {
this.$jump({
flag: 'h5',
extra: {
url: location.origin + '/#/preserve/autopayAuthorization'
},
routerInfo: {
path: '/preserve/autopayAuthorization'
}
})
},
async init() {
this.$toast.loading({
// 持续展示 toast
duration: 0,
// 禁用背景点击
forbidClick: true,
loadingType: 'spinner',
message: '加载中……'
})
// await this.isPreserveCancel()
//如果没有被撤销
// if (backData == 'notCanceled') {
let params = {
surrenderType: '2', //"1","基本信息变更" "2","续期账号变更" "3","红利领取"
customerInfoDTOList: [],
mediaDTOList: [],
surrenderId: JSON.parse(localStorage.customerInfo).surrenderId,
edorapplyNo: JSON.parse(localStorage.customerInfo).edorapplyNo || JSON.parse(localStorage.customerInfo).edorApplyNo
}
let res = await customerInfoShare(params)
this.$toast.clear()
if (res.result == 0) {
if (!JSON.parse(localStorage.customerInfo).contNo) {
res.content.accountResList.forEach(item => {
// this.policyList.push(item.contNo)
if (item.isNewInfo == '0') {
this.policyList.push({
contNo: item.contNo,
surrenderStatus: item.surrenderStatus
})
this.newBank = item.bankName
this.newBankNo = item.bankNo
}
})
localStorage.policyList = JSON.stringify(this.policyList)
} else {
//如果是从保全进度查询分享进来(只有一个单)
res.content.accountResList.forEach(item => {
// this.policyList.push(item.contNo)
if (item.contNo == JSON.parse(localStorage.customerInfo).contNo && item.isNewInfo == '0') {
this.policyList.push({
contNo: item.contNo,
surrenderStatus: item.surrenderStatus
})
this.newBank = item.bankName
this.newBankNo = item.bankNo
}
})
}
//未签名并且链接有效的情况下
if (!this.isSigned && !this.linkInvalid) {
//撤销
this.isCanceled = res.content.accountResList.every(item => {
return item.surrenderStatus == 5
})
}
//未签名并且链接有效的情况下
if (!this.linkInvalid) {
//已提交
this.submitForbidden = res.content.accountResList.every(item => {
return item.surrenderStatus == 3 || item.surrenderStatus == 6 || item.surrenderStatus == 9 || item.surrenderStatus == 7
})
}
//未签名&链接有效&未撤销
// if (!this.isSigned && !this.linkInvalid && !this.isCanceled) {
// //提交申请失败
// this.submitForbidden = res.content.accountResList.every(item => {
// return item.surrenderStatus == 7
// })
// }
// localStorage.signList = JSON.stringify(res.content.signList[0])
if (!sessionStorage.customerSign) {
let customerSign = {
baseEncryp: '',
policyUrl: res.content.signList[0].policyUrl
}
sessionStorage.customerSign = JSON.stringify(customerSign)
}
this.documentStatus = res.content.signList[0].documentStatus
this.getOrderDetail({
contNo: this.policyList[0].contNo
})
} else {
this.$toast(res.resultMessage)
}
// }
},
// 获取短信验证码
getAuthCode() {
this.codeDisabled = true
//倒计时
this.timeId = setInterval(() => {
this.countDown--
if (this.countDown <= 0) {
window.clearInterval(this.timeId)
this.codeDisabled = false
this.countDown = 60
}
}, 1000)
authCode({
operateType: 'smslogin',
sessionId: '',
validateCode: '',
operateCode: this.customerMobile,
system: '',
operateCodeType: '0'
}).then(res => {
if (res.result == 0) {
this.sessionId = res.sessionId
} else {
this.$toast(res.resultMessage)
}
})
},
// 验证码确认事件
async authConfirm() {
//清理计时器
this.clearTimer()
changeStatus({
surrenderId: JSON.parse(localStorage.customerInfo).surrenderId,
surrenderStatus: '3',
smsCodeDTO: {
smsId: this.sessionId,
code: this.authCode
}
}).then(resDdata => {
if (resDdata.result == 0) {
this.$jump({
flag: 'h5',
extra: {
url: location.origin + `/#/preserve/submitResult`
},
routerInfo: {
path: `/preserve/submitResult`
}
})
} else {
this.$toast(resDdata.resultMessage)
}
})
},
// 清理计时器
clearTimer() {
window.clearInterval(this.timeId)
this.timeId = null
this.countDown = 60
this.codeDisabled = false
},
//获取保单详情
async getOrderDetail(data) {
let res = await orderDetail(data)
if (res.result == 0) {
this.nextDisabled = false
let flag = true
this.list.forEach((item, index) => {
if (item.contNo == data.contNo) {
flag = false
console.info(index, item, res.content)
// this.list.splice(index, 1, res.content)
this.list.splice(index, 1, Object.assign(this.policyList[index], res.content))
}
})
if (flag) {
// this.list.push(res.content)
this.list.push(Object.assign(this.policyList[0], res.content))
this.policyList.forEach((item, index) => {
if (index != 0) {
this.list.push(item)
}
})
}
} else {
this.$toast(res.resultMessage)
}
},
//提交申请
submit() {},
// 在微信中校验token是否失效
async checkSignInvalid(signInvalid) {
let that = this
this.$toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true, // 禁用背景点击
loadingType: 'spinner',
message: '加载中……'
})
let data = {
sign: signInvalid
}
return new Promise((resolve, reject) => {
checkSignInvalid(data).then(res => {
if (res.result == '0') {
that.$toast.clear()
let status = res.content.status
resolve(status)
} else {
reject()
}
})
})
},
//查询撤销
async isPreserveCancel() {
return new Promise((resolve, reject) => {
let data = {
surrenderId: JSON.parse(localStorage.customerInfo).surrenderId
}
queryCancel(data).then(res => {
//result=0 已撤销
if (res.result == 0) {
this.isCanceled = true
resolve()
} else {
this.isCanceled = false
reject()
}
})
})
}
},
beforeDestroy() {
//清理计时器
this.clearTimer()
}
}
</script>
<style lang="scss" scoped>
.surrender-confirmation-container {
.cont-info-container {
/deep/.van-cell__title,
.van-cell__value {
flex: auto;
text-align: left;
width: 50%;
}
}
}
.red {
color: #e9332e !important;
}
</style>

View File

@@ -1 +1,370 @@
<!--退保页-->
<!--退保页-->
<template>
<div class="renewal-info-container pb45">
<div v-if="!isScan">
<van-cell-group class="mt10 cont-info-container">
<!-- 保单信息 -->
<p style="border-bottom: 1px solid #ebedf0" class=" fs15 fwb pl10 pv12">保单信息</p>
<van-cell title="产品名称" :value="detail.riskName" required />
<van-cell title="保单号" :value="detail.riskName" required />
<van-cell title="投保人" :value="detail.appntName" required />
<van-cell title="被保险人" :value="detail.insuredName" required />
<van-cell title="保单生效日期" :value="detail.cvaliDate" required />
<van-cell title="退保金额" :value="detail.contState | amtFormat" required />
<van-cell title="万能险退保手续费比例" :value="detail.accountName" required />
</van-cell-group>
<!-- 账号信息 -->
<div class="account-info-container">
<van-cell-group class="mt10">
<p style="border-bottom: 1px solid #ebedf0" class=" fs15 fwb pl10 pv12">账号信息</p>
<van-cell title="开户人姓名" required>张三</van-cell>
<van-field
v-model="account"
label="退款账户"
placeholder="请选择"
right-icon="arrow"
@click="accountPopup = true"
readonly
v-validate="'required'"
data-vv-name="退款账户"
required
/>
<van-field
v-model="bank"
label="开户银行"
placeholder="请选择"
right-icon="arrow"
@click="accountType != '1' ? (bankPopup = true) : (bankPopup = false)"
readonly
v-validate="'required'"
data-vv-name="开户银行"
:disabled="accountType == '1'"
required
/>
</van-cell-group>
<van-cell-group class="flex align-items-c">
<van-field
v-model="bankId"
label="银行账号"
required
maxlength="19"
placeholder="请输入"
clearable
v-validate="'required|bankCard'"
data-vv-name="银行账号"
/>
<van-button type="danger" size="small" round class="bankCard mr10 w110 h20" @click="cardScanning('0')" v-no-more-click="2000">银行卡扫描</van-button>
</van-cell-group>
<van-field v-model="bank" label="开户银行所在地" placeholder="请输入" v-validate="'required'" data-vv-name="开户银行所在地" required />
<van-field
v-model="surrenderReason"
label="退保原因"
required
placeholder="请选择"
right-icon="arrow"
@click="surrenderReasonPopup = true"
readonly
v-validate="'required'"
data-vv-name="退保原因"
/>
</div>
<!-- 其他退保原因输入框 -->
<van-row class="mb10 mt1">
<van-col span="8"></van-col>
<van-col span="16">
<van-field
class="van-hairline--surround"
v-model="otherReason"
rows="4"
autosize
type="textarea"
name="其他退保原因"
placeholder="请输入其他退保原因"
v-validate="surrenderReasonType === '6' ? 'required' : ''"
v-if="surrenderReasonType === '6'"
/>
</van-col>
</van-row>
<div class="bottom-btn bg-white">
<van-button type="danger" size="large" @click="nextStep" v-no-more-click="2000">下一步</van-button>
</div>
<!-- 开户银行选择 -->
<van-popup v-model="bankPopup" position="bottom">
<van-list>
<van-cell v-for="item in bankList" :key="item.code" :title="item.bankName" class="text-center" @click="chooseBank(item.bankName, item.code)" />
</van-list>
</van-popup>
<!-- 退款账户选择 -->
<van-popup v-model="accountPopup">
<van-list>
<van-cell v-for="item in accountList" :key="item.type" :title="item.title" class="text-center" @click="chooseAccount(item.title, item.type)" />
</van-list>
</van-popup>
<!-- 退保原因选择 -->
<van-popup v-model="surrenderReasonPopup" position="bottom">
<van-list>
<van-cell
v-for="item in surrenderReasonList"
:key="item.type"
:title="item.title"
class="text-center"
@click="chooseSurrderReason(item.title, item.type)"
/>
</van-list>
</van-popup>
</div>
<!-- 银行卡扫描 -->
<BankCardScan :scanShow="isScan" :clear="false" @getScanInfo="getBankCardInfo"></BankCardScan>
</div>
</template>
<script>
import { Field, Cell, CellGroup, Popup, List, Row, Col } from 'vant'
import BankCardScan from '@/components/ebiz/sale/BankCardScan'
// import { orderDetail, customerInfoChange } from '@/api/ebiz/preserve/preserve'
import { getBankList } from '@/api/ebiz/sale/sale'
export default {
name: 'surrenderInfo',
components: {
[Field.name]: Field,
[Cell.name]: Cell,
[CellGroup.name]: CellGroup,
[List.name]: List,
[Row.name]: Row,
[Col.name]: Col,
[Popup.name]: Popup,
BankCardScan
},
data() {
return {
bank: '', //开户银行
bankCode: '', //银行编码
bankPopup: false, // 展示银行列表
bankList: [], // 银行列表
bankId: '374198274319824389127341', // 银行卡号
isScan: false, // 是否扫描银行卡
account: '原银行账户', //退款账户
accountType: '1', //退款账户
accountPopup: false, //展示退款账户弹框
accountList: [
//退款账户列表
{ type: '1', title: '原银行账户' },
{ type: '2', title: '新银行账户' }
],
otherReason: '', //其他退款原因
surrenderReason: '', //退款原因
surrenderReasonType: '', //退款原因
surrenderReasonPopup: false, //展示退保原因弹框
surrenderReasonList: [
//退款原因列表
{ type: '1', title: '个人经济原因,无力负担保费' },
{ type: '2', title: '对险种不满意' },
{ type: '3', title: '对业务员不满意' },
{ type: '4', title: '对公司服务不满意' },
{ type: '5', title: '人情投保' },
{ type: '6', title: '其他' }
],
detail: {
contNo: 'HL052019110010001047',
riskName: '鼎诚人寿重大疾病险重大疾病险重大疾病险',
appntName: '嘿嘿',
insuredName: '狗乐',
insuPayType: '1',
cvaliDate: '2020-12-31',
contState: '001',
accountName: '彭小芳',
bankCode: '102',
bankNo: '374198274319824389127341'
} //保单详情
}
},
created() {
this.getBank()
},
mounted() {
// 筛选按钮的点击事件
window.appCallBack = this.appCallBack
},
methods: {
// 选择银行
chooseBank(name, code) {
this.bank = name
this.bankCode = code
this.bankPopup = false
},
//选择退款账户
chooseAccount(title, type) {
this.account = title
this.accountType = type
this.accountPopup = false
},
//选择退款原因
chooseSurrderReason(title, type) {
this.surrenderReason = title
this.surrenderReasonType = type
this.surrenderReasonPopup = false
},
// 获取银行卡扫描信息
getBankCardInfo(data) {
this.bankId = data.name
this.$jump({
flag: 'navigation',
extra: {
title: '退保',
hiddenRight: '1'
}
})
this.isScan = false
},
// 银行卡扫描
cardScanning(cardScanningType) {
window.localStorage.setItem('cardScanningType', cardScanningType)
document.body.style.backgroundColor = '#F5F5F5'
let title = ''
this.isclear = false
;[this.isScan, title] = [true, '银行卡扫描']
setTimeout(() => {
this.$jump({
flag: 'navigation',
extra: {
title,
hiddenLeft: '1'
}
})
this.closeBtn()
}, 400)
},
closeBtn() {
// 筛选按钮的显示
this.$jump({
flag: 'webview_right_button',
extra: {
btns: [
{
img: this.$assetsUrl + 'images/del-close.png',
route: { flag: '', extra: {} }
}
]
}
})
},
appCallBack() {
this.isclear = true
// 筛选按钮的点击事件
this.isclear = true
this.$jump({
flag: 'navigation',
extra: {
title: '退保',
hiddenRight: '1'
}
})
this.isScan = false
},
// 下一步
async nextStep() {
this.$validator.validate().then(valid => {
if (true === valid) {
let params = {}
/*若更换新的银行卡需重新上传银行卡影像保费满10000需上传身份证影像如果低于10000无需上传
如果是纸质合同,需要添加纸质保单影像,
在此页进行判断是否需要上传身份证影像和纸质保单影像*/
let url = `/preserve/surrenderConfirmation?`
} else {
this.$toast(this.$validator.errors.all()[0])
}
})
},
/*
//获取保单详情
async getOrderDetail(data) {
orderDetail(data).then(res => {
if (res.result == 0) {
let flag = true
this.list.forEach((item, index) => {
if (item.contNo == data.contNo) {
flag = false
this.list.splice(index, 1, res.content)
}
})
if (flag) {
this.list.push(res.content)
this.policyList.forEach((item, index) => {
if (index != 0) {
this.list.push({
contNo: item
})
}
})
// this.getBank()
}
} else {
this.$toast(res.resultMessage)
}
})
},
*/
// 获取银行卡列表
async getBank() {
let data = {
operateType: 'edor_bank_type'
}
let res = await getBankList(data)
if (res.result == '0') {
this.bankList = res.content
} else {
this.$toast(res.resultMessage)
}
}
}
}
</script>
<style lang="scss" scoped>
.van-dialog__confirm {
background-color: #e9332e !important;
margin-right: 20px;
}
.renewal-info-container {
.cont-info-container {
/deep/.van-cell__title,
.van-cell__value {
flex: auto;
text-align: left;
}
/deep/.van-cell__title {
width: 40%;
}
.van-cell__value {
width: 60%;
}
}
.account-info-container {
/deep/.van-cell__title {
flex: auto;
width: 40%;
text-align: left;
}
/deep/.van-cell__value {
flex: auto;
width: 60%;
text-align: left;
}
.align-items-c {
/deep/.van-cell__title {
width: 73%;
}
}
}
/deep/ .bankCard {
width: 120px;
height: 20px;
line-height: 20px;
border-radius: 10px;
}
}
</style>