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

642 lines
17 KiB

1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
  1. <template>
  2. <view class="pageBgImg">
  3. <topNavbar title="报名信息确认"></topNavbar>
  4. <view class="pad">
  5. <!-- #ifndef H5 -->
  6. <view class="card">
  7. <view class="row">
  8. <view class="lab">扫描教练二维码</view>
  9. <view class="rightCon">
  10. <view class="scan" @click="scanCodeFn">扫一扫</view>
  11. </view>
  12. </view>
  13. </view>
  14. <!-- #endif -->
  15. <view class="card">
  16. <view class="row" >
  17. <view class="lab">选择驾校</view>
  18. <view class="rightCon">
  19. <view class="row" @click="showSchool=true">
  20. <view class="val">
  21. <mySelect :value="form.school"/>
  22. </view>
  23. <view class="arrow">
  24. <u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. <view class="row">
  30. <view class="lab">选择车型</view>
  31. <view class="rightCon">
  32. <view class="row" @click="showCarClick">
  33. <view class="val">
  34. <mySelect :value="form.car"/>
  35. </view>
  36. <view class="arrow">
  37. <u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
  38. </view>
  39. </view>
  40. </view>
  41. </view>
  42. <view class="row">
  43. <view class="lab">选择班型</view>
  44. <view class="rightCon">
  45. <view class="row" @click="showClassModel=true">
  46. <view class="val">
  47. <mySelect :value="form.classModel"/>
  48. </view>
  49. <view class="arrow">
  50. <u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
  51. </view>
  52. </view>
  53. </view>
  54. </view>
  55. <view class="row">
  56. <view class="lab">选择教练</view>
  57. <view class="rightCon" @click="goCoach">
  58. <view class="row" >
  59. <view class="val">
  60. <mySelect :value="form.coach"/>
  61. </view>
  62. <view class="arrow">
  63. <u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
  64. </view>
  65. </view>
  66. </view>
  67. </view>
  68. </view>
  69. <view class="card">
  70. <view class="row">
  71. <view class="lab">业务类型</view>
  72. <view class="rightCon">
  73. <u-radio-group
  74. v-model="form.businessType"
  75. >
  76. <u-radio
  77. :customStyle="{marginRight: '24rpx'}"
  78. v-for="(item, index) in radiolist1"
  79. :key="index"
  80. :label="item.name"
  81. :name="item.id"
  82. >
  83. </u-radio>
  84. </u-radio-group>
  85. </view>
  86. </view>
  87. </view>
  88. <view class="card" v-if="form.businessType==1">
  89. <view class="row">
  90. <view class="lab long">原驾驶证号</view>
  91. <view class="rightCon">
  92. <view class="row">
  93. <view class="val">{{ form.certificateCodeShow }}</view>
  94. </view>
  95. </view>
  96. </view>
  97. <view class="row">
  98. <view class="lab long">驾驶证初领日期</view>
  99. <view class="rightCon">
  100. <view class="row" @click="showFirstLicenceTime=true" >
  101. <view class="val">
  102. <mySelect :value="form.firstDriveDate"/>
  103. </view>
  104. <view class="arrow">
  105. <u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
  106. </view>
  107. </view>
  108. </view>
  109. </view>
  110. <view class="row">
  111. <view class="lab long">原准驾车型</view>
  112. <view class="rightCon">
  113. <view class="row" @click="showOldDriveModel=true" >
  114. <view class="val">
  115. <mySelect :value="form.oldDriveModel"/>
  116. </view>
  117. <view class="arrow">
  118. <u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
  119. </view>
  120. </view>
  121. </view>
  122. </view>
  123. </view>
  124. <view class="card">
  125. <view class="row">
  126. <view class="lab">是否异地转入</view>
  127. <view class="rightCon" style="margin-left: 40rpx;">
  128. <u-radio-group
  129. v-model="form.radiovalue2"
  130. @change="changeVal"
  131. >
  132. <u-radio
  133. :customStyle="{marginRight: '24rpx'}"
  134. v-for="(item, index) in radiolist2"
  135. :key="item.id"
  136. :label="item.name"
  137. :name="item.id"
  138. >
  139. </u-radio>
  140. </u-radio-group>
  141. </view>
  142. </view>
  143. </view>
  144. <view class="card" v-if="form.radiovalue2==1">
  145. <view class="row" @click="cityShowFn">
  146. <view class="lab">来源城市</view>
  147. <view class="rightCon">
  148. <view class="row">
  149. <view class="val">
  150. <mySelect :value="form.classModel"/>
  151. </view>
  152. <view class="arrow">
  153. <u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
  154. </view>
  155. </view>
  156. </view>
  157. </view>
  158. <view class="row">
  159. <view class="lab ">已过科目</view>
  160. <view class="rightCon">
  161. <view class="row" @click="showSubjectPass=true">
  162. <view class="val">
  163. <mySelect :value="form.finishSubject"/>
  164. </view>
  165. <view class="arrow">
  166. <u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
  167. </view>
  168. </view>
  169. </view>
  170. </view>
  171. <view class="row">
  172. <view class="lab">待学科目</view>
  173. <view class="rightCon">
  174. <view class="row" @click="showSubjectTreat=true">
  175. <view class="val">
  176. <mySelect :value="form.subjectTreat"/>
  177. </view>
  178. <view class="arrow">
  179. <u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
  180. </view>
  181. </view>
  182. </view>
  183. </view>
  184. </view>
  185. <view class="card">
  186. <view class="row">
  187. <view class="lab">学费</view>
  188. <view class="rightCon">
  189. <view class="row">
  190. <view class="val">{{ $u.utils.priceTo(form.totalAmount) }}</view>
  191. </view>
  192. </view>
  193. </view>
  194. </view>
  195. <view class="card">
  196. <view class="row">
  197. <view class="lab">支付形式</view>
  198. <view class="rightCon">
  199. <u-radio-group
  200. v-model="form.radiovalue3"
  201. >
  202. <u-radio
  203. :customStyle="{marginRight: '24rpx'}"
  204. v-for="(item, index) in radiolist3"
  205. :key="index"
  206. :label="item.name"
  207. :name="item.name"
  208. >
  209. </u-radio>
  210. </u-radio-group>
  211. </view>
  212. </view>
  213. </view>
  214. <view class="card">
  215. <view class="row">
  216. <view class="lab">优惠券</view>
  217. <view class="rightCon">
  218. <view class="row">
  219. <view class="val red">-1000</view>
  220. </view>
  221. </view>
  222. </view>
  223. </view>
  224. <view class="card">
  225. <view class="row">
  226. <view class="lab">待支付金额</view>
  227. <view class="rightCon">
  228. <view class="row">
  229. <view class="val blue">100</view>
  230. </view>
  231. </view>
  232. </view>
  233. </view>
  234. <view class="btnBg" @click="confirmClick">确认</view>
  235. </view>
  236. <u-popup :show="showPopup" mode="center" :round="8" >
  237. <comfigPopup @comfigClick="comfigClick" :info="form"/>
  238. </u-popup>
  239. <u-popup :show="showSchool" mode="bottom" :round="8" @close="showSchool=false">
  240. <searchSchool @chooseSchool="chooseSchool"/>
  241. </u-popup>
  242. <!-- 选择班型 -->
  243. <u-picker :show="showClassModel" :columns="columnsClassModel" keyName="name" @confirm="confirmClassModel" @cancel="showClassModel=false"></u-picker>
  244. <!-- 选择车型 -->
  245. <u-picker :show="showCar" :columns="columnsCar" keyName="label" @confirm="confirmCar" :closeOnClickOverlay="true" @cancel="showCar=false"></u-picker>
  246. <!-- 原驾驶证初领日期 -->
  247. <u-datetime-picker :show="showFirstLicenceTime" mode="date" @confirm="confirmFirstLicenceTime"></u-datetime-picker>
  248. <!-- 原驾驶证学驾车型 -->
  249. <u-popup :show="showOldDriveModel" mode="bottom" :round="8" @close="showOldDriveModel=false">
  250. <oldDrive @pickerOldDrive="pickerOldDrive"/>
  251. </u-popup>
  252. <!-- 已过科目 -->
  253. <u-picker :show="showSubjectPass" :columns="columnsSubject" keyName="label" @confirm="confirmSubjectPass" @cancel="showSubjectPass=false"></u-picker>
  254. <!-- 待学科目 -->
  255. <u-picker :show="showSubjectTreat" :columns="columnsSubject" keyName="label" @confirm="confirmTreat" @cancel="showSubjectTreat=false"></u-picker>
  256. <!-- 城市 -->
  257. <u-picker :show="showCity" ref="uPicker" :columns="[cityArr]" @confirm="confirmCity" @change="changeHandler" keyName="name"></u-picker>
  258. </view>
  259. </template>
  260. <script>
  261. import comfigPopup from './comp/comfigPopup'
  262. import searchSchool from './comp/searchSchool'
  263. import oldDrive from './comp/oldDrive'
  264. import { areaTree, applyOnline, schoolClass, } from '@/config/api.js'
  265. export default {
  266. components: { comfigPopup, searchSchool, oldDrive },
  267. data() {
  268. return {
  269. showCity: false,
  270. showPopup: false,
  271. showClassModel: false,
  272. showCar: false,
  273. showFirstLicenceTime: false,
  274. showOldDriveModel: false,
  275. showSubjectPass: false,
  276. showSubjectTreat: false,
  277. columnsClassModel: [],//班型
  278. columnsSubject: [
  279. [
  280. {label: '科目一', id: 1},
  281. {label: '科目二', id: 2},
  282. {label: '科目三', id: 3},
  283. ]
  284. ],
  285. columnsCar: [],
  286. form: {
  287. school: '',
  288. classModel: '',
  289. car: '',
  290. coach: '',
  291. cardType: 1,
  292. idcard: '',
  293. nationality: '中国',
  294. businessType: '',//业务类型
  295. certificateCodeShow: '原驾驶证号xxx',
  296. driveLicence: '',//原驾驶证号 给后端的
  297. firstDriveDate: '',//原驾驶证初领日期
  298. sex: 2,
  299. phone: '',
  300. applyType: 1,
  301. name: '',
  302. oldTrainType: '',//原准驾车型
  303. subjectPass: '',
  304. subjectTreat: '',
  305. photoPath: '123.png',
  306. address: '',
  307. totalAmount: 0,
  308. radiovalue2: 2, //是否异地
  309. businessType: 0,
  310. },
  311. showSchool: false,
  312. radiolist1: [ {name: '初领', id: 0}, {name: '增驾', id: 1}],//0:初领,1:增驾,
  313. radiolist2: [ {name: '是', id: 1}, {name: '否', id: 2}],
  314. radiolist3: [ {name: '全款', id: 1}, {name: '预付款', id: 2}],
  315. cityArr: [],
  316. cityArr2: [],
  317. cityArr3: []
  318. }
  319. },
  320. onLoad() {
  321. this.initUserInfo()
  322. uni.$on('upDateCoachItem',(item)=>{
  323. console.log(item)
  324. this.form.coach = item.name
  325. this.form.coachId = item.id
  326. })
  327. this.areaTreeFn()
  328. let schoolClass = this.$store.state.school.schoolClass
  329. console.log(schoolClass)
  330. if(schoolClass.id) {
  331. this.form.classModel = schoolClass.name
  332. this.form.school = schoolClass.schoolName
  333. this.form.schoolId = schoolClass.schoolId
  334. this.form.car = schoolClass.carType
  335. }
  336. let schoolCoach = this.$store.state.school.schoolCoach
  337. console.log(schoolCoach)
  338. if(schoolCoach.id) {
  339. this.form.classModel = schoolCoach.name
  340. this.form.school = schoolCoach.schoolName
  341. this.form.schoolId = schoolCoach.schoolId
  342. // this.form.car = schoolClass.carType
  343. }
  344. if(this.form.schoolId) {
  345. this.schoolClassFn()
  346. }
  347. },
  348. onPullDownRefresh() {
  349. this.initUserInfo()
  350. },
  351. methods: {
  352. async initUserInfo() {
  353. await this.$store.dispatch('getUserInfo')
  354. this.form.userId = this.userId
  355. this.form.accountId = this.vuex_userInfo.accountId
  356. this.form.address = this.vuex_userInfo.address
  357. this.form.name = this.vuex_userInfo.name
  358. this.form.idcard = this.vuex_userInfo.idcard
  359. this.form.phone = this.vuex_userInfo.phone
  360. this.form.nationality = this.vuex_userInfo.nationality || '中国'
  361. this.form.cardType = this.vuex_userInfo.cardType || '1'
  362. },
  363. async schoolClassFn() {
  364. const {data: res} = await schoolClass({pageNo: 1,pageSize: 100, schoolId: this.form.schoolId})
  365. this.columnsClassModel = [res.list]
  366. console.log(this.columnsClassModel)
  367. },
  368. cityShowFn() {
  369. this.showCity = true
  370. this.$nextTick(()=>{
  371. let picker = this.$refs.uPicker
  372. picker.setColumnValues(1, this.cityArr2[0])
  373. picker.setColumnValues(2, this.cityArr3[0][0])
  374. })
  375. // picker = this.$refs.uPicker
  376. },
  377. changeHandler(e) {
  378. const {
  379. indexs,
  380. columnIndex,
  381. value,
  382. values, // values为当前变化列的数组内容
  383. index,
  384. // 微信小程序无法将picker实例传出来,只能通过ref操作
  385. picker = this.$refs.uPicker
  386. } = e
  387. // 当第一列值发生变化时,变化第二列(后一列)对应的选项
  388. if (columnIndex === 0) {
  389. // picker为选择器this实例,变化第二列对应的选项
  390. picker.setColumnValues(1, this.cityArr2[index])
  391. picker.setColumnValues(2, this.cityArr3[index][0])
  392. }
  393. if (columnIndex === 1) {
  394. let index3 = indexs[0]
  395. // picker为选择器this实例,变化第二列对应的选项
  396. picker.setColumnValues(2, (this.cityArr3[index3])[index])
  397. }
  398. console.log(indexs[0])
  399. // console.log(this.cityArr3[index3])
  400. // console.log(value)
  401. // console.log(values)
  402. // console.log(columnIndex)
  403. },
  404. // 回调参数为包含columnIndex、value、values
  405. confirmCity(e) {
  406. console.log('confirm', e)
  407. this.showCity = false
  408. },
  409. // 获取地区
  410. async areaTreeFn() {
  411. // this.cityArr2.push(this.traverse(item.children))
  412. const {data: res} = await areaTree()
  413. this.cityArr = res.map(item=>{
  414. let obj = {
  415. id: item.id,
  416. name: item.name
  417. }
  418. return obj
  419. })
  420. this.cityArr2 = res.map(item2=>{
  421. let arr2 = item2.children
  422. return arr2.map(val=>{
  423. let obj = {
  424. id: val.id,
  425. name: val.name
  426. }
  427. return obj
  428. })
  429. })
  430. this.cityArr3 = res.map(item2=>{
  431. let arr2 = item2.children
  432. return arr2.map(val=>{
  433. return val.children.map(val3=>{
  434. let obj = {
  435. id: val3.id,
  436. name: val3.name
  437. }
  438. return obj
  439. })
  440. })
  441. })
  442. // for(let i=0; i<res.length; i++) {
  443. // let obj = {
  444. // id: res[i].id,
  445. // name: res[i].name
  446. // }
  447. // this.cityArr.push(obj)
  448. // console.log(this.cityArr)
  449. // console.log(this.cityArr2)
  450. console.log(this.cityArr3)
  451. // this.showCity = res
  452. },
  453. traverse(arr, result=[]) {
  454. for (var i = 0; i < arr.length; i++) {
  455. let item = arr[i]
  456. let obj = {
  457. id: item.id,
  458. name: item.name
  459. }
  460. result.push(obj)
  461. if(item.children.length) {
  462. this.traverse(item.children, result)
  463. }
  464. }
  465. return result;
  466. },
  467. // 选择驾校
  468. chooseSchool(item) {
  469. this.form.school = item.name
  470. this.form.schoolId = item.id
  471. this.columnsCar = [item.businessScope.split(',')]
  472. console.log('驾校id')
  473. console.log(item.id)
  474. this.showSchool = false
  475. this.schoolClassFn()
  476. },
  477. // 选择班型
  478. confirmClassModel(val) {
  479. let item = val.value[0]
  480. console.log(item)
  481. this.showClassModel = false
  482. this.form.classModel = item.name
  483. this.form.schoolClassId = item.id
  484. this.form.totalAmount = item.totalAmount
  485. },
  486. // 选择车型
  487. confirmCar(val) {
  488. let item = val.value[0]
  489. console.log(item)
  490. this.showCar = false
  491. this.form.car = item
  492. this.form.trainType = item
  493. },
  494. showCarClick() {
  495. if(!this.form.school) return this.$u.toast('请先选择驾校')
  496. this.showCar = true
  497. },
  498. // 跳转到选择教练
  499. goCoach() {
  500. if(!this.form.schoolId) return this.$u.toast('请先选择驾校')
  501. this.$goPage('/pages/indexEntry/enroll/registInfo/chooseCoach/chooseCoach?schoolId=' + this.form.schoolId)
  502. },
  503. // 选择原驾驶证初领日期
  504. confirmFirstLicenceTime(val) {
  505. console.log(val)
  506. this.form.firstDriveDate = uni.$u.timeFormat(val.value, 'yyyy-mm-dd');
  507. this.showFirstLicenceTime = false
  508. },
  509. // 选择原准驾车型
  510. pickerOldDrive(val) {
  511. this.form.oldTrainType = val
  512. this.showOldDriveModel = false
  513. console.log(val)
  514. },
  515. // 选择已过科目
  516. confirmSubjectPass(val) {
  517. let item = val.value[0]
  518. this.form.finishSubject = item.label
  519. this.showSubjectPass = false
  520. },
  521. // 选择已过科目
  522. confirmTreat(val) {
  523. let item = val.value[0]
  524. this.form.subjectTreat = item.label
  525. this.showSubjectTreat = false
  526. },
  527. // 扫码
  528. scanCodeFn() {
  529. let _this = this
  530. uni.scanCode({
  531. success: function(res) {
  532. console.log('条码类型:' + res.scanType);
  533. console.log('条码内容:' + res.result);
  534. }
  535. });
  536. },
  537. changeVal(val) {
  538. console.log(val)
  539. },
  540. // 点击确认
  541. confirmClick() {
  542. this.showPopup = true
  543. },
  544. async comfigClick(val) {
  545. console.log(val)
  546. this.showPopup = false
  547. const {data: res} = await applyOnline(this.form)
  548. await this.$store.dispatch('getUserInfo')
  549. if(val) {
  550. this.$goPage('/pages/indexEntry/enroll/signContract/signContract?schoolId='+this.form.schoolId)
  551. }
  552. }
  553. }
  554. }
  555. </script>
  556. <style lang="scss" scoped>
  557. .pad {
  558. padding-bottom: 66rpx;
  559. }
  560. .card {
  561. padding: 10rpx 40rpx 10rpx 32rpx;
  562. margin-bottom: 20rpx;
  563. .row {
  564. height: 100rpx;
  565. display: flex;
  566. align-items: center;
  567. width: 100%;
  568. .lab {
  569. width: 152rpx;
  570. line-height: 100rpx;
  571. white-space: nowrap;
  572. &.long {
  573. width: 230rpx;
  574. }
  575. }
  576. .scan {
  577. margin-left: auto;
  578. width: 130rpx;
  579. height: 60rpx;
  580. background: rgba(25,137,250,0.1);
  581. border-radius: 8rpx;
  582. border: 2rpx solid #1989FA;
  583. background: #E8F3FE;
  584. text-align: center;
  585. line-height: 60rpx;
  586. color: $themC;
  587. }
  588. .rightCon {
  589. flex: 1;
  590. width: 0;
  591. display: flex;
  592. .val {
  593. flex: 1;
  594. width: 0;
  595. input {
  596. font-size: 28rpx;
  597. }
  598. &.blue {
  599. color: $themC;
  600. }
  601. &.red {
  602. color: #FF6A2A;
  603. }
  604. }
  605. .icon {
  606. width: 30rpx;
  607. height: 30rpx;
  608. u-icon {
  609. }
  610. }
  611. }
  612. }
  613. }
  614. .btnBg {
  615. width: 396rpx;
  616. margin: 100rpx auto 0 auto;
  617. }
  618. </style>