You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
524 lines
17 KiB
524 lines
17 KiB
<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>
|
|
|