JiangxiMiniProgram/pages/indexEntry/enroll/registInfo/registInfo.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="报名信息确认"></topNavbar>
		<view class="pad">
			<view class="card">
				<view class="row">
					<view class="lab">扫描教练二维码</view>
					<view class="rightCon">
						<view class="scan">扫一扫</view>
					</view>
				</view>
			</view>
			
			<view class="card">
				<view class="row">
					<view class="lab">选择驾校</view>
					<view class="rightCon">
						<view class="row">
							<view class="val">
								<input v-model="form.classModel"   placeholder="请选择"   @click="showSchool=true" disabled/></input>
							</view>
							<view class="arrow">
								<u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="row">
					<view class="lab">选择车型</view>
					<view class="rightCon">
						<view class="row">
							<view class="val">
								<input v-model="form.classModel"   placeholder="请选择"   @click="showSchool=true" disabled/></input>
							</view>
							<view class="arrow">
								<u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="row">
					<view class="lab">选择班型</view>
					<view class="rightCon">
						<view class="row">
							<view class="val">
								<input v-model="form.classModel"   placeholder="请选择"   @click="showSchool=true" disabled/></input>
							</view>
							<view class="arrow">
								<u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="row">
					<view class="lab">选择教练</view>
					<view class="rightCon">
						<view class="row">
							<view class="val">
								<input v-model="form.classModel"   placeholder="请选择"   @click="showSchool=true" disabled/></input>
							</view>
							<view class="arrow">
								<u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="card">
				<view class="row">
					<view class="lab">业务类型</view>
					<view class="rightCon">
						<u-radio-group
						    v-model="form.radiovalue1"
						  >
						    <u-radio
						      :customStyle="{marginRight: '24rpx'}"
						      v-for="(item, index) in radiolist1"
						      :key="index"
						      :label="item.name"
						      :name="item.id"
						    >
						    </u-radio>
						  </u-radio-group>
					</view>
				</view>
			</view>
			
			<view class="card">
				<view class="row">
					<view class="lab">是否异地转入</view>
					<view class="rightCon" style="margin-left: 40rpx;">
						<u-radio-group
						    v-model="form.radiovalue2"
							@change="changeVal"
						  >
						    <u-radio
						      :customStyle="{marginRight: '24rpx'}"
						      v-for="(item, index) in radiolist2"
						      :key="item.id"
						      :label="item.name"
						      :name="item.id"
						    >
						    </u-radio>
						  </u-radio-group>
					</view>
				</view>
			</view>
			
			<view class="card" v-if="form.radiovalue1==2">
				<view class="row">
					<view class="lab">原驾驶证号</view>
					<view class="rightCon">
						<view class="row">
							<view class="val">
								<input v-model="form.classModel"   placeholder="请选择"   @click="showSchool=true" disabled/></input>
							</view>
						</view>
					</view>
				</view>
				<view class="row">
					<view class="lab">驾驶证初领日期</view>
					<view class="rightCon" style="margin-left: 56rpx;">
						<view class="row">
							<view class="val">
								<input v-model="form.classModel"   placeholder="请选择"   @click="showSchool=true" disabled/></input>
							</view>
							<view class="arrow">
								<u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="row">
					<view class="lab">原准驾车型</view>
					<view class="rightCon">
						<view class="row">
							<view class="val">
								<input v-model="form.classModel"   placeholder="请选择"   @click="showSchool=true" disabled/></input>
							</view>
							<view class="arrow">
								<u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="card" v-if="form.radiovalue2==2">
				<view class="row">
					<view class="lab">来源城市</view>
					<view class="rightCon">
						<view class="row">
							<view class="val">
								<input v-model="form.classModel"   placeholder="请选择"   @click="showSchool=true" disabled/></input>
							</view>
							<view class="arrow">
								<u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="row">
					<view class="lab">已过科目</view>
					<view class="rightCon">
						<view class="row">
							<view class="val">
								<input v-model="form.classModel"   placeholder="请选择"   @click="showSchool=true" disabled/></input>
							</view>
							<view class="arrow">
								<u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="row">
					<view class="lab">待学科目</view>
					<view class="rightCon">
						<view class="row">
							<view class="val">
								<input v-model="form.classModel"   placeholder="请选择"   @click="showSchool=true" disabled/></input>
							</view>
							<view class="arrow">
								<u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="card">
				<view class="row">
					<view class="lab">学费</view>
					<view class="rightCon">
						<view class="row">
							<view class="val">￥100</view>
						</view>
					</view>
				</view>
				<view class="row">
					<view class="lab">代收费</view>
					<view class="rightCon">
						<view class="row">
							<view class="val">￥100</view>
						</view>
					</view>
				</view>
				<view class="row">
					<view class="lab">合计</view>
					<view class="rightCon">
						<view class="row">
							<view class="val blue">￥100</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="card">
				<view class="row">
					<view class="lab">支付形式</view>
					<view class="rightCon">
						<u-radio-group
						    v-model="form.radiovalue3"
						  >
						    <u-radio
						      :customStyle="{marginRight: '24rpx'}"
						      v-for="(item, index) in radiolist3"
						      :key="index"
						      :label="item.name"
						      :name="item.name"
						    >
						    </u-radio>
						  </u-radio-group>
					</view>
				</view>
			</view>
			
			<view class="card">
				<view class="row">
					<view class="lab">优惠券</view>
					<view class="rightCon">
						<view class="row">
							<view class="val red">-￥1000</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="card">
				<view class="row">
					<view class="lab">待支付金额</view>
					<view class="rightCon">
						<view class="row">
							<view class="val blue">￥100</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btnBg" @click="confirmClick">确认</view>
		</view>
		<u-popup :show="showPopup" mode="center" :round="8" >
			<comfigPopup @comfigClick="comfigClick"/>
		</u-popup>
	</view>
</template>

<script>
	import comfigPopup from './comp/comfigPopup'
	export default {
		components: { comfigPopup },
		data() {
			return {
				showPopup: false,
				form: {
					radiovalue2: 1,
					radiovalue1: 1,
				},
				showSchool: false,
				radiolist1:  [ {name: '初领', id: 1}, {name: '增驾', id: 2}],
				radiolist2: [ {name: '是', id: 1}, {name: '否', id: 2}],
				radiolist3: [ {name: '全款', id: 1}, {name: '预付款', id: 2}]
			}
		},
		methods: {
			changeVal(val) {
				console.log(val)
			},
			// 点击确认
			confirmClick() {
				this.showPopup = true
			},
			comfigClick(val) {
				console.log(val)
				this.showPopup = false
				if(val) {
					this.$goPage('/pages/indexEntry/enroll/signContract/signContract')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pad {
		padding-bottom: 66rpx;
	}
	.card {
		padding: 10rpx 40rpx 10rpx 32rpx;
		margin-bottom: 20rpx;
	  .row {
		  height: 100rpx;
		  display: flex;
		  align-items: center;
		  width: 100%;
	    .lab {
			width: 152rpx;
			line-height: 100rpx;
			white-space: nowrap;
	    }
		.scan {
			margin-left: auto;
			width: 130rpx;
			height: 60rpx;
			background: rgba(25,137,250,0.1);
			border-radius: 8rpx;
			border: 2rpx solid #1989FA;
			background: #E8F3FE;
			text-align: center;
			line-height: 60rpx;
			color: $themC;
		}
	    .rightCon {
			flex: 1;
			width: 0;
			display: flex;
	      .val {
			flex: 1;
			width: 0;
			input {
				font-size: 28rpx;
			}
			&.blue {
				color:  $themC;
			}
			&.red {
				color:  #FF6A2A;
			}
	      }
	
	      .icon {
			  width: 30rpx;
			  height: 30rpx;
	        u-icon {
	
	        }
	      }
	    }
	  }
	}
	.btnBg {
		width: 396rpx;
		margin: 100rpx auto  0 auto;
	}
</style>