<template>
|
<div>
|
<el-dialog
|
title="银行卡绑定"
|
@close="close"
|
:visible.sync="dialogVisible"
|
:close-on-click-modal='false'
|
center
|
width="380px"
|
>
|
<el-form :model="form" :rules="rules" ref="form" label-width="120px" size="small">
|
<el-form-item label="还款银行户名" prop="name">
|
<el-input v-model="form.name"></el-input>
|
</el-form-item>
|
<el-form-item label="银行卡号" prop="bankno">
|
<el-input v-model="form.bankno"></el-input>
|
</el-form-item>
|
<el-form-item label="预留手机号" prop="bankPhone">
|
<el-input v-model="form.bankPhone" maxlength=11></el-input>
|
</el-form-item>
|
<el-form-item label="短信验证码" prop="smsCode">
|
<el-input v-model="form.smsCode" maxlength=6></el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button plain @click="handleBindBankSMS(form)" v-if="total === 60">发送验证码</el-button>
|
<el-button plain @click="handleBindBankSMS(form)" v-else disabled>重新发送({{total}}s)</el-button>
|
<el-button type="primary" @click="submit(form, 'form')">确定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<style lang="stylus" scoped>
|
div
|
&>>>.el-dialog
|
width auto
|
max-width calc(100% - 180px)
|
min-width 500px
|
max-height 100%
|
overflow hidden
|
margin 0 !important
|
position absolute
|
left 50%
|
top 50%
|
transform translate(-50%,-50%)
|
.el-dialog__body
|
padding 20px
|
max-height 576px
|
overflow auto
|
.el-dialog__header
|
padding 20px 0 0
|
.el-dialog__footer
|
padding 0 0 20px
|
.el-button
|
width: 120px
|
font-size: 14px
|
line-height: 20px
|
padding: 5px 0
|
&:nth-child(1)
|
margin-right: 30px
|
</style>
|
|
<script>
|
|
import common from "@/utils/common";
|
import { getBindBankSMS, verifyBindBankSMS } from "@/api/product";
|
export default {
|
props:['visible', 'loanInfo'],
|
data(){
|
return {
|
form: {
|
name: '',
|
bankno: '',
|
bankPhone: '',
|
smsCode: ''
|
},
|
rules:{
|
name:[
|
{ required: true, message: '请输入客户姓名', trigger: 'blur' },
|
common.validate("bankName")
|
],
|
bankno:[
|
{ required: true, message: '请输入银行卡号', trigger: 'blur' },
|
common.validate("number")
|
],
|
bankPhone:[
|
{ required: true, message: '请输入银行预留手机号', trigger: 'blur' },
|
common.validate("phone")
|
],
|
smsCode:[{ required: true, message: '请输入短信验证码', trigger: 'blur' }]
|
},
|
timer:'', // 定时器
|
total: 60,
|
messageNo: '',
|
isSendMsgFlag: false
|
}
|
},
|
computed: {
|
dialogVisible:{
|
get(){
|
return this.visible
|
},
|
set(){}
|
}
|
},
|
watch: {
|
visible(newV) {
|
if(newV) {
|
this.messageNo = ''
|
this.total = 60
|
this.isSendMsgFlag = false
|
const { loanInfo } = this
|
this.form.name = loanInfo.repaymentbankname
|
if(loanInfo.repaymentcardno) {
|
this.form.bankno = loanInfo.repaymentcardno
|
}
|
} else {
|
// 每次离开当前界面时，清除定时器
|
clearInterval(this.timer)
|
this.$refs.form.resetFields()
|
}
|
}
|
},
|
methods:{
|
// 发送验证码
|
async handleBindBankSMS(form) {
|
console.log('loanInfo:', this.loanInfo)
|
const { loanInfo } = this
|
if(!form.name){
|
this.$message.warning('请输入客户姓名')
|
return
|
}
|
if(!form.bankno){
|
this.$message.warning('请输入银行卡号')
|
return
|
}
|
const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
|
if(!form.bankPhone || !reg.test(form.bankPhone)){
|
this.$message.warning('请输入银行预留手机号')
|
return
|
}
|
if(form.bankPhone){
|
console.log('发送验证码')
|
this.total--
|
this.timer = setInterval(() => {
|
if(this.total>=1){
|
this.total--
|
}
|
if(this.total <= 0) {
|
clearInterval(this.timer)
|
this.total = 60
|
}
|
},1000)
|
let res = await getBindBankSMS({
|
applySerialNo: loanInfo.serialno, // loanInfo.serialno, // 申请流水号
|
customerId: loanInfo.customerid, // 用户id
|
customerName: form.name, // 姓名
|
certId: loanInfo.certId, // 证件账号
|
idType: loanInfo.certType, // 证件类型
|
bankNo: form.bankno, // 银行卡号
|
bankId: loanInfo.repaymentbankno,// 绑卡银行ID
|
bankPhone: form.bankPhone, // 预留手机号
|
scene: "03", // 01授信绑卡、02用信绑卡、03还款绑卡、04 前置绑卡
|
})
|
if(res.code && res.code === '00') {
|
this.messageNo = res.result.messageNo
|
this.isSendMsgFlag = true
|
this.$message.success(res.msg)
|
} else {
|
this.total = 60
|
this.isSendMsgFlag = false
|
clearInterval(this.timer)
|
}
|
}
|
},
|
submit(){
|
const { form } = this
|
this.$refs.form.validate(async (valid) => {
|
if (valid) {
|
if(!this.isSendMsgFlag){
|
this.$message.warning('请输入正确的验证码！')
|
return
|
}
|
const res = await verifyBindBankSMS({
|
messageNo: this.messageNo,
|
smsCode: form.smsCode
|
})
|
if(res.code === '00'){
|
this.$message.success(res.msg)
|
this.$emit('success', form.bankno)
|
}
|
} else {
|
return false;
|
}
|
});
|
},
|
close(){
|
this.$emit('close')
|
}
|
}
|
}
|
</script>
|
