|
|
@@ -1,147 +0,0 @@ |
|
|
|
<template> |
|
|
|
<view style="width: 100%;height: 100vh;position: fixed;left: 0;top:0;z-index: 111111;"> |
|
|
|
<view class="viewfinder"> |
|
|
|
<!-- <view v-if="phoneType == 1" |
|
|
|
style="display: flex;align-items: center;justify-content: flex-end;width: 100%;height: 100%;"> |
|
|
|
<image :src="fileURL + 'image/index/etc_bd_ocr_id_card_locator_back.png'" |
|
|
|
style="height: 220rpx;margin-right: 30rpx;" mode="heightFix"></image> |
|
|
|
</view> |
|
|
|
<view v-if="phoneType == 2" style="margin: 30rpx 0 0 30rpx;"> |
|
|
|
<image :src="fileURL + 'image/index/etc_bd_ocr_id_card_locator_front.png'" style="height: 160rpx;" |
|
|
|
mode="heightFix"> |
|
|
|
</image> |
|
|
|
</view> --> |
|
|
|
<view v-if="phoneType == 1" |
|
|
|
style="margin: -30rpx 0 0 30rpx;display: flex;height: 100%;align-self: flex-end;flex-direction: column;justify-content: flex-end;"> |
|
|
|
<view style="border: 1px solid #fff;height: 160rpx;width: 160rpx;"> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-if="phoneType == 2" |
|
|
|
style="margin: -30rpx 30rpx 0 0;display: flex;height: 100%;justify-content: flex-end;align-items: flex-end;"> |
|
|
|
<view style="border: 1px solid #fff;height: 60rpx;width: 300rpx;"> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- camera --> |
|
|
|
<camera v-if="showStartPhoto" id="camera" style="height: 70vh;width: 100vh;background-color: black;width: 100%;" |
|
|
|
mode="normal" :device-position="cameraPosition" :flash="flash" @stop="cameraStop" @error="cameraError" /> |
|
|
|
|
|
|
|
<image v-if="!showStartPhoto" :src="srcImg" style="height: 98vh;width: 100vh;" mode="scaleToFill"></image> |
|
|
|
|
|
|
|
<view style="background-color: #A5A5A5;top: 60%;width: 100%;height: 40%;position: absolute;"> |
|
|
|
<view style="display: flex;flex-direction: row;justify-content: center;align-items: center;height: 100%;"> |
|
|
|
<view style="flex: 1;"></view> |
|
|
|
<image v-if="!showStartPhoto" @click="camera" :src="fileURL + 'image/index/etc_bd_ocr_cancel.png'" |
|
|
|
style="width: 50rpx;height: 50rpx;"></image> |
|
|
|
<view style="flex: 1;"></view> |
|
|
|
<image @click="takePhoto" :src="fileURL + 'image/index/etc_bd_ocr_take_photo_normal.png'" |
|
|
|
style="width: 140rpx;height: 140rpx;"></image> |
|
|
|
<view style="flex: 1;"></view> |
|
|
|
<image v-if="!showStartPhoto" @click="success" :src="fileURL + 'image/index/etc_bd_ocr_confirm.png'" |
|
|
|
style="width: 50rpx;height: 50rpx;"></image> |
|
|
|
<view style="flex: 1;"></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
import { |
|
|
|
fileURL |
|
|
|
} from "@/datas/fileURL.js"; |
|
|
|
import { |
|
|
|
ref |
|
|
|
} from 'vue' |
|
|
|
|
|
|
|
let prop = defineProps({ |
|
|
|
phoneType: { |
|
|
|
type: Number, |
|
|
|
default: function () { |
|
|
|
return 3 //1 身份证正面 2 身份证反面 3 行驶证正面 4 行驶证反面 |
|
|
|
} |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
console.log('输出内容', prop.phoneType) |
|
|
|
|
|
|
|
const emit = defineEmits<{ |
|
|
|
(e : "confirmReturn", content : any) : void; |
|
|
|
(e : "failReturn", content : any) : void; |
|
|
|
}>(); |
|
|
|
|
|
|
|
|
|
|
|
let cameraPosition = 'back' // 'back'为后置摄像头,'front'为前置摄像头 |
|
|
|
let flash = 'off' // 'off'为关闭闪光灯,'on'为打开闪光灯 |
|
|
|
let showStartPhoto = ref(true) |
|
|
|
let srcImg = ref('') |
|
|
|
let resItem = ref(null); |
|
|
|
|
|
|
|
function takePhoto() { |
|
|
|
console.log('输出内容', '===123') |
|
|
|
let cameraContext = null |
|
|
|
// #ifdef MP-WEIXIN |
|
|
|
cameraContext = uni.createCameraContext(); |
|
|
|
// #endif |
|
|
|
// #ifdef MP-ALIPAY |
|
|
|
cameraContext = my.createCameraContext('camera'); |
|
|
|
// #endif |
|
|
|
// 调用拍照方法 |
|
|
|
cameraContext.takePhoto({ |
|
|
|
quality: 'normal', |
|
|
|
success: (res) => { |
|
|
|
// 在这里处理拍照成功后的逻辑,res.tempImagePath 为拍照的图片路径 |
|
|
|
console.log('拍照成功:', res.tempImagePath); |
|
|
|
srcImg.value = res.tempImagePath |
|
|
|
// showStartPhoto.value = false |
|
|
|
// resItem.value = res |
|
|
|
// // #ifdef MP-ALIPAY |
|
|
|
// cameraContext.stopRecord(); |
|
|
|
// emit('confirmReturn', res) |
|
|
|
// // #endif |
|
|
|
cameraContext.stopRecord(); |
|
|
|
emit('confirmReturn', res) |
|
|
|
}, |
|
|
|
fail: (error) => { |
|
|
|
console.error('拍照失败:', error); |
|
|
|
emit('failReturn', error); |
|
|
|
}, |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
//成功 |
|
|
|
function success() { |
|
|
|
console.log('成功:', resItem.value); |
|
|
|
emit('confirmReturn', resItem.value) |
|
|
|
} |
|
|
|
|
|
|
|
//重新拍摄 |
|
|
|
function camera() { |
|
|
|
showStartPhoto.value = true |
|
|
|
} |
|
|
|
|
|
|
|
function cameraStop() { |
|
|
|
// 相机停止时的回调 |
|
|
|
console.log('相机已停止'); |
|
|
|
} |
|
|
|
|
|
|
|
function cameraError(e) { |
|
|
|
// 相机出错时的回调 |
|
|
|
console.error('相机错误:', e.detail.errMsg); |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
.viewfinder { |
|
|
|
position: absolute; |
|
|
|
top: 20%; |
|
|
|
left: 10%; |
|
|
|
width: 80%; |
|
|
|
height: 400rpx; |
|
|
|
border: 2px solid #fff; |
|
|
|
box-sizing: border-box; |
|
|
|
border-radius: 16rpx; |
|
|
|
z-index: 2; |
|
|
|
} |
|
|
|
</style> |