前端uniapp提交表单调用接口方法最新
目录
-
- 源码1
- 源码2
- 最后
源码1
<template>
<view class="my-add-bank-card">
<form @submit="formSubmit" @reset="formReset">
<view class="my-add-bank-card-box">
<view class="add-card-tit">
添加银行卡信息
view>
<view class="add-card-list1">
<view class="add-card-list-name1">
开户人姓名
view>
<view class="add-card-list1-ipt">
<input class="popup-input-field" name="bank_user_name" type="text"
v-model="address.bank_user_name" placeholder="请填写银行卡开户人姓名" />
view>
view>
<view class="add-card-list">
<view class="add-card-list-name1">
所属银行
view>
<view class="add-card-list1-ipt">
<input class="popup-input-field" name="bank_name" type="text" v-model="address.bank_name"
placeholder="请填写所属银行" />
view>
view>
<view class="add-card-list">
<view class="add-card-list-name1">
开户支行
view>
<view class="add-card-list1-ipt">
<input class="popup-input-field" name="bank_account" type="number"
v-model="address.bank_account" placeholder="请填写开户支行" />
view>
view>
<view class="add-card-list">
<view class="add-card-list-name1">
银行卡号
view>
<view class="add-card-list1-ipt">
<input class="popup-input-field" name="bank_card" type="number" v-model="address.bank_card"
placeholder="请填写正确的银行卡号" />
view>
view>
view>
<view class="bankCardSub">
<button form-type="submit">提交银行卡信息button>
view>
form>
view>
template>
<script>
export default {
data() {
return {
address: {},
}
},
methods: {
formSubmit(e) {
let self = this;
var formdata = e.detail.value;
// formdata.province_id = self.province_id;//有特殊表单的单独加参数
// console.log(e, 'formdata');
// 校验里面formdata就是赋值给formdata对象里面了，然后传参就可以传了
if (formdata.bank_user_name == '') {
uni.showToast({
title: '请输入开户人姓名',
duration: 1000,
icon: 'none'
});
return false;
}
if (formdata.bank_name == '') {
uni.showToast({
title: '请输入所属银行',
duration: 1000,
icon: 'none'
});
return false;
}
if (formdata.bank_account == '') {
uni.showToast({
title: '请输入开户支行',
duration: 1000,
icon: 'none'
});
return false;
}
if (formdata.bank_card == '') {
uni.showToast({
title: '请输入银行卡号',
duration: 1000,
icon: 'none'
});
return false;
}
// if (formdata.phone == '') {
// uni.showToast({
// title: '请输入手机号码',
// duration: 1000,
// icon: 'none'
// });
// return false;
// }
// if (formdata.province_id == 0 || formdata.city_id == 0 || formdata.region_id) {
// if (formdata.detail == '') {
// uni.showToast({
// title: '请选择完整省市区',
// duration: 1000,
// icon: 'none'
// });
// return false;
// }
// }
self._post('user.user/bindUserBankData', formdata, function(res) {
// self.showSuccess(res.msg, function() {
// console.log(self.delta);
// #ifdef H5
// uni.navigateBack({
// delta: parseInt(self.delta)
// });
//#endif
// #ifndef H5
// uni.navigateBack({
// delta: 1
// });
//#endif
// });
// console.log(res, '添加成功');
// 跳到添加成功
if (res.msg == '添加成功') {
uni.navigateTo({
url: '/pages/user/my-bank-card/my-successfully-added-bank-card/my-successfully-added-bank-card'
})
} else {
uni.showToast({
title: '添加失败',
duration: 1000,
icon: 'none'
});
}
});
},
/*清空数据*/
formReset: function(e) {
console.log('清空数据');
},
}
}
script>
<style scoped>
page {
background: #F8F9FA;
}
.my-add-bank-card {
display: flex;
flex-direction: column;
}
.my-add-bank-card-box {
width: 686rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
margin: 20rpx 32rpx 80rpx 32rpx;
padding: 24rpx 30rpx 0rpx 30rpx;
box-sizing: border-box;
}
.add-card-tit {
font-size: 36rpx;
font-family: Source Han Sans-Medium, Source Han Sans;
font-weight: 500;
color: #333333;
line-height: 50rpx;
font-weight: bold;
}
.add-card-list1 {
padding-top: 12rpx;
padding-bottom: 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
}
.add-card-list-name1 {
font-size: 32rpx;
font-family: Source Han Sans-Regular, Source Han Sans;
font-weight: 400;
color: #3D3D3D;
line-height: 52rpx;
}
.add-card-list1-ipt {
margin-left: 24rpx;
}
.add-card-list {
padding-bottom: 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
}
.bankCardSub {
width: 554rpx;
height: 84rpx;
background: #891F50;
border-radius: 137rpx 137rpx 137rpx 137rpx;
opacity: 1;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
font-family: Source Han Sans-Regular, Source Han Sans;
font-weight: 400;
color: #FFFFFF;
line-height: 36rpx;
}
.bankCardSub button {
width: 554rpx;
height: 84rpx;
background: #891F50;
border-radius: 137rpx 137rpx 137rpx 137rpx;
opacity: 1;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
font-family: Source Han Sans-Regular, Source Han Sans;
font-weight: 400;
color: #FFFFFF;
line-height: 36rpx;
}
style>
源码2
<template>
<view class="my-add-bank-card">
<form @submit="formSubmit" @reset="formReset">
<view class="my-add-bank-card-box">
<view class="add-card-tit">
编辑银行卡信息
view>
<view class="add-card-list1">
<view class="add-card-list-name1">
开户人姓名
view>
<view class="add-card-list1-ipt">
<input class="popup-input-field" name="bank_user_name" type="text"
v-model="address.bank_user_name" placeholder="请填写银行卡开户人姓名" />
view>
view>
<view class="add-card-list">
<view class="add-card-list-name1">
所属银行
view>
<view class="add-card-list1-ipt">
<input class="popup-input-field" name="bank_name" type="text" v-model="address.bank_name"
placeholder="请填写所属银行" />
view>
view>
<view class="add-card-list">
<view class="add-card-list-name1">
开户支行
view>
<view class="add-card-list1-ipt">
<input class="popup-input-field" name="bank_account" type="number"
v-model="address.bank_account" placeholder="请填写开户支行" />
view>
view>
<view class="add-card-list">
<view class="add-card-list-name1">
银行卡号
view>
<view class="add-card-list1-ipt">
<input class="popup-input-field" name="bank_card" type="number" v-model="address.bank_card"
placeholder="请填写正确的银行卡号" />
view>
view>
view>
<view class="bankCardSub">
<button form-type="submit">提交银行卡信息button>
view>
form>
view>
template>
<script>
export default {
data() {
return {
address: {
bank_user_name: '',
bank_name: '',
bank_account: '',
bank_card: '',
bank_id: ''
},
}
},
onLoad(onptions) {
// console.log(onptions.bank_user_name, '接受bank_user_name');
// console.log(onptions.bank_name, '接受bank_name');
// console.log(onptions.bank_account, '接受bank_account');
// console.log(onptions.bank_card, '接受bank_card');
this.address.bank_user_name = onptions.bank_user_name;
this.address.bank_name = onptions.bank_name;
this.address.bank_account = onptions.bank_account;
this.address.bank_card = onptions.bank_card;
this.bank_id = onptions.bank_id;
},
methods: {
formSubmit(e) {
let self = this;
var formdata = e.detail.value;
// formdata.province_id = self.province_id;//有特殊表单的单独加参数
// console.log(e, 'formdata');
// 校验里面formdata就是赋值给formdata对象里面了，然后传参就可以传了
this.bank_id = onptions.bank_id;
formdata.bank_id = self.bank_id; // 这个就是特殊的上一个页面传过来的参数id
if (formdata.bank_user_name == '') {
uni.showToast({
title: '请输入开户人姓名',
duration: 1000,
icon: 'none'
});
return false;
}
if (formdata.bank_name == '') {
uni.showToast({
title: '请输入所属银行',
duration: 1000,
icon: 'none'
});
return false;
}
if (formdata.bank_account == '') {
uni.showToast({
title: '请输入开户支行',
duration: 1000,
icon: 'none'
});
return false;
}
if (formdata.bank_card == '') {
uni.showToast({
title: '请输入银行卡号',
duration: 1000,
icon: 'none'
});
return false;
}
// if (formdata.phone == '') {
// uni.showToast({
// title: '请输入手机号码',
// duration: 1000,
// icon: 'none'
// });
// return false;
// }
// if (formdata.province_id == 0 || formdata.city_id == 0 || formdata.region_id) {
// if (formdata.detail == '') {
// uni.showToast({
// title: '请选择完整省市区',
// duration: 1000,
// icon: 'none'
// });
// return false;
// }
// }
self._post('user.user/editBankData', formdata, function(res) {
// self.showSuccess(res.msg, function() {
// console.log(self.delta);
// #ifdef H5
// uni.navigateBack({
// delta: parseInt(self.delta)
// });
//#endif
// #ifndef H5
// uni.navigateBack({
// delta: 1
// });
//#endif
// });
// console.log(res, '添加成功');
// 跳到添加成功
if (res.msg == '添加成功') {
uni.navigateTo({
url: '/pages/user/my-bank-card/my-successfully-edit-bank-card/my-successfully-edit-bank-card'
})
} else {
uni.showToast({
title: '添加失败',
duration: 1000,
icon: 'none'
});
}
});
},
/*清空数据*/
formReset: function(e) {
console.log('清空数据');
},
}
}
script>
<style scoped>
page {
background: #F8F9FA;
}
.my-add-bank-card {
display: flex;
flex-direction: column;
}
.my-add-bank-card-box {
width: 686rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
margin: 20rpx 32rpx 80rpx 32rpx;
padding: 24rpx 30rpx 0rpx 30rpx;
box-sizing: border-box;
}
.add-card-tit {
font-size: 36rpx;
font-family: Source Han Sans-Medium, Source Han Sans;
font-weight: 500;
color: #333333;
line-height: 50rpx;
font-weight: bold;
}
.add-card-list1 {
padding-top: 12rpx;
padding-bottom: 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
}
.add-card-list-name1 {
font-size: 32rpx;
font-family: Source Han Sans-Regular, Source Han Sans;
font-weight: 400;
color: #3D3D3D;
line-height: 52rpx;
}
.add-card-list1-ipt {
margin-left: 24rpx;
}
.add-card-list {
padding-bottom: 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
}
.bankCardSub {
width: 554rpx;
height: 84rpx;
background: #891F50;
border-radius: 137rpx 137rpx 137rpx 137rpx;
opacity: 1;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
font-family: Source Han Sans-Regular, Source Han Sans;
font-weight: 400;
color: #FFFFFF;
line-height: 36rpx;
}
.bankCardSub button {
width: 554rpx;
height: 84rpx;
background: #891F50;
border-radius: 137rpx 137rpx 137rpx 137rpx;
opacity: 1;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
font-family: Source Han Sans-Regular, Source Han Sans;
font-weight: 400;
color: #FFFFFF;
line-height: 36rpx;
}
style>
最后
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！