当前位置： 首页 > news >正文

前端uniapp提交表单调用接口方法最新

news 2025/6/25 12:55:03

目录

    • 源码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.lryc.cn/news/217333.html

相关文章：

  • OpenFeign的简单介绍和功能实操
  • webpack 高级
  • OLE DB 访问接口所需的(最大)数据长度为 18，但返回的数据长度为 6。
  • oracle （9）Storage Relationship Strut
  • React 项目结构小结
  • 4.网络之TCP
  • 电池原理与分类
  • Mongoose 开源库--Filesystem（文件系统）使用笔记
  • 新兴初创企业参展招募
  • 【Linux】Nginx安装使用负载均衡及动静分离（前后端项目部署），前端项目打包
  • 银行和金融企业为何青睐这8款项目管理工具
  • 一分钟理解npm run dev 和 npm run serve
  • HTTP 协议请求头 If-Match、If-None-Match 和 ETag
  • DAY42 1049.最后一块石头的重量II + 494.目标和 + 474.一和零
  • uniapp原生插件之安卓华为统一扫码HMS Scan Kit
  • 数模国赛——多波束测线问题模型建立研究分析
  • [AUTOSAR][诊断管理][ECU][$37] 请求退出传输。终止数据传输的（上传/下载）
  • vue+canvas实现横跨整个页面的动态的波浪线（贝塞尔曲线）
  • LeetCode算法题解|​ 669. 修剪二叉搜索树​、108. 将有序数组转换为二叉搜索树、​538. 把二叉搜索树转换为累加树​
  • 直播界很火的无线领夹麦克风快充方案 Type-C接口 PD快充+无线麦克风可同时进行
  • Jmeter 汉化中文语言
  • centos9 stream 下 rabbitmq高可用集群搭建及使用
  • 代码随想录算法训练营第10天|232. 用栈实现队列 225. 用队列实现栈
  • 线上Kafka集群如何调整消息存储时间
  • [迁移学习]DA-DETR基于信息融合的自适应检测模型
  • 【MATLAB】全网唯一的13种信号分解+FFT傅里叶频谱变换联合算法全家桶
  • Nginx安装与配置
  • linux笔记总结-基本命令
  • [PHP]禅道项目管理软件ZenTaoPMS源码包 v16.4
  • Required String parameter ‘name‘ is not present