hg_zlxc_h5/pages/learnDriveStep/step/step3.vue

<template>
	<view class="main">
		<view class="card">
			<u-form :model="form" ref="uForm" :label-width="'auto'">
				<u-form-item label="驾校名称" >
					<view class="tar">
						{{info.schoolName}} 
					</view>
				</u-form-item>
				<u-form-item label="学驾车型" prop="classModel" required >
					<view @click="showDriveModels=true"  class="select_row" >
						<u-input v-model="form.classModel"  input-align="right" placeholder="请选择" disabled  @click="showDriveModels=true" />
						<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="班型" prop="trainingClassLable" required >
					<view @click="clickTrainingClasss"  class="select_row">
						<u-input v-model="form.trainingClassLable" disabled input-align="right" placeholder="请选择"  @click="clickTrainingClasss"/>
						<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;"></u-icon>
					</view>
				</u-form-item>
				<!-- @click="showSchoolCoach=true" -->
				<u-form-item label="教练" prop="coachName" >
					<view  class="select_row">
						<u-input v-model="$store.state.chooseCoachItem.coachName" disabled input-align="right" placeholder="请选择" @click="$goPage('/pages/learnDriveStep/chooseCoach/chooseCoach?trainingSchoolId='+ info.trainingSchoolId)" />
						<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;" @click="$goPage('/pages/learnDriveStep/chooseCoach/chooseCoach?trainingSchoolId='+ info.trainingSchoolId)"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="考场适应训练时长" prop="timeName">
					<view @click="showEnums=true"  class="select_row">
						<view class="timePrice">85元/小时</view>
						<u-input v-model="form.timeName" disabled input-align="right" placeholder="请选择"  @click="showEnums=true"/>
						<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="考场适应训练场地" prop="adaptabilityGround" required v-if="form.timeName!='不选择'">
					<view @click="showAdaptability=true"  class="select_row">
						<u-input v-model="form.adaptabilityGround" disabled input-align="right" placeholder="请选择" @click="showAdaptability=true"/>
						<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="学车费用" class="line" :border-bottom="false">
					<view class="tar red">
						￥{{ $u.utils.priceTo(totalPrice) }}
					</view>
					<!-- <u-input v-model="form.name" disabled input-align="right" placeholder="" /> -->
				</u-form-item>
				<u-form-item label="姓名">
					<view class="tar">{{form.realName}}</view>
					<!-- <u-input v-model="form.realName" disabled input-align="right" placeholder="" /> -->
				</u-form-item>
				<u-form-item label="性别">
					<view class="tar">{{form.sex==2?'女':'男'}}</view>
				</u-form-item>
				<u-form-item label="国籍"  >
					<view class="tar">中国</view>
				</u-form-item>
				<u-form-item label="证件类型" >
					<view class="tar">身份证</view>
				</u-form-item>
				<u-form-item label="证件号码" class="line" :border-bottom="false">
					<u-input v-model="form.certificateCodeShow" disabled input-align="right" placeholder="" />
				</u-form-item>
				<u-form-item label="业务类型" required prop="businessTypeName" >
					<view @click="showBusinessType=true"  class="select_row">
						<u-input v-model="form.businessTypeName" disabled input-align="right" placeholder="请选择" @click="showBusinessType=true"/>
						<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;"></u-icon>
					</view>
					<u-input v-model="form.name" disabled input-align="right" placeholder="" />
				</u-form-item>
				<u-form-item label="原驾驶证号"  required v-if="form.businessTypeName=='增领'">
					<u-input v-model="form.certificateCodeShow" disabled input-align="right" placeholder="" disabled/>
				</u-form-item>
				<u-form-item label="驾驶证初领日期"  required v-if="form.businessTypeName=='增领'">
					<view @click="showFirstLicenceTime=true"  class="select_row">
						<u-input v-model="form.firstLicenceTime" disabled input-align="right" placeholder="请选择" @click="showFirstLicenceTime=true"/>
						<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="原准驾车型" required v-if="form.businessTypeName=='增领'">
					<view @click="showOldDriveModel=true"  class="select_row">
						<u-input v-model="form.oldDriveModel" disabled input-align="right" placeholder="请选择" @click="showOldDriveModel=true"/>
						<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;"></u-icon>
					</view>
				</u-form-item>
				
			</u-form>
		</view>
		
		<view class="checkCon">
			<u-checkbox-group>
				<u-checkbox v-model="checked" active-color="#1989FA" shape="circle">我承诺已完成且通过报考驾驶培训所需体检流程</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="btnBg">
			<oneBtn text="提交" @oneBtnClick="oneBtnClickFn"/>
		</view>
		
		
		<!-- 选择框 -->
		<!-- 车型 -->
		<u-picker mode="selector" v-model="showDriveModels" :range="selectorDriveModels" @confirm="confirmDriveModels"></u-picker>
		<!-- 班型 -->
		<u-picker mode="selector" v-model="showTrainingClasss" :range="selectorTrainingClasss" range-key="className" @confirm="confirmTrainingClasss"></u-picker>
		<!-- 教练 -->
		<u-picker mode="selector" v-model="showSchoolCoach" :range="selectorSchoolCoach"  range-key="coachName"  @confirm="confirmSchoolCoach"></u-picker>
		<!-- 适应训练时长 -->
		<u-picker mode="selector" v-model="showEnums" :range="selectorEnums"  range-key="name"  @confirm="confirmEnums"></u-picker>
		<!-- 适应训练考场 -->
		<u-picker mode="selector" v-model="showAdaptability" :range="selectorAdaptability"  range-key="name" @confirm="confirmAdaptability"></u-picker>
		<!-- 业务类型 -->
		<u-picker mode="selector" v-model="showBusinessType" :range="businessTypeArr"  range-key="name" @confirm="confirmBusinessType"></u-picker>
		<!-- 原驾驶证初领日期 -->
		<u-picker  mode="time" v-model="showFirstLicenceTime"  @confirm="confirmFirstLicenceTime" :params="paramsPicker"></u-picker>
		<!-- 原驾驶证学驾车型 -->
		<u-popup v-model="showOldDriveModel" mode="bottom">
			<view class="carBox">
				<view class="carh1">学驾车型</view>
				<view v-for="(item,index) in carTypeArr" :key="index" class="carLi">
					<view class="carType">{{item.lab}}</view>
					<view class="carName_row">
						<view class="carName" v-for="(item2,index2) in item.arr" :key="index2"  @click="pickerCarClick(item2)" :class="{active: pickerCarArr.indexOf(item2) > -1}">{{item2}}</view>
					</view>
				</view>
				<view class="payBtn_row">
					<view class="payBtn border" @click="pickerCar()">重置</view>
					<view class="payBtn"  @click="pickerCar(1)">完成</view>
				</view>
			</view>
		</u-popup>
		<!-- 确认订单弹出框 -->
		<u-popup v-model="showFormValidation" mode="bottom">
			<step3formValidation :info="form" :schoolName="info.schoolName" @oneBtnClick="oneBtnConfirm"/>
		</u-popup>
		
	</view>
</template>

<script>
	import { watch } from "vue";
	import learnDrive from '@/api/learnDrive.js'
	import step3formValidation from './step3formValidation.vue'
	export default {
		props: ['info', 'userInfo', 'trainingApplyId', 'fromClass'],
		components: {
			step3formValidation
		},
		
		data() {
			return {
				checked: true,
				showFormValidation: false,
				form: {
					address: '',
					classModel: '',//学驾车型
					businessType: '',
					certificateType: 1,
					businessTypeName: '',
					trainingClassId: '',
					trainingClassName: '',
					realName: '',
					certificateCode: '',
					sex: '',
					nationality: '中国',
					firstLicenceTime: '',
					oldDriveModel: ''
				},
				businessTypeArr: [
					{name: '初领', id: 0},
					{name: '增领', id: 1}
				],
				showBusinessType: false,
				totalPrice: '',
				showDriveModels: false,
				selectorDriveModels: [],
				showTrainingClasss: false,
				selectorTrainingClasss: [],
				showSchoolCoach: false,
				selectorSchoolCoach: [],
				showEnums: false,
				selectorEnums: [],
				showAdaptability: false,
				selectorAdaptability: [],
				showFirstLicenceTime: false,
				showOldDriveModel:false,
				paramsPicker: {
					year: true,
					month: true,
					day: true,
				},
				carTypeArr: [
					{lab: '小车',arr: ['C1','C2','C3']},
					{lab: '货车',arr: ['A2','B2',]},
					{lab: '客车',arr: ['A1','B3','B1']},
					{lab: '摩托车',arr: ['D','E','F']},
					{lab: '其它',arr: ['C4','C5','C6']},
				],
				pickerCarArr: [],
				
			}
		},
		watch: {
			"info.trainingSchoolId": {
				deep:true,// 开启深度监听
				immediate:true,
				 handler(){
					 console.log('info')
					 console.log(this.info)
					 this.queryDriveModelsFn()
					 this.queryTrainingClasssFn()
					 this.queryAdaptabilityGroundsFn()
					 this.queryAdaptabilityEnumsFn()
					 
					 // 默认选择初领
					 this.form.businessType = this.businessTypeArr[0].id
					 this.form.businessTypeName = this.businessTypeArr[0].name
					 
					 // 如果是报名班型跳转过来的 classModel className trainingClassId totalPrice
					 if(this.fromClass) {
						 this.form.classModel = this.$store.state.classChooseItem.classModel
						 this.form.trainingClassLable = this.$store.state.classChooseItem.className
						 this.form.trainingClassId = this.$store.state.classChooseItem.trainingClassId
						 this.totalPrice = this.$store.state.classChooseItem.totalPrice
					 }
					 
				}
			},
			userInfo: {
				deep:true,// 开启深度监听
				immediate:true,
				handler(val){
					if(!Object.keys(val).length) return
					this.form.realName = val.realName
					console.log('监听到的用户信息')
					console.log(val)
					let sexIdCard = val.idcard
					let sex = sexIdCard.substr(16,1) % 2 == 0 ? 2: 1
					this.form.sex = sex
					this.form.certificateCode = val.idcard
					this.form.driveLicence = val.idcard
					let certificateCode = val.idcard
					this.form.certificateCodeShow = certificateCode.substr(0,4) + '**********' + certificateCode.substr(14,certificateCode.split('').length)
				}
			}
		},
		
		methods: {
			// 确认提交表单还是继续修改
			async oneBtnConfirm(num) {
				if(num) {
					this.form.trainingSchoolId = this.info.trainingSchoolId
					this.form.trainingApplyId = this.trainingApplyId
					let CoachItem = this.$store.state.chooseCoachItem.coachId
					if(CoachItem.coachId) {
						this.form.coachId = CoachItem.coachId
						this.form.coachName = CoachItem.coachName
					}
					let obj = Object.assign({},this.form)
					if(!this.form.businessType) {
						// 如果是初领删除原驾驶证号,也就是身份证
						delete obj.driveLicence
					}
					delete obj.businessTypeName
					delete obj.certificateCodeShow
					console.log(obj)
					const [nulls, res] = await learnDrive.createTrainingApplyDetails(obj)
					this.$store.commit('upDateCoachItem', {})
					console.log('表单已提交')
					console.log(res)
					if(res.code==0) {
						this.showFormValidation = false
						this.$emit('showSignPopupFn')
					}
				}else {
					this.showFormValidation = false
				}
			},
			// 选择车型
			async confirmDriveModels(i) {
				let index = i[0]
				this.form.classModel = this.selectorDriveModels[index]
				this.form.trainingClassLable = ''
				await this.queryTrainingClasssFn()
				this.showTrainingClasss = true
				
			},
			// 选择班型
			confirmTrainingClasss(i) {
				let index = i[0]
				let item = this.selectorTrainingClasss[index]
				this.form.trainingClassId = item.trainingClassId
				this.form.trainingClassLable = item.className
				this.totalPrice = item.totalPrice
				
			},
			// 选择教练
			confirmSchoolCoach(i) {
				let index = i[0]
				let item = this.selectorSchoolCoach[index]
				this.form.coachId = item.coachId
				this.form.coachName = item.coachName
			},
			// 选择时长
			confirmEnums(i) {
				let index = i[0]
				let item = this.selectorEnums[index]
				console.log(item)
				this.form.timeName = item.name
				this.form.adaptability = item.code
			},
			// 选择考场
			confirmAdaptability(i) {
				let index = i[0]
				let item = this.selectorAdaptability[index]
				this.form.adaptabilityGround = item.name
				
			},
			// 选择业务类型
			confirmBusinessType(i) {
				let index = i[0]
				let item = this.businessTypeArr[index]
				this.form.businessType = item.id
				this.form.businessTypeName = item.name
				
			},
			// 选择原驾驶证初领日期 
			confirmFirstLicenceTime(val) {
				let str = val.year+'-'+val.month+'-'+val.day
				this.form.firstLicenceTime = str
				console.log(val)
			},
			pickerCar(num) {
				if(num==1) {
					if(!this.pickerCarArr.length) return this.$u.toast('请选择学驾车型')
					this.form.oldDriveModel = this.pickerCarArr.join('')
					this.showOldDriveModel = false
				}else {
					this.pickerCarArr = []
					this.form.oldDriveModel = ''
				}
			},
			pickerCarClick(item) {
				let index = this.pickerCarArr.indexOf(item)
				if(index>-1) {
					this.pickerCarArr.splice(index, 1);
				}else {
					this.pickerCarArr.push(item)
				}
			},
			// 获取学驾车型
			async queryDriveModelsFn() {
				if(!this.info.trainingSchoolId) return
				const [nulls, res] = await learnDrive.queryDriveModels({trainingSchoolId: this.info.trainingSchoolId})
				this.selectorDriveModels = res.data
				console.log('学驾车型')
				console.log(res)
			},
			// 获取班型
			async queryTrainingClasssFn() {
				if(!this.info.trainingSchoolId) return
				let obj = {pageSize: 20,pageIndex: 1,trainingSchoolId: this.info.trainingSchoolId,}
				if(this.form.classModel) obj.classModel = this.form.classModel
				const [nulls, res] = await learnDrive.querySimpleTrainingClasssByModel(obj)
				this.selectorTrainingClasss = res.data
				console.log('获取班型')
				console.log(res)
			},
			
			// 获取适应性训练考场
			async queryAdaptabilityGroundsFn() {
				const [nulls, res] = await learnDrive.queryAdaptabilityGrounds({trainingSchoolId: this.info.trainingSchoolId})
				this.selectorAdaptability = res.data
				console.log('适应性训练考场')
				console.log(res)
			},
			// 获取学时
			async queryAdaptabilityEnumsFn() {
				const [nulls, res] = await learnDrive.queryAdaptabilityEnums()
				this.selectorEnums = res.data
				let item = res.data[3]
				this.form.timeName = item.name
				this.form.adaptability = item.code
				console.log('训练学时')
				console.log(res)
			},
			// 点击选择班型
			clickTrainingClasss() {
				// this.showDriveModels = true
				if(!this.form.classModel) return this.$u.toast('请先选择车型')
				this.showTrainingClasss = true
				this.queryTrainingClasssFn()
			},
			// 提交表单之前验证
			oneBtnClickFn() {
				if(!this.form.classModel) return this.$u.toast('请选择学驾车型')
				if(!this.form.trainingClassLable) return this.$u.toast('请选择学驾班型')
				if(!this.form.adaptabilityGround&&this.form.adaptability) return this.$u.toast('请选择考场适应训练时长场地')
				if(!this.form.businessTypeName) return this.$u.toast('请选择业务类型')
				if(!this.checked) return this.$u.toast('请勾选我同意承诺')
				
				this.showFormValidation = true
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		.card {
			background: #fff;
			padding: 0 30rpx;
		}
	  
	}
	.checkCon {
		padding: 96rpx 30rpx 24rpx 30rpx;
	}
	.btnBg {
		width: 100%;
		height: 128rpx;
		padding: 16rpx 30rpx;
		background: #fff;
		.btn {
			width: 100%;
			height: 96rpx;
			background: linear-gradient(180deg, #3593FB 0%, #53D3E5 100%);
			border-radius: 48rpx;
			font-size: 36rpx;
			color: #fff;
			text-align: center;
			line-height: 96rpx;
		}
	}
	.select_row {
		display: flex;justify-content: flex-end;width: 100%;
	}
	
	.line {
		position: relative;
		&::before {
			content: '';
			height: 20rpx;
			width: 100vw;
			background-color: #f7f7f7;
			position: absolute;
			left: -30rpx;
			bottom: -20rpx;
		}
	}
	.tar {
		width: 100%;
		text-align: right;
		&.red {
			color: red;
		}
	}
	.timePrice {
		margin: 0 0 0 20rpx;
		color: red;
	}
	
	.payBtn_row {
		width: 100%;
		padding: 20rpx 46rpx;
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #ededed;
		.payBtn {
			width: 48%;
			line-height: 96rpx;
			color: #fff;
			height: 96rpx;
			background: linear-gradient(180deg, #3593FB 0%, #53D3E5 100%);
			border-radius: 49rpx;
			text-align: center;
			&.border {
				border: 2rpx solid  rgba(53, 147, 251, 1);
				color: #1989FA;
				background: #fff;
			}
		}
	}
	.carBox {
		width: 100%;
		.carh1 {
			font-size: 26rpx;
			font-weight: 700;
			text-align: center;
			padding: 30rpx 0 0  0;
		}
		.carLi {
			width: 100%;
			margin-bottom: 30rpx;
			padding: 0 32rpx;
		}
		.carType {
			font-size: 26rpx;
			font-weight: 500;
			line-height: 40rpx;
			padding: 28rpx 12rpx 12rpx 0;
		}
		.carName_row {
			display: flex;
			.carName {
				margin-right: 40rpx;
				width: 88rpx;
				height: 56rpx;
				background: #F6F7F8;
				border-radius: 28rpx;
				line-height: 56rpx;
				text-align: center;
				color: #686B73;
				&.active {
					background: #ECF7FE;
					border: 1px solid #3593FB;
					color: #1989FA;
				}
			}
		}
	}
</style>