<template>
|
<div class="withhold">
|
<el-dialog
|
title="中航代扣协议签约"
|
:visible.sync="withholdVisible"
|
center
|
@close="closeDialog"
|
:close-on-click-modal='false'>
|
<el-form :model="form" :rules="rules" ref="form" label-width="150px" inline size="small">
|
<el-form-item label="客户姓名">
|
<el-input v-model="form.customername" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="证件类型">
|
<el-select
|
v-model="form.certType"
|
disabled
|
filterable
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in certtypeList"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="证件号码">
|
<el-input v-model="form.certId" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="开户银行">
|
<el-select
|
v-model="form.repaymentbankno"
|
disabled
|
filterable
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in repaymentbankList"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="银行账号">
|
<el-input v-model="form.repaymentcardno" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="银行预留手机号" prop="mobile">
|
<el-input v-model="form.mobile"></el-input>
|
</el-form-item>
|
<el-form-item label="短信验证码" prop="messageCode" style="margin-right:10px">
|
<el-input v-model="form.messageCode"></el-input>
|
</el-form-item>
|
<el-form-item label="">
|
<el-button plain v-if="isShow" @click="sendCode(form)">获取短信验证码</el-button>
|
<el-button v-else disabled>重新发送({{total}}s)</el-button>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submit(form,'form')">提交</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import {
|
getDictionaryList,
|
getMessageCode,
|
bankCardValidation
|
} from "@/api/product";
|
export default {
|
props:['visible','withhold','bank'],
|
data () {
|
return {
|
rules:{
|
mobile:[
|
{ required: true, message: '请输入银行预留手机号', trigger: 'blur' },
|
{
|
pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
|
message: `格式不正确`,
|
trigger: 'blur'
|
}
|
],
|
messageCode:[{ required: true, message: '请输入短信验证码', trigger: 'blur' }]
|
},
|
certtypeList:[],
|
isShow:true,
|
timer:'',
|
total:60
|
}
|
},
|
computed: {
|
withholdVisible:{
|
get(){
|
return this.visible
|
},
|
set(){}
|
},
|
form(){
|
return this.withhold
|
},
|
repaymentbankList(){
|
return this.bank
|
}
|
},
|
async created () {
|
//获取证件类型列表
|
this.certtypeList = await this.qryDictionaryList("CertType");
|
},
|
destroyed: function () {
|
// 每次离开当前界面时，清除定时器
|
clearInterval(this.timer)
|
},
|
methods: {
|
sendCode(form){
|
if(form.mobile){
|
this.isShow = false
|
this.timer = setInterval(() => {
|
if(this.total>1){
|
this.total--
|
}else{
|
this.isShow = true
|
}
|
},1000)
|
getMessageCode({
|
mobile:form.mobile,
|
repaymentbankno:form.repaymentbankno,
|
repaymentcardno:form.repaymentcardno,
|
serialNo:form.serialno,
|
repaymentbankname:form.repaymentbankname,
|
}).then(res=>{})
|
}else{
|
this.$message.warning('请输入银行预留手机号')
|
}
|
},
|
qryDictionaryList(code) {
|
return new Promise(resolve => {
|
getDictionaryList({
|
codeNo: code
|
}).then(res => {
|
resolve(res.result);
|
});
|
});
|
},
|
closeDialog(){
|
this.$emit('closeDialog',false)
|
},
|
submit(form,formName){
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
bankCardValidation({
|
mobile:form.mobile,
|
repaymentbankno:form.repaymentbankno,
|
repaymentcardno:form.repaymentcardno,
|
serialNo:form.serialno,
|
repaymentbankname:form.repaymentbankname,
|
messageCode:form.messageCode
|
}).then(res=>{
|
if(res.code=='00'){
|
this.$message.success('提交成功')
|
this.$emit('closeDialog',false)
|
}
|
})
|
} else {
|
return false;
|
}
|
});
|
}
|
}
|
}
|
</script>
|
<style lang="stylus">
|
.withhold
|
.el-dialog
|
p
|
text-align: center
|
color: #222222
|
font-size: 18px
|
font-weight:500
|
margin-bottom: 30px
|
.el-dialog__body
|
padding: 30px 20px
|
.applyNumSel
|
position: relative
|
width: 100%
|
height:450px
|
.dialog-footer
|
position: absolute
|
bottom: 0
|
left: 50%
|
transform: translateX(-50%)
|
.el-dialog__footer
|
padding-bottom: 40px
|
.el-button
|
width: 120px
|
font-size: 14px
|
line-height: 20px
|
padding: 5px 0
|
.el-form
|
display: flex
|
justify-content: flex-start
|
flex-wrap: wrap
|
.el-form-item
|
display: flex
|
width:45%
|
margin: 0 30px 20px 0
|
.el-form-item__label
|
color: #888
|
.el-form-item__content
|
flex:1
|
.el-date-editor
|
width: auto
|
.el-select
|
display: block
|
</style>
|
