|
|
<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: '431027199009012316', nationality: '中国', businessType: '',//业务类型
certificateCodeShow: '原驾驶证号xxx', driveLicence: '',//原驾驶证号 给后端的
firstDriveDate: '',//原驾驶证初领日期
sex: 2, phone: '18267412456', applyType: 1, name: '大乔', oldTrainType: '',//原准驾车型
subjectPass: '', subjectTreat: '', photoPath: '123.png', address: '湖南省，郴州市', totalAmount: 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.form.accountId = this.userId this.form.userId = this.userId 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(this.columnsCar) 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) if(val) { this.$goPage('/pages/indexEntry/enroll/signContract/signContract') } } } }</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>
|
