|
|
<template> <view class="main"> <u-form :model="form" ref="uForm" :label-width="'auto'"> <u-form-item label="驾校名称" > <view class="tar"> {{currentSchool.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="classModel" required > <view @click="showDriveModels=true" class="select_row" > <u-input v-model="form.trainingClassLable" 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> <view class="line"></view> <u-form-item label="业务类型" required prop="businessTypeName" > <view class="tag_row"> <view class="tag" v-for="(item, index) in businessTypeArr" :key="index" @click="form.businessType=item.id" :class="{active: item.id==form.businessType}">{{item.name}}</view> </view> </u-form-item> <!-- <view :class="{line: !form.businessType}"></view> --> <view class="" v-if="form.businessType==1"> <!-- <u-form-item label="原驾驶证号" required > <u-input v-model="form.certificateCodeShow" disabled input-align="right" placeholder="" disabled/> </u-form-item> --> <u-form-item label="驾驶证初领日期" required > <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> <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> <view class="line"></view> </view> <view :class="{line: !form.businessType}"></view> <u-form-item label="异地转入" required prop="businessTypeName" > <view class="tag_row" @click="transfer=!transfer"> <view class="tag" :class="{active: transfer}">是</view> <view class="tag" :class="{active: !transfer}">否</view> </view> </u-form-item> <view class="" v-if="transfer"> <u-form-item label="转出城市" prop="coachName" > <view @click="showDriveModels=true" class="select_row" > <u-input v-model="form.value" 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="coachName" > <view @click="showDriveModels=true" class="select_row" > <u-input v-model="form.value" 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> </view> <view class="h2"> 学员信息 <text>请准确填写学员真实信息</text> </view> <u-form-item label="头 像" > <view @click="chooseImages" class="select_row" > <view class="avatar"> <image :src="form.avatar" mode=""></image> </view> <u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;" ></u-icon> </view> </u-form-item> <u-form-item label="姓 名" > <u-input placeholder="请填写" input-align="right"></u-input> </u-form-item> <u-form-item label="性 别" > <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="coachName" > <view class="tar">中国</view> </u-form-item> <u-form-item label="证件类型" prop="coachName" > <view class="tar">身份证</view> </u-form-item> <u-form-item label="证件号码" prop="coachName" > <view class="tar"> <u-input placeholder="请输入证件号码" input-align="right"></u-input> </view> </u-form-item> <view class="idcardBox"> <view class="idcard"> <image src="@/static/images/idcardA.png" mode="widthFix"></image> </view> <view class="idcard"> <image src="@/static/images/idcardB.png" mode="widthFix"></image> </view> </view> <view class="line"></view> <view class="remark"> <view class="h3">备注</view> <view class="remarkInput"> <u-input v-model="form.value" type="textarea" :border="false" :auto-height="true" :height="176"/> </view> </view> </u-form> <view class="footBox"> <view class="leftCon"> <view class="row1"> <view class="lab">总额：</view> <view class="redPrice"> <text>￥</text>266.00 </view> <view class="oldPrice">300.00</view> </view> <view class="redTxt">享9.5折，已减271元！</view> </view> <view class="rightBtn" @click="$goPage('/pages/application/payment')">下一步</view> </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="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> </view></template>
<script> import indexApi from '@/api/index.js' import {mapState} from 'vuex' import { APP_API, APP_HOST } from '@/site.config.js'; const _url = APP_HOST + APP_API + '/util/manage/uploadFile.do'; export default { computed: { ...mapState(['currentSchool','classChooseItem']), // 该函数内部运行的返回值大致为：{num: () => this.$store.state.num, school: () => this.$store.state.school}
}, data() { return { transfer: false, showDriveModels: false, showTrainingClasss: false, showFirstLicenceTime: false, showOldDriveModel: false, form: { classModel: '', trainingClassLable: '', businessType: 0, firstLicenceTime: '', avatar: [],//上传头像
}, info: {}, selectorTrainingClasss: [],//班型数据
selectorDriveModels: [],//车型数据
businessTypeArr: [ {name: '初领', id: 0}, {name: '增领', id: 1} ], 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: [], paramsPicker: { year: true, month: true, day: true, }, } }, onLoad() { // totalPrice trainingClassId
this.createTrainingApplySimpleFn() this.form.classModel = this.classChooseItem.className this.form.trainingClassLable = this.classChooseItem.classModel }, methods: { // 选择原驾驶证学驾车型
pickerCarClick(item) { let index = this.pickerCarArr.indexOf(item) if(index>-1) { this.pickerCarArr.splice(index, 1); }else { this.pickerCarArr.push(item) } }, // 选择原驾驶证学驾车型 点击重置或确定
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 = '' } }, // 选择原驾驶证初领日期
confirmFirstLicenceTime(val) { let str = val.year+'-'+val.month+'-'+val.day this.form.firstLicenceTime = str console.log(val) }, // 选择车型
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 }, // 获取班型
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 indexApi.querySimpleTrainingClasssByModel(obj) this.selectorTrainingClasss = res.data console.log('获取班型') console.log(res) }, // 获取学驾车型
async queryDriveModelsFn() { if(!this.info.trainingSchoolId) return const [nulls, res] = await indexApi.queryDriveModels({trainingSchoolId: this.info.trainingSchoolId}) this.selectorDriveModels = res.data console.log('学驾车型') console.log(res) }, // 查询状态
async getTrainingApplyDetailsFn() { console.log(this.trainingApplyId) const [nulls, res] = await indexApi.getTrainingApplyDetails({trainingApplyId: this.trainingApplyId}) this.info = res.data console.log('整体状态控制***************') console.log(res) console.log(nulls) if(this.info.checkStatus==1) this.stepIcon = 1 //按顺序：体检，面签，1为完成，0-未完成
if(this.info.applyStatus==1) this.currentIndex = this.stepIcon = 3//0-预报名，1-已报名，2-已支付,3-已学完
if(this.info.applyStatus==1&&this.info.contractStatus<2) this.showSignPopup = true if(this.info.contractStatus==2) this.currentIndex = 5 if(this.info.contractStatus==2&&this.info.applyStatus==1) { if(!this.info.trainingOrderId) { this.createOrder() }else { uni.redirectTo({ url: '/pages/learnDriveStep/payMoney/payMoney?trainingOrderId='+ this.info.trainingOrderId + '&trainingApplyId='+ this.trainingApplyId }) } } }, // 第一步先报名
async createTrainingApplySimpleFn() { let trainingSchoolId = this.$store.state.currentSchool.trainingSchoolId let trainingClassId = this.$store.state.classChooseItem.trainingClassId const [nulls, res] = await indexApi.createTrainingApplySimple({trainingSchoolId, trainingClassId}) if(res.code==0) { this.trainingOrderId = res.data }else if(res.code==502) { // 已经报名过这个学校了 存在未支付订单
this.$u.toast(res.message) } }, //选择图片
chooseImages(type) { uni.chooseImage({ count: 1, //允许选择的数量
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], //从相册选择
success: res => { // console.log(res)
uni.showLoading({ title: '图片上传中...' }); this.uploadImgApi(res.tempFilePaths[0]) } }) }, uploadImgApi(filePath) { console.log(filePath) let _this = this // 上传图片到服务器
uni.uploadFile({ url: _url,//接口
filePath: filePath,//要上传的图片的本地路径
name: 'file', formData: { fileType: 1, fileSuffix: "png" }, header: { token: uni.getStorageSync("Authorization") || '', }, success(res) { console.log(res) console.log('上传成功') let res2 = JSON.parse(res.data) console.log(res2) if(res2.code==0) { _this.form.avatar = res2.data } uni.hideLoading(); }, complete: ()=> {} }) }, } }</script>
<style lang="scss" scoped> .main { width: 100%; padding: 0 32rpx 100rpx 32rpx; background: #fff; } .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; } } } .select_row { display: flex;justify-content: flex-end;width: 100%; } .avatar { width: 96rpx; height: 96rpx; border-radius: 50%; overflow: hidden; } .idcardBox { display: flex; padding: 42rpx 0 28rpx 0; .idcard { flex: 1; padding: 0 10rpx; } } .h2 { width: 100vw; margin-left: -32rpx; height: 96rpx; background: #F6F7F8; font-weight: 600; color: #333333; line-height: 96rpx; padding: 0 32rpx; text { font-size: 28rpx; color: #686B73; padding: 0 0 0 8rpx; } } .line { height: 20rpx; width: 100vw; background-color: #f7f7f7; margin: -1px 0 0 -32rpx; } .tar { text-align: right; width: 100%; } .tag_row { display: flex; width: 100%; justify-content: flex-end; // padding-top: 15rpx;
.tag { width: 88rpx; height: 56rpx; background: #F6F7F8; border-radius: 28rpx; font-size: 28rpx; color: #686B73; margin-left: 12rpx; text-align: center; line-height: 56rpx; &.active { background: #EDF8FE; border: 1rpx solid #3593FB; color: #1989FA; } } } .remark{ padding-bottom: 80rpx; .remarkInput { width: 100%; padding: 12rpx 32rpx; border-radius: 8rpx; background: #F6F7F8; } .h3 { height: 108rpx; line-height: 108rpx; font-size: 32rpx; color: #333; } } .footBox { position: fixed; bottom: 0; left: 0; width: 100vw; height: 128rpx; background: #FFFFFF; box-shadow: inset 0px 1px 0px 0px #E8E9EC; padding: 0 32rpx; display: flex; justify-content: space-between; align-items: center; .leftCon { flex: 1; width: 0; .row1 { display: flex; align-items: center; font-size: 28rpx; .lab { color: #333; } .redPrice { color: #E63633; text { font-size: 28rpx; } font-size: 40rpx; } .oldPrice { color: #686B73; text-decoration: line-through; margin-right: 10rpx; } } .redTxt { color: #E63633; // margin-top: 8rpx;
font-size: 28rpx; } } .rightBtn { width: 216rpx; height: 96rpx; background: linear-gradient(180deg, #3593FB 0%, #53D3E5 100%); border-radius: 50rpx; font-size: 36rpx; color: #fff; text-align: center; line-height: 96rpx; } } .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>
|
