hg_zlxc_h5/pages/learnDriveStep/step/step3formValidation.vue

<template>
	<view class="formValidation">
		<view class="blueTxt">
			您的报名信息如下：请确定无误后提交
		</view>
		<view class="ul">
			<view class="li">
				<view class="lab">真实姓名</view>
				<view class="val">{{info.realName}}</view>
			</view>
			<view class="li">
				<view class="lab">报名驾校</view>
				<view class="val">{{schoolName}}</view>
			</view>
			<view class="li">
				<view class="lab">班型</view>
				<view class="val">{{info.trainingClassLable}}</view>
			</view>
			<view class="li">
				<view class="lab">考场训练时长</view>
				<view class="val">{{info.timeName}}</view>
			</view>
			<view class="li">
				<view class="lab">性别</view>
				<view class="val">{{info.sex==2?'女':'男'}}</view>
			</view>
			<view class="li">
				<view class="lab">证件类型</view>
				<view class="val">身份证</view>
			</view>
			<view class="li">
				<view class="lab">证件号码</view>
				<view class="val">{{info.certificateCodeShow}}</view>
			</view>
			<view class="li">
				<view class="lab">业务类型</view>
				<view class="val">{{info.businessTypeName}}</view>
			</view>
		</view>
		<view class="btn">
			<view  :class="{hui: countdown}">
				<oneBtn :text="text" style="margin-bottom: 20rpx;" @oneBtnClick="oneBtnClick(1)"></oneBtn>
			</view>
			<oneBtn text="返回修改" :border="true" @oneBtnClick="oneBtnClick(0)"></oneBtn>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['info','schoolName'],
		data () {
			return {
				countdown: 10,
				text: '倒计时10秒'
			}
		},
		created() {
			let timer = setInterval(()=>{
				this.countdown--
				this.text = '倒计时' + this.countdown + '秒'
				if(this.countdown==0) {
					clearInterval(timer)
					this.countdown = 0
					this.text = '继续提交'
				}
			},1000)
		},
		methods: {
			oneBtnClick(num) {
				this.$emit('oneBtnClick',num)
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.hui {
		opacity: 0.5;
	}
	.formValidation {
		width: 100%;
		padding: 0 32rpx;
	  .blueTxt {
		width: 100%;
		font-size: 28rpx;
		padding: 30rpx 0;
		color: #3593FB;
		text-align: center;
	  }
	
	  .ul {
		  width: 100%;
	    .li {
			width: 100%;
			height: 72rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
	      .lab {
			color: #666;
	      }
	
	      .val {
			color: #333;
			font-weight: 700;
	      }
	    }
	  }
	
	  .btn {
		  padding:  30rpx 0;
		  width: 100%;
	    onebtn {
			margin-bottom: 20rpx;
	    }
	  }
	}
</style>