angelo
/
web-store-retail-h5
forked from angelo/web-retail-h5
3
0
Fork 0
Code Pull Requests Activity
web-store-retail-h5/pages/mine/bindBank/bindBank.vue

273 lines
6.9 KiB
Vue
Raw Blame History

<template>
<view class="content">
<view class="theform">
<u--form labelPosition="left" :model="dataForm" :rules="rules" ref="uForm">
<u-form-item label-width="200rpx" :label="'银行卡号'" borderBottom prop="cardNumber" ref="item1">
<u--input v-model="dataForm.cardNumber" disabledColor="#F5F5F5;" border="none"></u--input>
</u-form-item>
<u-form-item borderBottom 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="'开户支行'" 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="'真实姓名'" 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="'证件号码'" 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" 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="'验证码'"
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="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()
this.checkIfWhite();
},
methods: {
checkIfWhite() {
ban.checkIfWhite().then((res) => {
if (res.code == 200 && res.flag == "N") {
this.cancode = true;
} else if (res.code == 200 && res.flag == "Y") {
this.cancode = false;
}
});
},
codeChange(text) {
this.tips = text;
},
getCode() {
if (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('请先输入手机号')
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;
this.bindBank();
return
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;
}
}
</style>
View Git Blame Copy Permalink