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.businessType"
						  >
						    <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" v-if="form.businessType==1">
				<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.firstDriveDate"/>
							</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">
				<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.radiovalue2==1">
				<view class="row" @click="cityShowFn">
					<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.finishSubject"/>
							</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">￥{{ $u.utils.priceTo(form.totalAmount) }}</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" :info="form"/>
		</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="name" @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>
		<!-- 城市 -->
		<u-picker :show="showCity"   ref="uPicker" :columns="[cityArr]" @confirm="confirmCity" @change="changeHandler" keyName="name"></u-picker>
		
	</view>
</template>

<script>
	import comfigPopup from './comp/comfigPopup'
	import searchSchool from './comp/searchSchool'
	import oldDrive from './comp/oldDrive'
	import { areaTree, applyOnline, schoolClass,  } from '@/config/api.js'
	export default {
		components: { comfigPopup, searchSchool, oldDrive },
		data() {
			return {
				showCity: false,
				showPopup: false,
				showClassModel: false,
				showCar: false,
				showFirstLicenceTime: false,
				showOldDriveModel: false,
				showSubjectPass: false,
				showSubjectTreat: false,
				columnsClassModel: [],//班型
				columnsSubject: [
					[
						{label: '科目一', id: 1},
						{label: '科目二', id: 2},
						{label: '科目三', id: 3},
					]
				],
				columnsCar: [],
				form: {
					school: '',
					classModel: '',
					car: '',
					coach: '',
					cardType: 1,
					idcard: '431027199009012316',
					nationality: '中国',
					businessType: '',//业务类型
					certificateCodeShow: '原驾驶证号xxx',
					driveLicence: '',//原驾驶证号 给后端的
					firstDriveDate: '',//原驾驶证初领日期
					sex: 2,
					phone: '18267412456',
					applyType: 1,
					name: '大乔',
					oldTrainType: '',//原准驾车型
					subjectPass: '',
					subjectTreat: '',
					photoPath: '123.png',
					address: '湖南省，郴州市',
					totalAmount: 0
					
				},
				showSchool: false,
				radiolist1:  [ {name: '初领', id: 0}, {name: '增驾', id: 1}],//0：初领，1：增驾，
				radiolist2: [ {name: '是', id: 1}, {name: '否', id: 2}],
				radiolist3: [ {name: '全款', id: 1}, {name: '预付款', id: 2}],
				cityArr: [],
				cityArr2: [],
				cityArr3: []
			}
		},
		onLoad() {
			this.GetDetectInfoEnhancedFn()
			this.form.accountId = this.userId
			this.form.userId = this.userId
			uni.$on('upDateCoachItem',(item)=>{
				console.log(item)
				this.form.coach = item.name
				this.form.coachId = item.id
			})
			this.areaTreeFn()
			let schoolClass = this.$store.state.school.schoolClass
			console.log(schoolClass)
			if(schoolClass.id) {
				this.form.classModel = schoolClass.name
				this.form.school = schoolClass.schoolName
				this.form.schoolId = schoolClass.schoolId
				this.form.car = schoolClass.carType
			}
			
			let schoolCoach = this.$store.state.school.schoolCoach
			console.log(schoolCoach)
			if(schoolCoach.id) {
				this.form.classModel = schoolCoach.name
				this.form.school = schoolCoach.schoolName
				this.form.schoolId = schoolCoach.schoolId
				// this.form.car = schoolClass.carType
			}
			if(this.form.schoolId) {
				this.schoolClassFn()
			}
		},
		methods: {
			
			async schoolClassFn() {
				const {data: res} = await schoolClass({pageNo: 1,pageSize: 100, schoolId: this.form.schoolId})
				this.columnsClassModel = [res.list]
				console.log(this.columnsClassModel)
			},
			cityShowFn() {
				this.showCity = true
				this.$nextTick(()=>{
					let  picker = this.$refs.uPicker
					picker.setColumnValues(1, this.cityArr2[0])
					picker.setColumnValues(2, this.cityArr3[0][0])
				})
				
				// picker = this.$refs.uPicker
			},
			 changeHandler(e) {
				const {
					indexs,
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.cityArr2[index])
					picker.setColumnValues(2, this.cityArr3[index][0])
				}
				if (columnIndex === 1) {
					let index3 = indexs[0]
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(2, (this.cityArr3[index3])[index])
				}
				console.log(indexs[0])
				// console.log(this.cityArr3[index3])
				// console.log(value)
				// console.log(values)
				// console.log(columnIndex)
			},
			// 回调参数为包含columnIndex、value、values
			confirmCity(e) {
				console.log('confirm', e)
				this.showCity = false
			},
			// 获取地区
			async areaTreeFn() {
				// this.cityArr2.push(this.traverse(item.children))
				const {data: res} = await areaTree()
				this.cityArr = res.map(item=>{
					let obj = {
						id: item.id,
						name: item.name
					}
					return obj
				})
				
				this.cityArr2 = res.map(item2=>{
					let arr2 = item2.children
					return arr2.map(val=>{
						let obj = {
							id: val.id,
							name: val.name
						}
						return obj
					})
				})
				
				this.cityArr3 = res.map(item2=>{
					let arr2 = item2.children
					return arr2.map(val=>{
						return val.children.map(val3=>{
							let obj = {
								id: val3.id,
								name: val3.name
							}
							return obj
						})
					})
				})
				// for(let i=0; i<res.length; i++) {
				// 	let obj = {
				// 		id: res[i].id,
				// 		name: res[i].name
				// 	}
				// 	this.cityArr.push(obj)
				
				// console.log(this.cityArr)
				// console.log(this.cityArr2)
				console.log(this.cityArr3)
				// this.showCity = res
			},
			traverse(arr, result=[]) {
				  for (var i = 0; i < arr.length; i++) {
					  let item = arr[i]
					  let obj = {
					  	id: item.id,
					  	name: item.name
					  }
					  result.push(obj)
				    if(item.children.length) {
						this.traverse(item.children, result)
					}
				  }
				  return result;
			},
			// 选择驾校
			chooseSchool(item) {
				this.form.school = item.name
				this.form.schoolId = item.id
				this.columnsCar = [item.businessScope.split(',')]
				console.log(this.columnsCar)
				this.showSchool = false
				this.schoolClassFn()
			},
			// 选择班型
			confirmClassModel(val) {
				let item = val.value[0]
				console.log(item)
				this.showClassModel = false
				this.form.classModel = item.name
				this.form.schoolClassId = item.id
				this.form.totalAmount = item.totalAmount
			},
			// 选择车型
			confirmCar(val) {
				let item = val.value[0]
				console.log(item)
				this.showCar = false
				this.form.car = item
				this.form.trainType = 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.firstDriveDate = uni.$u.timeFormat(val.value, 'yyyy-mm-dd');
				this.showFirstLicenceTime = false
			},
			// 选择原准驾车型
			pickerOldDrive(val) {
				this.form.oldTrainType = val
				this.showOldDriveModel = false
				console.log(val)
			},
			// 选择已过科目
			confirmSubjectPass(val) {
				let item = val.value[0]
				this.form.finishSubject = 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
			},
			
			async comfigClick(val) {
				console.log(val)
				this.showPopup = false
				const {data: res} = await applyOnline(this.form)
				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>