413 lines
9.7 KiB
Vue
413 lines
9.7 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="theform">
|
|
<u--form
|
|
labelPosition="left"
|
|
:model="dataForm"
|
|
:rules="rules"
|
|
ref="uForm"
|
|
>
|
|
<u-form-item
|
|
borderBottom
|
|
required
|
|
label-width="200rpx"
|
|
:label="'银行名称'"
|
|
prop="bankName"
|
|
@click="showAmount = true"
|
|
ref="item1"
|
|
>
|
|
<u--input
|
|
v-model="dataForm.bankName"
|
|
disabledColor="#ffffff"
|
|
:placeholder="'请选择'"
|
|
border="none"
|
|
></u--input>
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
|
|
<u-form-item
|
|
label-width="200rpx"
|
|
:label="'开户支行'"
|
|
required
|
|
prop="subBankName"
|
|
borderBottom
|
|
ref="item1"
|
|
>
|
|
<u--input
|
|
v-model="dataForm.subBankName"
|
|
disabledColor="#F5F5F5;"
|
|
border="none"
|
|
></u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label-width="200rpx"
|
|
:label="'银行卡号'"
|
|
required
|
|
borderBottom
|
|
prop="cardNumber"
|
|
ref="item1"
|
|
>
|
|
<u--input
|
|
v-model="dataForm.cardNumber"
|
|
disabledColor="#F5F5F5;"
|
|
border="none"
|
|
></u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label-width="200rpx"
|
|
label="开户姓名"
|
|
required
|
|
prop="accountName"
|
|
borderBottom
|
|
ref="item1"
|
|
>
|
|
<u--input
|
|
:placeholder="'请输入'"
|
|
v-model="dataForm.accountName"
|
|
border="none"
|
|
></u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label-width="200rpx"
|
|
:label="'证件号码'"
|
|
required
|
|
prop="idCard"
|
|
borderBottom
|
|
ref="item1"
|
|
>
|
|
<u--input
|
|
v-model="dataForm.idCard"
|
|
:placeholder="'请输入'"
|
|
disabledColor="#F5F5F5;"
|
|
border="none"
|
|
></u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label-width="200rpx"
|
|
:label="'联系方式'"
|
|
prop="phone"
|
|
required
|
|
borderBottom
|
|
ref="item1"
|
|
>
|
|
<u--input
|
|
v-model="dataForm.phone"
|
|
:placeholder="'请输入'"
|
|
maxlength="20"
|
|
border="none"
|
|
></u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
v-if="userInfo.pkCountry == 1 && cancode"
|
|
label-width="200rpx"
|
|
:label="'验证码'"
|
|
required
|
|
prop="verificationCode"
|
|
borderBottom
|
|
ref="item1"
|
|
>
|
|
<u--input
|
|
v-model="dataForm.verificationCode"
|
|
:placeholder="'请输入'"
|
|
border="none"
|
|
></u--input>
|
|
<u-button
|
|
@tap="getCode"
|
|
class="getcodes"
|
|
type="primary"
|
|
shape="circle"
|
|
:text="tips"
|
|
color="#2FBC42"
|
|
></u-button>
|
|
</u-form-item>
|
|
|
|
<u-code
|
|
:seconds="seconds"
|
|
@end="end"
|
|
@start="start"
|
|
ref="uCode"
|
|
@change="codeChange"
|
|
></u-code>
|
|
<u-picker
|
|
@cancel="showAmount = false"
|
|
:show="showAmount"
|
|
ref="uPicker"
|
|
:columns="bankCardChioceList"
|
|
@confirm="confirm"
|
|
keyName="bankName"
|
|
></u-picker>
|
|
</u--form>
|
|
</view>
|
|
<view class="tip-wrapper">
|
|
<view class="tip-content">
|
|
<view class="tip-text"
|
|
>银行卡号、真实姓名、证件号码、联系方式，请与银行预留信息保持一致</view
|
|
>
|
|
</view>
|
|
</view>
|
|
<view class="btnbox">
|
|
<u-button class="subbtn" @click="submit">{{ '确定' }}</u-button>
|
|
</view>
|
|
<u-toast ref="uToast"></u-toast>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as ban from '@/config/balance.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
showAmount: false,
|
|
dataForm: {
|
|
bankName: '',
|
|
cardNumber: '',
|
|
pkBank: '',
|
|
subBankName: '',
|
|
accountName: '',
|
|
idCard: '',
|
|
},
|
|
bankCardChioceList: [],
|
|
rules: {
|
|
cardNumber: [
|
|
{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入',
|
|
trigger: ['blur', 'change'],
|
|
},
|
|
],
|
|
subBankName: [
|
|
{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入',
|
|
trigger: ['blur', 'change'],
|
|
},
|
|
],
|
|
accountName: [
|
|
{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入',
|
|
trigger: ['blur', 'change'],
|
|
},
|
|
],
|
|
idCard: [
|
|
{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入',
|
|
trigger: ['blur', 'change'],
|
|
},
|
|
],
|
|
phone: [
|
|
{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入',
|
|
trigger: ['blur', 'change'],
|
|
},
|
|
],
|
|
verificationCode: [
|
|
{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入',
|
|
trigger: ['blur', 'change'],
|
|
},
|
|
],
|
|
bankName: [
|
|
{
|
|
required: true,
|
|
message: '请选择',
|
|
trigger: ['change'],
|
|
},
|
|
],
|
|
},
|
|
tips: '',
|
|
// refCode: null,
|
|
seconds: 60,
|
|
ifpass: false,
|
|
userInfo: {},
|
|
cancode: true, //判断是否是白名单
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.userInfo = uni.getStorageSync('User')
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
codeChange(text) {
|
|
this.tips = text
|
|
},
|
|
getCode() {
|
|
if (this.dataForm.phone && this.$u.test.mobile(this.dataForm.phone)) {
|
|
if (this.$refs.uCode.canGetCode) {
|
|
// 模拟向后端请求验证码
|
|
uni.showLoading({
|
|
title: '正在获取验证码',
|
|
})
|
|
ban
|
|
.getVerification({
|
|
phone: this.dataForm.phone,
|
|
})
|
|
.then(res => {
|
|
uni.hideLoading()
|
|
// 这里此提示会被this.start()方法中的提示覆盖
|
|
uni.$u.toast('验证码已发送')
|
|
// 通知验证码组件内部开始倒计时
|
|
this.$refs.uCode.start()
|
|
})
|
|
} else {
|
|
uni.$u.toast('倒计时结束后再发送')
|
|
}
|
|
} else {
|
|
uni.$u.toast(
|
|
this.dataForm.phone ? '手机号格式不正确' : '请先输入手机号'
|
|
)
|
|
return
|
|
}
|
|
},
|
|
end() {
|
|
// uni.$u.toast('倒计时结束');
|
|
},
|
|
start() {
|
|
// uni.$u.toast('倒计时开始');
|
|
},
|
|
getList() {
|
|
ban.getBankCardChoiceList().then(res => {
|
|
this.bankCardChioceList = [res.data]
|
|
})
|
|
},
|
|
bindBank() {
|
|
if (!this.ifpass && this.cancode && this.userInfo.pkCountry == 1) {
|
|
uni.$u.toast('验证码错误')
|
|
return
|
|
}
|
|
ban.bindWalletBankAdd(this.dataForm).then(res => {
|
|
if (res.code == 200) {
|
|
uni.$u.toast(res.msg)
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 1000)
|
|
}
|
|
})
|
|
},
|
|
submit() {
|
|
this.$refs.uForm
|
|
.validate()
|
|
.then(res => {
|
|
// 没有三方接口 临机写死
|
|
this.ifpass = true
|
|
|
|
if (this.userInfo.pkCountry == 1) {
|
|
if (this.cancode) {
|
|
ban
|
|
.verifyBankCard(this.dataForm)
|
|
.then(res => {
|
|
if (res.code == 200) {
|
|
this.ifpass = true
|
|
this.bindBank()
|
|
} else {
|
|
this.ifpass = false
|
|
uni.$u.toast(res.msg)
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.ifpass = false
|
|
})
|
|
} else {
|
|
this.ifpass = true
|
|
this.bindBank()
|
|
}
|
|
} else {
|
|
this.bindBank()
|
|
}
|
|
})
|
|
.catch(errors => {
|
|
uni.$u.toast('校验失败')
|
|
return false
|
|
})
|
|
},
|
|
confirm(e) {
|
|
this.dataForm.bankName = e.value[0].bankName
|
|
this.dataForm.pkBank = e.value[0].pkId
|
|
this.showAmount = false
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
background: #f2f2f2;
|
|
|
|
.theform {
|
|
margin-top: 6rpx;
|
|
background: #ffffff;
|
|
padding: 20rpx 23rpx 0rpx 23rpx;
|
|
|
|
.contentye {
|
|
font-size: 28rpx;
|
|
margin-left: 200rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.btnbox {
|
|
margin-top: 38rpx;
|
|
padding: 0 20rpx;
|
|
|
|
.subbtn {
|
|
background: #005bac;
|
|
border-radius: 46rpx;
|
|
font-size: 30rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.getcodes {
|
|
width: 197rpx;
|
|
height: 76rpx;
|
|
background: #2fbc42;
|
|
border-radius: 38rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.tip-wrapper {
|
|
margin: 20rpx 20rpx 0 20rpx;
|
|
|
|
.tip-content {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
background: linear-gradient(135deg, #fff3e0 0%, #fff8f0 100%);
|
|
border: 2rpx solid #ffb74d;
|
|
border-radius: 16rpx;
|
|
padding: 20rpx 24rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(255, 183, 77, 0.1);
|
|
|
|
.tip-icon {
|
|
color: #ff9800;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
margin-right: 16rpx;
|
|
margin-top: 2rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tip-text {
|
|
flex: 1;
|
|
font-size: 24rpx;
|
|
line-height: 36rpx;
|
|
color: #e65100;
|
|
font-weight: 500;
|
|
letter-spacing: 0.5rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|