<template>
|
<view>
|
<u--form class="" labelWidth="80" :model="form" :rules="rules" ref="uForm">
|
<view class="u-p-h-30">
|
<u-form-item label="持卡人">
|
<u--input v-model="form.acctName" readonly border="none"></u--input>
|
</u-form-item>
|
<u-form-item label="银行卡号">
|
<u--input v-model="form.cardNo" readonly border="none"></u--input>
|
</u-form-item>
|
<u-form-item label="所属银行">
|
<u--input v-model="form.bankName" readonly border="none"></u--input>
|
</u-form-item>
|
</view>
|
|
<view class="bg-fff u-p-h-30 u-m-t-30">
|
<block v-if="form.cardType=='CC'">
|
<u-form-item label="有效期" borderBottom prop="validdate">
|
<u--input v-model="form.validdate" border="none" placeholder="请输入信用卡有效期">
|
</u--input>
|
</u-form-item>
|
<u-form-item label="安全码" borderBottom prop="cvv2">
|
<u--input v-model="form.cvv2" border="none" placeholder="请输入信用卡安全码"></u--input>
|
</u-form-item>
|
</block>
|
<u-form-item label="身份证号" borderBottom prop="idNo">
|
<u--input v-model="form.idNo" border="none" placeholder="请输入持卡人身份证号"></u--input>
|
</u-form-item>
|
<u-form-item label="手机号" prop="mobile">
|
<u--input v-model="form.mobile" border="none" placeholder="请输入持卡人手机号"></u--input>
|
</u-form-item>
|
</view>
|
|
</u--form>
|
<label @click="checked=!checked" class="u-flex u-font-24 color-999 u-m-h-30 u-m-t-30">
|
<radio style="transform: scale(0.7);" color="#e93b3d" @change="radioChange" :checked="checked" />我已阅读并同意
|
<view @click.stop="showAgreement=true" class="" style="color: #e93b3d;">《用户协议》</view>
|
</label>
|
<view class="u-p-40">
|
<u-button @click="doNext" :loading="loading" :disabled="loading" type="error" text="下一步"></u-button>
|
</view>
|
<u-popup :show="showAgreement" mode="center" :round="30">
|
<card-agreement @confirm="checked=true;showAgreement=false;doNext()"></card-agreement>
|
</u-popup>
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
signUpToApply,
|
} from '@/common/api/index'
|
export default {
|
data() {
|
return {
|
showAgreement: false,
|
checked: true,
|
loading: false,
|
form: {
|
acctName: '',
|
cardNo: '',
|
bankName: '',
|
cardType: 'DC',
|
validdate: '',
|
cvv2: '',
|
idNo: '',
|
mobile: ''
|
},
|
rules: {
|
validdate: [{
|
required: true,
|
message: '有效期不能为空',
|
trigger: 'blur'
|
}],
|
cvv2: [{
|
required: true,
|
message: '安全码不能为空',
|
trigger: 'blur'
|
}],
|
idNo: [{
|
required: true,
|
message: '身份证号不能为空',
|
trigger: 'blur'
|
}, {
|
// 自定义验证函数，见上说明
|
validator: (rule, value, callback) => {
|
// 上面有说，返回true表示校验通过，返回false表示不通过
|
// uni.$u.test.mobile()就是返回true或者false的
|
return uni.$u.test.idCard(value);
|
},
|
message: '身份证号不正确',
|
trigger: 'change'
|
}],
|
mobile: [{
|
required: true,
|
message: '手机号不能为空',
|
trigger: 'blur'
|
}, {
|
// 自定义验证函数，见上说明
|
validator: (rule, value, callback) => {
|
// 上面有说，返回true表示校验通过，返回false表示不通过
|
// uni.$u.test.mobile()就是返回true或者false的
|
return uni.$u.test.mobile(value);
|
},
|
message: '手机号不正确',
|
trigger: 'change'
|
}],
|
}
|
};
|
},
|
onLoad(opt) {
|
opt.acctName = decodeURIComponent(opt.acctName || '')
|
opt.bankName = decodeURIComponent(opt.bankName || '')
|
this.form = opt
|
},
|
onReady() {
|
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
this.$refs.uForm.setRules(this.rules)
|
},
|
methods: {
|
doNext() {
|
this.$refs.uForm.validate().then(res => {
|
if (!this.checked) {
|
this.showAgreement = true
|
return
|
}
|
this.loading = true
|
const param = uni.$u.deepClone(this.form);
|
delete param.bankName
|
delete param.cardType
|
signUpToApply(param).then(res => {
|
const params = uni.$u.deepClone(this.form);
|
params.thpinfo = res
|
uni.$u.route({
|
url: '/pages/pay/addCardCode',
|
params: params
|
})
|
}).catch(() => {
|
this.loading = false
|
})
|
}).catch(errors => {
|
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
</style>
|
