|
|
@@ -1,22 +1,7 @@ |
|
|
|
<template> |
|
|
|
|
|
|
|
<view class="bg"> |
|
|
|
<view class="title">基本信息</view> |
|
|
|
<view class="car-type"> |
|
|
|
<view class="car-type-item" :class="{active: state.form.applyType == '1'}" @click="toggleApplyType('1')">个人车辆</view> |
|
|
|
<view class="car-type-item" :class="{active: state.form.applyType == '2'}" @click="toggleApplyType('2')">单位车辆</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle' v-if="state.form.applyType == '1'"> |
|
|
|
<u-form-item label="是否本人" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom> |
|
|
|
<u-input v-model="state.form.isSelfStr" type="select" @click="isSelfSelect = true" input-align='right'/> |
|
|
|
</u-form-item> |
|
|
|
</u-form> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="bg"> |
|
|
|
<view class="title"> 身份证信息 </view> |
|
|
|
<view class="picture-wrapper" @click="takePhotoMode('1',false)"> |
|
|
|
<view class="picture-wrapper"> |
|
|
|
<view class="bg"> |
|
|
|
<view class=""> |
|
|
|
<view class="name"> 人像面 </view> |
|
|
@@ -28,11 +13,11 @@ |
|
|
|
<image v-if="!state.form.userPosImagesUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"> |
|
|
|
</image> |
|
|
|
<image v-else class="icon" :src="getFullImageUrl(state.form.userPosImagesUrl)" |
|
|
|
<image v-else class="icon" :src="state.form.userPosImagesUrl" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="picture-wrapper" @click="takePhotoMode('2',false)"> |
|
|
|
<view class="picture-wrapper"> |
|
|
|
<view class="bg"> |
|
|
|
<view class=""> |
|
|
|
<view class="name"> 国徽面 </view> |
|
|
@@ -44,28 +29,28 @@ |
|
|
|
<image v-if="!state.form.userNegImagesUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"> |
|
|
|
</image> |
|
|
|
<image v-else class="icon" :src="getFullImageUrl(state.form.userNegImagesUrl)" |
|
|
|
<image v-else class="icon" :src="state.form.userNegImagesUrl" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'> |
|
|
|
<u-form-item label="申请人姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom> |
|
|
|
<u-input v-model="state.form.name" placeholder='请输入姓名' |
|
|
|
maxlength="20" @blur="replaceInput($event,1)" inputAlign="right"/> |
|
|
|
<text class="disabled-text">{{state.form.name}}</text> |
|
|
|
<!-- <u-input v-model="" placeholder='请输入姓名' maxlength="20" @blur="replaceInput($event,1)" inputAlign="right"/> --> |
|
|
|
</u-form-item> |
|
|
|
<u-form-item label="证号号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom> |
|
|
|
<u-input placeholder='请输入证件号码' type="idcard" v-model="state.form.customerIdNum" |
|
|
|
maxlength="18" inputAlign="right"/> |
|
|
|
<!-- <u-input placeholder='请输入证件号码' type="idcard" v-model="state.form.customerIdNum" maxlength="18" inputAlign="right"/> --> |
|
|
|
<text class="disabled-text">{{state.form.userIdNum}}</text> |
|
|
|
</u-form-item> |
|
|
|
<u-form-item label="手机号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom> |
|
|
|
<u-input placeholder='请输入手机号' type="number" v-model="state.form.mobile" |
|
|
|
maxlength="11" inputAlign="right"/> |
|
|
|
<!-- <u-input placeholder='请输入手机号' type="number" v-model="state.form.mobile" maxlength="11" inputAlign="right"/> --> |
|
|
|
<text class="disabled-text">{{state.form.mobile}}</text> |
|
|
|
</u-form-item> |
|
|
|
</u-form> |
|
|
|
</view> |
|
|
|
<view class="bg"> |
|
|
|
<view class="title"> 行驶证信息 </view> |
|
|
|
<view class="picture-wrapper" @click="takePhotoMode('3')"> |
|
|
|
<view class="picture-wrapper" @click="takePhotoMode(3)"> |
|
|
|
<view class="bg"> |
|
|
|
<view class=""> |
|
|
|
<view class="name"> 行驶证主页 </view> |
|
|
@@ -81,7 +66,7 @@ |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="picture-wrapper" @click="takePhotoMode('4')"> |
|
|
|
<view class="picture-wrapper" @click="takePhotoMode(4)"> |
|
|
|
<view class="bg"> |
|
|
|
<view class=""> |
|
|
|
<view class="name"> 行驶证副页 </view> |
|
|
@@ -98,177 +83,160 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<u-form label-width="200" :model="state.form" ref="uForm" :label-style='labelStyle'> |
|
|
|
<u-form-item label="车主姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'> |
|
|
|
<u-input v-model="state.form.vehicleOwnerName" placeholder="请输入车主姓名" input-align='right'/> |
|
|
|
</u-form-item> |
|
|
|
<u-form-item label="车牌号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'> |
|
|
|
<car-number-input @numberInputResult="carNumber" :defaultStr="state.form.vehiclePlate"></car-number-input> |
|
|
|
</u-form-item> |
|
|
|
<u-form-item label="所有人" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'> |
|
|
|
<u-input inputAlign="right" placeholder="请输入所有人" v-model="state.form.vehicleOwnerName" maxlength="20" /> |
|
|
|
</u-form-item> |
|
|
|
<u-form-item label="车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'> |
|
|
|
<!-- <uni-data-select v-model="state.form.vehiclePlateColor" :localdata="state.colorRange" @change="changeColor" |
|
|
|
:clear="false"></uni-data-select> --> |
|
|
|
<u-input v-model="state.form.vehiclePlateColorStr" type="select" @click="show1 = true" input-align='right'/> |
|
|
|
<u-input v-model="state.vehiclePlateColorStr" type="select" @click="show1 = true" input-align='right'/> |
|
|
|
</u-form-item> |
|
|
|
</u-form> |
|
|
|
</view> |
|
|
|
<template v-if="state.isNeedSubmitCarOwnerInfo"> |
|
|
|
|
|
|
|
<view class="bg" v-if="state.form.applyType=='2'"> |
|
|
|
<view class="title"> 单位资料信息 </view> |
|
|
|
<view class="picture-wrapper" @click="cardImageOcrYY()"> |
|
|
|
<view class="bg"> |
|
|
|
<view class=""> |
|
|
|
<view class="name"> 营业执照 </view> |
|
|
|
<view class="value"> 上传企业的营业执照 </view> |
|
|
|
<view class="tip"> |
|
|
|
<view class="tip-value"> 拍摄规范 </view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<image v-if="!state.form.unitImagesUrl" class="icon" :src="`${$imgUrl}applyCard/zhizhao.png`" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"> |
|
|
|
</image> |
|
|
|
<image v-else class="icon" :src="getFullImageUrl(state.form.unitImagesUrl)" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image> |
|
|
|
<view class="car-type" id="inputCarOnerInfo"> |
|
|
|
<view |
|
|
|
class="car-type-item" |
|
|
|
v-for="(item, index) in carOwnerList" |
|
|
|
:key="index" |
|
|
|
:class="{active: state.form.ownerIdType == item.value}" @click="toggleApplyType(item)"> |
|
|
|
{{item.name}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="picture-wrapper" @click="cardFileImageUpdate()"> |
|
|
|
<view class="bg"> |
|
|
|
<view class=""> |
|
|
|
<view class="name"> 授权书 </view> |
|
|
|
<view class="value"> 上传授权书 </view> |
|
|
|
<view class="tip"> |
|
|
|
<view class="tip-value"> 拍摄规范 </view> |
|
|
|
|
|
|
|
<view class="bg"> |
|
|
|
<view class="title"> {{ labelName.title }} </view> |
|
|
|
|
|
|
|
<template v-if="state.form.ownerIdType === '101'"> |
|
|
|
<view class="picture-wrapper" @click="takePhotoMode(1)"> |
|
|
|
<view class="bg"> |
|
|
|
<view class=""> |
|
|
|
<view class="name"> 人像面 </view> |
|
|
|
<view class="value"> 上传身份证的人像面 </view> |
|
|
|
<view class="tip"> |
|
|
|
<view class="tip-value"> 拍摄规范 </view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<image v-if="!state.form.ownerPosImgUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"> |
|
|
|
</image> |
|
|
|
<image v-else class="icon" :src="getFullImageUrl(state.form.ownerPosImgUrl)" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image> |
|
|
|
</view> |
|
|
|
<!-- <view class="down" @click="downAuthD">模板下载</view> --> |
|
|
|
</view> |
|
|
|
<image v-if="!state.form.proxyUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"> |
|
|
|
</image> |
|
|
|
<image v-else class="icon" :src="getFullImageUrl(state.form.proxyUrl)" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'> |
|
|
|
<u-form-item label="单位名称" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' border-bottom=true> |
|
|
|
<u-input v-model="state.form.orgName" placeholder='请输入单位名称' |
|
|
|
maxlength="20" @blur="replaceInput($event,2)" inputAlign="right"/> |
|
|
|
</u-form-item> |
|
|
|
<u-form-item label="证号号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' border-bottom=true> |
|
|
|
<u-input placeholder='请输入证件号码' type="idcard" v-model="state.form.unitId" |
|
|
|
maxlength="18" inputAlign="right"/> |
|
|
|
</u-form-item> |
|
|
|
</u-form> |
|
|
|
</view> |
|
|
|
<!-- 个人 非本人 展示 --> |
|
|
|
<view class="bg" v-if="state.form.applyType=='1' && state.form.isSelf=='2'"> |
|
|
|
<view class="title"> 车主信息 </view> |
|
|
|
<view class="picture-wrapper" @click="takePhotoMode('1',true)"> |
|
|
|
<view class="bg"> |
|
|
|
<view class=""> |
|
|
|
<view class="name"> 车主身份证 </view> |
|
|
|
<view class="name"> 人像面 </view> |
|
|
|
<view class="value"> 上传身份证的人像面 </view> |
|
|
|
<view class="tip"> |
|
|
|
<view class="tip-value"> 拍摄规范 </view> |
|
|
|
<view class="picture-wrapper" @click="takePhotoMode(2)"> |
|
|
|
<view class="bg"> |
|
|
|
<view class=""> |
|
|
|
<view class="name"> 国徽面 </view> |
|
|
|
<view class="value"> 上传身份证的国徽面 </view> |
|
|
|
<view class="tip"> |
|
|
|
<view class="tip-value"> 拍摄规范 </view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<image v-if="!state.form.ownerNegImgUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"> |
|
|
|
</image> |
|
|
|
<image v-else class="icon" :src="getFullImageUrl(state.form.ownerNegImgUrl)" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<image v-if="!state.form.ownerPosImgUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"> |
|
|
|
</image> |
|
|
|
<image v-else class="icon" :src="getFullImageUrl(state.form.ownerPosImgUrl)" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="picture-wrapper" @click="takePhotoMode('2',true)"> |
|
|
|
<view class="bg"> |
|
|
|
<view class=""> |
|
|
|
<view class="name"> 车主身份证 </view> |
|
|
|
<view class="name"> 国徽面 </view> |
|
|
|
<view class="value"> 上传身份证的国徽面 </view> |
|
|
|
<view class="tip"> |
|
|
|
<view class="tip-value"> 拍摄规范 </view> |
|
|
|
</template> |
|
|
|
<template v-else-if="state.form.ownerIdType === '203'"> |
|
|
|
<view class="picture-wrapper" @click="takePhotoMode(5)"> |
|
|
|
<view class="bg"> |
|
|
|
<view class=""> |
|
|
|
<view class="name"> 营业执照 </view> |
|
|
|
<view class="value"> 上传营业执照 </view> |
|
|
|
<view class="tip"> |
|
|
|
<view class="tip-value"> 拍摄规范 </view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<image v-if="!state.form.ownerPosImgUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"> |
|
|
|
</image> |
|
|
|
<image v-else class="icon" :src="getFullImageUrl(state.form.ownerPosImgUrl)" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<image v-if="!state.form.ownerNegImgUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"> |
|
|
|
</image> |
|
|
|
<image v-else class="icon" :src="getFullImageUrl(state.form.ownerNegImgUrl)" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'> |
|
|
|
<u-form-item label="车主姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' border-bottom=true> |
|
|
|
<u-input v-model="state.form.ownerName" placeholder='请输入车主姓名' |
|
|
|
maxlength="20" @blur="replaceInput($event,3)" inputAlign="right"/> |
|
|
|
</u-form-item> |
|
|
|
<u-form-item label="证号号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' border-bottom=true> |
|
|
|
<u-input placeholder='请输入证件号码' type="idcard" v-model="state.form.ownerIdNum" |
|
|
|
maxlength="18" inputAlign="right"/> |
|
|
|
</u-form-item> |
|
|
|
</u-form> |
|
|
|
<view class="picture-wrapper" @click="cardFileImageUpdate()"> |
|
|
|
<view class="bg"> |
|
|
|
<view class=""> |
|
|
|
<view class="name"> 授权书 </view> |
|
|
|
<view class="value"> 上传授权书 </view> |
|
|
|
<view class="tip"> |
|
|
|
<view class="tip-value"> 拍摄规范 </view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<view class="picture-wrapper" @click="uploadOtherFile"> |
|
|
|
<view class="bg"> |
|
|
|
<view class=""> |
|
|
|
<view class="name"> 授权书 </view> |
|
|
|
<view class="value"> 上传授权书 </view> |
|
|
|
<view class="tip"> |
|
|
|
<view class="tip-value"> 拍摄规范 </view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- <view class="down" @click="downAuthD">模板下载</view> --> |
|
|
|
<image v-if="!state.form.proxyUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"> |
|
|
|
</image> |
|
|
|
<image v-else class="icon" :src="getFullImageUrl(state.form.proxyUrl)" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image> |
|
|
|
</view> |
|
|
|
<image v-if="!state.form.proxyUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"> |
|
|
|
</image> |
|
|
|
<image v-else class="icon" :src="getFullImageUrl(state.form.proxyUrl)" |
|
|
|
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image> |
|
|
|
</view> |
|
|
|
<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'> |
|
|
|
<u-form-item :label="labelName.ownerName" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom> |
|
|
|
<u-input v-model="state.form.ownerName" placeholder='请输入' maxlength="20" @blur="replaceInput($event,1)" inputAlign="right"/> |
|
|
|
</u-form-item> |
|
|
|
<u-form-item :label="labelName.ownerIdNum" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom> |
|
|
|
<u-input placeholder='请输入' v-model="state.form.ownerIdNum" maxlength="18" inputAlign="right"/> |
|
|
|
</u-form-item> |
|
|
|
<u-form-item :label="labelName.ownerIdAddress" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom> |
|
|
|
<u-input placeholder='请输入' v-model="state.form.ownerIdAddress" maxlength="18" inputAlign="right"/> |
|
|
|
</u-form-item> |
|
|
|
<u-form-item label="车主手机号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom> |
|
|
|
<u-input placeholder='请输入手机号' type="number" v-model="state.form.ownerTel" maxlength="11" inputAlign="right"/> |
|
|
|
</u-form-item> |
|
|
|
</u-form> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<view class="action"> |
|
|
|
<button type="default" class="ui-btn" @click="savaHandle()"> |
|
|
|
提交 |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
<view class="choice-takePhoto-wrap" v-if="state.isTakePhotoModeShow" @click="cancle"> |
|
|
|
<view class="choice-takePhoto"> |
|
|
|
<view @click.stop="takePhoto(state.choiceIndex)" style="border-radius: 20rpx 20rpx 0 0;">拍照</view> |
|
|
|
<view @click.stop="xiangce(state.choiceIndex)">从手机相册选择</view> |
|
|
|
<view @click.stop="cancle">取消</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<viewfinder v-if="state.phoneType" :phoneType="state.phoneType" :images="state.images" |
|
|
|
:showStartPhoto="state.showImg" @confirmReturn="confirmReturn" @camera="camera"></viewfinder> |
|
|
|
|
|
|
|
<!--证件照上传 start--> |
|
|
|
<uploadOcr |
|
|
|
:isTakePhotoModeShow="state.isTakePhotoModeShow" |
|
|
|
:phoneType="state.choiceIndex" |
|
|
|
@close="close" |
|
|
|
@ocrResult="ocrResult"> |
|
|
|
</uploadOcr> |
|
|
|
<!--证件照上传 end--> |
|
|
|
|
|
|
|
<!-- 选择车牌颜色 --> |
|
|
|
<u-select v-model="show1" :list="state.colorRange" @confirm="changeColor"></u-select> |
|
|
|
|
|
|
|
<!-- 选择是否是本人 --> |
|
|
|
<u-select v-model="isSelfSelect" :list="state.isSelfRange" @confirm="changeIsSelf"></u-select> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
import { |
|
|
|
reactive, |
|
|
|
ref |
|
|
|
} from "vue"; |
|
|
|
import { reactive, ref, computed } from "vue"; |
|
|
|
import { |
|
|
|
onLoad |
|
|
|
} from "@dcloudio/uni-app"; |
|
|
|
import { |
|
|
|
idCardOcr, |
|
|
|
vehicleLicenseOcr, |
|
|
|
releasePlateaApply, |
|
|
|
ocrAllQuery |
|
|
|
} from "@/utils/network/api.js"; |
|
|
|
import { idCardOcr, vehicleLicenseOcr, releasePlateaApply, ocrAllQuery, getUserMsg, vehicleUpload } from "@/utils/network/api.js"; |
|
|
|
import {requestNew} from "@/utils/network/request.js"; |
|
|
|
import { getItem } from "@/utils/storage.ts" |
|
|
|
import viewfinder from "@/components/viewfinder.vue" |
|
|
|
import carNumberInput from "@/components/car-number-input/car-number-input.vue"; |
|
|
|
import { |
|
|
|
navTo, uploadFile,msg, getFullImageUrl |
|
|
|
} from "@/utils/utils"; |
|
|
|
import { navTo, uploadFile,msg, getFullImageUrl } from "@/utils/utils"; |
|
|
|
import uploadOcr from '@/components/uploadOcr'; |
|
|
|
|
|
|
|
interface OCRData { |
|
|
|
imageUrl: string, |
|
|
|
bizContent: string, |
|
|
|
screditCode: string, |
|
|
|
enddate: string |
|
|
|
} |
|
|
|
|
|
|
|
// ######## |
|
|
|
const labelStyle = { |
|
|
|
color: "#004576", |
|
|
@@ -281,17 +249,17 @@ |
|
|
|
'align-items': 'center', |
|
|
|
'margin-right': '4rpx', |
|
|
|
} |
|
|
|
|
|
|
|
const ownerCurrent = ref(0); |
|
|
|
const carOwnerList = ref([ |
|
|
|
{ name: "个人", value: "101" }, |
|
|
|
{ name: "企业", value: "203" }, |
|
|
|
]) |
|
|
|
|
|
|
|
const show1 = ref(false) |
|
|
|
const isSelfSelect = ref(false) |
|
|
|
|
|
|
|
const state = reactive({ |
|
|
|
applyTypeRange:[{ |
|
|
|
value: "1", |
|
|
|
text: "个人车辆" |
|
|
|
}, { |
|
|
|
value: "2", |
|
|
|
text: "单位车辆" |
|
|
|
}], |
|
|
|
isSelfRange:[ |
|
|
|
{ |
|
|
|
value: "1", |
|
|
@@ -307,84 +275,68 @@ |
|
|
|
isTakePhotoModeShow: false, //选择拍照方式是否出来 |
|
|
|
images: '', |
|
|
|
form: { |
|
|
|
applyType: "1",//1个人,2单位 |
|
|
|
isSelf: "1",//是否本人 1是,2否 |
|
|
|
isSelfStr: '是', |
|
|
|
name: "", // 开户人姓名 |
|
|
|
userPosImagesUrl: '', |
|
|
|
userNegImagesUrl: '', |
|
|
|
userIdNum: '', |
|
|
|
mobile:"", |
|
|
|
name: "", //开户人姓名 |
|
|
|
customerIdNum: "", //用户证件号码 |
|
|
|
userPosImagesUrl: "", //身份证正面 |
|
|
|
userNegImagesUrl: "", //身份证反面 |
|
|
|
vehPosImgUrl: "", //行驶证正面 |
|
|
|
vehNegImgUrl: "", //行驶证证反面 |
|
|
|
vehiclePlate:"", |
|
|
|
vehiclePlateColor:"", |
|
|
|
vehicleOwnerName:"", //车主姓名,ocr识别行驶证 |
|
|
|
ownerPosImgUrl:"",//车主身份证件人面地址 |
|
|
|
ownerNegImgUrl:"",//车主身份证件国徽地址 |
|
|
|
vehiclePlate: "", |
|
|
|
vehiclePlateColor: "", |
|
|
|
vehicleOwnerName: "", //车主姓名,ocr识别行驶证 |
|
|
|
ownerName: "", |
|
|
|
ownerPosImgUrl: "", |
|
|
|
ownerNegImgUrl: "", |
|
|
|
ownerIdNum:"",//车主证件号 |
|
|
|
ownerName:"",//车主姓名 |
|
|
|
ownerIdAddress: "", |
|
|
|
ownerIdType: "", |
|
|
|
ownerTel: "", |
|
|
|
proxyUrl:"",//授权书图片地址 |
|
|
|
unitImagesUrl:"",//营业执照图片地址 |
|
|
|
unitId:"",//单位证件编号 |
|
|
|
orgName:"", |
|
|
|
unitIdType:"", // 单位证件类型,营业执照:字典code:203 |
|
|
|
vehiclePlateColorStr:"" |
|
|
|
}, |
|
|
|
vehiclePlateColorStr: "", |
|
|
|
colorRange: [], |
|
|
|
ownerInfo:false,//非本人 个人 车主信息true ==== 本人 个人 false |
|
|
|
|
|
|
|
isNeedSubmitCarOwnerInfo: false, // 是否需要上传车主信息 |
|
|
|
}); |
|
|
|
const changeapplyType = (e) => { |
|
|
|
state.form.applyType = e |
|
|
|
console.log("111",e,state.applyTypeRange) |
|
|
|
} |
|
|
|
|
|
|
|
const changeColor = (item: any) => { |
|
|
|
state.form.vehiclePlateColor = item[0].value |
|
|
|
state.form.vehiclePlateColorStr = item[0].label |
|
|
|
} |
|
|
|
|
|
|
|
const changeIsSelf = (item: any) => { |
|
|
|
if (item && item.length > 0) { |
|
|
|
state.form.isSelf = item[0].value |
|
|
|
state.form.isSelfStr = item[0].label |
|
|
|
// 如果是本人,对非本人信息进行个清空 |
|
|
|
if (item[0].value == '1') { |
|
|
|
state.form.ownerPosImgUrl = '' |
|
|
|
state.form.ownerNegImgUrl = '' |
|
|
|
state.form.ownerName = '' |
|
|
|
state.form.ownerIdNum = '' |
|
|
|
state.form.proxyUrl = '' |
|
|
|
const labelName = computed(() => { |
|
|
|
if (state.form.ownerIdType === '101') { |
|
|
|
return { |
|
|
|
title: "车主身份证信息", |
|
|
|
ownerName: '车主姓名', |
|
|
|
ownerIdNum: "车主证件号码", |
|
|
|
ownerIdAddress: '证件地址', |
|
|
|
} |
|
|
|
} else if (state.form.ownerIdType === '203') { |
|
|
|
return { |
|
|
|
title: "单位证件相关信息", |
|
|
|
ownerName: '单位名称', |
|
|
|
ownerIdNum: "单位识别码", |
|
|
|
ownerIdAddress: '单位地址', |
|
|
|
} |
|
|
|
} else { |
|
|
|
return { |
|
|
|
ownerName: '', |
|
|
|
ownerIdNum: "", |
|
|
|
ownerIdAddress: '', |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
const changeColor = (item: any) => { |
|
|
|
state.form.vehiclePlateColor = item[0].value |
|
|
|
state.vehiclePlateColorStr = item[0].label |
|
|
|
} |
|
|
|
|
|
|
|
//车牌号输入 |
|
|
|
const carNumber = (val : any) => { |
|
|
|
state.form.vehiclePlate = val.trim(); |
|
|
|
}; |
|
|
|
const replaceInput = (event,val) => { |
|
|
|
if(val==1){ |
|
|
|
state.form.name=event.replace(/\s/g, "") |
|
|
|
}else if(val==2){ |
|
|
|
state.form.orgName=event.replace(/\s/g, "") |
|
|
|
}else if(val==3){ |
|
|
|
state.form.ownerName=event.replace(/\s/g, "") |
|
|
|
} |
|
|
|
console.log("event", event,val,state.form.name) |
|
|
|
} |
|
|
|
|
|
|
|
const savaHandle = () => { |
|
|
|
|
|
|
|
if (!paramsVerify()) return; |
|
|
|
|
|
|
|
// 单位 |
|
|
|
if(state.form.applyType=='2'){ |
|
|
|
// 非本人办理 |
|
|
|
state.form.isSelf='2' |
|
|
|
state.form.unitIdType='203' |
|
|
|
} |
|
|
|
|
|
|
|
let params = state.form |
|
|
|
|
|
|
|
const options = { |
|
|
@@ -395,65 +347,67 @@ |
|
|
|
}; |
|
|
|
|
|
|
|
requestNew(releasePlateaApply, options).then((res) => { |
|
|
|
console.log(res); |
|
|
|
navTo(`/subpackage/after-sale/rescind-carId/result`); |
|
|
|
// 需不需要上传车主信息,1: 需要 2:不需要 |
|
|
|
if (res.flag === 2) { |
|
|
|
uni.reLaunch({ |
|
|
|
url: `/subpackage/after-sale/rescind-carId/result` |
|
|
|
}) |
|
|
|
} else { |
|
|
|
msg('请上传车主相关信息') |
|
|
|
state.form.ownerIdType = carOwnerList.value[0].value |
|
|
|
console.log(state.form.ownerIdType) |
|
|
|
console.log(carOwnerList.value) |
|
|
|
state.isNeedSubmitCarOwnerInfo = true |
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
scrollToElement() |
|
|
|
}, 500) |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
// 必填字段校验 |
|
|
|
const paramsVerify = () => { |
|
|
|
let isVerify = true; |
|
|
|
|
|
|
|
if(!state.form.applyType){ |
|
|
|
msg('请选择车辆类型'); |
|
|
|
isVerify = false; |
|
|
|
} |
|
|
|
if(state.form.applyType=='1'){ |
|
|
|
if(!state.form.isSelf){ |
|
|
|
msg('请选择是否本人'); |
|
|
|
isVerify = false; |
|
|
|
} |
|
|
|
} |
|
|
|
if(!state.form.userPosImagesUrl){ |
|
|
|
msg('请上传身份证正面'); |
|
|
|
isVerify = false; |
|
|
|
} |
|
|
|
if(!state.form.userNegImagesUrl){ |
|
|
|
msg('请上传身份证反面'); |
|
|
|
isVerify = false; |
|
|
|
} |
|
|
|
if(!state.form.name){ |
|
|
|
msg('请输入姓名'); |
|
|
|
isVerify = false; |
|
|
|
} |
|
|
|
if(!state.form.customerIdNum){ |
|
|
|
msg('请输入证件号码'); |
|
|
|
isVerify = false; |
|
|
|
} |
|
|
|
if(!state.form.mobile){ |
|
|
|
msg('请输入手机号'); |
|
|
|
isVerify = false; |
|
|
|
} |
|
|
|
if(!state.form.vehPosImgUrl){ |
|
|
|
msg('请上传行驶证主页'); |
|
|
|
isVerify = false; |
|
|
|
} |
|
|
|
if(!state.form.vehNegImgUrl){ |
|
|
|
msg('请上传行驶证副页'); |
|
|
|
isVerify = false; |
|
|
|
} |
|
|
|
if(!state.form.vehiclePlate){ |
|
|
|
msg('请输入车牌号'); |
|
|
|
isVerify = false; |
|
|
|
} |
|
|
|
if(!state.form.vehicleOwnerName){ |
|
|
|
msg('请输入所有人'); |
|
|
|
isVerify = false; |
|
|
|
} |
|
|
|
if(!state.form.vehiclePlateColor){ |
|
|
|
msg('请选择车牌颜色'); |
|
|
|
if(!state.form.vehPosImgUrl){ |
|
|
|
msg('请上传行驶证主页'); |
|
|
|
isVerify = false; |
|
|
|
} else if(!state.form.vehNegImgUrl){ |
|
|
|
msg('请上传行驶证副页'); |
|
|
|
isVerify = false; |
|
|
|
} else if(!state.form.vehiclePlate){ |
|
|
|
msg('请输入车牌号'); |
|
|
|
isVerify = false; |
|
|
|
} else if(!state.form.vehiclePlateColor){ |
|
|
|
msg('请选择车牌颜色'); |
|
|
|
isVerify = false |
|
|
|
} else if (state.isNeedSubmitCarOwnerInfo) { |
|
|
|
if(state.form.ownerIdType === '101' && !state.form.ownerPosImgUrl){ |
|
|
|
msg('请上传车主身份证人像面照片'); |
|
|
|
isVerify = false |
|
|
|
} else if(state.form.ownerIdType === '203' && !state.form.ownerPosImgUrl){ |
|
|
|
msg('请上传公司营业执照'); |
|
|
|
isVerify = false |
|
|
|
} else if(state.form.ownerIdType === '101' && !state.form.ownerNegImgUrl){ |
|
|
|
msg('请上传车主身份证国徽面照片'); |
|
|
|
isVerify = false |
|
|
|
} else if(!state.form.ownerName){ |
|
|
|
msg(`请填写${labelName.value.ownerName}`); |
|
|
|
isVerify = false |
|
|
|
} else if(!state.form.ownerIdNum){ |
|
|
|
msg(`请填写${labelName.value.ownerIdNum}`); |
|
|
|
isVerify = false |
|
|
|
} else if(!state.form.ownerIdAddress){ |
|
|
|
msg(`请填写${labelName.value.ownerIdAddress}`); |
|
|
|
isVerify = false |
|
|
|
} else if(!state.form.ownerTel){ |
|
|
|
msg('请填写车主手机号'); |
|
|
|
isVerify = false |
|
|
|
} else if(!state.form.proxyUrl){ |
|
|
|
msg('请上传授权书'); |
|
|
|
isVerify = false |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
return isVerify; |
|
|
|
} |
|
|
@@ -467,135 +421,124 @@ |
|
|
|
obj['label'] = getColor[k]['name'] |
|
|
|
state.colorRange.push(obj) |
|
|
|
} |
|
|
|
getUserInfo() |
|
|
|
}); |
|
|
|
|
|
|
|
const cardFileImageUpdate = () => { |
|
|
|
uni.chooseImage({ |
|
|
|
count: 1, //只能选取一张照片 |
|
|
|
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有 |
|
|
|
sourceType: ["camera", "album"], //从相册选择 |
|
|
|
success: function (res) { |
|
|
|
uploadFile(res.tempFilePaths[0], "", "").then((data) => { |
|
|
|
state.form.proxyUrl = data; |
|
|
|
}) |
|
|
|
}, |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const xiangce = (val) => { |
|
|
|
console.log("val", val) |
|
|
|
var imageType = val; |
|
|
|
uni.chooseImage({ |
|
|
|
count: 1, //只能选取一张照片 |
|
|
|
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有 |
|
|
|
sourceType: ["album"], //从相册选择 |
|
|
|
success: function (res) { |
|
|
|
state.showImg = false |
|
|
|
state.images = res.tempFilePaths[0] |
|
|
|
state.phoneType = state.choiceIndex |
|
|
|
state.isTakePhotoModeShow = false |
|
|
|
console.log("tempFilePaths[0].startsWith('file://')", res.tempFilePaths[0], res.tempFilePaths[0].startsWith('file://')) |
|
|
|
|
|
|
|
}, |
|
|
|
}) |
|
|
|
} |
|
|
|
const takePhoto = (val) => { |
|
|
|
state.showImg = true |
|
|
|
console.log("拍照", val) |
|
|
|
state.phoneType = val; |
|
|
|
const cancle = () => { |
|
|
|
state.isTakePhotoModeShow = false |
|
|
|
} |
|
|
|
const confirmReturn = (val) => { |
|
|
|
|
|
|
|
const camera = () => { |
|
|
|
state.phoneType = 0 |
|
|
|
state.isTakePhotoModeShow = false |
|
|
|
var imageType = 1; |
|
|
|
|
|
|
|
// state.choiceIndex 1: 身份证中面 2:身份证反面 3:行驶证正面 4:行驶证反面 |
|
|
|
if (state.choiceIndex == 1) { |
|
|
|
imageType = 1 |
|
|
|
} else if (state.choiceIndex == 2) { |
|
|
|
imageType = 100 |
|
|
|
} else if (state.choiceIndex == 3) { |
|
|
|
imageType = 3 |
|
|
|
} else if (state.choiceIndex == 4) { |
|
|
|
imageType = 100 |
|
|
|
} |
|
|
|
|
|
|
|
uploadFile(val.tempImagePath, imageType).then((data) => { |
|
|
|
console.log(data) |
|
|
|
if (state.choiceIndex == 1) { |
|
|
|
if(state.ownerInfo){ |
|
|
|
state.form.ownerPosImgUrl = data.imageUrl; |
|
|
|
state.form.ownerName = data.name; |
|
|
|
state.form.ownerIdNum = data.idno; |
|
|
|
}else{ |
|
|
|
// 谁上传就是谁的信息 |
|
|
|
state.form.name = data.name; |
|
|
|
state.form.customerIdNum = data.idno; |
|
|
|
state.form.userPosImagesUrl = data.imageUrl; |
|
|
|
} |
|
|
|
} else if (state.choiceIndex == 2) { |
|
|
|
if(state.ownerInfo){ |
|
|
|
state.form.ownerNegImgUrl = data.imageUrl; |
|
|
|
}else{ |
|
|
|
state.form.userNegImagesUrl = data.imageUrl; |
|
|
|
} |
|
|
|
|
|
|
|
} else if (state.choiceIndex == 3) { |
|
|
|
state.form.vehiclePlate = data.plate_a; |
|
|
|
state.form.vehicleOwnerName = data.man; |
|
|
|
state.form.vehPosImgUrl = data.imageUrl; |
|
|
|
} else if (state.choiceIndex == 4) { |
|
|
|
state.form.vehNegImgUrl = data.imageUrl; |
|
|
|
} |
|
|
|
state.isTakePhotoModeShow = false |
|
|
|
}) |
|
|
|
} |
|
|
|
const takePhotoMode = (index,ownerInfo) => { |
|
|
|
console.log("index", index) |
|
|
|
|
|
|
|
const close = (e) => { |
|
|
|
state.isTakePhotoModeShow = e |
|
|
|
} |
|
|
|
|
|
|
|
const takePhotoMode = (index: number) => { |
|
|
|
state.isTakePhotoModeShow = true |
|
|
|
state.choiceIndex = index |
|
|
|
state.ownerInfo=ownerInfo |
|
|
|
} |
|
|
|
const cancle = () => { |
|
|
|
state.isTakePhotoModeShow = false |
|
|
|
|
|
|
|
const ocrResult = (data: OCRData) => { |
|
|
|
let bizContent = data.bizContent = data.bizContent ? JSON.parse(data.bizContent) : {} |
|
|
|
// 1: 身份证正面 2:身份证反面 3: 行车本正页 4:行车本副业 5:营业执照 |
|
|
|
if (state.choiceIndex === 1) { |
|
|
|
state.form.ownerName = bizContent.name |
|
|
|
state.form.ownerIdNum = bizContent.idno |
|
|
|
state.form.ownerIdAddress = bizContent.address |
|
|
|
state.form.ownerPosImgUrl = bizContent.imageUrl |
|
|
|
} else if (state.choiceIndex === 5) { |
|
|
|
|
|
|
|
state.form.ownerName = bizContent.unitName |
|
|
|
state.form.ownerIdNum = bizContent.screditCode |
|
|
|
state.form.ownerIdAddress = bizContent.address |
|
|
|
state.form.ownerPosImgUrl = bizContent.imageUrl |
|
|
|
|
|
|
|
} else if (state.choiceIndex === 2) { |
|
|
|
state.form.ownerNegImgUrl = bizContent.imageUrl |
|
|
|
|
|
|
|
} else if (state.choiceIndex === 3) { |
|
|
|
state.form.vehicleOwnerName = bizContent.man |
|
|
|
state.form.vehPosImgUrl = bizContent.imageUrl |
|
|
|
if (bizContent.plate_a.length > 8) { |
|
|
|
state.form.vehiclePlate = bizContent.plate_a.substring(0, 8); |
|
|
|
} else { |
|
|
|
state.form.vehiclePlate = bizContent.plate_a; |
|
|
|
} |
|
|
|
|
|
|
|
} else if (state.choiceIndex === 4) { |
|
|
|
state.form.vehNegImgUrl = bizContent.imageUrl |
|
|
|
} |
|
|
|
} |
|
|
|
const camera = () => { |
|
|
|
state.phoneType = 0 |
|
|
|
|
|
|
|
interface uploadFileParams{ |
|
|
|
imageUrl: string |
|
|
|
} |
|
|
|
//营业执照Orc接口调用 |
|
|
|
const cardImageOcrYY = () => { |
|
|
|
|
|
|
|
// 授权证书上传 |
|
|
|
const uploadOtherFile = () => { |
|
|
|
uni.chooseImage({ |
|
|
|
count: 1, //只能选取一张照片 |
|
|
|
count: 1, // 只能选取一张照片 |
|
|
|
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有 |
|
|
|
sourceType: ["camera", "album"], //从相册选择 |
|
|
|
success: function (res) { |
|
|
|
uploadFile(res.tempFilePaths[0], 5).then((data) => { |
|
|
|
state.form.orgName =data.unitName; |
|
|
|
state.form.unitId =data.screditCode; |
|
|
|
state.form.unitImagesUrl =data.imageUrl; |
|
|
|
success: (res) => { |
|
|
|
uploadFile(res.tempFilePaths[0]).then((data: uploadFileParams) => { |
|
|
|
state.form.proxyUrl = data.imageUrl |
|
|
|
}) |
|
|
|
}, |
|
|
|
}); |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
// 切换车辆类型 |
|
|
|
const toggleApplyType = (type:string) => { |
|
|
|
state.form.applyType = type; |
|
|
|
|
|
|
|
if (type == '2') { |
|
|
|
state.form.ownerPosImgUrl = '' |
|
|
|
state.form.ownerNegImgUrl = '' |
|
|
|
state.form.ownerName = '' |
|
|
|
state.form.ownerIdNum = '' |
|
|
|
state.form.proxyUrl = '' |
|
|
|
} else if (type == '1') { |
|
|
|
state.form.unitImagesUrl = '' |
|
|
|
state.form.proxyUrl = '' |
|
|
|
state.form.orgName = '' |
|
|
|
state.form.unitId = '' |
|
|
|
// 获取当前用户信息详情 |
|
|
|
const getUserInfo = () => { |
|
|
|
let option = { |
|
|
|
type: 2, |
|
|
|
data: {}, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
} |
|
|
|
requestNew(getUserMsg, option).then(res => { |
|
|
|
state.form.name = res.userName |
|
|
|
state.form.userPosImagesUrl = res.userPosImgUrl |
|
|
|
state.form.userNegImagesUrl = res.userNegImgUrl |
|
|
|
state.form.userIdNum = res.userIdNum |
|
|
|
state.form.mobile = res.mobile |
|
|
|
|
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const toggleApplyType = (item) => { |
|
|
|
state.form.ownerIdType = item.value; |
|
|
|
state.form.ownerName = ""; |
|
|
|
state.form.ownerPosImgUrl = ""; |
|
|
|
state.form.ownerNegImgUrl = ""; |
|
|
|
state.form.ownerIdNum = ""; |
|
|
|
state.form.ownerIdAddress = ""; |
|
|
|
state.form.proxyUrl = ""; |
|
|
|
state.form.ownerTel = ""; |
|
|
|
} |
|
|
|
|
|
|
|
// 跳转原原色 |
|
|
|
const scrollToElement = () => { |
|
|
|
uni.createSelectorQuery() |
|
|
|
.select('#inputCarOnerInfo') // 选择目标元素 |
|
|
|
.boundingClientRect((rect) => { // 获取元素的位置信息 |
|
|
|
console.log(rect) |
|
|
|
if (rect) { |
|
|
|
// rect 对象包含了元素的位置信息,如 top, left, width, height 等 |
|
|
|
console.log('Element position:', rect); |
|
|
|
|
|
|
|
// 使用 uni.pageScrollTo 跳转到该元素位置 |
|
|
|
uni.pageScrollTo({ |
|
|
|
scrollTop: rect.top, // 滚动到目标元素的顶部位置 |
|
|
|
duration: 300, // 滚动动画的持续时间(毫秒) |
|
|
|
}); |
|
|
|
} |
|
|
|
}) |
|
|
|
.exec(); // 执行查询 |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
@@ -760,4 +703,14 @@ |
|
|
|
background-color: #CCB375; |
|
|
|
} |
|
|
|
} |
|
|
|
.disabled-text{ |
|
|
|
color: #999999; |
|
|
|
} |
|
|
|
.uni-list{ |
|
|
|
width: 88%; |
|
|
|
margin: 24rpx auto; |
|
|
|
.left-owner-radio{ |
|
|
|
margin-right: 12rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |