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.
643 lines
17 KiB
643 lines
17 KiB
<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: '',
|
|
nationality: '中国',
|
|
businessType: '',//业务类型
|
|
certificateCodeShow: '原驾驶证号xxx',
|
|
driveLicence: '',//原驾驶证号 给后端的
|
|
firstDriveDate: '',//原驾驶证初领日期
|
|
sex: 2,
|
|
phone: '',
|
|
applyType: 1,
|
|
name: '',
|
|
oldTrainType: '',//原准驾车型
|
|
subjectPass: '',
|
|
subjectTreat: '',
|
|
photoPath: '123.png',
|
|
address: '',
|
|
totalAmount: 0,
|
|
radiovalue2: 2, //是否异地
|
|
businessType: 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.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
|
|
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()
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
this.initUserInfo()
|
|
},
|
|
methods: {
|
|
async initUserInfo() {
|
|
await this.$store.dispatch('getUserInfo')
|
|
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'
|
|
},
|
|
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('驾校id')
|
|
console.log(item.id)
|
|
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)
|
|
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: 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>
|