<template>
|
<view>
|
<view class="u-p-30 color-666">已发送至手机号{{form.mobile|mobile_asterisk}}</view>
|
<u--form class="bg-fff u-p-h-30" labelWidth="80" :model="form" :rules="rules" ref="uForm">
|
<u-form-item label="验证码" prop="code">
|
<u--input v-model="form.code" border="none" placeholder="请输入手机验证码"></u--input>
|
<u-button slot="right" @click="getCode" type="error" size="mini" plain :text="tips"></u-button>
|
</u-form-item>
|
</u--form>
|
<view class="u-p-40">
|
<u-button @click="doBind" :loading="loading" :disabled="loading" type="error" text="确认绑卡"></u-button>
|
</view>
|
<u-toast ref="uToast"></u-toast>
|
<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
|
</view>
|
</template>
|
|
<script>
|
import {
|
signUpToApply,
|
bindCard
|
} from '@/common/api/index'
|
const bankName = require("@/common/bankName.js");
|
export default {
|
data() {
|
return {
|
tips: '',
|
seconds: 60,
|
loading: false,
|
form: {
|
acctName: '',
|
cardNo: '',
|
bankName: '',
|
cardType: 'DC',
|
validdate: '',
|
cvv2: '',
|
idNo: '',
|
mobile: '18737516907',
|
thpinfo: '',
|
code: ''
|
},
|
rules: {
|
code: [{
|
required: true,
|
message: '验证码不能为空',
|
trigger: 'blur'
|
}, {
|
// 自定义验证函数，见上说明
|
validator: (rule, value, callback) => {
|
// 上面有说，返回true表示校验通过，返回false表示不通过
|
// uni.$u.test.mobile()就是返回true或者false的
|
return uni.$u.test.code(value, 6);
|
},
|
message: '验证码格式不正确',
|
trigger: 'change'
|
}]
|
}
|
};
|
},
|
filters: {
|
mobile_asterisk(mobile) {
|
if (uni.$u.test.isEmpty(mobile)) {
|
return ''
|
}
|
return mobile.substr(0, 4) +
|
"****" + mobile.substr(8, 3);
|
}
|
},
|
onLoad(opt) {
|
opt.acctName = decodeURIComponent(opt.acctName || '')
|
opt.bankName = decodeURIComponent(opt.bankName || '')
|
this.form = opt
|
},
|
onReady() {
|
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
this.$refs.uForm.setRules(this.rules)
|
this.$refs.uCode.start();
|
},
|
methods: {
|
codeChange(text) {
|
this.tips = text;
|
},
|
getCode() {
|
if (this.$refs.uCode.canGetCode) {
|
// 模拟向后端请求验证码
|
uni.showLoading({
|
title: '正在获取验证码'
|
})
|
const params = uni.$u.deepClone(this.form);
|
delete params.thpinfo
|
delete params.code
|
delete params.bankName
|
delete params.cardType
|
signUpToApply(params).then(res => {
|
this.form.thpinfo = res
|
uni.hideLoading();
|
uni.$u.toast('验证码已发送');
|
// 通知验证码组件内部开始倒计时
|
this.$refs.uCode.start();
|
}).catch(() => {
|
uni.$u.toast('验证码发送失败');
|
uni.hideLoading();
|
})
|
} else {
|
uni.$u.toast('倒计时结束后再发送');
|
}
|
},
|
doBind() {
|
this.$refs.uForm.validate().then(res => {
|
this.loading = true
|
const params = uni.$u.deepClone(this.form);
|
delete params.bankName
|
delete params.cardType
|
bindCard(params).then(res => {
|
this.loading = false
|
this.$refs.uToast.show({
|
type: 'success',
|
title: '成功',
|
message: "绑卡成功",
|
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
|
complete: () => {
|
uni.navigateBack({
|
delta: 3
|
})
|
}
|
})
|
|
}).catch(() => {
|
this.loading = false
|
})
|
}).catch(errors => {
|
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
|
</style>
|
