Files
ebiz-h5/src/views/ebiz/cardList/Pay.vue

638 lines
22 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="pay">
<div v-if="!isScan">
<van-cell-group>
<van-field v-model="underWriteData.appntName" type="textarea" autosize readonly label="产品名称" class="projuct" />
<van-field :value="underWriteData.orderAmount == undefined ? '' : `${underWriteData.orderAmount} 元`" readonly label="支付金额" />
</van-cell-group>
<!-- 银行卡支付开始 -->
<div class="money">
<div>
<img src="../../../assets/images/u10280.png" alt style="margin-top:-5px;margin-right:10px;" />
<span class="oi">银行卡支付</span>
</div>
<div class="i mr20">
<van-radio-group v-model="radio" class="flex justify-content-fe"><van-radio name="1"></van-radio></van-radio-group>
</div>
</div>
<!-- 银行卡支付结束 -->
<van-cell-group>
<van-field
v-model="underWriteData.name"
label="姓名"
name="姓名"
readonly
placeholder="请输入"
v-validate="'required|name'"
maxlength="6"
clearable
required
/>
<template v-if="noEdit">
<van-field
v-model="underWriteData.bankCode"
maxlength="19"
readonly
label="银行卡号"
name="银行卡号"
placeholder="请输入"
required
clearable
v-validate="'required|bankCard'"
data-vv-name="银行卡号"
>
</van-field>
<van-field
:value="bankListName"
label="开户银行"
name="开户银行"
placeholder="请输入"
v-validate="'required'"
readonly
right-icon="arrow"
data-vv-name="开户银行"
required
/>
</template>
<template v-else>
<van-field
v-model="underWriteData.bankCode"
maxlength="19"
label="银行卡号"
name="银行卡号"
placeholder="请输入"
required
clearable
v-validate="'required|bankCard'"
data-vv-name="银行卡号"
>
<van-button slot="button" size="small" type="danger" round @click="cardScanning('0')">银行卡扫描</van-button>
</van-field>
<van-field
:value="bankListName"
label="开户银行"
name="开户银行"
placeholder="请输入"
v-validate="'required'"
readonly
@click="focus"
right-icon="arrow"
data-vv-name="开户银行"
required
/>
</template>
<!-- <van-field v-model="bank" label="开户银行" placeholder="请选择" required @click="focus" readonly v-validate="'required'" data-vv-name="开户银行" /> -->
</van-cell-group>
<!-- 第三方支付所需表单 -->
<form ref="payForm" :action="formActionUrl" method="post">
<input name="TransSource" type="hidden" v-model="payParam.TransSource" />
<input name="TransDate" type="hidden" v-model="payParam.TransDate" />
<input name="TransTime" type="hidden" v-model="payParam.TransTime" />
<input name="TransSeq" type="hidden" v-model="payParam.TransSeq" />
<input name="Version" type="hidden" v-model="payParam.Version" />
<input name="RdSeq" type="hidden" v-model="payParam.RdSeq" />
<input name="PaymentCode" type="hidden" v-model="payParam.PaymentCode" />
<input name="PayType" type="hidden" v-model="payParam.PayType" />
<input name="SettleMode" type="hidden" v-model="payParam.SettleMode" />
<input name="ApplyEntity" type="hidden" v-model="payParam.ApplyEntity" />
<input name="Cur" type="hidden" v-model="payParam.Cur" />
<input name="OurAmount" type="hidden" v-model="payParam.OurAmount" />
<input name="FixUser" type="hidden" v-model="payParam.FixUser" />
<input name="Insurer" type="hidden" v-model="payParam.Insurer" />
<input name="CertType" type="hidden" v-model="payParam.CertType" />
<input name="CertNum" type="hidden" v-model="payParam.CertNum" />
<input name="OppBank" type="hidden" v-model="payParam.OppBank" />
<input name="OppAct" type="hidden" v-model="payParam.OppAct" />
<input name="OppActName" type="hidden" v-model="payParam.OppActName" />
<input name="CellPhone" type="hidden" v-model="payParam.CellPhone" />
<input name="ExpireDate" type="hidden" v-model="payParam.ExpireDate" />
<input name="Purpose" type="hidden" v-model="payParam.Purpose" />
<input name="Memo" type="hidden" v-model="payParam.Memo" />
<input name="Description" type="hidden" v-model="payParam.Description" />
<input name="SourceNotecode" type="hidden" v-model="payParam.SourceNotecode" />
<input name="ReturnURL" type="hidden" v-model="payParam.ReturnURL" />
<input name="NotifyURL" type="hidden" v-model="payParam.NotifyURL" />
<input name="SaleChannel" type="hidden" v-model="payParam.SaleChannel" />
<input name="ReqReserved1" type="hidden" v-model="payParam.ReqReserved1" />
<input name="ReqReserved2" type="hidden" v-model="payParam.ReqReserved2" />
<input name="ReqReserved3" type="hidden" v-model="payParam.ReqReserved3" />
<input name="ReqReserved4" type="hidden" v-model="payParam.ReqReserved4" />
<input name="ReqReserved5" type="hidden" v-model="payParam.ReqReserved5" />
<input name="S3Sign" type="hidden" v-model="payParam.S3Sign" />
</form>
<div class="bg-white bottom-btn"><van-button type="danger" size="large" @click="pay" v-no-more-click="1000">支付</van-button></div>
</div>
<!-- 银行卡扫描按钮 -->
<van-popup v-model="isScan" style="height:100vh" position="bottom">
<BankCardScan :scanShow="isScan" :clear="isClear" @getScanInfo="getBankCardInfo"></BankCardScan>
</van-popup>
<!-- 开户银行选择 -->
<van-popup v-model="show" position="bottom" style="height:354px">
<van-list>
<van-cell v-for="item in bankList" :key="item.code" :title="item.bankName" class="text-center" @click="clickList(item.bankName, item.code)" />
</van-list>
</van-popup>
</div>
</template>
<script>
import Vue from 'vue'
import { Field, Checkbox, CheckboxGroup, RadioGroup, Radio, Popup, CellGroup, Button, List, Cell } from 'vant'
Vue.use(Checkbox).use(CheckboxGroup)
Vue.use(Field)
Vue.use(Button)
import { acceptInsurance, getBankList, underWrite, getOrderDetail } from '@/api/ebiz/sale/sale'
import { saveOrUpdateAccount, getPayTemp } from '@/api/ebiz/cardList/cardList.js'
import BankCardScan from '@/components/ebiz/sale/BankCardScan'
import config from '@/config'
export default {
name: 'pay',
components: {
BankCardScan,
[Popup.name]: Popup,
[CellGroup.name]: CellGroup,
[Field.name]: Field,
[List.name]: List,
[Cell.name]: Cell,
[RadioGroup.name]: RadioGroup,
[Radio.name]: Radio
},
data() {
return {
// trialList: JSON.parse(localStorage.trialList),
// 核保数据
orderStatus: '',
underWriteData: {
appntName: '', //产品名称
orderAmount: '', //支付金额
name: '',
bankCode: '', //银行卡号
bankName: '' //开户银行
},
radio: '1',
result: [],
isScan: false, //是否显示证件扫描组件
isClear: false, //是否清空
show: false, // 银行列表弹框
bankList: [], // 银行卡列表
bankListName: '', // 银行列表ID
formActionUrl: config.payUrl, // 支付表单
payParam: {
TransSource: '', // 对接系统
TransDate: '', // 请求日期
TransTime: '', // 请求时间
TransSeq: '', // 时间戳
Version: '', // 版本号
RdSeq: '', // 指令流水号
PaymentCode: '', // 业务唯一号
PayType: '', // 交易类型
SettleMode: '', // 支付方式
ApplyEntity: '', // 业务发生机构
Cur: '', // 币种
OurAmount: '', // 金额
FixUser: '', // 实名认证标识
Insurer: '', // 对接系统
CertType: '', // 证件类型
CertNum: '', // 证件号码
OppBank: '', // 交易方银行
OppAct: '', // 交易方账号
OppActName: '', // 交易方名称
CellPhone: '', // 手机号码
ExpireDate: '', // 订单失效时间
Purpose: '', // 用途
Memo: '', // 备注
Description: '', // 描述
SourceNotecode: '', // 外部系统业务单据号
ReturnURL: '', // 页面跳转同步通知地址
NotifyURL: '', // 后台通知地址
SaleChannel: '', // 销售渠道
ReqReserved1: '', // 备用字段1
ReqReserved2: '', // 备用字段2
ReqReserved3: '', // 备用字段3
ReqReserved4: '', // 备用字段4
ReqReserved5: '', // 备用字段5
S3Sign: '', // 验签信息
tradeState: '' // 状态
},
gotPayParam: false, // 是否已正确获取支付参数,
payStatus: '', // 接口返回的支付状态
noEdit: true
}
},
created() {},
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
// console.log('trialList', this.trialList[0].prem)
// this.underWrite.orderAmount = this.trialList[0].prem
document.body.style.backgroundColor = '#fff'
window.appCallBack = this.appCallBack
// 获取银行卡
this.getBankList()
// this.getOrderDetail()
// console.log('----保融form.action', config.payUrl)
// if (localStorage.salelist == '1') {
// 第一次支付 调核保获取
// this.underWrite()
// this.underWriteData = JSON.parse(window.localStorage.getItem('underWriteData'))
// } else {
// 再次支付 调详情 获取信息
this.getOrderDetail()
this.getPayTemp()
// this.underWriteData = JSON.parse(window.localStorage.getItem('underWriteData'))
// }
// console.log('--自核结果--支付信息:', JSON.stringify(this.underWriteData))
},
beforeRouteLeave(to, from, next) {
document.body.style.backgroundColor = ''
next()
},
destroyed() {
setTimeout(() => {
// eslint-disable-next-line no-undef
EWebBridge.webCallAppInJs('webview_left_button', {
intercept: '0' //是否拦截原生返回事件 1是 其他否
})
// window.appCallBack = this.appCallBack
}, 100)
},
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 + `/#/cardList/CardTotreasure`
},
routerInfo: {
path: `/cardList/CardTotreasure`,
type: '1'
}
})
})
.catch(() => {
return
})
} else {
// 筛选按钮的点击事件
this.$jump({
flag: 'navigation',
extra: {
title: '支付',
hiddenRight: '1'
}
})
this.isScan = false
}
},
//获取银行卡扫描信息
getBankCardInfo(data) {
this.underWriteData.bankCode = 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: {} }
}
]
}
})
},
// 获取银行列表的focus
focus() {
// if (this.orderStatus == '56') {
this.show = true
// }
},
// 获取银行卡列表
getBankList() {
let self = this
let data = {
operateType: 'bank_type'
}
getBankList(data).then(res => {
if (res.result == '0') {
console.log('银行卡列表', res.content)
self.bankList = res.content
} else {
this.$toast(res.resultMessage)
}
})
},
// 选择银行卡
clickList(item, bankCode) {
console.log('英航卡', item, bankCode)
this.bankListName = item
this.underWriteData.bankName = bankCode
this.show = false
},
getPayTemp() {
getPayTemp({ orderNo: window.localStorage.getItem('orderNo') })
.then(res => {
if (res.result == '0') {
this.noEdit = res.content.flag != 'false'
}
})
.catch(e => {
console.error(e)
})
},
// 再次支付
getOrderDetail() {
getOrderDetail({ orderNo: window.localStorage.getItem('orderNo') }).then(res => {
console.log('getOrderDetail', res)
if (res.result == '0') {
this.orderStatus = res.orderDTO.orderInfoDTO.orderStatus
this.$toast.clear()
console.log(res.orderDTO.orderAccountDTO.bankCode)
this.underWriteData = {
appntName: res.orderDTO.insuredDTOs[0].riskDTOLst[0].riskName,
name: res.orderDTO.appntDTO.name,
bankCode: res.orderDTO.orderAccountDTO.cardBookCode,
bankName: res.orderDTO.orderAccountDTO.bankCode,
cardBookCode: res.orderDTO.orderAccountDTO.cardBookCode,
orderAmount: res.orderDTO.orderInfoDTO.orderAmount,
orderNo: res.orderDTO.orderAccountDTO.orderNo,
result: '',
resultMessage: '交易处理成功',
uwResult: '02'
}
this.bankListName = res.orderDTO.orderAccountDTO.bankName
// window.localStorage.setItem('underWriteData', JSON.stringify(underWriteData))
} else {
this.underWriteData = {
accountName: '',
appntName: '',
bankCode: '',
bankName: '',
cardBookCode: '',
orderAmount: '',
orderNo: '',
result: '',
resultMessage: '交易处理失败',
uwResult: '00'
}
// window.localStorage.setItem('underWriteData', JSON.stringify(underWriteData))
this.$toast(res.resultMessage)
}
})
},
// 获取支付信息
async underWrite() {
let data = {
platform: 'app',
type: '1',
orderDTO: {
orderInfoDTO: {
orderNo: window.localStorage.getItem('orderNo')
}
}
}
return underWrite(data)
// .then(res => {
// console.log(res);
// if (res.result == '0') {
// this.$toast.clear()
// if (res.uwResult == '33') {
// window.localStorage.setItem('uwResult', res.uwResult)
// window.localStorage.setItem('resultMessage', res.message)
// } else {
// window.localStorage.setItem('uwResult', res.uwResult)
// }
// this.underWriteData = res
// return true
// } else {
// return false
// this.$toast(res.resultMessage)
// }
// })
},
async pay() {
let valid = await this.$validator.validate()
console.log(valid)
if (true !== valid) {
console.log(this.$validator)
return this.$toast(this.$validator.errors.all()[0])
}
switch (this.orderStatus) {
case '56':
case '57':
this.payMent()
break
// case '02':
// break
default:
if (!this.noEdit) {
this.payMent(true)
return true
} else {
this.acceptInsurance()
return this.$toast('当前不可支付')
}
}
},
acceptInsurance() {
let data = {
orderNo: window.localStorage.getItem('orderNo'),
cardOrder: 'cardOrder'
}
acceptInsurance(data).then(res => {
console.log('----取支付参数结果:', JSON.stringify(res))
// res = {'result':'0','resultMessage':'','content':null,'prtNo':'8186270000000008','payStatus':'4','amnt':'63700.00','appntName':'投保人','message':null,'brPayReturnData':{'result':'','resultMessage':'','content':null,'businessId':'1569125393518','businessNo':'8186270000000008','tradeSubType':'COMM','businessType':'SALE','systemType':'GF','money':63700,'businessSubType':'XDCB','thirdType':'0002','thirdName':null,'bankCode':'ABC','epayOrderNo':'1909221209536259999900','companyAccount':null,'tradeState':'TRADING','standardCode':'DEALING','standardMsg':null,'thirdOrderNo':null,'respRemark':null,'tradeTime':'2019-09-22T04:09:53.518+0000','description':'','version':'1','sourceNotecode':'8186270000000008','payType':'MIT01','expireDate':'20191010101010','transSeq':'20190922120953782','transSource':'MIT','applyEntity':'11860000','paymentCode':'8186270000000008','transDate':'20190922','rdSeq':'1909221209536259999900','settleMode':null,'cur':'CNY','transTime':'120953','ourAmount':63700,'fixUser':'1','insurer':'投保人','certType':'0','certNum':'110101199009210011','oppBank':'ABC','oppAct':'6228481200290317812','oppActName':'投保人','cellPhone':null,'purpose':null,'memo':null,'returnURL':'http://139.199.50.151/#/sale/payResult','notifyURL':'http://139.199.50.151:7000/api/v1/epay/epay/payResult','s3Sign':'e3f0581ec6b751337e8eca360a0746bc'}}
if (res.result == '0') {
// 1成 4支付中 2支付失败 8转批扣(无此情况)
this.payStatus = res.payStatus
if (this.payStatus == '1') {
this.$toast({ message: '当前投保单已支付成功,请返回列表页查询', duration: 5000 })
return
}
// 支付参数大小写转换
let keyMap = {}
for (let key in this.payParam) {
keyMap[key.toLowerCase()] = key
}
let paramKey
for (let rKey in res.brPayReturnData) {
if (keyMap.hasOwnProperty(rKey.toLowerCase())) {
paramKey = keyMap[rKey.toLowerCase()]
this.payParam[paramKey] = res.brPayReturnData[rKey]
}
}
console.log('----支付参数this.payParam:', JSON.stringify(this.payParam))
this.gotPayParam = true
this.$forceUpdate()
window.localStorage.setItem('resMessage', res.resultMessage)
window.localStorage.setItem('payStatus', res.payStatus)
window.localStorage.setItem('payInfo', JSON.stringify(res))
this.underWriteData.bankListName = this.bankListName
localStorage['cardList-detail'] = JSON.stringify(this.underWriteData)
let thisRef = this
this.$nextTick(() => {
thisRef.$refs.payForm.submit() // 表单提交,发起支付,跳至收银台
setTimeout(() => {
// eslint-disable-next-line no-undef
EWebBridge.webCallAppInJs('webview_left_button', {
intercept: '0' //是否拦截原生返回事件 1是 其他否
})
}, 100)
})
} else {
this.$toast.clear()
this.$toast(res.resultMessage)
}
})
},
// 点击支付
async payMent(flag) {
let data = {
orderDTO: {
orderInfoDTO: {
orderNo: window.localStorage.getItem('orderNo')
},
orderAccountDTO: {
accountType: '0',
accountName: this.underWriteData.name,
bankName: this.bankListName,
bankCode: this.underWriteData.bankName,
cardBookType: '1',
cardBookCode: this.underWriteData.bankCode,
isAutoPay: '0',
isAutoRenewal: '1'
}
}
}
this.$toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true, // 禁用背景点击
loadingType: 'spinner',
message: '加载中……'
})
/*
支付之前要先保存银行账户信息
*/
let res = await saveOrUpdateAccount(data)
// .then(res => {
console.log('res', res)
this.$toast.clear()
if (res.result == '0') {
this.$toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true, // 禁用背景点击
loadingType: 'spinner',
message: '加载中……'
})
if (!flag) {
let rs = await this.underWrite()
if (rs.result != '0') {
this.$toast.clear()
return this.$toast(rs.resultMessage)
}
if (rs.uwResult != '02') {
return this.$toast(rs.message)
}
}
this.acceptInsurance()
} else {
this.$toast(res.resultMessage)
}
// })
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
* {
box-sizing: border-box;
}
.oi {
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
font-weight: 700;
font-style: normal;
color: #666666;
}
.money {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
z-index: 100;
background: white;
height: 40px;
overflow: hidden;
> div:nth-of-type(1) {
display: flex;
align-items: center;
img {
width: 33px;
height: 32px;
}
span {
font-size: 14px;
}
}
> div:nth-of-type(2) {
display: flex;
align-items: center;
}
}
</style>