286 lines
7.4 KiB
Vue
286 lines
7.4 KiB
Vue
<!--
|
||
* @Descripttion:
|
||
* @version:
|
||
* @Author: kBank
|
||
* @Date: 2022-11-21 15:11:22
|
||
-->
|
||
<template>
|
||
<view class="content">
|
||
<view class="index_header">
|
||
|
||
</view>
|
||
<view class="contxt">
|
||
<view class="kuang">
|
||
<u-form :model="form"
|
||
labelWidth="auto"
|
||
:rules="rules"
|
||
ref="uForm">
|
||
<u-form-item :label="'银行卡号'"
|
||
required
|
||
prop="bankNo">
|
||
<u-input v-model="form.bankNo"
|
||
:placeholder="'请输入银行卡卡号'" />
|
||
</u-form-item>
|
||
<u-form-item :label="'姓名'"
|
||
required
|
||
prop="name">
|
||
<u-input v-model="form.name"
|
||
:placeholder="'请输入姓名'" />
|
||
</u-form-item>
|
||
<u-form-item :label="'身份证'"
|
||
required
|
||
prop="idCard">
|
||
<u-input v-model="form.idCard"
|
||
:placeholder="'请输入身份证号码'" />
|
||
</u-form-item>
|
||
<u-form-item :label="'手机号'"
|
||
required
|
||
prop="phone">
|
||
<u-input v-model="form.phone"
|
||
maxlength="20"
|
||
type="number"
|
||
:placeholder="'请输入银行预留手机号'" />
|
||
</u-form-item>
|
||
<u-form-item label="有效期">
|
||
<u-input v-model="form.validdate"
|
||
:placeholder="'请输入'" />
|
||
</u-form-item>
|
||
<u-form-item label="安全码">
|
||
<u-input v-model="form.cvv2"
|
||
:placeholder="'请输入'" />
|
||
</u-form-item>
|
||
<u-form-item :label="'验证码'"
|
||
required
|
||
prop="smsCode">
|
||
<u-input v-model="form.smsCode"
|
||
:placeholder="'请输入验证码'">
|
||
<template slot="suffix">
|
||
<view class="getCode"
|
||
@tap="submitForm">{{ getCode }}</view>
|
||
</template>
|
||
</u-input>
|
||
</u-form-item>
|
||
</u-form>
|
||
<div class="tips" v-if="bank=='hf'">
|
||
<p>1、目前汇付支付支持绑定信用卡、储蓄卡</p>
|
||
<p>2、当绑定信用卡时，“安全码”、“有效期”两栏为必填项</p>
|
||
<p>3、安全码为信用卡背面签名栏后3位数字；</p>
|
||
<p>4、信用卡有效期格式不加/，例信用卡有效期10/24，请输入：1024</p>
|
||
</div>
|
||
<u-button type="success"
|
||
class="uBtn"
|
||
shape="circle"
|
||
color="linear-gradient(to right, #005BAC, #005BAC )"
|
||
:loading="isLoading"
|
||
:loadingText="'绑定中'"
|
||
@click="toBind">{{ '立即绑定' }}</u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as pay from '@/config/pay.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {
|
||
bankNo: '',
|
||
},
|
||
isLoading: false,
|
||
getCode: '获取验证码',
|
||
isSend: false,
|
||
beginTime: 60,
|
||
bankCode: '',
|
||
timer: '',
|
||
bank: '',
|
||
rules: {
|
||
bankNo: [
|
||
{
|
||
required: true,
|
||
message: '请输入银行卡卡号',
|
||
trigger: ['change', 'blur'],
|
||
},
|
||
],
|
||
idCard: [
|
||
{
|
||
required: true,
|
||
message: '请输入身份证号码',
|
||
trigger: ['change', 'blur'],
|
||
},
|
||
],
|
||
phone: [
|
||
{
|
||
required: true,
|
||
message: '请输入手机号',
|
||
trigger: ['blur'],
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
return this.$u.test.mobile(value)
|
||
},
|
||
message: '手机号格式不正确',
|
||
trigger: ['blur'],
|
||
},
|
||
],
|
||
name: [
|
||
{
|
||
required: true,
|
||
message: '请输入姓名',
|
||
trigger: ['change', 'blur'],
|
||
},
|
||
],
|
||
},
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.bank = options.bank
|
||
// this.getInfo()
|
||
},
|
||
onShow() {},
|
||
methods: {
|
||
toBind() {
|
||
if (!this.bankCode) {
|
||
uni.showToast({
|
||
title: '请输入验证码',
|
||
icon: 'none',
|
||
duration: 1500,
|
||
})
|
||
return
|
||
}
|
||
let url = ''
|
||
if (this.bank == 'tl') {
|
||
url = pay.bindTlConfirm
|
||
} else if (this.bank == 'jd') {
|
||
url = pay.bindJdConfirm
|
||
} else if (this.bank == 'hf') {
|
||
url = pay.bindHfConfirm
|
||
}
|
||
url({
|
||
bindCode: this.bankCode,
|
||
smsCode: this.form.smsCode,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '绑卡成功',
|
||
icon: 'none',
|
||
duration: 1500,
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
}
|
||
})
|
||
},
|
||
areBothValuesSet(val1, val2) {
|
||
return (
|
||
((val1 === null || val1 === undefined || val1 === '') &&
|
||
(val2 === null || val2 === undefined || val2 === '')) ||
|
||
(val1 !== null &&
|
||
val1 !== undefined &&
|
||
val1 !== '' &&
|
||
val2 !== null &&
|
||
val2 !== undefined &&
|
||
val2 !== '')
|
||
)
|
||
},
|
||
// 绑卡获取验证码
|
||
submitForm() {
|
||
this.$refs.uForm.validate().then((res) => {
|
||
if (!this.areBothValuesSet(this.form.validdate, this.form.cvv2)) {
|
||
uni.showToast({
|
||
title: '请输入安全码及有效期',
|
||
icon: 'none',
|
||
duration: 1500,
|
||
})
|
||
return
|
||
}
|
||
for (let key in this.form) {
|
||
if (this.form[key] == '') {
|
||
delete this.form[key]
|
||
}
|
||
}
|
||
this.startTime()
|
||
let url = ''
|
||
if (this.bank == 'tl') {
|
||
url = pay.bindTl
|
||
} else if (this.bank == 'jd') {
|
||
url = pay.bindJd
|
||
} else if (this.bank == 'hf') {
|
||
url = pay.bindHf
|
||
}
|
||
url(this.form)
|
||
.then((res) => {
|
||
if(res.code == 200){
|
||
this.bankCode = res.data
|
||
}else{
|
||
this.beginTime = 0
|
||
}
|
||
})
|
||
})
|
||
},
|
||
// 倒计时
|
||
startTime() {
|
||
if (this.isSend) return
|
||
this.isSend = true
|
||
this.getCode = this.beginTime + ' s'
|
||
let that = this
|
||
this.timer = setInterval(() => {
|
||
this.beginTime--
|
||
this.getCode = this.beginTime + ' s'
|
||
if (this.beginTime < 0) {
|
||
clearInterval(this.timer)
|
||
this.getCode = '获取验证码'
|
||
this.beginTime = 60
|
||
this.isSend = false
|
||
}
|
||
}, 1000)
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
background: #f9f9f9;
|
||
}
|
||
.index_header {
|
||
background: #f9f9f9;
|
||
height: 330rpx;
|
||
}
|
||
.contxt {
|
||
margin-top: -320rpx;
|
||
padding: 0 26rpx;
|
||
}
|
||
.kuang {
|
||
// margin-top: 20rpx;
|
||
padding: 20rpx;
|
||
height: 90vh;
|
||
background: #fff;
|
||
box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
|
||
border-radius: 10px 10px 10px 10px;
|
||
}
|
||
.getCode {
|
||
font-size: 10px;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #18acff;
|
||
}
|
||
::v-deep .u-form-item__body__left {
|
||
margin-left: 20rpx;
|
||
}
|
||
::v-deep .u-form-item__body__right__message {
|
||
margin-left: 80px !important;
|
||
}
|
||
.uBtn {
|
||
margin-top: 120rpx;
|
||
}
|
||
.tips{
|
||
font-size: 12px;
|
||
p{
|
||
// line-height: 10px;
|
||
}
|
||
color: #d5251d;
|
||
}
|
||
</style>
|