<template>
|
<div>
|
<el-dialog
|
title="身份证信息识别"
|
@close="close"
|
:visible.sync="dialogVisible"
|
:close-on-click-modal='false'
|
center
|
width="380px"
|
>
|
<div class="upload-care">
|
<el-upload
|
ref="cardFront"
|
action=""
|
list-type="picture-card"
|
:headers="uploadHeader"
|
:http-request="function (file){return handleUpload(file, 1)}"
|
:show-file-list="false"
|
>
|
<div v-if="cardIdFrontImgUrl" class="el-img-box">
|
<img :src="cardIdFrontImgUrl" class="el-img">
|
<div class="action-box" @click.stop>
|
<span
|
class="el-upload-list__item-preview icon-preview"
|
@click.stop="handlePreview(cardIdFrontImgUrl)"
|
>
|
<i class="el-icon-zoom-in"></i>
|
</span>
|
<span
|
class="el-upload-list__item-preview icon-preview"
|
@click.stop="handleRemove(cardIdFrontImgUrl, 1)"
|
>
|
<i class="el-icon-delete"></i>
|
</span>
|
</div>
|
</div>
|
<div class="upload-operate" v-else>
|
<template v-if="!frontLoading">
|
<i class="el-icon-plus"></i>
|
<div class="el-upload__text">本地上传</div>
|
</template>
|
<div class="operate" @click.stop v-else>
|
<i class="el-icon-loading"></i>
|
</div>
|
</div>
|
</el-upload>
|
<p>身份证正面(头像)</p>
|
</div>
|
<div class="upload-care">
|
<el-upload
|
ref="cardFront"
|
action=""
|
list-type="picture-card"
|
:headers="uploadHeader"
|
:http-request="function (file){return handleUpload(file, 0)}"
|
:show-file-list="false"
|
>
|
<div v-if="cardIdBackImgUrl" class="el-img-box">
|
<img :src="cardIdBackImgUrl" class="el-img">
|
<div class="action-box" @click.stop>
|
<span
|
class="el-upload-list__item-preview icon-preview"
|
@click.stop="handlePreview(cardIdBackImgUrl)"
|
>
|
<i class="el-icon-zoom-in"></i>
|
</span>
|
<span
|
class="el-upload-list__item-preview icon-preview"
|
@click.stop="handleRemove(cardIdBackImgUrl, 0)"
|
>
|
<i class="el-icon-delete"></i>
|
</span>
|
</div>
|
</div>
|
<div class="upload-operate" v-else>
|
<template v-if="!backLoading">
|
<i class="el-icon-plus"></i>
|
<div class="el-upload__text">本地上传</div>
|
</template>
|
<div class="operate" @click.stop v-else>
|
<i class="el-icon-loading"></i>
|
</div>
|
</div>
|
</el-upload>
|
<p>身份证反面(国徽)</p>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submit(form, 'form')">确定</el-button>
|
</span>
|
</el-dialog>
|
<!-- 预览 -->
|
<el-dialog
|
:visible.sync="centerDialogVisible"
|
@close="centerDialogVisible = false"
|
width="50%"
|
center>
|
<img :src="dialogImg" class="avatar">
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
|
import common from "@/utils/common";
|
import { ocrRecognition, addChannelImage } from "@/api/product";
|
export default {
|
props:['visible', 'loanInfo'],
|
data(){
|
return {
|
form: {
|
name: '',
|
bankno: '',
|
bankPhone: '',
|
smsCode: ''
|
},
|
uploadHeader: {
|
'Content-Type': 'multipart/form-data; boundary=ReaquestHeader'
|
},
|
isUploadFrontFlag: false,
|
isUploadBackFlag: false,
|
frontLoading: false,
|
backLoading: false,
|
cardIdFrontImgUrl: '',
|
cardIdBackImgUrl: '',
|
dialogImg: '',
|
centerDialogVisible: false,
|
cardInfo: {}
|
}
|
},
|
computed: {
|
dialogVisible:{
|
get(){
|
return this.visible
|
},
|
set(){}
|
}
|
},
|
watch: {
|
dialogVisible(newV) {
|
if(newV) {
|
this.isUploadFrontFlag = false
|
this.isUploadBackFlag = false
|
this.frontLoading = false
|
this.backLoading = false
|
this.cardIdFrontImgUrl = ''
|
this.cardIdBackImgUrl = ''
|
this.dialogImg = ''
|
this.centerDialogVisible = false
|
this.cardInfo = {}
|
}
|
}
|
},
|
methods:{
|
handleUpload(files, type) {
|
const file = files.file
|
const isImage = file.type.indexOf("image") != -1
|
if (!isImage) {
|
this.$message.error("只能上传图片格式png、jpg、gif!")
|
return
|
}
|
const fileType = type === 1 ? 'idCardFront' : 'idCardBack'
|
let formData = new FormData()
|
formData.append('file', file) //传文件
|
formData.append('fileType', fileType) // fileType(文件类型)枚举：idCardFront-身份证正面，idCardBack-身份证反面，faceVerify-活体，faceVideo-视频，bankCard-银行卡
|
if (file !== undefined) {
|
// ocr识别
|
if(type === 1) {
|
this.frontLoading = true
|
} else {
|
this.backLoading = true
|
}
|
ocrRecognition(formData).then(res => {
|
if (res.code === '00') {
|
let certObj = {}
|
const result = res.result
|
if (type === 1) {
|
this.cardIdFrontImgUrl = result.imgUrl
|
certObj.nation = result.nationCode // 民族code
|
certObj.cardBirthday = result.birthday // 生日
|
certObj.certid = result.ident
|
certObj.cardSex = result.sexCode // 性别
|
this.isUploadFrontFlag = true
|
this.frontLoading = false
|
} else {
|
this.cardIdBackImgUrl = result.imgUrl
|
certObj.issuer = result.issuer // 发行机构
|
certObj.validBegin = result.validBegin // 有效期开始时间
|
certObj.validEnd = result.validEnd // 有效期结束时间
|
this.isUploadBackFlag = true
|
this.backLoading = false
|
}
|
Object.assign(this.cardInfo, certObj)
|
}
|
}).catch(() => {
|
if(type === 1) {
|
this.frontLoading = true
|
} else {
|
this.backLoading = true
|
}
|
})
|
}
|
},
|
// 删除图片
|
handleRemove(img, index) {
|
common.comfirm("提示", "请确认是否需要删除？", () => {
|
let certObj = {}
|
if(index === 1) {
|
this.cardIdFrontImgUrl = ''
|
certObj.nation = '' // 民族
|
certObj.cardBirthday = '' // 生日
|
certObj.certid = '' // 证件号码
|
certObj.cardSex = '' // 性别
|
this.isUploadFrontFlag = false
|
}
|
if(index === 0) {
|
this.cardIdBackImgUrl = ''
|
certObj.issuer = '' // 发行机构
|
certObj.validBegin = '' // 有效期开始时间
|
certObj.validEnd = '' // 有效期结束时间
|
this.isUploadBackFlag = false
|
}
|
Object.assign(this.cardInfo, certObj)
|
});
|
},
|
// 预览
|
handlePreview(file) {
|
this.dialogImg = file;
|
this.centerDialogVisible = true;
|
},
|
submit(){
|
// var obj = {
|
// nation: '汉', // 民族
|
// cardBirthday: '2020/02/02', // 生日
|
// issuer: '123456', // 发行机构
|
// validBegin: '2020/02/02', // 有效期开始时间
|
// validEnd: '2020/02/02', // 有效期结束时间
|
// }
|
|
// this.$emit('submit', obj)
|
if(!this.isUploadBackFlag || !this.isUploadFrontFlag) {
|
this.$message.warning("须上传身份证正、反面！");
|
return
|
}
|
this.dialogVisible = false
|
this.$emit('submit', this.cardInfo)
|
},
|
close(){
|
this.$emit('close', false)
|
}
|
}
|
}
|
</script>
|
|
|
<style lang="stylus" scoped>
|
div
|
&>>>.el-dialog
|
width auto
|
max-width calc(100% - 180px)
|
min-width 500px
|
max-height 100%
|
overflow hidden
|
margin 0 !important
|
position absolute
|
left 50%
|
top 50%
|
transform translate(-50%,-50%)
|
.el-dialog__body
|
padding 20px
|
max-height 576px
|
text-align center
|
overflow auto
|
.el-dialog__header
|
padding 20px 0 0
|
.el-dialog__footer
|
padding 0 0 20px
|
.el-button
|
width 120px
|
font-size 14px
|
line-height 20px
|
padding 5px 0
|
.upload-care
|
display inline-block
|
text-align center
|
&:nth-child(1)
|
margin-right 20px
|
.el-upload--picture-card
|
width 200px
|
height 126px
|
line-height 1.4
|
.el-img-box
|
position: relative
|
height: 100%
|
.action-box
|
display: none
|
position: absolute
|
top: 0
|
left: 0
|
z-index: 9
|
width: 100%
|
height: 100%
|
padding-top: 50px
|
text-align: center
|
background: rgba(0, 0, 0, .45)
|
box-sizing: border-box;
|
i[class^='el-icon']
|
margin: 0 10px
|
color: #f5f5f5
|
font-size: 20px
|
&:hover
|
.action-box
|
display: block
|
.el-img
|
width: 100%;
|
height: 100%;
|
.el-icon-plus
|
margin-top 45px
|
font-size 14px
|
font-weight 600
|
color #AAAAAA
|
.el-upload__text
|
margin-top 4px
|
font-size 12px
|
line-height 17px
|
color #AAAAAA
|
.el-upload-list
|
display none
|
.upload-operate
|
position: relative
|
height: 100%
|
.operate
|
position: absolute;
|
width: 100%
|
height: 100%
|
.el-icon-loading
|
margin-top: 45px
|
color: #999
|
p
|
margin 5px 0
|
font-size:12px
|
color #999
|
</style>
|
