洛阳学员端
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.
 
 
 
 
 

699 lines
20 KiB

<template>
<view class="pageBg">
<!-- <topNavbar title="报名信息确认"></topNavbar> -->
<view class="pad">
<view class="card">
<view class="row">
<view class="lab">扫描教练二维码</view>
<view class="rightCon">
<view class="scan" @click="scanCodeFn">
<image src="@/static/images/carIcon/sanIcon.png"></image>
</view>
</view>
</view>
</view>
<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.trainType"/>
</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">
<u-input placeholder="请输入原驾驶证号" v-model="form.certificateCodeShow" border font-size="26rpx" placeholderStyle="color: #ADADAD" style="padding: 0;"></u-input>
</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.oldTrainType"/>
</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.transfer"
@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.transfer==1">
<view class="row" @click="cityShowFn">
<view class="lab">来源城市</view>
<view class="rightCon">
<view class="row">
<view class="val">
<mySelect :value="form.fromArea"/>
</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="subjectClick">
<view class="val">
<mySelect :value="form.finishSubjectName"/>
</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.waitSubjectName"/>
</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.totalAmount">
<view class="row">
<view class="lab">学费</view>
<view class="rightCon">
<view class="row">
<view class="val blue" >¥{{ $u.utils.priceTo(form.totalAmount) }}</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" @cancel="showCity=false"></u-picker>
</view>
</template>
<script>
import comfigPopup from './comp/comfigPopup'
import searchSchool from './comp/searchSchool'
import oldDrive from './comp/oldDrive'
import { areaTree, applyOnline, schoolClass, getSchoolDetail, paymentPrice } from '@/config/api.js'
import { scanCodeFn } from '@/config/utils.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: '',
trainType: '',//车型
nationality: '中国',
certificateCodeShow: '',
driveLicence: '',//原驾驶证号 给后端的
firstDriveDate: '',//原驾驶证初领日期
sex: 2,
phone: '',
applyType: 1,
name: '',
oldTrainType: '',//原准驾车型
finishSubject: '',//已过科目
finishSubjectName: '',//已过显示文字
waitSubjectName: '',//待学科目显示文字
waitSubject: '',//待学科目
photoPath: 'https://lyjp-bucket-main.oss-cn-beijing.aliyuncs.com/985114ca01ff35554333927a5d1d52883d3ad21301caac4b637df56169b2c916.png',
address: '',
totalAmount: 0,
transfer: 2, //是否异地
businessType: 0,
fromArea: '',//异地城市
},
showSchool: false,
radiolist1: [ {name: '初领', id: 0}, {name: '增驾', id: 1}],//0:初领,1:增驾,
radiolist2: [{name: '否', id: 2}, {name: '是', id: 1}, ],
radiolist3: [ {name: '全款', id: 1}, {name: '预付款', id: 2}],
cityArr: [],
cityArr2: [],
cityArr3: []
}
},
onLoad(options) {
if(options.realNameNo) {
this.realNameNo = options.realNameNo
}
this.initUserInfo()
// 监听上一个页面的选择教练
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
if(schoolClass.id) {
console.log(schoolClass)
this.form.classModel = schoolClass.name
this.form.school = schoolClass.schoolName
this.form.schoolId = schoolClass.schoolId
this.form.trainType = schoolClass.carType
this.form.schoolClassId = schoolClass.id
this.form.totalAmount= schoolClass.totalAmount
}
// 如果是选择了驾校教练来报名的/扫二维码
let schoolCoach = this.$store.state.school.schoolCoach
if(schoolCoach.id) {
console.log('schoolCoach')
console.log(schoolCoach)
this.form.coach = schoolCoach.name
this.form.coachId = schoolCoach.id
this.form.school = schoolCoach.schoolName
this.form.schoolId = schoolCoach.schoolId
if(schoolCoach.teachCarType) this.form.trainType = schoolCoach.teachCarType.slice(0,2)
}
// 如果是扫驾校的二维码来的
let schoolCode = this.$store.state.school.schoolCode
if(schoolCode.schoolId) {
console.log('schoolCode')
console.log(schoolCode)
this.form.school = schoolCode.schoolName
this.form.schoolId = schoolCode.schoolId
}
if(this.form.schoolId) {
this.getSchoolDetailFn()
}
},
onPullDownRefresh() {
this.initUserInfo()
},
methods: {
async initUserInfo() {
// 如果不是实名
// if(!this.realNameNo) {
// await this.$store.dispatch('getUserInfo')
// }
console.log(this.vuex_userInfo)
this.form.userId = this.userId
this.form.accountId = this.vuex_userInfo.accountId
this.form.address = this.vuex_userInfo.address
this.form.name = this.vuex_userInfo.name
this.form.idcard = this.vuex_userInfo.idcard
this.form.phone = this.vuex_userInfo.phone
this.form.nationality = this.vuex_userInfo.nationality || '中国'
this.form.cardType = this.vuex_userInfo.cardType || '1'
this.form.sex = this.vuex_userInfo.sex
if(this.vuex_userInfo.photoPath&&this.form.cardType!='1') this.form.photoPath = this.vuex_userInfo.photoPath
},
// 查班型
async schoolClassFn() {
const {data: res} = await schoolClass({pageNo: 1,pageSize: 100, schoolId: this.form.schoolId, carType: this.form.trainType})
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.form.fromArea = e.value.map((item)=>{
return item.name
}).join(',').replace(/,/g, '-')
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
})
})
})
},
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(',')]
this.form.classModel = ''
this.form.schoolClassId = ''
this.form.trainType = ''
this.form.coach = ''
this.form.coachId = ''
this.form.totalAmount = ''
this.showSchool = false
this.schoolClassFn()
},
// 选择班型
confirmClassModel(val) {
let item = val.value[0]
this.showClassModel = false
if(!item) return
this.form.classModel = item.name
this.form.schoolClassId = item.id
if(this.form.finishSubject&&this.form.transfer==1) {
this.paymentPriceFn()
}else {
this.form.totalAmount = item.totalAmount
}
},
// 选择车型
confirmCar(val) {
let item = val.value[0]
this.showCar = false
if(!item) return
if(this.form.trainType == item) return
this.form.trainType = item
this.form.coach = ''
this.form.coachId = ''
this.form.classModel = ''
this.form.schoolClassId = ''
this.form.totalAmount = ''
this.schoolClassFn()
},
showCarClick() {
if(!this.form.school) return this.$u.toast('请先选择驾校')
this.showCar = true
},
// 跳转到选择教练
goCoach() {
if(!this.form.schoolId) return this.$u.toast('请先选择驾校')
if(!this.form.trainType) return this.$u.toast('请先选择车型')
this.$goPage('/pages/indexEntry/enroll/registInfo/chooseCoach/chooseCoach?schoolId=' + this.form.schoolId+ '&trainType='+ this.form.trainType)
},
// 选择原驾驶证初领日期
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)
},
// 弹出选择已过科目
subjectClick() {
if(!this.form.schoolClassId) return this.$u.toast('请先选择报名班型,方便计算价格')
this.showSubjectPass=true
},
// 选择已过科目
confirmSubjectPass(val) {
this.showSubjectPass = false
let item = val.value[0]
if(this.form.finishSubject == item.id) return
this.form.finishSubject = item.id
this.form.finishSubjectName = item.label
this.paymentPriceFn()
},
// 已过科目价格计算
async paymentPriceFn() {
let obj = {
schoolClassId: this.form.schoolClassId,
finishSubject: this.form.finishSubject
}
const res = await paymentPrice(obj)
if(res.code==0) {
this.form.totalAmount = res.data
}
},
// 选择已过科目
confirmTreat(val) {
let item = val.value[0]
this.form.waitSubjectName = item.label
this.form.waitSubject = item.id
this.showSubjectTreat = false
},
// 扫码
scanCodeFn() {
let _this = this
uni.scanCode({
success: async function(res) {
console.log('条码类型:' + res.scanType);
console.log('条码内容:' + res.result);
let obj = JSON.parse(res.result)
console.log(obj.QrType)
console.log(obj.QrType==1)
if(obj.QrType==1) {
if( !obj.coachId ) {
// 说明是扫驾校码报名的要转一下驾校名称
obj.schoolName = decodeURIComponent(obj.schoolName)
}
_this.form.school = obj.schoolName
_this.form.schoolId = obj.schoolId
const {data: item} = await getSchoolDetail({id: _this.form.schoolId})
_this.chooseSchool(item)
if( !obj.coachId) return
_this.form.coach = obj.coachName
_this.form.coachId = obj.coachId
if(obj.teachCarType) _this.form.trainType = obj.teachCarType.slice(0,2)
console.log(_this.form)
}else {
_this.$u.toast('报名码错误,请扫教练或驾校二维码')
}
}
});
},
async getSchoolDetailFn() {
const {data: res} = await getSchoolDetail({id: this.form.schoolId})
this.columnsCar = [res.businessScope.split(',')]
console.log('驾校id')
console.log(res.id)
this.schoolClassFn()
},
changeVal(val) {
console.log(val)
console.log(this.form.transfer)
},
// 点击确认
confirmClick() {
if(!this.form.schoolId) return this.$u.toast('请选择驾校')
if(!this.form.trainType) return this.$u.toast('请选择车型')
if(!this.form.schoolClassId) return this.$u.toast('请选择班型')
this.showPopup = true
},
async comfigClick(val) {
console.log(val)
this.showPopup = false
if(!val) return false
let obj = Object.assign({},this.form)
obj.name = obj.name.replace(/\s+/g, '')
obj.idcard = obj.idcard.replace(/\s+/g, '')
console.log('请求参数')
console.log(obj)
const {data: res} = await applyOnline(obj)
// 报名成功
console.log(res)
await this.$store.dispatch('getUserInfo')
if(val) {
this.$goPage('/pages/indexEntry/enroll/signContract/signContract?schoolId='+this.form.schoolId)
}
}
}
}
</script>
<style lang="scss" scoped>
.pad {
padding-bottom: 66rpx;
}
.card {
padding: 10rpx 40rpx 10rpx 32rpx;
margin-bottom: 20rpx;
.row {
height: 88rpx;
display: flex;
align-items: center;
width: 100%;
.lab {
width: 152rpx;
line-height: 88rpx;
white-space: nowrap;
&.long {
width: 230rpx;
}
}
.scan {
margin-left: auto;
width: 40rpx;
height: 38rpx;
image {
display: block;
width: 100%;
height: 100%;
}
}
.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>