carCaptainAuthentication.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056
  1. <template>
  2. <view class="content">
  3. <view class="top-head"></view>
  4. <view class="container">
  5. <view class="content2 content-other">
  6. <view class="title">上传身份证人像面</view>
  7. <view @click.stop="uploadImg(1,1)" class="picture picture1" v-if="!dataDetails.cardAddressUrl">
  8. <image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
  9. <view class="text">上传身份证人像面</view>
  10. </view>
  11. <view v-if="dataDetails.cardAddressUrl" @click.stop="uploadImg(1,1)" class="preview-card-img picture">
  12. <view @click.stop="delCard(1)">
  13. <image class='del-card' src="@/static/images/common/quxiao@2x.png">
  14. </image>
  15. </view>
  16. <image class="" :src="dataDetails.cardAddressUrl" mode="aspectFit" style=""></image>
  17. </view>
  18. <view class="title">上传身份证国徽面</view>
  19. <view @click="uploadImg(2,2)" class="picture picture2" v-if="!dataDetails.cardBackAddressUrl">
  20. <image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
  21. <view class="text">上传身份证国徽面</view>
  22. </view>
  23. <view v-if="dataDetails.cardBackAddressUrl" @click.stop="uploadImg(2,2)"
  24. class="preview-card-img picture">
  25. <view @click.stop="delCard(2)">
  26. <image class='del-card' src="@/static/images/common/quxiao@2x.png">
  27. </image>
  28. </view>
  29. <image class="" :src="dataDetails.cardBackAddressUrl" mode="aspectFit" style=""></image>
  30. </view>
  31. <view class="flex row">
  32. <view class="left-text">姓名</view>
  33. <u--input placeholder="输入姓名" inputAlign='right' border="none" v-model="dataDetails.name">
  34. </u--input>
  35. </view>
  36. <view class="flex row">
  37. <view class="left-text">身份证号</view>
  38. <u--input disabled placeholder="请输入身份证号" inputAlign='right' border="none"
  39. v-model="dataDetails.idCard" maxlength="18">
  40. </u--input>
  41. </view>
  42. <view class="flex row flex-space-between">
  43. <view class="left-text">身份证有效期</view>
  44. <!-- <view class="" @click="selectValidityPeriod(1)">
  45. {{dataDetails.cardValidityStartDate?dataDetails.cardValidityStartDate:"选择身份证起始日期>"}}
  46. {{dataDetails.cardValidityEndDate?dataDetails.cardValidityEndDate:'选择身份证截止日期>'}}
  47. </view> -->
  48. <view style='font-size:14px;' class="" @click="selectValidityPeriod(3)">
  49. {{dataDetails.cardValidityStartDate?dataDetails.cardValidityStartDate:'起始时间'}}
  50. </view>
  51. <view>~</view>
  52. <view style='font-size:14px;' class="" @click="selectValidityPeriod(1)">
  53. {{dataDetails.cardValidityEndDate?dataDetails.cardValidityEndDate:'结束时间'}}
  54. </view>
  55. </view>
  56. </view>
  57. <!-- v-for="(item,index) in dataDetails.hyDriverPayeeInfoList" :key='index' -->
  58. <view class="content3 flex s-row">
  59. <!-- <view class="flex">
  60. 银行卡-{{index+1}}
  61. </view> -->
  62. <!-- <view class="">
  63. <image class='del-bank' src="@/static/images/common/quxiao@2x.png">
  64. </image>
  65. </view> -->
  66. <view class="title">上传银行卡卡号页</view>
  67. <view @click="uploadImg(3,0)" class="picture picture3" v-if="!dataDetails.payeeAddressUrl">
  68. <image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
  69. <view class="text">上传银行卡卡号页</view>
  70. </view>
  71. <view v-if="dataDetails.payeeAddressUrl" @click.stop="uploadImg(3,0)" class="preview-card-img picture">
  72. <!-- <image class="card-img" :src="dataDetails.cardAddressUrl"></image> -->
  73. <view @click.stop="delCard(3)">
  74. <image class='del-card' src="@/static/images/common/quxiao@2x.png">
  75. </image>
  76. </view>
  77. <image class="" :src="dataDetails.payeeAddressUrl" mode="aspectFit"></image>
  78. </view>
  79. <view class="flex row flex-space-between">
  80. <view class="left-text">银行卡卡号</view>
  81. <view class="flex">
  82. <u--input placeholder="输入银行卡号码" inputAlign='right' border="none" v-model="dataDetails.bankCard"
  83. maxlength="19">
  84. </u--input>
  85. </view>
  86. </view>
  87. <view class="flex row">
  88. <view class="left-text">开户行</view>
  89. <u--input placeholder="输入开户行" inputAlign='right' border="none" v-model="dataDetails.bankDeposit">
  90. </u--input>
  91. </view>
  92. <view class="flex row">
  93. <view class="left-text khzh-styel">开户支行</view>
  94. <view class="flex" v-if="isShowManualInput">
  95. <u--input class="select-bankzh" placeholder="输入开户支行" inputAlign='right' border="none"
  96. v-model="dataDetails.bankDepositBranch">
  97. </u--input>
  98. <view @click="manualInput" class="type">选择支行</view>
  99. </view>
  100. <view class="flex align-center" v-if="!isShowManualInput">
  101. <view :style="{'color':dataDetails.bankDepositBranch?'#000':'#C6CBD5'}"
  102. style='font-size:15px;text-align:right;' class="select-bankzh point" @click="selectZhbank">
  103. {{dataDetails.bankDepositBranch?dataDetails.bankDepositBranch:'选择开户支行'}}
  104. </view>
  105. <view @click="manualInput" class="type">手动输入</view>
  106. </view>
  107. </view>
  108. <view class="flex row flex-space-between">
  109. <view class="left-text">收款人</view>
  110. <view class="flex">
  111. <u--input placeholder="自动获取,不可编辑" inputAlign='right' border="none"
  112. v-model="dataDetails.payeeName" readonly>
  113. </u--input>
  114. </view>
  115. </view>
  116. <u-picker :show="isShowBank" :columns="bankType[0]" :closeOnClickOverlay='true' @close='zhBankClose'
  117. @cancel='zhBankClose' @confirm='confirmBank'></u-picker>
  118. </u-picker>
  119. </view>
  120. <view class="content3 flex s-row">
  121. <view class="title">道路运输许可证</view>
  122. <view @click="uploadImg(4)" class="picture picture8" v-if="!dataDetails.roadTransportOperationLicense">
  123. <image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
  124. <view class="text">上传道路运输许可证</view>
  125. </view>
  126. <view v-if="dataDetails.roadTransportOperationLicense" @click.stop="uploadImg(4)"
  127. class="preview-card-img picture">
  128. <view @click.stop="delCard(4)">
  129. <image class='del-card' src="@/static/images/common/quxiao@2x.png">
  130. </image>
  131. </view>
  132. <image class="" :src="dataDetails.roadTransportOperationLicense" mode="aspectFit"></image>
  133. </view>
  134. <view class="flex row">
  135. <view class="left-text">许可证编号</view>
  136. <u--input maxlength='20' placeholder="输入许可证编号" inputAlign='right' border="none"
  137. v-model="dataDetails.roadTransportOperationLicenseNo">
  138. </u--input>
  139. </view>
  140. <view class="flex row flex-space-between">
  141. <view class="left-text">许可证有效期</view>
  142. <view class="" @click="selectValidityPeriod(2)">
  143. <view
  144. :style="{'color':dataDetails.roadTransportOperationLicenseValidityDate?'#000':'rgb(192, 196, 204)'}">
  145. {{dataDetails.roadTransportOperationLicenseValidityDate?dataDetails.roadTransportOperationLicenseValidityDate:'选择有效期'}}
  146. <image v-if='!dataDetails.roadTransportOperationLicenseValidityDate'
  147. style='width:12px;height:12px;' src="../../../static/right.png" mode=""></image>
  148. </view>
  149. </view>
  150. </view>
  151. <view class="title">自拍照片</view>
  152. <view @click="uploadImg(5)" class="picture picture8" v-if="!dataDetails.selfPhoto">
  153. <image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
  154. <view class="text">上传自拍照片</view>
  155. </view>
  156. <view v-if="dataDetails.selfPhoto" @click.stop="uploadImg(5)"
  157. class="preview-card-img picture">
  158. <view @click.stop="delCard(5)">
  159. <image class='del-card' src="@/static/images/common/quxiao@2x.png">
  160. </image>
  161. </view>
  162. <image class="" :src="dataDetails.selfPhoto" mode="aspectFit"></image>
  163. </view>
  164. </view>
  165. <u-picker :show="isShowcardValidity" ref="uPicker" :columns="validityPeriod"
  166. @confirm="confirmValidityPeriod" @change="changeHandler" @cancel='isShowcardValidity= false'>
  167. </u-picker>
  168. <itmister-date-picker :overdueContent="'身份证已过期'" :dateStatus="status" :periodOfValidity="true"
  169. :checkYear="year" :checkMonth="month" :checkDay="day" ref="dateEl" :startYear="1999" :futureYear="30"
  170. @dateConfirm="confirmValidityPeriod"></itmister-date-picker>
  171. <itmister-date-picker :overdueContent="'许可证已过期'" :dateStatus="status" :periodOfValidity="true"
  172. :checkYear="year" :checkMonth="month" :checkDay="day" ref="dateEl1" :startYear="1999" :futureYear="30"
  173. @dateConfirm="confirmValidityPeriod1"></itmister-date-picker>
  174. <itmister-date-picker :dateStatus="0" :checkYear="year" :checkMonth="month" :checkDay="day" ref="dateEl2"
  175. :startYear="1980" :futureYear="30" @dateConfirm="confirmValidityPeriod2">
  176. </itmister-date-picker>
  177. <u-action-sheet :actions="$helper.imgTypeList" :title="$helper.imgType" :show="isShowimgType"
  178. @select="imgTypeSelect" :closeOnClickOverlay="true" :closeOnClickAction="true"
  179. @close="isShowimgType=false">
  180. </u-action-sheet>
  181. <u-toast ref="uToast"></u-toast>
  182. </view>
  183. <u-modal :show="auditShow" :title="alertTitle" :closeOnClickOverlay='true' :showCancelButton='true'
  184. confirmColor='#F5BA3C' @confirm="confirmClick" @close="cancelClick" @cancel="cancelClick"></u-modal>
  185. <u-toast ref="uToast"></u-toast>
  186. <view class="content4">
  187. <view class="next-btn" @click="next()">提交</view>
  188. </view>
  189. </view>
  190. </template>
  191. <script>
  192. import upload from '@/components/upload.vue';
  193. import permision from "@/js_sdk/wa-permission/permission.js"
  194. import uploadImage from '@/components/ossutil/uploadFile.js';
  195. var _this
  196. import {
  197. mapState
  198. } from 'vuex';
  199. export default {
  200. components: {
  201. upload
  202. },
  203. data() {
  204. return {
  205. status: 1,
  206. seconds: 30,
  207. year: '',
  208. month: '',
  209. day: '',
  210. validityPeriod: [],
  211. isShowcardValidity: false,
  212. uploadType: '',
  213. isShowimgType: false,
  214. dataDetails: {
  215. commonId: '',
  216. name: '',
  217. idCard: '',
  218. cardAddressUrl: '',
  219. cardBackAddressUrl: '',
  220. cardValidityEndDate: '',
  221. roadTransportOperationLicense: '',
  222. roadTransportOperationLicenseValidityDate: "",
  223. },
  224. action: this.$helper.ossUploadUrl,
  225. // maxSize: 50 * 1024 * 1024, //限制文件大小 50M
  226. // isAdd: true,
  227. imagesrc: null,
  228. isShowBank: false,
  229. isShowManualInput: false,
  230. bankType: [],
  231. auditShow: false,
  232. alertTitle: "",
  233. checkType: "",
  234. };
  235. },
  236. onLoad(options) {
  237. _this = this;
  238. this.get_camera_permission()
  239. if (options.data) { //编辑
  240. this.dataDetails = JSON.parse(options.data)
  241. this.checkType = "2" //编辑
  242. } else {
  243. //获取认证状态
  244. this.getAuthenticationStatus()
  245. this.dataDetails.commonId = this.userInfo.id
  246. this.checkType = "1" //新增
  247. }
  248. },
  249. computed: {
  250. ...mapState(['hasLogin', 'userInfo']),
  251. },
  252. methods: {
  253. cancelClick() {
  254. this.auditShow = false
  255. },
  256. next() {
  257. if (this.validate()) return
  258. this.alertTitle = "确定提交认证信息?"
  259. this.auditShow = true
  260. },
  261. confirmBank(e) {
  262. this.dataDetails.hyDriverPayeeInfoList[this.index].bankDepositBranch = e.value[0]
  263. this.isShowBank = false
  264. },
  265. zhBankClose() {
  266. this.isShowBank = false
  267. },
  268. // 选择支行
  269. selectZhbank() {
  270. if (uni.$u.test.isEmpty(this.bankType[this.index])) {
  271. this.$refs.uToast.show({
  272. type: 'error',
  273. message: "请选择手动输入!",
  274. })
  275. return true
  276. }
  277. this.isShowBank = true
  278. },
  279. manualInput(val) {
  280. this.index = val
  281. if (this.isShowManualInput) {
  282. if (!this.dataDetails.payeeAddressUrl) {
  283. this.$refs.uToast.show({
  284. type: 'error',
  285. message: "请先上传银行卡!",
  286. })
  287. return true
  288. } else if (this.dataDetails.payeeAddressUrl && uni.$u.test.isEmpty(
  289. this.bankType[0])) {
  290. this.$refs.uToast.show({
  291. type: 'error',
  292. message: "请选择手动输入开户支行!",
  293. })
  294. return true
  295. }
  296. this.isShowBank = true
  297. } else {
  298. this.isShowBank = false
  299. }
  300. this.isShowManualInput = !this.isShowManualInput
  301. },
  302. async get_camera_permission() {
  303. var photol = await permision.requestAndroidPermission("android.permission.CAMERA")
  304. if (photol == false) {
  305. uni.showModal({
  306. title: '提示',
  307. content: '您已经关闭相册权限,去设置',
  308. success: function(res) {
  309. if (res.confirm) {
  310. permision.gotoAppPermissionSetting()
  311. // plus.runtime.openURL("app-settings:");
  312. } else if (res.cancel) {
  313. console.log('用户点击取消');
  314. }
  315. }
  316. });
  317. }
  318. },
  319. changeHandler(e) {
  320. const {
  321. columnIndex,
  322. value,
  323. values,
  324. index,
  325. picker = this.$refs.uPicker
  326. } = e
  327. // if (columnIndex === 0) {
  328. // if (e.index != 0) {
  329. // picker.setColumnValues(1, this.validityPeriod[1].shift())
  330. // }
  331. // } else if (columnIndex === 1) {
  332. // if (e.index != 0) {
  333. // picker.setColumnValues(2, this.validityPeriod[2].shift())
  334. // }
  335. // }
  336. },
  337. getCode() {
  338. if (/^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(this.dataDetails.driverPhone)) {
  339. if (this.$refs.uCode.canGetCode) {
  340. // 模拟向后端请求验证码
  341. uni.showLoading({
  342. title: '正在获取验证码'
  343. })
  344. _this.$request.baseRequest('get', '/commonUser/sendVerifyCode', {
  345. phone: this.dataDetails.driverPhone
  346. }).then(res => {
  347. uni.hideLoading();
  348. // 这里此提示会被this.start()方法中的提示覆盖
  349. uni.$u.toast('验证码已发送');
  350. // 通知验证码组件内部开始倒计时
  351. this.$refs.uCode.start();
  352. })
  353. .catch(res => {
  354. uni.$u.toast(res.message);
  355. });
  356. // setTimeout(() => {
  357. // }, 2000);
  358. } else {
  359. uni.$u.toast('倒计时结束后再发送');
  360. }
  361. } else {
  362. uni.$u.toast('请输入正确手机号');
  363. }
  364. },
  365. end() {
  366. // uni.$u.toast('倒计时结束');
  367. },
  368. start() {
  369. // uni.$u.toast('倒计时开始');
  370. },
  371. //判断是否是初次认证
  372. getAuthenticationStatus() {
  373. this.$request.baseRequest('', '/driverInfo/firstAuthentication', {
  374. driverPhone: this.userInfo.phone,
  375. }).then(res => {
  376. if (res.code == 200) {
  377. // this.dataDetails = res.data
  378. if (res.data.authenticationStatus != "未认证") {
  379. this.dataDetails.accountNumber = res.data.accountNumber
  380. this.dataDetails.cardAddressUrl = res.data.cardAddressUrl
  381. this.dataDetails.cardBackAddressUrl = res.data.cardBackAddressUrl
  382. this.dataDetails.name = res.data.driverName
  383. this.dataDetails.idCard = res.data.numberCard
  384. this.dataDetails.cardValidityStartDate = res.data.cardValidityStartDate
  385. this.dataDetails.cardValidityEndDate = res.data.cardValidityDate
  386. this.dataDetails.payeeAddressUrl = res.data.hyDriverPayeeInfoList[0].payeeAddressUrl
  387. this.dataDetails.bankCard = res.data.hyDriverPayeeInfoList[0].bankCard
  388. this.dataDetails.bankDeposit = res.data.hyDriverPayeeInfoList[0].bankDeposit
  389. this.dataDetails.bankDepositBranch = res.data.hyDriverPayeeInfoList[0]
  390. .bankDepositBranch
  391. this.dataDetails.payeeName = res.data.hyDriverPayeeInfoList[0].payeeName
  392. }
  393. }
  394. })
  395. .catch(res => {
  396. uni.$u.toast(res.message);
  397. });
  398. },
  399. confirmValidityPeriod(date) {
  400. this.dataDetails.cardValidityEndDate = date.date
  401. },
  402. confirmValidityPeriod1(date) {
  403. this.dataDetails.roadTransportOperationLicenseValidityDate = date.date
  404. this.$forceUpdate()
  405. },
  406. confirmValidityPeriod2(date) {
  407. this.dataDetails.cardValidityStartDate = date.date
  408. this.$forceUpdate()
  409. },
  410. selectValidityPeriod(num) {
  411. if (num == 1) {
  412. if (this.dataDetails.cardValidityEndDate && this.dataDetails.cardValidityEndDate != '长期') {
  413. var arr = this.dataDetails.cardValidityEndDate.split('-')
  414. this.year = arr[0]
  415. this.month = arr[1]
  416. this.day = arr[2]
  417. }
  418. if (this.dataDetails.cardValidityEndDate == '长期') {
  419. this.year = '长期'
  420. this.month = ''
  421. this.day = ''
  422. }
  423. this.$refs.dateEl.show()
  424. } else if (num == 2) {
  425. this.$refs.dateEl1.show()
  426. } else if (num == 3) {
  427. this.$refs.dateEl2.show()
  428. }
  429. },
  430. //设置图片
  431. setImage(e) {
  432. console.log(e);
  433. //显示在页面
  434. //this.imagesrc = e.path;
  435. if (e.dotype == 'idphoto') {
  436. _this.zjzClipper(e.path);
  437. } else if (e.dotype == 'watermark') {
  438. _this.watermark(e.path);
  439. } else {
  440. _this.savePhoto(e.path);
  441. }
  442. },
  443. //保存图片到相册,方便核查
  444. savePhoto(path) {
  445. this.imagesrc = path;
  446. // this.dataDetails.cardAddressUrl = path
  447. uploadImage(path, 'appData/',
  448. result => {
  449. // 上传成功
  450. console.log('图片地址', result)
  451. this.dataDetails.cardAddressUrl = result
  452. }
  453. )
  454. },
  455. uploadImg(type, index) {
  456. this.uploadType = type
  457. // this.isShowimgType = true
  458. this.index = index
  459. this.imgTypeSelect()
  460. },
  461. delCard(type) {
  462. var _this = this
  463. switch (type) {
  464. case 1:
  465. _this.dataDetails.cardAddressUrl = ""
  466. break;
  467. case 2:
  468. _this.dataDetails.cardBackAddressUrl = ""
  469. break;
  470. case 3:
  471. _this.dataDetails.payeeAddressUrl = ""
  472. _this.dataDetails.bankCard = ""
  473. _this.dataDetails.bankDeposit = ""
  474. _this.dataDetails.bankDepositBranch = ""
  475. _this.$forceUpdate()
  476. break;
  477. case 4:
  478. _this.dataDetails.roadTransportOperationLicense = ""
  479. break;
  480. case 5:
  481. _this.dataDetails.selfPhoto = ''
  482. _this.$forceUpdate()
  483. break;
  484. }
  485. },
  486. // 上传图片
  487. imgTypeSelect() {
  488. // console.log(val)
  489. console.log(this.uploadType)
  490. // if (val.name == '相册') {
  491. uni.chooseImage({
  492. count: 1,
  493. sizeType: ['compressed'],
  494. // sourceType: this.$helper.chooseImage.sourceType,
  495. success: function(res) {
  496. console.log(JSON.stringify(res.tempFilePaths));
  497. uploadImage('image', res.tempFilePaths[0], 'appData/',
  498. result => {
  499. // 上传成功回调函数
  500. console.log('图片地址', result)
  501. switch (_this.uploadType) {
  502. // 身份正面
  503. case 1:
  504. _this.dataDetails.cardAddressUrl = result
  505. // 识别
  506. _this.$request.baseRequest('get',
  507. '/driverInfo/personShibie', {
  508. personImg: result,
  509. flag: 1
  510. }).then(res => {
  511. if (res.data) {
  512. _this.dataDetails.cardAddress = res.data
  513. .recPersonAddr
  514. _this.dataDetails.idCard = res.data.recPersonNo
  515. if (res.data.recPerson) {
  516. _this.dataDetails.name = res.data
  517. .recPerson
  518. // _this.dataDetails.driverCall = res.data
  519. // .recPerson.substring(0, 1)
  520. }
  521. _this.dataDetails.driverBirthday = res.data
  522. .recPersonBrithday
  523. }
  524. })
  525. .catch(res => {
  526. uni.$u.toast(res.message);
  527. });
  528. break
  529. // 身份反面
  530. case 2:
  531. _this.dataDetails.cardBackAddressUrl = result
  532. // 识别
  533. _this.$request.baseRequest('get',
  534. '/driverInfo/personShibie', {
  535. personImg: result,
  536. flag: 2
  537. }).then(res => {
  538. if (res.data.idCardValidity) {
  539. let date = res.data.idCardValidity.split("-")[1]
  540. _this.dataDetails.cardValidityEndDate = date
  541. .replace(
  542. '.', '-').replace('.', '-')
  543. }
  544. })
  545. .catch(res => {
  546. uni.$u.toast(res.message);
  547. });
  548. break
  549. case 3:
  550. _this.bankType[_this.index] = []
  551. _this.$request.baseRequest('get',
  552. '/driverInfo/bankShibie', {
  553. bankImg: result,
  554. }).then(res => {
  555. _this.dataDetails.hyDriverPayeeInfoList[_this.index]
  556. .payeeAddressUrl = result
  557. if (res.data) {
  558. if (res.data.bankNo) {
  559. _this.dataDetails.hyDriverPayeeInfoList[_this
  560. .index].bankCard = res.data.bankNo
  561. .replace(/\s*/g, "")
  562. }
  563. if (res.data.bankName) {
  564. _this.dataDetails.hyDriverPayeeInfoList[_this
  565. .index].bankDeposit = res.data.bankName
  566. }
  567. // 开户支行LIst
  568. if (res.data.bankNameZhihang) {
  569. _this.bankType[_this.index].push(res.data
  570. .bankNameZhihang)
  571. }
  572. }
  573. _this.$forceUpdate()
  574. })
  575. .catch(res => {
  576. uni.$u.toast(res.message);
  577. });
  578. break;
  579. case 4:
  580. _this.dataDetails.roadTransportOperationLicense = result
  581. _this.$forceUpdate()
  582. break;
  583. case 5:
  584. _this.dataDetails.selfPhoto = result
  585. _this.$forceUpdate()
  586. break;
  587. }
  588. }
  589. )
  590. }
  591. });
  592. },
  593. confirmClick(val) {
  594. this.auditShow = false
  595. uni.showLoading({
  596. mask: true,
  597. title: '加载中'
  598. })
  599. if (this.checkType == 1) {
  600. this.$request.baseRequest('post', '/hyCarCaptainInfo/api/addCarCaptain', this.dataDetails).then(
  601. res => {
  602. if (res.code == 200) {
  603. uni.hideLoading()
  604. this.$refs.uToast.show({
  605. type: 'success',
  606. message: "提交成功,待平台审核!",
  607. complete() {
  608. uni.navigateBack({
  609. delta: 1
  610. });
  611. }
  612. })
  613. // uni.$u.route('/pages/mine/index');
  614. } else {
  615. uni.hideLoading()
  616. uni.$u.toast(res.message);
  617. }
  618. }).catch(res => {
  619. uni.$u.toast(res.message);
  620. });
  621. } else if (this.checkType == 2) {
  622. this.$request.baseRequest('post', '/hyCarCaptainInfo/api/editCarCaptain', this.dataDetails).then(
  623. res => {
  624. if (res.code == 200) {
  625. uni.hideLoading()
  626. this.$refs.uToast.show({
  627. type: 'success',
  628. message: "修改成功,待平台审核!",
  629. complete() {
  630. uni.navigateBack({
  631. delta: 1
  632. });
  633. }
  634. })
  635. } else {
  636. uni.hideLoading()
  637. uni.$u.toast(res.message);
  638. }
  639. }).catch(res => {
  640. uni.$u.toast(res.message);
  641. });
  642. }
  643. },
  644. validate() {
  645. // true 为校验不通过
  646. if (uni.$u.test.isEmpty(this.dataDetails.cardAddressUrl)) {
  647. this.$refs.uToast.show({
  648. type: 'error',
  649. message: "身份证人像页不能为空!",
  650. })
  651. return true
  652. }
  653. if (uni.$u.test.isEmpty(this.dataDetails.cardBackAddressUrl)) {
  654. this.$refs.uToast.show({
  655. type: 'error',
  656. message: "身份证国徽页不能为空!",
  657. })
  658. return true
  659. }
  660. if (uni.$u.test.isEmpty(this.dataDetails.name)) {
  661. this.$refs.uToast.show({
  662. type: 'error',
  663. message: "姓名不能为空!",
  664. })
  665. return true
  666. }
  667. if (uni.$u.test.isEmpty(this.dataDetails.idCard)) {
  668. this.$refs.uToast.show({
  669. type: 'error',
  670. message: "身份证号不能为空!",
  671. })
  672. return true
  673. }
  674. if (uni.$u.test.isEmpty(this.dataDetails.cardValidityStartDate)) {
  675. this.$refs.uToast.show({
  676. type: 'error',
  677. message: "身份证起始日期不能为空!",
  678. })
  679. return true
  680. }
  681. if (uni.$u.test.isEmpty(this.dataDetails.cardValidityEndDate)) {
  682. this.$refs.uToast.show({
  683. type: 'error',
  684. message: "身份证截止日期不能为空!",
  685. })
  686. return true
  687. }
  688. if (uni.$u.test.isEmpty(this.dataDetails.payeeAddressUrl)) {
  689. this.$refs.uToast.show({
  690. type: 'error',
  691. message: "请上传银行卡卡号页!",
  692. })
  693. return true
  694. }
  695. if (uni.$u.test.isEmpty(this.dataDetails.bankCard)) {
  696. this.$refs.uToast.show({
  697. type: 'error',
  698. message: "银行卡卡号不能为空!",
  699. })
  700. return true
  701. }
  702. if (uni.$u.test.isEmpty(this.dataDetails.bankDeposit)) {
  703. this.$refs.uToast.show({
  704. type: 'error',
  705. message: "开户行不能为空!",
  706. })
  707. return true
  708. }
  709. if (uni.$u.test.isEmpty(this.dataDetails.bankDepositBranch)) {
  710. this.$refs.uToast.show({
  711. type: 'error',
  712. message: "开户支行不能为空!",
  713. })
  714. return true
  715. }
  716. if (uni.$u.test.isEmpty(this.dataDetails.payeeName)) {
  717. this.$refs.uToast.show({
  718. type: 'error',
  719. message: "收款人不能为空!",
  720. })
  721. return true
  722. }
  723. if (uni.$u.test.isEmpty(this.dataDetails.roadTransportOperationLicense)) {
  724. this.$refs.uToast.show({
  725. type: 'error',
  726. message: "道路运输许可证不能为空!",
  727. })
  728. return true
  729. }
  730. if (uni.$u.test.isEmpty(this.dataDetails.roadTransportOperationLicenseNo)) {
  731. this.$refs.uToast.show({
  732. type: 'error',
  733. message: "许可证编号不能为空!",
  734. })
  735. return true
  736. }
  737. if (uni.$u.test.isEmpty(this.dataDetails.roadTransportOperationLicenseValidityDate)) {
  738. this.$refs.uToast.show({
  739. type: 'error',
  740. message: "许可证有效期不能为空!",
  741. })
  742. return true
  743. }
  744. return false
  745. }
  746. },
  747. };
  748. </script>
  749. <style scoped lang="scss">
  750. /deep/.u-radio {
  751. margin-bottom: 0 !important;
  752. }
  753. .top-head {
  754. background: #F5BA3C;
  755. height: 80rpx;
  756. width: 100%;
  757. }
  758. .container {
  759. position: relative;
  760. top: -60rpx;
  761. margin: 0 20rpx;
  762. }
  763. .row4-img {
  764. width: 32rpx;
  765. height: 32rpx;
  766. }
  767. .content1,
  768. .content2,
  769. .content3 {
  770. .left-text {
  771. width: 290rpx;
  772. color: #333333;
  773. display: flex;
  774. align-items: center;
  775. }
  776. .row {
  777. border-bottom: 1px solid #EEEEEE;
  778. padding-bottom: 28rpx;
  779. margin-top: 26rpx;
  780. .ch-style {}
  781. }
  782. .row-ch {
  783. padding-right: 180rpx;
  784. box-sizing: border-box;
  785. }
  786. }
  787. .content1-car {
  788. margin-top: 20rpx;
  789. .left-text {
  790. width: 290rpx;
  791. color: #333333;
  792. display: flex;
  793. align-items: center;
  794. }
  795. .row {
  796. border-bottom: 1px solid #EEEEEE;
  797. padding-bottom: 28rpx;
  798. margin-top: 26rpx;
  799. .color {
  800. // background: blue;
  801. width: 340rpx;
  802. }
  803. }
  804. }
  805. .input-ckg {
  806. height: 86rpx;
  807. margin-top: 0 !important;
  808. padding-bottom: 0 !important;
  809. .u-input {
  810. height: 100%;
  811. background: #F7F8FA;
  812. padding-left: 10rpx !important;
  813. padding-right: 85rpx !important;
  814. }
  815. .star {
  816. display: flex;
  817. align-items: center;
  818. margin: 0 10rpx;
  819. }
  820. .input-positon {
  821. position: relative;
  822. }
  823. .position-right {
  824. position: absolute;
  825. right: 20rpx;
  826. top: 0;
  827. width: 60rpx;
  828. height: 50rpx;
  829. bottom: 0;
  830. margin: auto;
  831. }
  832. }
  833. .picture {
  834. margin-top: 20rpx;
  835. background: #F5F6FA;
  836. width: 212rpx;
  837. height: 212rpx;
  838. border-radius: 20rpx;
  839. display: flex;
  840. flex-direction: column;
  841. justify-content: center;
  842. align-items: center;
  843. color: #6A7282;
  844. }
  845. .add-car {
  846. background: #FFFFFF;
  847. margin: 20rpx 50rpx;
  848. border-radius: 50rpx;
  849. display: flex;
  850. justify-content: center;
  851. align-items: center;
  852. padding: 20rpx 0;
  853. .icon {
  854. margin-right: 20rpx;
  855. }
  856. .car-text {
  857. font-size: 36rpx;
  858. font-weight: 700;
  859. color: #F5BA3C;
  860. }
  861. }
  862. .carlist-item {
  863. margin-top: 20rpx;
  864. padding: 0 20rpx 20rpx 20rpx;
  865. background: white;
  866. border-radius: 10rpx;
  867. position: relative;
  868. .del-car {
  869. position: absolute;
  870. top: 0;
  871. right: 0;
  872. width: 80rpx;
  873. height: 80rpx;
  874. }
  875. }
  876. .content2,
  877. .content3 {
  878. .del-bank {
  879. position: absolute;
  880. top: 0;
  881. right: 0;
  882. width: 80rpx;
  883. height: 80rpx;
  884. }
  885. .picture {
  886. width: 100%;
  887. height: 440rpx;
  888. position: relative;
  889. .text {
  890. margin-top: 20rpx;
  891. }
  892. }
  893. .picture1 {
  894. background: url(../../../static/images/mine/zm.png);
  895. background-size: 100% 100%;
  896. }
  897. .picture2 {
  898. background: url(../../../static/images/mine/gh.png);
  899. background-size: 100% 100%;
  900. }
  901. .picture3 {
  902. background: url(../../../static/images/mine/yhkzm.png);
  903. background-size: 100% 100%;
  904. }
  905. .xj-image {
  906. width: 100rpx;
  907. height: 100rpx;
  908. }
  909. .title {
  910. color: #999999;
  911. margin: 20rpx 0;
  912. }
  913. }
  914. .content3 {
  915. position: relative;
  916. background: white;
  917. margin: 20rpx 0 0 0;
  918. border-radius: 10rpx;
  919. padding: 20rpx;
  920. .khzh-styel {
  921. // width: 350rpx;
  922. }
  923. .type {
  924. background: #F5BA3C;
  925. border-radius: 10rpx;
  926. color: white;
  927. box-sizing: border-box;
  928. padding: 4rpx 10rpx;
  929. font-size: 26rpx;
  930. display: flex;
  931. justify-content: center;
  932. align-items: center;
  933. }
  934. .select-bankzh {
  935. width: 230rpx;
  936. height: 48rpx;
  937. }
  938. }
  939. .content4 {
  940. display: flex;
  941. justify-content: center;
  942. background: white;
  943. padding: 40rpx 20rpx 50rpx 20rpx;
  944. .next-btn {
  945. background:#F5BA3C;
  946. width: 90%;
  947. padding: 20rpx 20rpx;
  948. text-align: center;
  949. color: #fff;
  950. border-radius: 50rpx;
  951. }
  952. }
  953. .yzm {}
  954. .yzm-btn {
  955. background: #F5BA3C;
  956. color: white;
  957. height: 60rpx;
  958. }
  959. .preview-card-img {
  960. // /deep/uni-image>div,
  961. // uni-image>img {
  962. // transform: scale(1.5) rotate(-90deg);
  963. // }
  964. }
  965. .del-card {
  966. position: absolute;
  967. top: -10rpx;
  968. right: -6rpx;
  969. width: 80rpx;
  970. height: 80rpx;
  971. z-index: 9;
  972. }
  973. /deep/.u-radio {
  974. margin-left: 10px;
  975. }
  976. /deep/.uni-input-input:disabled {
  977. background: #fff;
  978. }
  979. /deep/.u-radio-group--row {
  980. justify-content: flex-end;
  981. }
  982. /deep/.u-textarea {
  983. padding: 9px 0;
  984. }
  985. /deep/.u-textarea__field {
  986. color: #000;
  987. text-align: right;
  988. }
  989. </style>