微信小程序表單多頁面步驟提交

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;
				}

			},