表单调用接口方法最新"/>
前端uniapp提交表单调用接口方法最新
目录
- 源码1
- 源码2
- 最后
源码1
<template><view class="my-add-bank-card"><!-- name="bank_name" form表单提交的input里面一定要加name绑定要传的参数 name="bank_name" type="text" v-model="address.bank_name" 一定要name和 v-model参数保持一致！！！--><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><!-- 弹窗地址传参数 --><!-- <mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker> --></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"><!-- name="bank_name" form表单提交的input里面一定要加name绑定要传的参数 name="bank_name" type="text" v-model="address.bank_name" 一定要name和 v-model参数保持一致！！！--><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><!-- 弹窗地址传参数 --><!-- <mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker> --></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; // 这个就是特殊的上一个页面传过来的参数idif (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>
最后
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！
更多推荐
前端uniapp提交表单调用接口方法最新
发布评论