qiubinghui
/
zhywpt-sp
Vērot 1
Pievienot zvaigznīti 0
Atdalīts 0
Kods Problēmas 0 Izmaiņu pieprasījumi 0 Laidieni 0 Vikivietne Aktivitāte
Pārlūkot izejas kodu

封装OCR识别组件

修改样式逻辑
yangteng pirms 1 nedēļas
vecāks
b88d146b64
revīzija
2bdc0779ba
3 mainītis faili ar 183 papildinājumiem un 129 dzēšanām
Dalītais skats Rādīt salīdzināšanas statistiku
  1. 159
    0
      components/uploadOcr.vue
  2. 9
    41
      subpackage/orders/car-release.vue
  3. 15
    88
      subpackage/orders/opening-account-people.vue

+ 159
- 0
components/uploadOcr.vue Parādīt failu

@@ -0,0 +1,159 @@
<template>
<view class="choice-takePhoto-wrap" v-if="prop.isTakePhotoModeShow" @click="cancle">
<view class="choice-takePhoto">
<view @click.stop="takePhoto(prop.phoneType)" style="border-radius: 20rpx 20rpx 0 0;">拍照</view>
<view @click.stop="xiangce(prop.phoneType)">从手机相册选择</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>
</template>

<script setup lang="ts">
import {
reactive,
ref,
onMounted
} from "vue";
import viewfinder from "./viewfinder.vue"
import { idCardOcr,vehicleLicenseOcr} from "@/utils/network/api.js";
import {
uploadFile,
compressImage,
chooseImageCompress,
compareDates
} from "@/utils/utils";
let prop = defineProps({
phoneType: {
type: Number,
default: function () {
return 0 //1 身份证正面 2 身份证反面 3 行驶证正面 4 行驶证反面
}
},
isTakePhotoModeShow: {
type: Boolean,
default: function () {
return false
}
},
});
const emit = defineEmits<{
(e : "close", content : any) : void;
(e : "ocrResult", content : any) : void;
}>();
const state = reactive({
showImg: true,
phoneType: 0, // 1 身份证正面 2 身份证反面 3行驶证正面 4行驶证反面
choiceIndex: 1, // 1 身份证正面 2 身份证反面
isTakePhotoModeShow:false, //选择拍照方式是否出来
images: '',
})
const xiangce = (val) => {
console.log("val", val)
var imageType=""
state.choiceIndex=val
if(state.choiceIndex == 1 || state.choiceIndex == 2){
imageType = val;
}else{
if (state.choiceIndex == 3) {
imageType = '1';
} else {
imageType = '2';
}
}
chooseImageCompress((res) => {
console.log("res",res,state.choiceIndex)
state.images = res.tempFilePath ? res.tempFilePath : res.tempFilePaths[0]
state.showImg = false
emit('close', false)
if(state.choiceIndex==1 || state.choiceIndex==2){
var issfz=idCardOcr
}else{
var issfz=vehicleLicenseOcr
}
uploadFile(state.images, imageType, issfz).then((data) => {
console.log("身份证上传", data)
emit('ocrResult', data)
})
})
}
const takePhoto = (val) => {
state.showImg = true
console.log("拍照", val)
state.phoneType = val;
state.choiceIndex=val
}
const confirmReturn = (val) => {
console.log("图片地址val", val)
state.phoneType = 0
if(state.choiceIndex==1 || state.choiceIndex==2){
var imageType = state.choiceIndex;
var issfz=idCardOcr
}else{
if (state.choiceIndex == 3) {
var imageType = 1;
} else {
var imageType = 2;
}
var issfz=vehicleLicenseOcr
}
uploadFile(val.tempImagePath, imageType, issfz).then((data) => {
console.log("身份证上传", data)
emit('close', false)
emit('ocrResult', data)
})
}
const cancle = () => {
emit('close', false)
}
const camera = () => {
state.phoneType = 0
}
</script>

<style scoped>
.choice-takePhoto {
position: absolute;
bottom: 0;
background-color: white;
width: 100%;
border-radius: 20rpx 20rpx 0 0;
}
.choice-takePhoto>view:first-child {
text-align: center;
height: 80rpx;
line-height: 80rpx;
border-bottom: 1rpx solid rgba(127, 127, 127, 0.3);
background-color: white;
}
.choice-takePhoto>view:last-child {
text-align: center;
height: 80rpx;
line-height: 80rpx;
border-top: 6rpx solid rgba(127, 127, 127, 0.1);
background-color: white;
}
.choice-takePhoto>view {
text-align: center;
height: 80rpx;
line-height: 80rpx;
background-color: white;
}
.choice-takePhoto-wrap {
width: 100%;
height: 100vh;
background-color: rgba(127, 127, 127, 0.2);
position: fixed;
left: 0;
top: 0;
z-index: 11111;
}
</style>

+ 9
- 41
subpackage/orders/car-release.vue Parādīt failu

@@ -228,20 +228,13 @@
</view>
</view>
</u-popup>
<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>
<uploadImg :isTakePhotoModeShow="state.isTakePhotoModeShow" :phoneType="state.choiceIndex" @close="close" @ocrResult="ocrResult">
</uploadImg>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import viewfinder from "../../components/viewfinder.vue"
import uploadImg from '@/components/uploadOcr';
import navBgCar from "./components/nav-bg-car1";
import navBar from "@/components/nav-bar/nav-bar2.vue";
import carNumberInput from "@/components/car-number-input/car-number-input.vue";
@@ -278,7 +271,10 @@
onPageScroll((e) => {
scrollTop.value = e.scrollTop;
});

const close=(e)=>{
console.log("e",e)
state.isTakePhotoModeShow=e
}
//车牌号输入
const carNumber = (val : any) => {
state.form.vehiclePlate = val.trim();
@@ -719,36 +715,13 @@
state.form.issueDate = e.detail.value
state.changeColor = true;
}
const xiangce = (val) => {
console.log("val", val)
if (state.choiceIndex == 3) {
var imageType = 1;
} else {
var imageType = 2;
}
state.changeColor = true;
chooseImageCompress((res) => {
state.images = res.tempFilePath ? res.tempFilePath : res.tempFilePaths[0]
state.showImg = false
state.phoneType = state.choiceIndex
state.isTakePhotoModeShow = false
})
}
const takePhoto = (val) => {
console.log("拍照", val)
state.phoneType = val;
state.showImg = true;
}
const confirmReturn = (val) => {
if (state.choiceIndex == 3) {
var imageType = 1;
} else {
var imageType = 2;
}
const ocrResult = (data) => {
state.changeColor = true;
state.phoneType = 0
state.isTakePhotoModeShow = false
uploadFile(val.tempImagePath, imageType, vehicleLicenseOcr).then((data) => {
console.log('输出内容=====================', state.choiceIndex)
if (state.choiceIndex === "3") {
if (data.plate_a.length > 8) {
@@ -808,18 +781,13 @@

console.log('=====================', state.form.vehNegImgUrl, state)
}
state.isTakePhotoModeShow = false
})
console.log("图片地址val", val.tempImagePath)
}
const takePhotoMode = (index) => {
console.log("index", index)
state.isTakePhotoModeShow = true
state.choiceIndex = index
}
const cancle = () => {
state.isTakePhotoModeShow = false
}
const radioChange = (evt) => {
console.log("evt.detail.value", evt.detail.value)
for (let i = 0; i < state.items.length; i++) {

+ 15
- 88
subpackage/orders/opening-account-people.vue Parādīt failu

@@ -240,20 +240,12 @@

<u-select mode="single-column" :list="state.genderList" v-model="state.genderShow" @confirm="genderSelectConfirm">
</u-select>
<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>
<uploadImg :isTakePhotoModeShow="state.isTakePhotoModeShow" :phoneType="state.choiceIndex" @close="close" @ocrResult="ocrResult">
</uploadImg>
</template>

<script setup lang="ts">
import viewfinder from "../../components/viewfinder.vue"
import uploadImg from '@/components/uploadOcr';
import navBgCar from "./components/nav-bg-car1";
import {
reactive,
@@ -275,12 +267,10 @@
} from "@dcloudio/uni-app";
import {
getUserMsg,
userUpload, idCardOcr, registerFull
userUpload, registerFull
} from "@/utils/network/api.js";

import {
request, requestNew
} from "@/utils/network/request.js";
import {requestNew} from "@/utils/network/request.js";

import {navTo } from "@/utils/utils";
import {
@@ -364,7 +354,10 @@
const userGenderAction = () => {
state.genderShow = true;
};

const close=(e)=>{
console.log("e",e)
state.isTakePhotoModeShow=e
}
const genderSelectConfirm = (e) => {
state.form.gender = ''
e.map((val, index) => {
@@ -590,30 +583,11 @@
state.choiceIndex = index
state.isMy = isMy
}
const xiangce = (val) => {
console.log("val", val)
var imageType = val;
chooseImageCompress((res) => {
state.images = res.tempFilePath ? res.tempFilePath : res.tempFilePaths[0]
state.showImg = false
state.phoneType = state.choiceIndex
state.isTakePhotoModeShow = false
})
}
const takePhoto = (val) => {
state.showImg = true
console.log("拍照", val)
state.phoneType = val;
}
const confirmReturn = (val) => {
console.log("图片地址val", val)
state.phoneType = 0
state.isTakePhotoModeShow = false
var imageType = state.choiceIndex;
uploadFile(val.tempImagePath, imageType, idCardOcr).then((data) => {
console.log("身份证上传", data)
const ocrResult = (data) => {
console.log("图片地址val", data)
if (state.isMy == "my") {
if (state.choiceIndex == "1") {
if (state.choiceIndex == 1) {
state.form.userName = data.name;
state.form.gender = data.gender;
state.form.userIdNum = data.idno;
@@ -624,26 +598,20 @@
state.form.userNegImgUrl = data.imageUrl;
compareDates(data.enddate)
}
state.isTakePhotoModeShow = false
} else {
if (state.choiceIndex == "1") {
if (state.choiceIndex == 1) {
state.form.agentName = data.name;
state.form.agentGender = data.gender;
state.form.agentIdNum = data.idno;
state.form.agentPosImgUrl = data.imageUrl;
state.form.agentAddress = data.address;
} else {
console.log("state.isMy", state.isMy, state.choiceIndex, state.choiceIndex == "1", data)
console.log("state.isMy", state.isMy, state.choiceIndex, state.choiceIndex == 1, data)
state.form.agentIdVld = data.enddate;
state.form.agentNegImgUrl = data.imageUrl;
compareDates(data.enddate)
}
state.isTakePhotoModeShow = false
}
})
}
const cancle = () => {
state.isTakePhotoModeShow = false
}
const downAuthD = () => {
uni.downloadFile({
@@ -940,47 +908,6 @@
}
}

.choice-takePhoto {
position: absolute;
bottom: 0;
background-color: white;
width: 100%;
border-radius: 20rpx 20rpx 0 0;
}

.choice-takePhoto>view:first-child {
text-align: center;
height: 80rpx;
line-height: 80rpx;
border-bottom: 1rpx solid rgba(127, 127, 127, 0.3);
background-color: white;
}

.choice-takePhoto>view:last-child {
text-align: center;
height: 80rpx;
line-height: 80rpx;
border-top: 6rpx solid rgba(127, 127, 127, 0.1);
background-color: white;
}

.choice-takePhoto>view {
text-align: center;
height: 80rpx;
line-height: 80rpx;
background-color: white;
}

.choice-takePhoto-wrap {
width: 100%;
height: 100vh;
background-color: rgba(127, 127, 127, 0.2);
position: fixed;
left: 0;
top: 0;
z-index: 11111;
}

.down {
background: #CCB375;
color: #fff;

Rakstīt Priekšskatītījums
Notiek ielāde…
Atcelt
Saglabāt