lanan-repair/pages/myCar/scan-frame.vue
2024-10-11 20:50:05 +08:00

107 lines
2.6 KiB
Vue

<template>
<view class="container">
<VNavigationBar title="车辆详情" background-color="#fff" title-color="#333"></VNavigationBar>
<view class="body">
<camera device-position="back" flash="auto" @error="error" style="width: 100%; height: 500upx;">
<cover-image src="@/static/images/scan-img.png" class="scan-img"></cover-image>
</camera>
<view class="scan-text">请将行驶证放置白色框内</view>
<button type="primary" @click="takePhoto">识别</button>
<view class="scan-img-box"><image mode="widthFix" class="photos-box" :src="src"></image></view>
</view>
</view>
</template>
<script>
import VNavigationBar from '@/components/VNavigationBar.vue';
import request from "@/utils/request";
import config from '@/config'
import upload from '@/utils/upload'
export default {
components: {
VNavigationBar
},
data() {
return {
src: "",
imgUrl:"",
}
},
methods: {
takePhoto() {
const ctx = uni.createCameraContext();
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.src = res.tempImagePath
uni.showLoading({
title: 'OCR自动识别中...'
});
//上传服务器
upload({
url:'/app-api/infra/file/upload',
filePath: res.tempImagePath
}).then((res)=>{
this.imgUrl = config.baseImageUrl+res.data
//识别内容
request({
url: '/app-api/base/user-car/vehicleLicenseOCR',
method: 'POST',
data: this.imgUrl,
tenantIdFlag: false
}).then((res)=>{
res.data['imgUrl'] = this.imgUrl
uni.hideLoading();
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];
prevPage.setData({
"driveLicense": res.data,
})
uni.navigateBack();
console.log(res)
})
})
}
});
},
error(e) {
console.log(e.detail);
}
}
}
</script>
<style lang="less" scoped>
.container {
box-sizing: border-box;
height: 100%;
background-color: #f3f5f7;
display: flex;
flex-direction: column;
.body {
flex: 1;
height: 0;
overflow: auto;
.scan-img {
opacity: 0.4;
width: 100%;
height: 500 upx;
}
.scan-text {
font-size: 20px;
text-align: center;
line-height: 60 upx;
}
.scan-img-box{
text-align: center;
}
}
}
</style>