story#7189,回程车小程序司机端-迁移认证页面
This commit is contained in:
211
src/views/rvDriverAuthentication/carAudit.vue
Normal file
211
src/views/rvDriverAuthentication/carAudit.vue
Normal file
@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="navBar">
|
||||
<van-nav-bar
|
||||
title="驾驶证认证"
|
||||
left-arrow
|
||||
left-arrow-color="#FFFFFF"
|
||||
:border="false"
|
||||
:fixed="true"
|
||||
:safe-area-inset-top="true"
|
||||
@click-left="h5GoBack"
|
||||
/>
|
||||
</div>
|
||||
<tip-bar :title="'应国家政策要求：从事货运行业的司机用户，身份证照片、驾驶证信息、行驶证信息、人车合影及承运资质信息必须进行实名认证。'"></tip-bar>
|
||||
<photo-item title="上传驾驶证" :left-url="form.drivingLicenceFront || carFront" :right-url="form.drivingLicenceContrary || carBack"
|
||||
:show="show" @leftImg="carFrontHandler" @rightImg="carBackHandler"></photo-item>
|
||||
<div class="carInfo">
|
||||
<div class="left_wrap title">
|
||||
<div class="form_item">
|
||||
<div>
|
||||
<span class="star">*</span>
|
||||
<span>姓名</span>
|
||||
</div>
|
||||
<span class="phone">{{form.name}}</span>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div>
|
||||
<span class="star">*</span>
|
||||
<span>身份证号</span>
|
||||
</div>
|
||||
<input class="phone" type="text" placeholder="请输入持卡人身份证号" v-model="form.licenseNumber">
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div>
|
||||
<span class="star">*</span>
|
||||
<span>准驾类型</span>
|
||||
</div>
|
||||
<span class="phone">{{form.approvedType}}</span>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div>
|
||||
<span class="star">*</span>
|
||||
<span>初次领证日期</span>
|
||||
</div>
|
||||
<span class="phone">{{form.initialIssueDate}}</span>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div>
|
||||
<span class="star">*</span>
|
||||
<span>有效期限</span>
|
||||
</div>
|
||||
<span class="phone">{{form.validPeriod}}</span>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div>
|
||||
<span class="star">*</span>
|
||||
<span>档案编号</span>
|
||||
</div>
|
||||
<span class="phone">{{form.recordNumber}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<fixed-button @myClick="clickHandler" v-if="showFun()"></fixed-button>
|
||||
<!-- <protocol-dialog></protocol-dialog>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import protocolDialog from "./component/protocolDialog";
|
||||
import fixedButton from "./component/fixedButton";
|
||||
import photoItem from "./component/photoItem";
|
||||
import tipBar from "./component/tipBar";
|
||||
import { ocrRecognize, driverInfoVerify, driverInfoVerifyDetail } from '@/api/authentication.js'
|
||||
import { leftCopy } from '@/utils/common.js'
|
||||
import { myMixins } from '@/utils/myMixins.js'
|
||||
export default {
|
||||
name: "carAudit",
|
||||
components: {
|
||||
tipBar,
|
||||
photoItem,
|
||||
fixedButton,
|
||||
// protocolDialog
|
||||
},
|
||||
mixins: [ myMixins ],
|
||||
data() {
|
||||
return {
|
||||
carFront: require('@/assets/authentication/car_icon1.png'),
|
||||
carBack: require('@/assets/authentication/car_icon2.png'),
|
||||
form: {
|
||||
name: '',
|
||||
drivingLicenceFront: '',
|
||||
drivingLicenceContrary: '',
|
||||
licenseNumber: '',
|
||||
approvedType: '', // 准驾车型
|
||||
initialIssueDate: '', // 初次领证日期
|
||||
validPeriod: '', // 有效期
|
||||
recordNumber: '', // 档案编号
|
||||
},
|
||||
show: undefined,
|
||||
type: localStorage.getItem('type'),
|
||||
}
|
||||
},
|
||||
async onLoad(options) {
|
||||
if(options?.show) {
|
||||
this.show = options.show
|
||||
}
|
||||
if( this.show ) {
|
||||
await this.getDetail()
|
||||
}
|
||||
},
|
||||
async onShow() {
|
||||
},
|
||||
methods: {
|
||||
backInit() {
|
||||
this.form.recordNumber = ''
|
||||
},
|
||||
frontInit() {
|
||||
this.form.licenseNumber = ''
|
||||
this.form.approvedType = ''
|
||||
this.form.initialIssueDate = ''
|
||||
this.form.validPeriod = ''
|
||||
},
|
||||
async carFrontHandler(data) {
|
||||
await this.frontInit();
|
||||
this.form.drivingLicenceFront = data
|
||||
await this.idOrcHandler(this.form.drivingLicenceFront)
|
||||
},
|
||||
async carBackHandler(data) {
|
||||
await this.backInit();
|
||||
this.form.drivingLicenceContrary = data
|
||||
await this.idOrcHandler(this.form.drivingLicenceContrary, 'back')
|
||||
},
|
||||
async idOrcHandler(url, type = 'front') { // ocr 识别
|
||||
let res = await ocrRecognize({
|
||||
ocrType: 2,
|
||||
imageUrl: url
|
||||
});
|
||||
let carInfo
|
||||
if(type == 'back') {
|
||||
carInfo = res?.data?.data?.back?.data
|
||||
this.form.recordNumber = carInfo?.recordNumber || ''
|
||||
} else {
|
||||
carInfo = res?.data?.data?.face?.data
|
||||
leftCopy(this.form, {...carInfo})
|
||||
}
|
||||
|
||||
},
|
||||
async getDetail() { // 认证详情
|
||||
let res = await driverInfoVerifyDetail( {
|
||||
verifyType: 2
|
||||
})
|
||||
leftCopy(this.form, {...res?.data?.drivingLicenseInfoData})
|
||||
console.log('carAudit', res)
|
||||
},
|
||||
async clickHandler() { // 点击去认证
|
||||
if( !this.form.drivingLicenceFront ) {
|
||||
this.$toast('驾驶证正面照片未上传')
|
||||
return
|
||||
}
|
||||
if( !this.form.drivingLicenceContrary ) {
|
||||
this.$toast('驾驶证反面照片未上传')
|
||||
return
|
||||
}
|
||||
if(!this.form.licenseNumber || !this.form.initialIssueDate || !this.form.validPeriod) {
|
||||
this.$toast('驾驶证正面识别错误，请重新上传')
|
||||
return
|
||||
}
|
||||
if(!this.form.recordNumber) {
|
||||
this.$toast('驾驶证反面识别错误，请重新上传')
|
||||
return
|
||||
}
|
||||
await driverInfoVerify({
|
||||
verifyType: 2,
|
||||
type: this.type || 'full',
|
||||
...this.form,
|
||||
})
|
||||
this.$toast('操作成功')
|
||||
await this.getRegisterInfo({
|
||||
verifyType: 2
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.h5GoBack()
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/styles/common.scss";
|
||||
@import "@/styles/infoShow.scss";
|
||||
page {
|
||||
background: #F4F5F7;
|
||||
}
|
||||
.navBar{
|
||||
margin-bottom: 46px;
|
||||
}
|
||||
.carInfo .title {
|
||||
width: 100% !important;
|
||||
}
|
||||
.form_item {
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.phone {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user