微信小程序表单多页面步骤提交

最新推荐文章于 2024-09-20 16:35:29 发布
最新推荐文章于 2024-09-20 16:35:29 发布
阅读量612 收藏 2
点赞数
文章标签： html web css 数据可视化 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mo3408/article/details/122228226
版权

1.实现的效果：

​

​

具体实现代码：

<view class="cu-modal bottom-modal" :class="modalName=='means'?'show':''">
				<view class="action" @tap="hideModal">
					<text class="cuIcon-unfold text-white"></text>
				</view>
				<uni-forms :value="formData" ref="form">
					<view class="cu-dialog" id="chooseType" :class="currentBoxId == 'chooseType' ? 'show' : 'hidden'" @tap.stop=""
					 style="background-color: #FFFFFF;">
						<!-- <view id="findOuter"> -->
						<view class="flex  justify-between solid-bottom" style="background-color: #FFFFFF;">
							<view class="padding-sm margin-xs radius" style="font-size: 14px;font-weight: bold;">贷款认证</view>

						</view>
						<view class="flex  justify-start" style="background-color: #FFFFFF;">
							<view class="padding-sm margin-xs radius" style="font-size: 14px;font-weight: bold;">身份证信息<text class="cuIcon-triangledownfill sm text-black"></text>认证</view>

						</view>
						<view class="flex justify-center" style="background-color: #FFFFFF;">
							<view class="">
								<image src="http://img.mo3408.icu/img/c1.png" style="width:185px;height:100px;" class=""></image>
								<view class="" style="color: #c8c8c8;">点击上传身份证正面</view>
							</view>
							<view class="">
								<image src="http://img.mo3408.icu/img/c2.png" style="width:185px;height:100px;" class=""></image>
								<view class="" style="color: #c8c8c8;">点击上传身份证反面</view>
							</view>
						</view>
						<view class="flex justify-center" style="background-color: #FFFFFF;color:#707070;margin-top:10rpx;">核对信息，确认无误</view>
						<view class="cu-form-group margin-top justify-center" style="width:450rpx;margin:0 auto;">
							<view class="title">姓名</view>
							<input placeholder="点击输入姓名" name="name" placeholder-style="font-size:24rpx;"></input>
						</view>
						<view class="cu-form-group justify-center" style="width:450rpx;margin:0 auto;">
							<view class="title">身份证号</view>
							<input placeholder="点击输入身份证号" name="card" placeholder-style="font-size:24rpx;"></input>
						</view>
						<uni-group style="margin-top:20rpx;color: #d7d7d7;">
							<view style="padding-left: 18rpx;"> <text class="cuIcon-title sm"></text>请按照提示例图将身份证拍照上传 </view>
							<view> <text class="cuIcon-title sm"></text>图片模糊、遮挡,光线暗不予通过</view>
							<view style="padding-left: 71rpx;"> <text class="cuIcon-title sm"></text>请审核信息是否正确,若有五请手动更改 </view>

						</uni-group>
						<view class="justify-center" style="margin-top:5rpx;">{{pag}}/{{totp}}</view>
						<view class="padding flex flex-direction">
							<button class="cu-btn bg-black lg" id="chooseTypenext" @tap="changeBox">下一步</button>
						</view>
					</view>
					<!-- 第二步 -->
					<view class="cu-dialog" id="viewInstruction" :class="currentBoxId == 'viewInstruction' ? 'show' : 'hidden'">
						<view class="flex  justify-between solid-bottom" style="background-color: #FFFFFF;">
							<view class="padding-sm margin-xs radius" style="font-size: 14px;font-weight: bold;">贷款认证</view>

						</view>
						<view class="flex  justify-start" style="background-color: #FFFFFF;">
							<view class="padding-sm margin-xs radius" style="font-size: 14px;font-weight: bold;">户口簿信息<text class="cuIcon-triangledownfill sm text-black"></text>认证</view>

						</view>
						<view class="flex justify-center" style="background-color: #FFFFFF;">
							<view class="">
								<image src="http://img.mo3408.icu/img/h1.png" style="width:185px;height:100px;" class=""></image>
								<view class="" style="color: #c8c8c8;">点击上传户口页</view>
							</view>
							<view class="">
								<image src="http://img.mo3408.icu/img/h1.png" style="width:185px;height:100px;" class=""></image>
								<view class="" style="color: #c8c8c8;">点击上传身本人页</view>
							</view>
						</view>
						<view class="flex justify-center padding" style="background-color: #FFFFFF;color:#707070;margin-top:10rpx;">核对信息，确认无误</view>
						<uni-group style="margin-top:20rpx;color: #d7d7d7;background-color: #FFFFFF;">
							<view style="padding-left: 18rpx;background-color: #FFFFFF;"> <text class="cuIcon-title sm"></text>请按照提示例图将户口簿拍照上传
							</view>
							<view style="background-color: #FFFFFF;"> <text class="cuIcon-title sm"></text>图片模糊、遮挡,光线暗不予通过</view>
							<view style="padding-left: 71rpx;background-color: #FFFFFF;"> <text class="cuIcon-title sm"></text>请审核信息是否正确,若有五请手动更改
							</view>

						</uni-group>
						<view class="justify-center" style="margin-top:5rpx;background-color: #FFFFFF;">{{pag}}/{{totp}}</view>
						<view class="padding flex flex-direction" style="background-color: #FFFFFF;">
							<!-- <button class="cu-btn bg-black lg" style="margin-left:10rpx;" id="viewInstructionPrev" @tap="changeBox">上一步</button> -->
							<button class="cu-btn bg-black lg " id="viewInstructionNext" @tap="changeBox">下一步</button>
						</view>

					</view>
					<!-- 第三步 -->
					<view class="cu-dialog" id="fillInInformation" :class="currentBoxId == 'fillInInformation' ? 'show' : 'hidden'">
						<view class="flex  justify-between solid-bottom" style="background-color: #FFFFFF;">
							<view class="padding-sm margin-xs radius" style="font-size: 14px;font-weight: bold;">贷款认证</view>

						</view>
						<view class="flex  justify-start" style="background-color: #FFFFFF;">
							<view class="padding-sm margin-xs radius" style="font-size: 14px;font-weight: bold;">婚姻信息<text class="cuIcon-triangledownfill sm text-black"></text>认证</view>

						</view>

						<uni-group>
							<view class="text" style="float: left;font-size: 30rpx;line-height: 27px;">婚姻状况</view>
							<uni-forms-item name="hy" label="婚姻状况">
								<uni-data-checkbox v-model="formData.hy" :localdata="hy"></uni-data-checkbox>
							</uni-forms-item>

						</uni-group>
						<view class="flex justify-center padding" style="background-color: #FFFFFF;">
							<view class="">
								<image src="http://img.mo3408.icu/img/hy1.png" style="width:185px;height:100px;" class=""></image>
								<view class="" style="color: #c8c8c8;">点击上传本人页</view>
							</view>
							<view class="">
								<image src="http://img.mo3408.icu/img/hy1.png" style="width:185px;height:100px;" class=""></image>
								<view class="" style="color: #c8c8c8;">点击上传配偶页</view>
							</view>
						</view>
						<view class="flex justify-center padding" style="background-color: #FFFFFF;color:#707070;margin-top:10rpx;">核对信息，确认无误</view>
						<uni-group style="margin-top:20rpx;color: #d7d7d7;background-color: #FFFFFF;">
							<view style="padding-left: 66rpx;background-color: #FFFFFF;"> <text class="cuIcon-title sm"></text>请按照提示例图将婚姻登记证拍照上传
							</view>
							<view style="background-color: #FFFFFF;"> <text class="cuIcon-title sm"></text>图片模糊、遮挡,光线暗不予通过</view>
							<view style="padding-left: 71rpx;background-color: #FFFFFF;"> <text class="cuIcon-title sm"></text>请审核信息是否正确,若有五请手动更改
							</view>

						</uni-group>
						<view class="justify-center" style="margin-top:5rpx;background-color: #FFFFFF;">{{pag}}/{{totp}}</view>
						<view class="padding flex flex-direction" style="background-color: #FFFFFF;">
							<!-- <button class="cu-btn bg-black lg" style="margin-left:10rpx;" id="viewInstructionPrev" @tap="changeBox">上一步</button> -->
							<button class="cu-btn bg-black lg " id="fillInInformationNext" bindtap="changeBox">下一步</button>
						</view>
						<!-- <button id="fillInInformationPrev" bindtap="changeBox">上一步</button> -->

					</view>
				</uni-forms>
			</view>
点击并拖拽以移动
	changeBox(e) {
				let currentFlag = e.currentTarget.id;
				switch (currentFlag) {
					case 'chooseTypenext':

						this.currentBoxId = 'viewInstruction';
						this.pag = 2;
						break;
						// case 'viewInstructionPrev':

						//    this.currentBoxId='chooseType';
						//    this.pag=1;
						//   break;
					case 'viewInstructionNext':

						this.currentBoxId = 'fillInInformation';
						this.pag = 3;
						break;
					case 'fillInInformationPrev':

						this.currentBoxId = 'viewInstruction';
						this.pag = 4;
						break;
					case 'fillInInformationNext':

						this.currentBoxId = 'finish';
						this.pag = 5;
						break;
					case 'finishPrev':

						this.currentBoxId = 'fillInInformation';
						this.pag = 6;
						break;
					default:

						this.currentBoxId = 'viewInstruction';
						this.pag = 7;
						break;
				}

			},
微信小程序表单多步骤实现方法
12-30 1167
1.实现的效果： 具体实现代码： <view class="cu-modal bottom-modal" :class="modalName=='means'?'show':''"> <view class="action" @tap="hideModal"> <text class="cuIcon-unfold text-white"></text> </view> <uni-forms :
微信小程序开发中的表单提交与数据验证
wx_linying1029的博客
07-16 417
微信小程序中的数据验证通常分为前端验证和后端验证两个部分。前端验证主要用于对用户输入的数据进行基本的格式检查，以确保数据的有效性，后端验证则在服务器端对用户提交的数据进行详细的验证和处理。在上述代码中，我们使用wx.request函数发送一个POST请求，将表单数据发送到服务器端的https://www.example.com/submit接口，并在成功或失败的回调函数中处理返回的结果。微信小程序开发中的表单提交与数据验证是开发过程中重要的一部分，它涉及到用户输入数据的有效性验证和数据的保存与提交操作。
优雅的用户体验：微信小程序中的多步骤表单引导
希望看完文章的你能够带着答案离开
10-23 1538
优雅的用户体验：微信小程序中的多步骤表单引导
微信小程序之表单组件
最新发布
xlsw_的博客
09-20 982
picker。
微信小程序之加载更多（分页加载）实例
HuLuWa1997的博客
11-19 2131
1.业务需求：列表滚动到底部时，继续往上拉，加载更多内容 2.必传参数： （1）page: 1 //第几次加载 （2）limit: 5//每次加载的显示数据条数 （3）total: null //需要返回数据的个数 3.其他参数： 根据接口的传所需参数 4.实现原理： 当第一次访问接口时，传递三个必备参数和其他参数（需要搜索的字符串）给后台，后台返回第一次数据过来。在请求成功的的回调函数中，判断返回的数据是否>0，是，则取出数据，渲染视图层，并把“上拉加载”显示在列表底部；否，则没有数据可取，并把“没
微信小程序返回多级页面的实现方法
08-29
主要介绍了微信小程序返回多级页面的实现方法的相关资料,希望通过本文能帮助到大家，让大家实现这样的功能，需要的朋友可以参考下
微信 小程序布局 提交表单
weixin_30662849的博客
12-08 215
<view class='hong-contant'> <form bindsubmit="teformSubmit"> <view class='contant-teamwork'> <view class='teamwork-inputs'> <view class='inputs-box flexba'> <te...
微信小程序表单验证form提交错误提示效果
10-18
本文将详细介绍微信小程序表单验证与提交时，如何设计错误提示效果以提升用户体验，以下是详细介绍。 ### 微信小程序表单验证原理 微信小程序的表单验证是指对用户在表单中输入的数据进行合法性校验。小程序提供了...
微信小程序-竖向步骤条组件
01-26
为了实现这样一个竖向步骤条组件，开发者需要掌握微信小程序的基础知识，包括WXML（结构模板语言）、WXSS（样式语言）以及JavaScript（逻辑处理）。在编写代码时，需要理解组件的生命周期、数据绑定和事件处理机制。...
微信小程序同时上传表单及图片 解决wx.uploadFile与wx.request不能同时进行
weixin_40938312的博客
12-31 3994
参考 参考 简单来说是先执行upload到后台，controller将图片保存到服务器后将图片路径通过json返回小程序，在upload sucess时setData存储路径。然后调用wx.request var that=this; wx.uploadFile({ url: 'http://127.0.0.1:8080/xcxmvc/film/uploadPic',// ...
微信小程序多文件上传并提交表单数据
a2667486939的博客
01-14 3684
问题描述 最近在做一个项目时微信小程序端需要上传多张图片，并且还需要提交数据。 后台的设计是图片与该数据的实体类是多对一关系，使用SpringDataJpa进行数据保存，因此需要图片和数据同时提交到服务端进行保存。 但微信小程序只提供了单文件上传，不满足我的需求 https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html wx.chooseImage({ success (res) {
小程序提交表单和文件
weixin_42516611的博客
09-05 4038
ž这几天写微信小程序掉了很多坑，今天和大家分享分享小程序的提交表单上传文件 不多说 直接上代码 第一次写 不喜勿喷
微信小程序 表单添加 提交以及验证
lh25946的博客
08-06 623
wxml页面 <!-- <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">手机号授权登录</button> --> <l-steps active-index="{{show}}"> <l-step title="主体认证"> </l-step> <l-step title="选择等级"></l-step>
使用form表单同时实现上传文件和提交文本数据
weixin_33847182的博客
12-12 6188
2019独角兽企业重金招聘Python工程师标准>>> ...
微信小程序提交form表单内容
前端视听
07-02 1887
wxml <form catchsubmit="confirmPublish"> <view class="cu-form-group margin-top"> <view class="title d-flex"> 姓名 </view> <view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100
微信小程序 云开发 提交表单数据和表单里上传的多张图片一起提交到数据库里完整代码
qq_45382502的博客
01-16 3277
JS代码： const db = wx.cloud.database() Page({ data: { xingming: '', xingbie: '', aihao: [], flog: true, imageList: [], }, formSubmit: function (e) { console.log("ad", e.detail.value); var that = this
微信小程序（五十八）分步表单多页面传值
不起眼小菜菜的博客
03-13 957
注释很详细，直接上代码……
form表单同时提交带文本和图片的数据
热门推荐
Aquilian的专栏
07-09 1万+
方法一：使用ajax异步提交 此种方法的好处是可以回调响应结果。 html代码： <form action="${basePath}/save" method="post" name="form" id="form"> <table> <tr> <td>名称：</td> ...
微信小程序uploader上传文件并提交表单数据完整案例（接口框架WebAPI）
留白空间
07-30 1万+
文章目录写在前面的话uploader介绍用法与代码小程序前端后台接口 WebAPI采坑记录 写在前面的话 最近又自己在折腾微信小程序了。最新的一个功能中需要实现图片上传。幸运的是，微信小程序扩展能力中有现成的文件上传组件uploader可以使用，而不幸的是，这个组件坑实在太多了，而我又不是单纯的文件上传，还需要同步上传表单数据，因此各种坑，要么就是数据传不过去，要么就是后台取不到数据，折腾了我一天，各种尝试，终于搞定了。前后端完整用法记录一下，希望大家都能快速上手~ uploader介绍 uploader是
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瑆箫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值