378 lines
9.9 KiB
Vue
378 lines
9.9 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="theform">
|
|
<u--form labelPosition="left" :model="dataForm" :rules="rules" ref="uForm">
|
|
<u-form-item required label-width="180rpx" :label="'真实姓名'" prop="accountName" ref="item1">
|
|
<u--input :placeholder="'请输入'" v-model="dataForm.accountName" disabledColor="#F5F5F5;"></u--input>
|
|
</u-form-item>
|
|
<u-form-item required label-width="180rpx" :label="'性别'" prop="sex" ref="item1">
|
|
<u-radio-group v-model="sexRadio" @change="radioGroupChange">
|
|
<u-radio :customStyle="{marginRight: '16rpx'}" v-for="(item, index) in sexList" :key="index"
|
|
:name="item.value">{{ item.label }}</u-radio>
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
</u-form-item>
|
|
<u-form-item required label-width="180rpx" :label="'证件类型'" prop="idName" @click="showCtype = true; " ref="item1">
|
|
<u--input suffixIcon="arrow-right" readonly v-model="dataForm.idName" disabledColor="#ffffff"
|
|
:placeholder="'请选择'">
|
|
</u--input>
|
|
</u-form-item>
|
|
<u-form-item required label-width="180rpx" :label="'证件号码'" prop="idCard" ref="item1">
|
|
<u--input :placeholder="'请输入'" v-model="dataForm.idCard" disabledColor="#F5F5F5;"></u--input>
|
|
</u-form-item>
|
|
<u-form-item required label-width="180rpx" :label="'银行名称'" @click="showAmount = true; " prop="bankName" ref="item1">
|
|
<u--input suffixIcon="arrow-right" readonly v-model="dataForm.bankName" disabledColor="#ffffff"
|
|
:placeholder="'请选择'">
|
|
</u--input>
|
|
|
|
|
|
</u-form-item>
|
|
<u-form-item required label-width="180rpx" :label="'银行卡号'" prop="cardNumber" ref="item1">
|
|
<u--input :placeholder="'请输入'" v-model="dataForm.cardNumber" disabledColor="#F5F5F5;"></u--input>
|
|
</u-form-item>
|
|
|
|
<u-form-item required label-width="180rpx" :label="'开户支行'" prop="subBankName" ref="item1">
|
|
<u--input :placeholder="'请输入'" v-model="dataForm.subBankName" disabledColor="#F5F5F5;"></u--input>
|
|
</u-form-item>
|
|
<u-form-item required @click="getDiqu" :label="'收货地址'" label-width="180rpx" prop="theaddress">
|
|
<u--input v-model="dataForm.theaddress" readonly suffixIcon="arrow-right" disabledColor="#ffffff"
|
|
:placeholder="'请选择'">
|
|
</u--input>
|
|
</u-form-item>
|
|
|
|
<view class="view-class">
|
|
<u-form-item required :label="'详细地址'" class="label-style" label-width="180rpx" prop="address">
|
|
<u-textarea v-model="dataForm.address" placeholder-class="place-class" class="border-color"
|
|
maxlength="200"
|
|
:placeholder="'请输入'" />
|
|
|
|
</u-form-item>
|
|
</view>
|
|
<u-form-item required label-width="180rpx" :label="'联系方式'" prop="phone" ref="item1">
|
|
<u--input v-model="dataForm.phone" :placeholder="'请输入'"></u--input>
|
|
</u-form-item>
|
|
<u-form-item required label-width="180rpx" :label="'验证码'" prop="verificationCode" ref="item1">
|
|
<u--input v-model="dataForm.verificationCode" :placeholder="'请输入'">
|
|
<template slot="suffix">
|
|
<text style="color: #18ACFF;" @tap='getCode'>{{tips}}</text>
|
|
</template>
|
|
</u--input>
|
|
|
|
</u-form-item>
|
|
<u-form-item required label-width="180rpx" :label="'证件(正面)'" >
|
|
<uploadImg :ifsfz='true' @imageUploaded='imageUploaded1' prop="idFront" style="margin-right: 30rpx;" :bgimg="`../../../static/images/idCard1.png`"
|
|
v-model="dataForm.idFront"></uploadImg>
|
|
|
|
</u-form-item>
|
|
<u-form-item required label-width="180rpx" :label="'证件(反面)'">
|
|
<uploadImg :ifsfz='true' @imageUploaded='imageUploaded2' prop="idBack" style="margin-right: 30rpx;" :bgimg="`../../../static/images/idCard2.png`"
|
|
v-model="dataForm.idBack"></uploadImg>
|
|
|
|
</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-picker @cancel='showCtype=false' :show="showCtype" ref="uPicker2" :columns="cardTypeList"
|
|
@confirm="confirm2" keyName='label'></u-picker>
|
|
</u--form>
|
|
|
|
</view>
|
|
<view class="btnbox">
|
|
<u-button class="subbtn" @click="submit">{{'确定'}}</u-button>
|
|
</view>
|
|
<u-toast ref="uToast"></u-toast>
|
|
<v-address ref="address" @getAddressData="AddressData" :defaultCode="defaultCode"
|
|
@addressData="addressData"></v-address>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as ban from "@/config/balance.js"
|
|
import address from '@/components/address.vue'
|
|
import uploadImg from '@/components/uploadImg.vue'
|
|
export default {
|
|
components: {
|
|
'v-address': address,
|
|
uploadImg
|
|
},
|
|
data() {
|
|
return {
|
|
showAmount: false,
|
|
showCtype: false,
|
|
dataForm: {
|
|
bankName: "",
|
|
cardNumber: "",
|
|
pkBank: "",
|
|
subBankName: "",
|
|
accountName: "",
|
|
idCard: "",
|
|
pkProvince: "",
|
|
pkCity: "",
|
|
pkCounty: "",
|
|
theaddress: "",
|
|
idFront:"",
|
|
idBack:""
|
|
},
|
|
sexRadio: 1,
|
|
address: "",
|
|
defaultCode: [],
|
|
bankCardChioceList: [], //银行选择
|
|
cardTypeList: [], //证件类型
|
|
sexList: [{
|
|
label: '男',
|
|
value: 1
|
|
},
|
|
{
|
|
label: '女',
|
|
value: 2
|
|
},
|
|
],
|
|
rules: {
|
|
accountName: [{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入',
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
sexRadio: [{
|
|
|
|
required: true,
|
|
message: '请选择',
|
|
trigger: 'change',
|
|
}],
|
|
idName: [{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请选择',
|
|
trigger: ['change']
|
|
}],
|
|
idCard: [{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入',
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
pkBank: [{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请选择',
|
|
trigger: ['change']
|
|
}],
|
|
address: [{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入',
|
|
trigger:['blur', 'change']
|
|
}],
|
|
cardNumber: [{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入',
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
subBankName: [{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入',
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
theaddress: [{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请选择',
|
|
trigger: ['change']
|
|
}],
|
|
idFront: [{
|
|
|
|
required: true,
|
|
message: '请上传',
|
|
|
|
}],
|
|
idBack: [{
|
|
|
|
required: true,
|
|
message: '请上传',
|
|
|
|
}],
|
|
phone: [{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入',
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
verificationCode: [{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入',
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
|
|
},
|
|
tips: '',
|
|
// refCode: null,
|
|
seconds: 60,
|
|
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getList()
|
|
|
|
},
|
|
onReady() {
|
|
this.$refs.uForm.setRules(this.rules);
|
|
},
|
|
|
|
methods: {
|
|
imageUploaded1(url){
|
|
this.dataForm.idFront= url
|
|
},
|
|
imageUploaded2(url){
|
|
this.dataForm.idBack= url
|
|
},
|
|
// radio选择发生变化
|
|
radioGroupChange(e) {
|
|
this.dataForm.sex = e
|
|
// console.log('🌈eeee',e)
|
|
},
|
|
AddressData(name) {
|
|
this.dataForm.theaddress = name
|
|
},
|
|
getDiqu() {
|
|
this.$refs.address.setShow()
|
|
},
|
|
addressData(diqu, obj) {
|
|
this.dataForm.theaddress = diqu
|
|
this.dataForm.pkProvince = obj.province
|
|
this.dataForm.pkCity = obj.city
|
|
this.dataForm.pkCounty = obj.county
|
|
this.$forceUpdate()
|
|
},
|
|
|
|
codeChange(text) {
|
|
this.tips = text;
|
|
},
|
|
getCode() {
|
|
if (this.dataForm.phone && this.$u.test.mobile(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(this.dataForm.phone ? '手机号格式不正确' : '请先输入手机号')
|
|
return
|
|
}
|
|
},
|
|
end() {},
|
|
start() {},
|
|
getList() {
|
|
ban.getBankCardChoiceList().then(res => {
|
|
this.bankCardChioceList = [res.data]
|
|
})
|
|
//证件类型
|
|
ban.getCardType().then((res) => {
|
|
this.cardTypeList = [res.data];
|
|
});
|
|
},
|
|
|
|
|
|
submit() {
|
|
this.$refs.uForm.validate().then(res => {
|
|
ban.addAuthentication(this.dataForm).then(res => {
|
|
if (res.code == 200) {
|
|
uni.$u.toast(res.msg)
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 1500);
|
|
|
|
} else {
|
|
|
|
uni.$u.toast(res.msg)
|
|
}
|
|
}).catch(err => {
|
|
|
|
})
|
|
}).catch(errors => {
|
|
uni.$u.toast('校验失败')
|
|
return false
|
|
})
|
|
},
|
|
confirm2(e) {
|
|
this.dataForm.idName = e.value[0].label
|
|
this.dataForm.idType = e.value[0].value
|
|
this.showCtype = 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>
|
|
::v-deep .u-input--radius,
|
|
.u-input--square {
|
|
border-radius: 12rpx;
|
|
// border:2rpx solid #cccccc;
|
|
}
|
|
|
|
.content {
|
|
background: #F2F2F2;
|
|
|
|
.uni-textarea {
|
|
height: 100rpx;
|
|
}
|
|
|
|
.theform {
|
|
margin-top: 6rpx;
|
|
background: #FFFFFF;
|
|
padding: 20rpx 23rpx 48rpx 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 {
|
|
|
|
background: #2FBC42;
|
|
border-radius: 38rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
}
|
|
</style> |