447 lines
16 KiB
Vue
447 lines
16 KiB
Vue
<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="goListPage"
|
|
/>
|
|
</div>
|
|
<tip-bar :title="'应国家政策要求：从事货运行业的司机用户，身份证照片、驾驶证信息、行驶证信息、人车合影及承运资质信息必须进行实名认证。'"></tip-bar>
|
|
<div class="titleWrap">
|
|
<div class="natureWrap">
|
|
<span class="title"><span class="star">*</span>业务性质</span>
|
|
<van-radio-group @change="radioChange" v-model="form.businessNature" class="flexWrap">
|
|
<van-radio :name="1">全国跑圈业务</van-radio>
|
|
<van-radio :name="2">固定区域救援业务</van-radio>
|
|
</van-radio-group>
|
|
</div>
|
|
<div class="natureWrap regionWrap" v-if="form.businessNature == 2" >
|
|
<span class="title"><span class="star">*</span>所在地区</span>
|
|
<div class="pickerWrap picker" @click="areaShow = true" >{{regionText}}</div>
|
|
</div>
|
|
</div>
|
|
<photo-item title="上传行驶证" :left-url="form.vehicleLicenseFront || driveFront" :right-url="form.vehicleLicenseBack || driveBack" v-if="type != 'simple'"
|
|
:show="show" @leftImg="vehicleFrontHandler" @rightImg="vehicleBackHandler"></photo-item>
|
|
<photo-item title="上传车辆照片" :left-url="form.vehicleFrontPhoto || carHead" :right-url="form.peopleVehiclePhoto || personCar" v-if="type != 'simple'"
|
|
:show="show" @leftImg="carPhotoHandler" @rightImg="personPhotoHandler"></photo-item>
|
|
<photo-item title="是否有救援责任险/货物运输险" :url-list="form.carrierLiabilityInsurancePhoto" :in-sure="form.hasInsurancePhoto"
|
|
:show="show" @urlList="carrierHandler" @insureHandle="insureHandle"></photo-item>
|
|
<div class="titleWrap">
|
|
<div class="natureWrap">
|
|
<span class="title"><span class="star">*</span>随车小轮个数</span>
|
|
<van-radio-group v-model="form.wheelNum" class="flexWrap">
|
|
<van-radio v-for="item in tyreOptions" :key="item.value" :name="item.value">{{item.name}}</van-radio>
|
|
</van-radio-group>
|
|
</div>
|
|
</div>
|
|
<div class="carInfo" v-if="type != 'simple'">
|
|
<div class="left_wrap title">
|
|
<div class="form_item">
|
|
<div>
|
|
<span class="star">*</span>
|
|
<span>车牌号</span>
|
|
</div>
|
|
<span class="phone">{{form.licensePlateNumber}}</span>
|
|
</div>
|
|
<div class="form_item">
|
|
<div>
|
|
<span class="star">*</span>
|
|
<span>车架号</span>
|
|
</div>
|
|
<span class="phone">{{form.vinCode}}</span>
|
|
</div>
|
|
<div class="form_item">
|
|
<div>
|
|
<span class="star">*</span>
|
|
<span>车型</span>
|
|
</div>
|
|
<span class="phone">{{form.vehicleType}}</span>
|
|
</div>
|
|
<div class="form_item">
|
|
<div>
|
|
<span class="star">*</span>
|
|
<span>品牌车型</span>
|
|
</div>
|
|
<span class="phone">{{form.vehicleLicenseModel}}</span>
|
|
</div>
|
|
<div class="form_item">
|
|
<div>
|
|
<span class="star">*</span>
|
|
<span>行驶证人</span>
|
|
</div>
|
|
<span class="phone">{{form.vehicleLicenseOwner}}</span>
|
|
</div>
|
|
<div class="form_item">
|
|
<div>
|
|
<span>检验记录</span>
|
|
</div>
|
|
<span class="phone">{{form.inspectionRecord}}</span>
|
|
</div>
|
|
<div class="form_item">
|
|
<div>
|
|
<span class="star">*</span>
|
|
<span>总质量</span>
|
|
</div>
|
|
<span class="phone">{{form.totalWeight}}</span>
|
|
</div>
|
|
<div class="form_item">
|
|
<div>
|
|
<span class="star">*</span>
|
|
<span>整备质量</span>
|
|
</div>
|
|
<span class="phone">{{form.curbWeight}}</span>
|
|
</div>
|
|
<div class="form_item">
|
|
<div>
|
|
<span class="star">*</span>
|
|
<span>外廓尺寸</span>
|
|
</div>
|
|
<span class="phone">{{form.overallDimension}}</span>
|
|
</div>
|
|
<div class="form_item">
|
|
<div>
|
|
<span class="star"></span>
|
|
<span>档案编号</span>
|
|
</div>
|
|
<span class="phone">{{form.vehicleLicenseRecordNumber}}</span>
|
|
</div>
|
|
<div class="form_item">
|
|
<div>
|
|
<span class="star"></span>
|
|
<span>行驶证备注</span>
|
|
</div>
|
|
<span class="phone">{{form.vehicleLicenseRemarks}}</span>
|
|
</div>
|
|
<div class="form_item">
|
|
<div>
|
|
<span class="star">*</span>
|
|
<span>车头照片中的车牌号码</span>
|
|
</div>
|
|
<span class="phone">{{form.carNumber}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<fixed-button @myClick="clickHandler" v-if="showFun()" :noBg="true"></fixed-button>
|
|
<van-popup
|
|
v-model="areaShow"
|
|
position="bottom"
|
|
>
|
|
<van-area title="标题" :area-list="areaList" :columns-num="3" closeable="true" :value="form.areaCode ? String(form.areaCode) : ''"
|
|
@cancel="areaShow = false" @confirm="confirmHandle"/>
|
|
</van-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import fixedButton from "./component/fixedButton";
|
|
import photoItem from "./component/photoItem";
|
|
import tipBar from "./component/tipBar";
|
|
import {ocrRecognize, driverInfoVerify, driverInfoVerifyDetail, infoVerifyProgress} from '@/api/authentication.js'
|
|
import { leftCopy } from '@/utils/common.js'
|
|
import { myMixins } from '@/utils/myMixins.js'
|
|
import {areaList} from "@vant/area-data";
|
|
export default {
|
|
name: "carInfoAudit",
|
|
components: {
|
|
tipBar,
|
|
photoItem,
|
|
fixedButton,
|
|
},
|
|
mixins: [myMixins],
|
|
data() {
|
|
return {
|
|
areaList: areaList,
|
|
areaShow:false,
|
|
region: [],
|
|
driveFront: require('@/assets/authentication/carInfo_icon1.png'),
|
|
driveBack: require('@/assets/authentication/carInfo_icon2.png'),
|
|
carHead:require('@/assets/authentication/carInfo_icon3.png'),
|
|
personCar:require('@/assets/authentication/carInfo_icon4.png'),
|
|
liabilityInsurance:require('@/assets/authentication/carInfo_icon5.png'),
|
|
form: {
|
|
vehicleLicenseFront: '', // 行驶证主页照片
|
|
vehicleLicenseBack: '', // 行驶证副页照片
|
|
vehicleLicenseAddress: '', // 行驶证地址
|
|
engineNumber: '', // 行驶证发动机号
|
|
licensePlateNumber: '', // 车牌号
|
|
vinCode: '', // 车架号
|
|
vehicleType: '', // 车型
|
|
vehicleLicenseModel: '', // 行驶证车辆品牌车型
|
|
vehicleLicenseOwner: '', // 行驶证所有人
|
|
inspectionRecord: '', // 检验记录
|
|
totalWeight: '', // 总质量
|
|
curbWeight: '', // 整备质量
|
|
overallDimension: '', // 外廓尺寸
|
|
vehicleLicenseRecordNumber: '', // 行驶证档案编号
|
|
vehicleLicenseRemarks: '', // 行驶证备注
|
|
vehicleFrontPhoto: '', // 车头照片
|
|
carNumber: '', // 车头照片中的车牌号码
|
|
peopleVehiclePhoto: '', // 人车合影照片
|
|
carrierLiabilityInsurancePhoto: [], // 承运人责任险照片,如多张用英文逗号分开
|
|
businessNature:'',
|
|
areaCode:'',
|
|
hasInsurancePhoto:'',
|
|
wheelNum:-1,
|
|
region:[],
|
|
},
|
|
show: undefined,
|
|
type: 'full',
|
|
tyreOptions:[{value:0,name:'0'},{value:2,name:'2'},{value:4,name:'4'}]
|
|
}
|
|
},
|
|
async mounted() {
|
|
// 禁止双击放大
|
|
let lastTouchEnd = 0;
|
|
document.addEventListener('touchend', (event) => {
|
|
const now = Date.now();
|
|
if (now - lastTouchEnd <= 300) {
|
|
event.preventDefault(); // 阻止双击放大
|
|
}
|
|
lastTouchEnd = now;
|
|
}, { passive: false });
|
|
|
|
// if(options?.show) {
|
|
this.show = true
|
|
// }
|
|
if(this.show) {
|
|
await this.getDetail()
|
|
}
|
|
},
|
|
methods: {
|
|
confirmHandle(val){
|
|
this.region=[]
|
|
val?.forEach(item => this.region.push(item.name))
|
|
let code=[]
|
|
val?.forEach(item => code.push(item.code))
|
|
this.form.areaCode=code[code.length - 1]
|
|
this.areaShow=false
|
|
},
|
|
radioChange(){
|
|
if(this.form.businessNature==1){
|
|
this.region=[]
|
|
this.form.areaCode=''
|
|
}
|
|
},
|
|
async getDetail() { // 认证详情
|
|
let res = await driverInfoVerifyDetail( {
|
|
verifyType: 3
|
|
})
|
|
leftCopy(this.form, {...res?.data?.vehicleInfoData})
|
|
console.log("this.form",this.form)
|
|
this.form.carrierLiabilityInsurancePhoto=this.form.carrierLiabilityInsurancePhoto ? res?.data?.vehicleInfoData?.carrierLiabilityInsurancePhoto?.split(',') : []
|
|
if(this.form.businessNature==2){
|
|
this.region=res?.data?.vehicleInfoData?.region
|
|
if(this.region[0].includes('市')){
|
|
this.region?.unshift(this.region[0])
|
|
}
|
|
}else {
|
|
this.region=[]
|
|
}
|
|
},
|
|
async clickHandler() {
|
|
if( this.type != 'simple' ) {
|
|
if(!this.form.businessNature){
|
|
this.$toast('请选择业务性质')
|
|
return
|
|
}
|
|
if(this.form.businessNature==2 && !this.form.areaCode){
|
|
this.$toast('请选择所在地区')
|
|
return
|
|
}
|
|
if(!this.form.vehicleLicenseFront) {
|
|
this.$toast('行驶证主页未上传')
|
|
return
|
|
}
|
|
if(!this.form.licensePlateNumber || !this.form.vehicleType ) {
|
|
this.$toast('行驶证主页信息识别错误')
|
|
return
|
|
}
|
|
if(!this.form.vehicleLicenseBack) {
|
|
this.$toast('行驶证副页未上传')
|
|
return
|
|
}
|
|
if(!this.form.totalWeight) {
|
|
this.$toast('行驶证副页信息识别错误')
|
|
return
|
|
}
|
|
if(!this.form.carNumber) {
|
|
this.$toast('车辆信息识别错误')
|
|
return
|
|
}
|
|
if( !this.form.peopleVehiclePhoto ) {
|
|
this.$toast('人车合影未上传')
|
|
return
|
|
}
|
|
if(this.form.hasInsurancePhoto == -1){
|
|
this.$toast('请选择是否有救援责任险')
|
|
return
|
|
}
|
|
if(this.form.hasInsurancePhoto==1 && this.form.carrierLiabilityInsurancePhoto?.length<=0){
|
|
this.$toast('救援责任险/货物运输险未上传')
|
|
return
|
|
}
|
|
if(this.form.wheelNum==-1){
|
|
this.$toast('请选择随车小轮个数')
|
|
return
|
|
}
|
|
}
|
|
await driverInfoVerify( {
|
|
verifyType: 3,
|
|
type: this.type || 'full',
|
|
...this.form,
|
|
carrierLiabilityInsurancePhoto:this.form.carrierLiabilityInsurancePhoto?.length>0 ? this.form.carrierLiabilityInsurancePhoto?.join(',') : ''
|
|
})
|
|
this.$toast('操作成功')
|
|
await this.getRegisterInfo({
|
|
verifyType: 3
|
|
})
|
|
setTimeout(() => {
|
|
this.goListPage()
|
|
}, 100)
|
|
},
|
|
async getRegisterInfo(data) {
|
|
let res = await infoVerifyProgress( data)
|
|
localStorage.setItem('infoVerify', res?.data?.infoVerify?.code)
|
|
localStorage.setItem('failReason', res?.data?.verifyRemark)
|
|
localStorage.setItem('authIsSuccess', res?.data?.authIsSuccess)
|
|
localStorage.setItem('name', res?.data?.name)
|
|
},
|
|
carrierHandler(data) { // 承运人责任险照片
|
|
console.log("data",data)
|
|
this.form.carrierLiabilityInsurancePhoto = data
|
|
},
|
|
insureHandle(val){
|
|
this.form.hasInsurancePhoto=val
|
|
},
|
|
vehicleFrontInit() {
|
|
this.form.licensePlateNumber = ''
|
|
this.form.vinCode = ''
|
|
this.form.vehicleType = ''
|
|
this.form.vehicleLicenseModel = ''
|
|
this.form.vehicleLicenseOwner = ''
|
|
},
|
|
async vehicleFrontHandler(data) { // 行驶证正面照，及ocr识别
|
|
console.log("vehicleFrontHandler",data)
|
|
await this.vehicleFrontInit()
|
|
this.form.vehicleLicenseFront = data
|
|
let vehicleInfo = await this.orcHandler(this.form.vehicleLicenseFront, 3)
|
|
let tempInfo = vehicleInfo?.data?.data?.face?.data
|
|
this.form.licensePlateNumber = tempInfo.licensePlateNumber
|
|
this.form.vinCode = tempInfo.vinCode
|
|
this.form.vehicleType = tempInfo.vehicleType
|
|
this.form.vehicleLicenseModel = tempInfo.model
|
|
this.form.vehicleLicenseOwner = tempInfo.owner
|
|
this.form.vehicleLicenseAddress = tempInfo.address
|
|
this.form.engineNumber = tempInfo.engineNumber
|
|
},
|
|
vehicleBackInit() {
|
|
this.form.inspectionRecord = ''
|
|
this.form.totalWeight = ''
|
|
this.form.curbWeight = ''
|
|
this.form.overallDimension = ''
|
|
this.form.vehicleLicenseRecordNumber = ''
|
|
this.form.vehicleLicenseRemarks = ''
|
|
},
|
|
async vehicleBackHandler(data) {
|
|
await this.vehicleBackInit()
|
|
this.form.vehicleLicenseBack = data
|
|
let vehicleInfo = await this.orcHandler(this.form.vehicleLicenseBack, 3)
|
|
let tempInfo = vehicleInfo?.data?.data?.back?.data
|
|
this.form.inspectionRecord = tempInfo.inspectionRecord
|
|
this.form.totalWeight = tempInfo.totalWeight
|
|
this.form.curbWeight = tempInfo.curbWeight
|
|
this.form.overallDimension = tempInfo.overallDimension
|
|
this.form.vehicleLicenseRecordNumber = tempInfo.recordNumber
|
|
this.form.vehicleLicenseRemarks = tempInfo.remarks
|
|
},
|
|
async carPhotoHandler(data) { // 车头照
|
|
this.form.carNumber = ''
|
|
this.form.vehicleFrontPhoto = data
|
|
let carInfo = await this.orcHandler(this.form.vehicleFrontPhoto, 6)
|
|
this.form.carNumber = carInfo?.data
|
|
},
|
|
personPhotoHandler(data){ // 人车合影
|
|
this.form.peopleVehiclePhoto = data
|
|
},
|
|
async orcHandler(url, type) { // ocr 识别
|
|
let res = await ocrRecognize( {
|
|
ocrType: type,
|
|
imageUrl: url
|
|
});
|
|
return res;
|
|
},
|
|
goListPage(){
|
|
this.goPage('auditList',{
|
|
token:localStorage.getItem('token')
|
|
})
|
|
},
|
|
},
|
|
computed: {
|
|
regionText() {
|
|
return this.region.length ? `${this.region[0]}/${this.region[1]}/${this.region[2]}` : '请选择所在地区';
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "@/styles/common.scss";
|
|
@import "@/styles/infoShow.scss";
|
|
page {
|
|
background: #F4F5F7;
|
|
}
|
|
.navBar{
|
|
margin-bottom: 46px;
|
|
}
|
|
.content {
|
|
padding-bottom: 86px;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch; /* 启用iOS惯性滚动 */
|
|
scroll-behavior: smooth; /* 平滑滚动（部分浏览器支持） */
|
|
}
|
|
.carInfo .title {
|
|
width: 100% !important;
|
|
}
|
|
.form_item {
|
|
line-height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.carInfo {
|
|
padding-bottom: 86px;
|
|
}
|
|
.star{
|
|
color: red;
|
|
margin-right: 3px;
|
|
}
|
|
.titleWrap{
|
|
margin-bottom: 10px;
|
|
background-color: #FFFFFF;
|
|
padding: 15px 12px 15px 17px;
|
|
.natureWrap{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 13px !important;
|
|
}
|
|
.regionWrap{
|
|
margin-top: 8px;
|
|
}
|
|
.flexWrap{
|
|
display:flex;
|
|
align-items: center;
|
|
::v-deep .van-radio__icon{
|
|
transform: scale(0.8);
|
|
transform-origin: center; /* 保持中心点不变 */
|
|
}
|
|
}
|
|
}
|
|
</style>
|