<template>
|
<view>
|
|
<view class="content">
|
<uv-form style="background: white" :labelStyle='lstyle' labelPosition="left" :model="userInfo" ref="form" labelWidth="100">
|
<uv-form-item class="item" label="姓名" prop="userName" borderBottom>
|
<uv-input inputAlign="right" v-model="userInfo.userName" border="none" placeholder="请输入姓名"></uv-input>
|
</uv-form-item>
|
<uv-form-item class="item" label="身份证号" prop="idCardNo" >
|
<uv-input maxlength="18" type="idcard" inputAlign="right" v-model="userInfo.idCardNo" border="none" placeholder="请输入身份证号"></uv-input>
|
</uv-form-item>
|
<view class='line'></view>
|
<uv-form-item class="item" label="银行卡号" prop="cardNo" borderBottom>
|
<uv-input inputAlign="right" v-model="userInfo.cardNo" border="none" placeholder="请输入您本人的借记卡号">
|
<template #suffix>
|
<image style="width: 28rpx;height: 28rpx;margin-left: 18rpx;" :src="`${$images}/static/img/ys/ys-sign/loan-privilege-card.png`"></image>
|
</template>
|
</uv-input>
|
</uv-form-item>
|
<uv-form-item class="item" label="预留手机号" prop="mobile" borderBottom>
|
<uv-input maxlength="11" inputAlign="right" v-model="userInfo.mobile" border="none" placeholder="请输入银行预留手机号"></uv-input>
|
</uv-form-item>
|
<uv-form-item class="item" label="银行名称" prop="bankName" @click="openCard">
|
<uv-input inputAlign="right" style="text-align: right" disabled border="none" v-model="userInfo.bankName" disabledColor="none" placeholder="请选择银行">
|
</uv-input>
|
<template #right>
|
<uv-icon name="arrow-right" size="12"></uv-icon>
|
</template>
|
</uv-form-item>
|
<view class='line'></view>
|
<uv-form-item class="item" label="短信码" prop="needVerify" >
|
<uv-input maxlength="6" inputAlign="right" v-model="userInfo.needVerify" border="none" placeholder="请输入验证码">
|
<template #suffix>
|
<button class="code" @click="getCode">{{ isCounting ? countText : '获取验证码' }}</button>
|
</template>
|
</uv-input>
|
</uv-form-item>
|
|
|
</uv-form>
|
<view style="margin: 40rpx;">
|
|
<uv-button @click="submit" :custom-style="customStyle" :disabled="!this.userInfo.needVerify" type="primary" Color="#2865F2" shape="circle">确定</uv-button>
|
<view class="tips">如果“”银行名称“不能自动选出，代表不支持该银行，请点击银行名称，查看所支持的银行</view>
|
</view>
|
</view>
|
|
<card ref="card" :max-height="800" @confirm="getValueCard"></card>
|
</view>
|
</template>
|
|
<script>
|
|
|
import { mobile,idCard } from '@/uni_modules/uv-ui-tools/libs/function/test.js';
|
import {
|
payBindCardToCodes,
|
xinheyuanBankcardSave,
|
getRpUserInfo,
|
inceptionBindCardPageRecord,
|
payVerifySMSCodes, getCustomerInfo
|
} from "@/api/modules/user";
|
import card from "@/components/card/index.vue";
|
|
export default {
|
components: {
|
card
|
},
|
computed: {
|
customStyle() {
|
return {
|
height: '100rpx',
|
background: '#4766FE',
|
color: '#fff',
|
borderRadius: '50rpx' ,
|
fontSize:'34rpx',
|
}
|
}
|
},
|
async onLoad() {
|
|
await getCustomerInfo().then(res=>{
|
uni.setStorageSync('customerZcyId',res.customerZcyId)
|
uni.setStorageSync('customerBankcardId', res.customerBankcardId);
|
uni.setStorageSync('idCard', res.idCard);
|
uni.setStorageSync('userName', res.name);
|
})
|
await inceptionBindCardPageRecord()
|
await getRpUserInfo().then(res=>{
|
this.userInfo = res;
|
})
|
},
|
data() {
|
return {
|
callbackData:{},
|
disabled:true,
|
lstyle:{
|
color:'#252938',
|
fontSize:'28rpx',
|
fontWeight:'800'
|
},
|
userInfo:{
|
userName:'',
|
idCardNo:'',
|
cardNo:'',
|
mobile:'',
|
bankName:'',
|
needVerify:''
|
},
|
isCounting: false,
|
countText: '',
|
bankInfo: {}
|
}
|
},
|
methods: {
|
|
|
getCode() {
|
if (!this.userInfo.mobile) {
|
uni.showToast({
|
title: '请输入正确的手机号',
|
icon: 'none'
|
});
|
return;
|
}
|
|
payBindCardToCodes({
|
customerId: uni.getStorageSync('customerZcyId'),
|
cardName: this.userInfo.userName, // 真实姓名
|
bankName: this.userInfo.bankName, // 银行名称（信合元）
|
cardIdNo: this.userInfo.idCardNo, // 身份证号码
|
cardPhone: this.userInfo.mobile, // 手机号码
|
cardNumber: this.userInfo.cardNo, // 银行卡号
|
}
|
).then(res=>{
|
this.callbackData = res;
|
uni.showToast({
|
title: '验证码已发送',
|
icon: 'none'
|
});
|
|
// 设置倒计时功能
|
let count = 60;
|
const timer = setInterval(() => {
|
count--;
|
if (count <= 0) {
|
clearInterval(timer);
|
this.$set(this, 'isCounting', false);
|
} else {
|
this.$set(this, 'isCounting', true);
|
this.$set(this, 'countText', `${count}秒后重新获取`);
|
}
|
}, 1000);
|
|
})
|
},
|
submit(){
|
if(!this.userInfo.needVerify){
|
uni.showToast({
|
title: '请输入短信码',
|
icon: 'none'
|
});
|
return;
|
}
|
let obj = {
|
userName:'姓名',
|
idCardNo:'身份证号',
|
cardNo:'银行卡号',
|
mobile:'预留手机号',
|
bankName:'银行名称',
|
needVerify:'短信码'
|
}
|
|
if(!mobile(this.userInfo.mobile)){
|
uni.showToast({
|
title: '请输入正确的手机号',
|
icon: 'none'
|
});
|
return;
|
}
|
if(!idCard(this.userInfo.idCardNo)){
|
uni.showToast({
|
title: '请输入正确的身份证号',
|
icon: 'none'
|
});
|
return;
|
}
|
|
xinheyuanBankcardSave({
|
customerId: uni.getStorageSync('customerZcyId'),
|
phone: this.userInfo.mobile, // 手机号码
|
nameReal: this.userInfo.userName, // 真实姓名
|
idCard: this.userInfo.idCardNo, // 身份证号码
|
cardNo: this.userInfo.cardNo, // 银行卡号
|
bankId: this.userInfo.bankId, // 银行ID（信合元）
|
bankPhoneNo: this.userInfo.mobile, // 银行预留手机号码
|
bankCode: this.userInfo.bankCode, // 银行编码（信合元）
|
bankName: this.userInfo.bankName, // 银行名称（信合元）
|
}).then(res=>{
|
payVerifySMSCodes({
|
...this.callbackData,
|
customerId: uni.getStorageSync('customerZcyId'),
|
cardName: this.userInfo.userName, // 真实姓名
|
bankName: this.userInfo.bankName, // 银行名称（信合元）
|
cardIdNo: this.userInfo.idCardNo, // 身份证号码
|
cardPhone: this.userInfo.mobile, // 手机号码
|
cardNumber: this.userInfo.cardNo, // 银行卡号
|
verificationCode: this.userInfo.needVerify, //短信
|
})
|
uni.showToast({
|
title: '银行卡信息保存成功',
|
icon: 'none'
|
});
|
uni.navigateTo({
|
url: '/pages/details/borrow/index'
|
})
|
})
|
|
},
|
openCard(){
|
this.$refs.card.open()
|
},
|
getValueCard(e){
|
console.log(e);
|
this.bankInfo = e;
|
this.userInfo.bankName = e.bankName;
|
},
|
},
|
watch: {
|
'userInfo.cardNo': async function (v) {
|
const res = await uni.request({
|
url: 'https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?_input_charset=utf-8&cardBinCheck=true', // 阿里接口
|
data: {
|
cardNo: v,
|
},
|
});
|
if (res.data.validated) {
|
for (let i of uni.getStorageSync('bankList')) {
|
if (res.data.bank === i.bankCode) {
|
this.userInfo.bankName = i.bankName; // 示例操作
|
this.userInfo.bankId = i.bankId;
|
this.userInfo.bankCode = i.bankCode;
|
break;
|
} else {
|
this.userInfo.bankName = ''; // 示例操作
|
this.userInfo.bankId = ''
|
this.userInfo.bankCode = '';
|
}
|
}
|
} else {
|
this.userInfo.bankName = ''; // 示例操作
|
this.userInfo.bankId = ''
|
this.userInfo.bankCode = '';
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
page{
|
background: #F7F7F7;
|
}
|
.content{
|
.item{
|
padding:0 30rpx;
|
}
|
.line{
|
height: 20rpx;
|
background: #F7F7F7;
|
}
|
.code{
|
margin-left: 40rpx;
|
font-size: 24rpx;
|
color: #4766FE;
|
background: none;
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
border: 2rpx solid #4766FE;
|
}
|
|
.but{
|
margin: auto;
|
margin-top: 40rpx;
|
color: white;
|
width: 100%;
|
height: 100rpx;
|
background: #2865F2;
|
border-radius: 50rpx 50rpx 50rpx 50rpx;
|
}
|
.tips{
|
margin-top: 40rpx;
|
color: #EE2626;
|
font-size: 24rpx;
|
}
|
.hover-bu1t{
|
background: linear-gradient( 270deg, #4766FE 0%, #7D9FFF 100%), linear-gradient( 104deg, #6D89FF 0%, #2865F2 100%) !important;
|
|
opacity: 0.5;
|
}
|
}
|
|
|
</style>
|
