学员端小程序
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.
 
 
 

634 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: '18267103167',
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.GetDetectInfoEnhancedFn()
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
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('驾校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>