前端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>

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/132646.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

flink的起源、概念、特点、应用

flink的起源、概念、特点、应用

flink的起源 Flink的起源可以追溯到2010年&#xff0c;当时它作为一个研究项目开始。该项目最初由德国柏林工业大学&#xff08;Berlin Institute of Technology&#xff09;的一群研究人员发起&#xff0c;包括Matei Zaharia、Kostas Tzoumas和Stephan Ewen等。 项目最初被称为…
阅读更多...
【系统集成项目管理工程师】——6.习题一

【系统集成项目管理工程师】——6.习题一

1.&#xff08;&#xff09; 通过独立的、对网络行为和主机操作提供全面与忠实的记录&#xff0c;方便用户分析与审查事故原因&#xff0c;很像飞机上的黑匣子 A、防火墙&#xff1b;B、扫描器&#xff1b;C、防毒软件&#xff1b;D、安全审计系统 答案&#xff1a;D 2.《GB/…
阅读更多...
【数据结构】排序算法复杂度 及 稳定性分析 【图文详解】

【数据结构】排序算法复杂度 及 稳定性分析 【图文详解】

排序算法总结 前言[ 一 ] 小数据基本排序算法&#xff08;1&#xff09;冒泡排序&#xff08;2&#xff09;直接插入排序 [ 二 ] &#xff08;由基本排序衍生的用作&#xff09;处理大数据处理排序&#xff08;1&#xff09;堆排序&#xff08;2&#xff09;希尔排序 [ 三 ] 大…
阅读更多...
unity中移动方案--物理渲染分层

unity中移动方案--物理渲染分层

一、三种基本移动方案 unity中的移动分为Transform和Rigidbody以及CharacterController&#xff0c;其中CharacterController功能完善&#xff0c;已经可以避免了穿墙&#xff0c;并实现了贴墙走等情况&#xff0c;需要结合性能考虑选择不同的方式。 1.使用transform,直接修改…
阅读更多...
鳄鱼指标的3颜色线都代表什么？澳福官网一段话明白了

鳄鱼指标的3颜色线都代表什么？澳福官网一段话明白了

投资者一直在使用鳄鱼指标进行交易&#xff0c;但是对指标上面的3种颜色的K线都代表什么不明白&#xff1f;直到看到澳福官网一段话才明白&#xff0c;原来这么简单&#xff01; 鳄鱼指标&#xff0c;这一工具是由三条移动平均线组合而成。具体来说&#xff0c;蓝线&#xff0…
阅读更多...
mybatis动态表名

mybatis动态表名

1.基于mybatis官方文档 Configuration public class MybatisPlusConfig {Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor new MybatisPlusInterceptor();DynamicTableNameInnerInterceptor dynamicTableNameInnerIntercep…
阅读更多...
（算法题）最多约数问题

（算法题）最多约数问题

最多约数问题 正整数x的约数是能整除x的正整数。正整数x 的约数个数记为div(x)。例如&#xff0c;1&#xff0c;2&#xff0c;5&#xff0c;10 都是正整数10 的约数&#xff0c;且div(10)4。设a 和b 是2 个正整数&#xff0c;a≤b&#xff0c;找出a和b之间约数个数最多的数x及其…
阅读更多...
Spring Boot 3系列之-启动类详解

Spring Boot 3系列之-启动类详解

Spring Boot是一个功能强大、灵活且易于使用的框架&#xff0c;它极大地简化了Spring应用程序的开发和部署流程&#xff0c;使得开发人员能够更专注于业务逻辑的实现。在我们的Spring Boot 3系列之一&#xff08;初始化项目&#xff09;文章中&#xff0c;我们使用了Spring官方…
阅读更多...
高效开发之：封装抛异常工具类

高效开发之：封装抛异常工具类

一、首先自定义个错误码枚举类 public enum ErrorCode {SUCCESS(0, "ok"),PARAMS_ERROR(40000, "请求参数错误"),NOT_LOGIN_ERROR(40100, "未登录"),NO_AUTH_ERROR(40101, "无权限"),NOT_FOUND_ERROR(40400, "请求数据不存在&qu…
阅读更多...
MVC、MVP、MVI、MVVM、MVVM-C和VIPER等

MVC、MVP、MVI、MVVM、MVVM-C和VIPER等

以下是最重要的架构模式列表&#xff1a; 1、MVC(Model-View-Controller)&#xff1a; 它是最早被采用的设计模式之一。其主要目标是将应用程序的数据、用户界面和控制逻辑分离成三个相互关联的组件。 在这里&#xff0c;模型Model管理数据和逻辑&#xff0c;视图View显示信息…
阅读更多...
桶装水订水系统水厂送水小程序开发；

桶装水订水系统水厂送水小程序开发；

桶装水小程序正式上线&#xff0c;支持多种商品展示形式&#xff0c;会员卡、积分、分销等功能&#xff1b; 开发订水送水小程序系统&#xff0c;基于用户、员工、商品、订单、配送站和售后管理模块&#xff0c;对每个模块进行统计分析&#xff0c;简化了分配过程&#xff0c;提…
阅读更多...
C语言-------------#与##运算符使用分析

C语言-------------#与##运算符使用分析

#运算符 1、#运算符用于在预编译期将宏参数转换为字符串 #include <stdio.h>#define message(X) #X#define CALL(f,p) (printf("This is fuction %s\n",#f),f(p))int square (int n) {return n*n; }int main() {printf("%s\r\n",message(hello…
阅读更多...
【教3妹学编程-算法题】最大单词长度乘积

【教3妹学编程-算法题】最大单词长度乘积

3妹&#xff1a;哇&#xff0c;今天好冷啊&#xff0c; 不想上班。 2哥&#xff1a;今天气温比昨天低8度&#xff0c;3妹要空厚一点啊。 3妹 : 嗯&#xff0c; 赶紧把我的羽绒服找出来穿上&#xff01; 2哥&#xff1a;哈哈&#xff0c;那倒还不至于&#xff0c; 不过气温骤降&…
阅读更多...
【简朴PlainApp】通过浏览器就能管理手机文件的开源利器

【简朴PlainApp】通过浏览器就能管理手机文件的开源利器

简朴PlainApp 简朴是一个开源应用&#xff0c;允许您通过网络浏览器管理您的手机。您可以通过安全、易于使用的网络界面从桌面访问文件、视频、音乐、联系人、短信、通话记录等等&#xff01; 这对于手机上文件较多的朋友来说&#xff0c;从任意电脑上管理手机文件的需求还是挺…
阅读更多...
详解IPD需求分析工具$APPEALS

详解IPD需求分析工具$APPEALS

够让企业生存下去的是客户&#xff0c;所以&#xff0c;众多企业提出要“以客户为中心”&#xff0c;那如何做到以客户为中心&#xff1f;IPD中给出的答案是需求管理。 需求管理流程&#xff0c;是IPD&#xff08;集成管理开发&#xff09;体系中的四大支撑流程之一&#xff0…
阅读更多...
【源码解析】Spring Bean定义常见错误

【源码解析】Spring Bean定义常见错误

案例1 隐式扫描不到Bean的定义 RestController public class HelloWorldController {RequestMapping(path "/hiii",method RequestMethod.GET)public String hi() {return "hi hellowrd";}}SpringBootApplication RestController public class Applicati…
阅读更多...
android 升级后包依赖更新

android 升级后包依赖更新

1、将Android Studio 升级到3.4&#xff08;3.2以上即可&#xff09;&#xff0c;并且将gradle升级到3.4.1&#xff08;3.2.0以上即可&#xff09;&#xff0c;设置targetSdkVersion 28&#xff0c;Project的build.gradle中classpath ‘com.android.tools.build:gradle:3.4.1’…
阅读更多...
基于AOSP源码Android-10.0.0_r41分支编译，framework开发，修改系统默认字体大小

基于AOSP源码Android-10.0.0_r41分支编译，framework开发，修改系统默认字体大小

文章目录 基于AOSP源码Android-10.0.0_r41分支编译&#xff0c;framework开发&#xff0c;修改系统默认字体大小 基于AOSP源码Android-10.0.0_r41分支编译&#xff0c;framework开发&#xff0c;修改系统默认字体大小 主要修改一个地方就行 代码源码路径 frameworks/base/co…
阅读更多...
python df.apply()函数

python df.apply()函数

DataFrame.apply(func, axis0, rawFalse, result_typeNone, args(), by_row‘compat’, kwargs) 沿df的轴应用函数 func:对每行或者每列应用的函数axis{0 or ‘index’, 1 or ‘columns’}, default 0 0是列&#xff0c;1是行 rawbool, default False result_type**{‘expand…
阅读更多...
单通道低压 H 桥电机驱动芯片AT9110H 兼容L9110 马达驱动芯片

单通道低压 H 桥电机驱动芯片AT9110H 兼容L9110 马达驱动芯片

H桥直流电机驱动电路是一种用于控制直流电机运转的电路&#xff0c;其主要特点是可以实现正反转控制&#xff0c;控制电机转速和方向&#xff0c;同时也具有过流保护功能。 H桥电路由四个功率晶体管和一些辅助电路组成&#xff0c;其中两个晶体管用于控制电机正转&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023