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

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="185px;height:100px;" class=""></image>
								<view class="" style="color: #c8c8c8;">点击上传身份证正面</view>
							</view>
							<view class="">
								<image src="http://img.mo3408.icu/img/c2.png" style="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="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="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="185px;height:100px;" class=""></image>
								<view class="" style="color: #c8c8c8;">点击上传户口页</view>
							</view>
							<view class="">
								<image src="http://img.mo3408.icu/img/h1.png" style="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="185px;height:100px;" class=""></image>
								<view class="" style="color: #c8c8c8;">点击上传本人页</view>
							</view>
							<view class="">
								<image src="http://img.mo3408.icu/img/hy1.png" style="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;
				}

			},