<template>
|
<view style="min-height: 100vh;background: #F7F7F7">
|
|
<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="cardNo" borderBottom>
|
<uv-input @input="changeInput(userInfo.cardNo)" 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="bankName" @click="openCard(false)" borderBottom>
|
<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>
|
<uv-form-item class="item" label="预留手机号" prop="bankPhoneNo" >
|
<uv-input maxlength="11" inputAlign="right" v-model="userInfo.bankPhoneNo" border="none" placeholder="请输入银行预留手机号"></uv-input>
|
</uv-form-item>
|
|
|
|
|
|
</uv-form>
|
|
<view style="padding:0 34rpx;">
|
|
<view class="tips">查看支持 <view style="font-size: 24rpx;color: #4766FE" @click="openCard(true)">可绑定的银行</view></view>
|
|
<view class="codeList">
|
<view class="li" v-for="(item,index) in BankcarIdList" @click="toCode(item,index)">
|
<template v-if="item.flag">
|
<uv-icon color="#4766FE" name="plus-circle-fill" size="20"></uv-icon>
|
<view class="writing" >请点击确认还款账户（{{handleNumber(index)}}）</view>
|
</template>
|
|
<template v-else>
|
<uv-icon color="#4766FE" name="checkmark-circle-fill" size="20"></uv-icon>
|
<view class="writing">已确认</view>
|
</template>
|
</view>
|
</view>
|
<view style="margin: 40rpx;">
|
<uv-button @click="submit" :custom-style="customStyle" type="primary" Color="#2865F2" shape="circle">确定绑卡</uv-button>
|
|
</view>
|
</view>
|
</view>
|
|
<card ref="card" :max-height="800" @confirm="getValueCard" :see="see"></card>
|
</view>
|
</template>
|
|
<script>
|
|
|
import {getVerifyCode, xinheyuanBankcardDetail, xinheyuanGetLoanElement} 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',
|
}
|
}
|
},
|
onLoad() {
|
xinheyuanBankcardDetail().then(res=>{
|
this.userInfo.bankName = res.bankName;
|
this.userInfo.cardNo = res.cardNo;
|
this.userInfo.bankPhoneNo = res.bankPhoneNo;
|
})
|
xinheyuanGetLoanElement({
|
userId: uni.getStorageSync('customerZcyId'),
|
}).then(res=>{
|
this.BankcarIdList = res;
|
this.BankcarIdList.map(item=>{
|
item.flag = true
|
})
|
})
|
},
|
|
data() {
|
return {
|
see:true,
|
BankcarIdList:[],
|
disabled:true,
|
lstyle:{
|
color:'#252938',
|
fontSize:'28rpx',
|
fontWeight:'800'
|
},
|
userInfo:{
|
bankCardName:null,
|
idNo:null,
|
cardNo:null,
|
bankPhoneNo:null,
|
bankName:null,
|
needVerify:null,
|
},
|
isCounting: false,
|
countText: '',
|
bankInfo: {}
|
}
|
},
|
methods: {
|
handleNumber(vla){
|
const chineseDigits = ["一", "二", "三", "四", "五", "六", "七", "八", "九",];
|
return chineseDigits[vla];
|
},
|
async toCode(vla,key){
|
|
const res =await uni.request({
|
url: 'https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?_input_charset=utf-8&cardBinCheck=true', //阿里接口
|
data: {
|
cardNo:this.userInfo.cardNo,
|
},
|
})
|
let bankCode = res['data']['bank'];
|
let bankName = '';
|
let bankId = null;
|
for(let i of uni.getStorageSync('bankList')){
|
if(bankCode === i['bankCode']){
|
bankName = i['bankName']
|
bankId = i['bankId'];
|
break;
|
|
}
|
console.log(11);
|
}
|
|
uni.navigateTo({
|
url: `/pages/code/index?queryType=${1}&code=${vla.code}&bankPhoneNo=${this.userInfo.bankPhoneNo}&index=${key}&cardNo=${this.userInfo.cardNo}&bankId=${bankId}&bankName=${bankName}&bankCode=${bankCode}`
|
});
|
},
|
|
changeFlag(key){
|
this.BankcarIdList.map((item,index)=>{
|
if(index == key){
|
item.flag = false
|
}
|
})
|
},
|
getCode() {
|
if (!this.userInfo.bankPhoneNo) {
|
uni.showToast({
|
title: 'dec机号',
|
icon: 'none'
|
});
|
return;
|
}
|
|
getVerifyCode({phone: this.userInfo.bankPhoneNo}).then(res=>{
|
|
uni.showToast({
|
title: '验证码已发送',
|
icon: 'success'
|
});
|
|
// 设置倒计时功能
|
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(){
|
for(let i of this.BankcarIdList){
|
if(i.flag){
|
uni.showToast({
|
title: "请先绑定还款账户",
|
icon: "none",
|
});
|
return;
|
}
|
}
|
uni.navigateBack({delta: 1})
|
|
|
},
|
openCard(fla){
|
this.see = fla
|
this.$refs.card.open()
|
},
|
getValueCard(e){
|
console.log(e);
|
this.bankInfo = e;
|
this.userInfo.bankName = e.bankName;
|
},
|
|
async changeInput(v){
|
|
}
|
},
|
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;
|
break;
|
}
|
}
|
} else {
|
this.userInfo.bankName = '';
|
}
|
}
|
}
|
|
|
}
|
</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: #000000;
|
font-size: 24rpx;
|
display: flex;
|
flex-direction: row;
|
}
|
.hover-bu1t{
|
background: linear-gradient( 270deg, #4766FE 0%, #7D9FFF 100%), linear-gradient( 104deg, #6D89FF 0%, #2865F2 100%) !important;
|
|
opacity: 0.5;
|
}
|
}
|
|
|
.codeList{
|
margin-top: 20rpx;
|
.li{
|
padding: 30rpx 40rpx;
|
background: white;
|
border-radius: 16rpx;
|
font-size: 30rpx;
|
color: #4766FE;
|
display: flex;
|
flex-direction: row;
|
font-weight: 800;
|
margin-bottom: 20rpx;
|
.writing{
|
margin-left: 20rpx;display: flex;justify-content: center;
|
}
|
}
|
}
|
</style>
|
