<template>
|
<view>
|
<view class="u-p-30 color-666">请绑定持卡人本人的银行卡</view>
|
<u--form class="bg-fff u-p-h-30" labelWidth="80" :model="form" :rules="rules" ref="uForm">
|
<u-form-item label="持卡人" prop="acctName" borderBottom>
|
<u--input v-model="form.acctName" border="none" placeholder="请输入持卡人姓名"></u--input>
|
</u-form-item>
|
<u-form-item label="卡号" prop="cardNo">
|
<u--input v-model="form.cardNo" border="none" placeholder="请输入卡号"></u--input>
|
</u-form-item>
|
</u--form>
|
<view class="u-p-40">
|
<u-button @click="doNext" :loading="loading" :disabled="loading" type="error" text="下一步"></u-button>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
isContain,
|
} from '@/common/api/index'
|
const bankName = require("@/common/bankName.js");
|
export default {
|
data() {
|
return {
|
loading: false,
|
form: {
|
acctName: '',
|
cardNo: ''
|
},
|
rules: {
|
acctName: [{
|
required: true,
|
message: '持卡人姓名不能为空',
|
trigger: 'blur'
|
}, {
|
// 自定义验证函数，见上说明
|
validator: (rule, value, callback) => {
|
// 上面有说，返回true表示校验通过，返回false表示不通过
|
// uni.$u.test.mobile()就是返回true或者false的
|
return uni.$u.test.rangeLength(value, [2, 6]) && uni.$u.test.chinese(value);
|
},
|
message: '持卡人姓名不正确',
|
trigger: 'change'
|
}],
|
cardNo: [{
|
required: true,
|
message: '卡号不能为空',
|
trigger: 'blur'
|
}, {
|
// 自定义验证函数，见上说明
|
validator: (rule, value, callback) => {
|
// 上面有说，返回true表示校验通过，返回false表示不通过
|
// uni.$u.test.mobile()就是返回true或者false的
|
return this.$utils.verifyBankCard(value);
|
},
|
message: '卡号不正确',
|
trigger: 'change'
|
}]
|
}
|
};
|
},
|
onReady() {
|
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
this.$refs.uForm.setRules(this.rules)
|
},
|
methods: {
|
doNext() {
|
this.$refs.uForm.validate().then(res => {
|
this.loading = true
|
isContain({
|
cardNum: this.form.cardNo
|
}).then(res => {
|
uni.request({
|
url: 'https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?_input_charset=utf-8&cardBinCheck=true&cardNo=' +
|
this.form.cardNo,
|
method: "GET",
|
complete: (res) => {
|
this.loading = false
|
if (res.statusCode == 200) {
|
if (res.data.validated) {
|
const bank = bankName.bankName[res.data.bank]
|
const params = uni.$u.deepClone(this.form);
|
params.cardType = res.data.cardType
|
params.bankName = bank
|
uni.$u.route({
|
url: '/pages/pay/addCardSecond',
|
params: params
|
})
|
} else {
|
uni.$u.toast("卡号不正确！");
|
}
|
} else {
|
uni.$u.toast("卡类型获取失败！");
|
}
|
}
|
})
|
}).catch(() => {
|
this.loading = false
|
})
|
|
}).catch(errors => {
|
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
|
</style>
|
