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

<template>
	<view class="pageBgImg">
		<topNavbar title="报名信息确认"></topNavbar>
		<view class="pad">
			<!-- #ifndef H5 -->
			<view class="card">
				<view class="row">
					<view class="lab">扫描教练二维码</view>
					<view class="rightCon">
						<view class="scan" @click="scanCodeFn">扫一扫</view>
					</view>
				</view>
			</view>
			<!-- #endif -->
			
			<view class="card">
				<view class="row" >
					<view class="lab">选择驾校</view>
					<view class="rightCon">
						<view class="row" @click="showSchool=true">
							<view class="val">
								<mySelect :value="form.school"/>
							</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" @click="showCarClick">
							<view class="val">
								<mySelect :value="form.car"/>
							</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"  @click="showClassModel=true">
							<view class="val">
								<mySelect :value="form.classModel"/>
							</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" @click="goCoach">
						<view class="row" >
							<view class="val">
								<mySelect :value="form.coach"/>
							</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 long">原驾驶证号</view>
					<view class="rightCon">
						<view class="row">
							<view class="val">{{ form.certificateCodeShow }}</view>
						</view>
					</view>
				</view>
				<view class="row">
					<view class="lab long">驾驶证初领日期</view>
					<view class="rightCon">
						<view class="row" @click="showFirstLicenceTime=true" >
							<view class="val">
								<mySelect :value="form.firstLicenceTime"/>
							</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 long">原准驾车型</view>
					<view class="rightCon">
						<view class="row" @click="showOldDriveModel=true" >
							<view class="val">
								<mySelect :value="form.oldDriveModel"/>
							</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==1">
				<view class="row">
					<view class="lab">来源城市</view>
					<view class="rightCon">
						<view class="row">
							<view class="val">
								<mySelect :value="form.classModel"/>
							</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" @click="showSubjectPass=true">
							<view class="val">
								<mySelect :value="form.subjectPass"/>
							</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" @click="showSubjectTreat=true">
							<view class="val">
								<mySelect :value="form.subjectTreat"/>
							</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 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>
		
		<u-popup :show="showSchool" mode="bottom" :round="8"  @close="showSchool=false">
			<searchSchool @chooseSchool="chooseSchool"/>
		</u-popup>
		
		<!-- 选择班型 -->
		<u-picker :show="showClassModel" :columns="columnsClassModel" keyName="label" @confirm="confirmClassModel" @cancel="showClassModel=false"></u-picker>
		<!-- 选择车型 -->
		<u-picker :show="showCar" :columns="columnsCar" keyName="label" @confirm="confirmCar" :closeOnClickOverlay="true" @cancel="showCar=false"></u-picker>
		<!-- 原驾驶证初领日期 -->
		<u-datetime-picker :show="showFirstLicenceTime"  mode="date"  @confirm="confirmFirstLicenceTime"></u-datetime-picker>
		<!-- 原驾驶证学驾车型 -->
		<u-popup :show="showOldDriveModel" mode="bottom" :round="8"  @close="showOldDriveModel=false">
			<oldDrive @pickerOldDrive="pickerOldDrive"/>
		</u-popup>
		<!-- 已过科目 -->
		<u-picker :show="showSubjectPass" :columns="columnsSubject" keyName="label" @confirm="confirmSubjectPass" @cancel="showSubjectPass=false"></u-picker>
		<!-- 待科目 -->
		<u-picker :show="showSubjectTreat" :columns="columnsSubject" keyName="label" @confirm="confirmTreat" @cancel="showSubjectTreat=false"></u-picker>
		
	</view>
</template>

<script>
	import comfigPopup from './comp/comfigPopup'
	import searchSchool from './comp/searchSchool'
	import oldDrive from './comp/oldDrive'
	export default {
		components: { comfigPopup, searchSchool, oldDrive },
		data() {
			return {
				showPopup: false,
				showClassModel: false,
				showCar: false,
				showFirstLicenceTime: false,
				showOldDriveModel: false,
				showSubjectPass: false,
				showSubjectTreat: false,
				columnsClassModel: [
					[
						{
							label: '普通班型',
							id: 1
						},
						{
							label: 'vip班型',
							id: 2
						}
					]
				],
				columnsSubject: [
					[
						{label: '科目一', id: 1},
						{label: '科目二', id: 2},
						{label: '科目三', id: 3},
					]
				],
				columnsCar: [],
				form: {
					school: '',
					classModel: '',
					car: '',
					coach: '',
					certificateCodeShow: '原驾驶证号xxx',
					firstLicenceTime: '',
					oldDriveModel: '',
					subjectPass: '',
					subjectTreat: '',
					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}]
			}
		},
		onLoad() {
			uni.$on('upDateCoachItem',(item)=>{
				console.log(item)
				this.form.coach = item.name
			})
		},
		methods: {
			// 选择驾校
			chooseSchool(item) {
				this.form.school = item.name
				this.form.schoolId = item.id
				this.columnsCar = [item.businessScope.split(',')]
				console.log(this.columnsCar)
				this.showSchool = false
			},
			// 选择班型
			confirmClassModel(val) {
				let item = val.value[0]
				console.log(item)
				this.showClassModel = false
				this.form.classModel = item.label
			},
			// 选择车型
			confirmCar(val) {
				let item = val.value[0]
				console.log(item)
				this.showCar = false
				this.form.car = item
			},
			showCarClick() {
				if(!this.form.school)  return this.$u.toast('请先选择驾校')
				this.showCar = true
			},
			// 跳转到选择教练
			goCoach() {
				if(!this.form.schoolId) return this.$u.toast('请先选择驾校')
				this.$goPage('/pages/indexEntry/enroll/registInfo/chooseCoach/chooseCoach?schoolId=' + this.form.schoolId)
			},
			// 选择原驾驶证初领日期
			confirmFirstLicenceTime(val) {
				console.log(val)
				this.form.firstLicenceTime = uni.$u.timeFormat(val.value, 'yyyy-mm-dd');
				this.showFirstLicenceTime = false
			},
			// 选择原准驾车型
			pickerOldDrive(val) {
				this.form.oldDriveModel = val
				this.showOldDriveModel = false
				console.log(val)
			},
			// 选择已过科目
			confirmSubjectPass(val) {
				let item = val.value[0]
				this.form.subjectPass = item.label
				this.showSubjectPass = false
			},
			// 选择已过科目
			confirmTreat(val) {
				let item = val.value[0]
				this.form.subjectTreat = item.label
				this.showSubjectTreat = false
			},
			// 扫码
			scanCodeFn() {
				let _this = this
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						
					}
				});
			},
			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;
			&.long {
				width: 230rpx;
			}
	    }
		.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>