qiubinghui
/
zhywpt-sp
Segui 1
Vota 0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Wiki Attività
Sfoglia il codice sorgente

拍照身份证行驶证

yxb
DESKTOP-2IO5MST\huting 1 anno fa
parent
a334f46ac8
commit
51f9090448
10 ha cambiato i file con 1349 aggiunte e 477 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 303
    324
      components/form-image/form-image.vue
  2. 147
    0
      components/viewfinder.vue
  3. 147
    0
      components/viewfinderCar.vue
  4. 6
    0
      pages.json
  5. 5
    5
      subpackage/after-sale/activation-once-again/activation-once-again.vue
  6. 8
    8
      subpackage/after-sale/replace-equipment/form.vue
  7. 199
    3
      subpackage/orders/car-release.vue
  8. 281
    95
      subpackage/orders/opening-account-people.vue
  9. 193
    42
      subpackage/orders/opening-account-unit.vue
  10. 60
    0
      subpackage/orders/takePhoto.vue

+ 303
- 324
components/form-image/form-image.vue Vedi File

@@ -1,73 +1,50 @@
<template>
<view>
<view
class="as-gravity-center"
style="
<view>
<view class="as-gravity-center" style="
display: flex;
flex-direction: row;
flex-wrap: wrap;
position: relative;
"
:style="
" :style="
'justify-content:' +
(imageList.length === 0 ? 'flex-start' : 'space-between')
"
>
<!-- 嵌套这层就over了 -->
<view
:style="
">
<!-- 嵌套这层就over了 -->
<view :style="
'margin-left: ' +
(retract + 10) +
'rpx;margin-right: ' +
retract +
'rpx'
"
style="
" style="
justify-content: flex-start;
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
"
>
<block v-for="(image, indexs) in imageList" :key="indexs">
<view
:style="
">
<block v-for="(image, indexs) in imageList" :key="indexs">
<view :style="
'width:' + innerWidth + 'px;' + 'height:' + innerWidth + 'px'
"
style="
" style="
display: block;
margin-left: 5px;
margin-top: 5px;
opacity: 0.7;
"
>
<view
class="as-gravity-center"
@tap="previewImage(indexs, imageList)"
:style="
">
<view class="as-gravity-center" @tap="previewImage(indexs, imageList)" :style="
'width:' +
(isDelete ? innerWidth / 2 : innerWidth / 2) +
'px;' +
'height:' +
innerWidth +
'px'
"
style="position: absolute; z-index: 3; opacity: 1"
>
<image
v-show="isDelete"
:src="`${$imgUrl}common/big.png`"
style="width: 40rpx; height: 40rpx"
mode="aspectFill"
>
</image>
</view>
<view
v-show="isDelete"
class="as-gravity-center"
@tap="removeImg(indexs, imageList)"
:style="
" style="position: absolute; z-index: 3; opacity: 1">
<image v-show="isDelete" :src="`${$imgUrl}common/big.png`"
style="width: 40rpx; height: 40rpx" mode="aspectFill">
</image>
</view>
<view v-show="isDelete" class="as-gravity-center" @tap="removeImg(indexs, imageList)" :style="
'width:' +
innerWidth / 2 +
'px;' +
@@ -77,306 +54,308 @@
'margin-left: ' +
innerWidth / 2 +
'px;'
"
style="position: absolute; z-index: 3; opacity: 1"
>
<image
:src="`${$imgUrl}common/remove.png`"
style="width: 40rpx; height: 40rpx"
mode="aspectFill"
>
</image>
</view>
" style="position: absolute; z-index: 3; opacity: 1">
<image :src="`${$imgUrl}common/remove.png`" style="width: 40rpx; height: 40rpx"
mode="aspectFill">
</image>
</view>

<view
:style="
<view :style="
'width:' + innerWidth + 'px;' + 'height:' + innerWidth + 'px'
"
style="
" style="
position: absolute;
z-index: 2;
background-color: #b2b2b2;
opacity: 0.5;
"
></view>
<image
:style="
"></view>
<image :style="
'width:' + innerWidth + 'px;' + 'height:' + innerWidth + 'px'
"
class="as-radius-8px"
style="position: relative; display: block"
:src="isUrl ? urls + image : image"
:data-src="isUrl ? urls + image : image"
mode="aspectFill"
>
</image>
</view>
</block>
" class="as-radius-8px" style="position: relative; display: block" :src="isUrl ? urls + image : image"
:data-src="isUrl ? urls + image : image" mode="aspectFill">
</image>
</view>
</block>

<view
v-if="canChoose"
class="layout4 as-gravity-center"
@tap="chooseImage(item)"
:style="'width:' + innerWidth + 'px;height:' + innerWidth + 'px'"
style="
<view v-if="canChoose" class="layout4 as-gravity-center" @tap="chooseImage(item)"
:style="'width:' + innerWidth + 'px;height:' + innerWidth + 'px'" style="
display: flex;
flex-direction: column;
margin-top: 8px;
margin-left: 5px;
"
>
<image
mode="aspectFill"
:src="`${$imgUrl}common/photo.png`"
style="height: 56rpx; width: 56rpx"
></image>
<view v-if="showTxt" class="text8" style="margin-top: 8px"
>上传图片</view
>
</view>
</view>
</view>
</view>
">
<image mode="aspectFill" :src="`${$imgUrl}common/photo.png`" style="height: 56rpx; width: 56rpx">
</image>
<view v-if="showTxt" class="text8" style="margin-top: 8px">上传图片</view>
</view>
</view>
</view>
</view>
</template>

<script>
import { pathToBase64 } from "@/utils/util/imageTool.js";
import { request } from "@/utils/network/request";
import { fileUpload } from "@/utils/network/api";
import { stringToJson } from "@/utils/network/encryption";
export default {
name: "form-image",
props: {
showImageList: {
/* 图片数组*/
type: Array,
default: function () {
return [];
},
},
imgWidth: {
/*获取屏幕宽度*/
type: Number,
default: 0,
required: false,
},
retract: {
/*缩进*/
type: Number,
default: 0,
},
isChoose: {
/*是否选择图片*/
type: Boolean,
default: true,
},
isDelete: {
/* 是否具备删除*/
type: Boolean,
default: true,
},
isUrl: {
/* 是否拼接图片地址*/
type: Boolean,
default: false,
},
count: {
/* 图片上传数量*/
type: Number,
default: 9,
},
showTxt: {
/* 是否显示上传图片文字*/
type: Boolean,
default: true,
},
},
created() {
let { showImageList } = this;
if (showImageList.length > 0) {
this.imageList = showImageList;
}
let _this = this;
import {
pathToBase64
} from "@/utils/util/imageTool.js";
import {
request
} from "@/utils/network/request";
import {
envs,
fileUpload
} from "@/utils/network/api";
import {
stringToJson
} from "@/utils/network/encryption";
export default {
name: "form-image",
props: {
showImageList: {
/* 图片数组*/
type: Array,
default: function() {
return [];
},
},
imgWidth: {
/*获取屏幕宽度*/
type: Number,
default: 0,
required: false,
},
retract: {
/*缩进*/
type: Number,
default: 0,
},
isChoose: {
/*是否选择图片*/
type: Boolean,
default: true,
},
isDelete: {
/* 是否具备删除*/
type: Boolean,
default: true,
},
isUrl: {
/* 是否拼接图片地址*/
type: Boolean,
default: false,
},
count: {
/* 图片上传数量*/
type: Number,
default: 9,
},
showTxt: {
/* 是否显示上传图片文字*/
type: Boolean,
default: true,
},
},
created() {
let {
showImageList
} = this;
if (showImageList.length > 0) {
this.imageList = showImageList;
}
let _this = this;

//console.log('输出内容', this.imgWidth)
if (isNaN(this.imgWidth) || this.imgWidth === 0) {
//判断是否不是数字
uni.getSystemInfo({
success: function (res) {
_this.innerWidth = res.windowWidth / 4 - 18;
},
});
} else {
_this.innerWidth = this.imgWidth - 18;
}
},
mounted() {
//当视图运行完后执行
},
data() {
return {
sourceTypeIndex: 2,
innerWidth: 0,
imageList: [],
item: {},
urls: "",
update: true,
canChoose: this.isChoose,
};
},
watch: {
//计算属性
imageList(val) {
//console.log('图片数据改变了', this.imageList.length);
},
},
methods: {
previewImage(e, item) {
//放大图片
// var current = this.isUrl ? this.urls + item[e] : item[e]
if (this.isUrl) {
for (var i = 0; i < item.length; i++) {
if (item[i].indexOf("http") == -1) {
item[i] = this.urls + item[i];
}
}
}
var current = item[e];
console.log("输出内容", current);
uni.previewImage({
current: current,
urls: item,
});
},
removeImg(e, item) {
//删除图片
this.$emit("removeImg", item, e);
item.splice(e, 1);
this.canChoose = this.imageList.length === this.count ? false : true;
},
chooseImage: function (item) {
//选择相机或相册时
let _this = this;
if (_this.imageList === undefined) {
_this.imageList = [];
}
if (_this.imageList.length === this.count) {
uni.showToast({
icon: "none",
title: "最多只能选择" + _this.count + "张图片",
});
return;
}
/* 图片选择 */
uni.chooseImage({
count: _this.count,
success: (res) => {
//选择成功
// _this.imageList = _this.imageList.concat(res.tempFilePaths);
const tempFilePaths = res.tempFilePaths;
const imgUrl = "";
//_this.$emit('backImg', _this.imageList) //测试环境下(正式环境请切换至接口返回地址)
this.canChoose = _this.imageList.length === this.count ? false : true;
for (var i = 0; i < tempFilePaths.length; i++) {
pathToBase64(tempFilePaths[i])
.then((path) => {
var data = { fileBase64: path };
const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(fileUpload, options).then((res) => {
const data = stringToJson(res.bizContent);
_this.imageList.push(data.data.url);
_this.$emit("backImg", _this.imageList); //测试环境下(正式环境请切换至接口返回地址)
});
})
.catch((error) => {console.log(error)});
//console.log('输出内容', this.imgWidth)
if (isNaN(this.imgWidth) || this.imgWidth === 0) {
//判断是否不是数字
uni.getSystemInfo({
success: function(res) {
_this.innerWidth = res.windowWidth / 4 - 18;
},
});
} else {
_this.innerWidth = this.imgWidth - 18;
}
},
mounted() {
//当视图运行完后执行
},
data() {
return {
sourceTypeIndex: 2,
innerWidth: 0,
imageList: [],
item: {},
urls: "",
update: true,
canChoose: this.isChoose,
};
},
watch: {
//计算属性
imageList(val) {
//console.log('图片数据改变了', this.imageList.length);
},
},
methods: {
strReplace(str) {
let imgUrl = str.replace("http://192.168.101.145:9000", envs[process.env.NODE_ENV].baseUrl);
imgUrl = imgUrl.replace("http://100.64.2.113:9000", envs[process.env.NODE_ENV].baseUrl);
console.log(imgUrl)
return imgUrl;
},
previewImage(e, item) {
//放大图片
// var current = this.isUrl ? this.urls + item[e] : item[e]
if (this.isUrl) {
for (var i = 0; i < item.length; i++) {
if (item[i].indexOf("http") == -1) {
item[i] = this.urls + item[i];
}
}
}
var current = item[e];
console.log("输出内容", current);
uni.previewImage({
current: current,
urls: item,
});
},
removeImg(e, item) {
//删除图片
this.$emit("removeImg", item, e);
item.splice(e, 1);
this.canChoose = this.imageList.length === this.count ? false : true;
},
chooseImage: function(item) {
//选择相机或相册时
let _this = this;
if (_this.imageList === undefined) {
_this.imageList = [];
}
if (_this.imageList.length === this.count) {
uni.showToast({
icon: "none",
title: "最多只能选择" + _this.count + "张图片",
});
return;
}
/* 图片选择 */
uni.chooseImage({
count: _this.count,
success: (res) => {
//选择成功
// _this.imageList = _this.imageList.concat(res.tempFilePaths);
const tempFilePaths = res.tempFilePaths;
const imgUrl = "";
//_this.$emit('backImg', _this.imageList) //测试环境下(正式环境请切换至接口返回地址)
this.canChoose = _this.imageList.length === this.count ? false : true;
for (var i = 0; i < tempFilePaths.length; i++) {
pathToBase64(tempFilePaths[i])
.then((path) => {
var data = {
fileBase64: path
};
const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(fileUpload, options).then((res) => {
const data = stringToJson(res.bizContent);
_this.imageList.push(data.data.url);
for (var k = 0; k < _this.imageList.length; k++) {
_this.imageList[k] = this.strReplace(_this
.imageList[k])
}
_this.$emit("backImg", _this
.imageList); //测试环境下(正式环境请切换至接口返回地址)
console.log(" _this.imageList", _this.imageList)
});
})
.catch((error) => {
console.log(error)
});

/* 图片上传 */
// uni.uploadFile({
// url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
// filePath: tempFilePaths[i],
// name: 'file',
// header: {
// 'X-Access-Token': uni.getStorageSync('token')
// },
// formData: {
// biz: 'app'
// },
// success: (uploadFileRes) => {
// let imgData = JSON.parse(uploadFileRes.data)
// /* 数据拼接 */
// if (imgUrl === undefined || imgUrl === '') {
// imgUrl = imgData.message
// } else {
// imgUrl += ',' + imgData.message
// }
// _this.$emit('backImg', _this.imageList) //正式环境下
// },
// fail: (res) => {
// console.log(res);
// }
// });
}
},
fail: (err) => {
if (err.errMsg.indexOf("cancel") !== "-1") {
return;
}
uni.getSetting({
success: (res) => {
let authStatus = false;
switch (this.sourceTypeIndex) {
case 0:
authStatus = res.authSetting["scope.camera"];
break;
case 1:
authStatus = res.authSetting["scope.album"];
break;
case 2:
authStatus =
res.authSetting["scope.album"] &&
res.authSetting["scope.camera"];
break;
default:
break;
}
if (!authStatus) {
uni.showModal({
title: "授权失败",
content:
"需要从您的相机或相册获取图片，请在设置界面打开相关权限",
success: (res) => {
if (res.confirm) {
uni.openSetting();
}
},
});
}
},
});
},
});
},
},
};
/* 图片上传 */
// uni.uploadFile({
// url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
// filePath: tempFilePaths[i],
// name: 'file',
// header: {
// 'X-Access-Token': uni.getStorageSync('token')
// },
// formData: {
// biz: 'app'
// },
// success: (uploadFileRes) => {
// let imgData = JSON.parse(uploadFileRes.data)
// /* 数据拼接 */
// if (imgUrl === undefined || imgUrl === '') {
// imgUrl = imgData.message
// } else {
// imgUrl += ',' + imgData.message
// }
// _this.$emit('backImg', _this.imageList) //正式环境下
// },
// fail: (res) => {
// console.log(res);
// }
// });
}
},
fail: (err) => {
if (err.errMsg.indexOf("cancel") !== "-1") {
return;
}
uni.getSetting({
success: (res) => {
let authStatus = false;
switch (this.sourceTypeIndex) {
case 0:
authStatus = res.authSetting["scope.camera"];
break;
case 1:
authStatus = res.authSetting["scope.album"];
break;
case 2:
authStatus =
res.authSetting["scope.album"] &&
res.authSetting["scope.camera"];
break;
default:
break;
}
if (!authStatus) {
uni.showModal({
title: "授权失败",
content: "需要从您的相机或相册获取图片，请在设置界面打开相关权限",
success: (res) => {
if (res.confirm) {
uni.openSetting();
}
},
});
}
},
});
},
});
},
},
};
</script>

<style>
.text8 {
font-size: 26rpx;
font-family: PingFang SC;
color: #333333;
opacity: 1;
}
.text8 {
font-size: 26rpx;
font-family: PingFang SC;
color: #333333;
opacity: 1;
}

.layout4 {
background: #f3f3f3;
opacity: 1;
border-radius: 8px;
border: 1px solid #dcdcdc;
}
</style>
.layout4 {
background: #f3f3f3;
opacity: 1;
border-radius: 8px;
border: 1px solid #dcdcdc;
}
</style>

+ 147
- 0
components/viewfinder.vue Vedi File

@@ -0,0 +1,147 @@
<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 == 3"
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 == 4"
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;"></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>

+ 147
- 0
components/viewfinderCar.vue Vedi File

@@ -0,0 +1,147 @@
<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;"></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>

+ 6
- 0
pages.json Vedi File

@@ -890,6 +890,12 @@
}
}
},
{
"path": "takePhoto",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "changeInformation",
"style": {

+ 5
- 5
subpackage/after-sale/activation-once-again/activation-once-again.vue Vedi File

@@ -360,11 +360,11 @@
.then(() => {
tools.hideLoadingAlert();
state.showPopup = true;
setTimeout(() => {
uni.navigateBack({
delta: 1,
})
}, 1000)
// setTimeout(() => {
// uni.navigateBack({
// delta: 1,
// })
// }, 1000)
});

};

+ 8
- 8
subpackage/after-sale/replace-equipment/form.vue Vedi File

@@ -235,20 +235,20 @@
name: "寄回",
val: "1",
},
{
name: "不寄回",
val: "0",
},
// {
// name: "不寄回",
// val: "0",
// },
]);

const radiolist2 = reactive([{
name: "邮寄",
val: "1",
},
{
name: "不邮寄",
val: "0",
},
// {
// name: "不邮寄",
// val: "0",
// },
]);

const goToAddAddress = () => {

+ 199
- 3
subpackage/orders/car-release.vue Vedi File

@@ -6,7 +6,7 @@
<view class="title"> 上传后请核对识别信息 </view>
<view class="tip"> 如有错误请及时手动修改 </view>
</view>
<view class="picture-wrapper" @click="cardImageOcr('1')">
<view class="picture-wrapper" @click="takePhotoMode('1')">
<view class="bg">
<view class="">
<view class="name"> 行驶证主页 </view>
@@ -21,7 +21,7 @@
<image v-else class="icon" :src="strReplace(state.form.vehPosImgUrl)"></image>
</view>
</view>
<view class="picture-wrapper" @click="cardImageOcr('2')">
<view class="picture-wrapper" @click="takePhotoMode('2')">
<view class="bg">
<view class="">
<view class="name"> 行驶证副页 </view>
@@ -197,10 +197,19 @@
</view>
</u-popup>
</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>
<viewfinderCar v-if="state.phoneType" :phoneType="state.phoneType" @confirmReturn="confirmReturn"></viewfinderCar>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import viewfinderCar from "../../components/viewfinderCar.vue"
import navBgCar from "./components/nav-bg-car4";
import navBar from "@/components/nav-bar/nav-bar2.vue";
import carNumberInput from "@/components/car-number-input/car-number-input.vue";
@@ -371,6 +380,9 @@
};

const state = reactive({
phoneType: 0, // 1 身份证正面 2 身份证反面 3行驶证正面 4行驶证反面
choiceIndex: 1, // 1 身份证正面 2 身份证反面
isTakePhotoModeShow: false, //选择拍照方式是否出来
changeColor: false,
data: {
transferLogs: [],
@@ -480,7 +492,7 @@
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
sourceType: ["camera", "album"], //从相册选择
success: function (res) {
console.log("tempFilePaths[0].startsWith('file://')", res.tempFilePaths[0].startsWith('file://'))
// tempFilePaths[0].startsWith('file://')
pathToBase64(res.tempFilePaths[0])
.then((path) => {
@@ -617,6 +629,149 @@
state.form.issueDate = e.detail.value
state.changeColor = true;
}
const xiangce = (val) => {
console.log("val", val)
var imageType = val;
state.changeColor = true;
uni.chooseImage({
count: 1, //只能选取一张照片
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
sourceType: ["album"], //从相册选择
success: function (res) {
console.log("tempFilePaths[0].startsWith('file://')", res.tempFilePaths[0], res.tempFilePaths[0].startsWith('file://'))
pathToBase64(res.tempFilePaths[0])
.then((path) => {
var data = {
source: "1",
agencyId: "52010106004",
imageType: imageType,
fileName: res.tempFilePaths[0],
imageBase64: path,
};

const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(etcCarOcrCard, options).then((res) => {
const data = stringToJson(res.bizContent);
if (state.choiceIndex === "1") {
if (data.plate_a.length > 8) {
state.form.vehicleIdNum = data.plate_a.substring(0, 8);
} else {
state.form.vehicleIdNum = data.plate_a;
}
state.form.man = data.man;
state.form.vehicleType = data.vehicle;
state.form.character = data.character;
state.form.vin = data.vin;
state.form.engineNum = data.engine;
state.form.register = data.register;
state.form.issueDate = data.issue;
state.form.vehPosImgUrl = data.imageUrl;
state.form.vehicleModel = data.model;

} else {
state.form.approvedCount = data.apc;
state.form.approvedCountShow = data.apc;
state.form.maintenaceMass = data.unladen;
state.form.maintenaceMassShow = data.unladen;
state.form.vehicleDimensions = data.overall.replaceAll("x", "X");
let arr = data.overall.split("x");
state.outlineL = arr[0]; //外廓 长
state.outlineW = arr[1]; //外廓 宽
state.outlineH = arr[2].substring(0, arr[2].length - 2); //外廓 高
state.form.totalMass = data.gross;
state.form.totalMassShow = data.gross;
state.form.vehNegImgUrl = data.imageUrl;
state.form.permittedWeight = data.alc ? data.alc : 0;
state.form.permittedTowWeight = data.towing ? data.towing : 0;
}
state.isTakePhotoModeShow = false
});
})
.catch((error) => { });
},
})
}
const takePhoto = (val) => {
console.log("拍照", val)
// uni.navigateTo({
// url: `/subpackage/orders/takePhoto?phoneType=${val}`
// })
state.phoneType = val;
}
const confirmReturn = (val) => {
state.changeColor = true;
state.phoneType = 0
state.isTakePhotoModeShow = false
var imageType = state.choiceIndex;
console.log("图片地址val", val.tempImagePath)
pathToBase64(val.tempImagePath)
.then((path) => {
var data = {
source: "1",
agencyId: "52010106004",
imageType: imageType,
fileName: val.tempImagePath,
imageBase64: path,
};

const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(etcCarOcrCard, options).then((res) => {
const data = stringToJson(res.bizContent);
if (state.choiceIndex === "1") {
if (data.plate_a.length > 8) {
state.form.vehicleIdNum = data.plate_a.substring(0, 8);
} else {
state.form.vehicleIdNum = data.plate_a;
}
state.form.man = data.man;
state.form.vehicleType = data.vehicle;
state.form.character = data.character;
state.form.vin = data.vin;
state.form.engineNum = data.engine;
state.form.register = data.register;
state.form.issueDate = data.issue;
state.form.vehPosImgUrl = data.imageUrl;
state.form.vehicleModel = data.model;

} else {
state.form.approvedCount = data.apc;
state.form.approvedCountShow = data.apc;
state.form.maintenaceMass = data.unladen;
state.form.maintenaceMassShow = data.unladen;
state.form.vehicleDimensions = data.overall.replaceAll("x", "X");
let arr = data.overall.split("x");
state.outlineL = arr[0]; //外廓 长
state.outlineW = arr[1]; //外廓 宽
state.outlineH = arr[2].substring(0, arr[2].length - 2); //外廓 高
state.form.totalMass = data.gross;
state.form.totalMassShow = data.gross;
state.form.vehNegImgUrl = data.imageUrl;
state.form.permittedWeight = data.alc ? data.alc : 0;
state.form.permittedTowWeight = data.towing ? data.towing : 0;
}
state.isTakePhotoModeShow = false
});
})
.catch((error) => { });
}
const takePhotoMode = (index) => {
console.log("index", index)
state.isTakePhotoModeShow = true
state.choiceIndex = index
}
const cancle = () => {
state.isTakePhotoModeShow = false
}
</script>

<style lang="scss" scoped>
@@ -933,4 +1088,45 @@
::v-deep .u-input__input {
background: transparent;
}

.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>

+ 281
- 95
subpackage/orders/opening-account-people.vue Vedi File

@@ -16,7 +16,7 @@
<view class="title"> 上传后请核对识别信息 </view>
<view class="tip"> 如有错误请及时手动修改 </view>
</view>
<view class="picture-wrapper" @click="cardImageOcr('1')">
<view class="picture-wrapper" @click="takePhotoMode('1','my')">
<view class="bg">
<view class="">
<view class="name"> 人像面 </view>
@@ -30,7 +30,7 @@
<image v-else class="icon" :src="strReplace(state.form.userPosImgUrl)"></image>
</view>
</view>
<view class="picture-wrapper" @click="cardImageOcr('2')">
<view class="picture-wrapper" @click="takePhotoMode('2','my')">
<view class="bg">
<view class="">
<view class="name"> 国徽面 </view>
@@ -90,7 +90,7 @@
<view class="title"> 上传后请核对识别信息 </view>
<view class="tip"> 如有错误请及时手动修改 </view>
</view>
<view class="picture-wrapper" @click="cardImageOcr('1')">
<view class="picture-wrapper" @click="takePhotoMode('1','my')">
<view class="bg">
<view class="">
<view class="name"> 人像面 </view>
@@ -104,7 +104,7 @@
<image v-else class="icon" :src="strReplace(state.form.userPosImgUrl)"></image>
</view>
</view>
<view class="picture-wrapper" @click="cardImageOcr('2')">
<view class="picture-wrapper" @click="takePhotoMode('2','my')">
<view class="bg">
<view class="">
<view class="name"> 国徽面 </view>
@@ -149,7 +149,7 @@
<view class="title"> 上传后请核对识别信息 </view>
<view class="tip"> 如有错误请及时手动修改 </view>
</view>
<view class="picture-wrapper" @click="cardDbImageOcr('1')">
<view class="picture-wrapper" @click="takePhotoMode('1','other')">
<view class="bg">
<view class="">
<view class="name"> 人像面 </view>
@@ -163,7 +163,7 @@
<image v-else class="icon" :src="strReplace(state.form.agentPosImgUrl)"></image>
</view>
</view>
<view class="picture-wrapper" @click="cardDbImageOcr('2')">
<view class="picture-wrapper" @click="takePhotoMode('2','other')">
<view class="bg">
<view class="">
<view class="name"> 国徽面 </view>
@@ -174,7 +174,7 @@
</view>
<image v-if="!state.form.agentNegImgUrl" class="icon" :src="`${$imgUrl}applyCard/guohui.png`">
</image>
<image v-else class="icon" :src="state.form.agentNegImgUrl"></image>
<image v-else class="icon" :src="strReplace(state.form.agentNegImgUrl)"></image>
</view>
</view>
<view class="picture-wrapper" @click="cardFileImageUpdate()" v-if='state.isEnableBook'>
@@ -227,9 +227,19 @@
</view>
<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" @confirmReturn="confirmReturn"></viewfinder>
</template>

<script setup lang="ts">
import viewfinder from "../../components/viewfinder.vue"
import navBgCar from "./components/nav-bg-car3";
import {
pathToBase64
@@ -272,6 +282,10 @@
import navBar from "@/components/nav-bar/nav-bar2.vue";
const scrollTop = ref(0)
const state = reactive({
isMy: "",//自己办理 他人办理
phoneType: 0, // 1 身份证正面 2 身份证反面 3行驶证正面 4行驶证反面
choiceIndex: 1, // 1 身份证正面 2 身份证反面
isTakePhotoModeShow: false, //选择拍照方式是否出来
genderList: [{
value: '男',
label: '男'
@@ -320,7 +334,6 @@
isEnableInfo: true, //小程序信息带出
isEnableOCRData: true, //允许修改OCR识别出来的数据
});

const userGenderAction = () => {
state.genderShow = true;
};
@@ -440,6 +453,7 @@

//tab切换
const tabChange = (val : any) => {
state.isTakePhotoModeShow = false
if (val) {
state.isMyPeopple = true;
} else {
@@ -501,94 +515,96 @@
}
console.log("event.replace(screeningStr, '')", event.replace(screeningStr, ''), event, state.form.userName)
}
const cardDbImageOcr = (val : any) => {
var imageType = val;
uni.chooseImage({
count: 1, //只能选取一张照片
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
sourceType: ["camera", "album"], //从相册选择
success: function (res) {
pathToBase64(res.tempFilePaths[0])
.then((path) => {
var data = {
source: "1",
agencyId: "52010106004",
imageType: imageType,
fileName: res.tempFilePaths[0],
imageBase64: path,
};
const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(etcOcrCard, options).then((res) => {
const data = stringToJson(res.bizContent);
if (val === "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 {
state.form.agentIdVld = data.enddate;
state.form.agentNegImgUrl = data.imageUrl;
}
});
})
.catch((error) => { });
},
});
};
// const cardDbImageOcr = (val : any) => {
// var imageType = val;
// uni.chooseImage({
// count: 1, //只能选取一张照片
// sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
// sourceType: ["camera", "album"], //从相册选择
// success: function (res) {
// pathToBase64(res.tempFilePaths[0])
// .then((path) => {
// var data = {
// source: "1",
// agencyId: "52010106004",
// imageType: imageType,
// fileName: res.tempFilePaths[0],
// imageBase64: path,
// };
// const options = {
// type: 2,
// data: data,
// method: "POST",
// showLoading: true,
// };
// request(etcOcrCard, options).then((res) => {
// const data = stringToJson(res.bizContent);
// if (val === "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 {
// state.form.agentIdVld = data.enddate;
// state.form.agentNegImgUrl = data.imageUrl;
// }
// });
// })
// .catch((error) => { });
// },
// });
// };
//orc接口调用
const cardImageOcr = (val : any) => {
if (state.isEnableOCRData) {
return;
}
var imageType = val;
console.log("点击了", val)
uni.chooseImage({
count: 1, //只能选取一张照片
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
sourceType: ["camera", "album"], //从相册选择
success: function (res) {
pathToBase64(res.tempFilePaths[0])
.then((path) => {
var data = {
source: "1",
agencyId: "52010106004",
imageType: imageType,
fileName: res.tempFilePaths[0],
imageBase64: path,
};

const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(etcOcrCard, options).then((res) => {
const data = stringToJson(res.bizContent);
if (val === "1") {
state.form.userName = data.name;
state.form.gender = data.gender;
state.form.userIdNum = data.idno;
state.form.userPosImgUrl = data.imageUrl;
state.form.address = data.address;
} else {
state.form.customerIdVld = data.enddate;
state.form.userNegImgUrl = data.imageUrl;
}
});
})
.catch((error) => { });
},
});
};
// const cardImageOcr = (val : any) => {
// console.log("点击了", val, state.isEnableOCRData)
// // if (state.isEnableOCRData) {
// // return;
// // }
// var imageType = val;
// console.log("点击了", val)
// uni.chooseImage({
// count: 1, //只能选取一张照片
// sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
// sourceType: ["camera", "album"], //从相册选择
// success: function (res) {
// console.log("tempFilePaths[0].startsWith('file://')", res.tempFilePaths[0], res.tempFilePaths[0].startsWith('file://'))
// pathToBase64(res.tempFilePaths[0])
// .then((path) => {
// var data = {
// source: "1",
// agencyId: "52010106004",
// imageType: imageType,
// fileName: res.tempFilePaths[0],
// imageBase64: path,
// };

// const options = {
// type: 2,
// data: data,
// method: "POST",
// showLoading: true,
// };
// request(etcOcrCard, options).then((res) => {
// const data = stringToJson(res.bizContent);
// if (val === "1") {
// state.form.userName = data.name;
// state.form.gender = data.gender;
// state.form.userIdNum = data.idno;
// state.form.userPosImgUrl = data.imageUrl;
// state.form.address = data.address;
// } else {
// state.form.customerIdVld = data.enddate;
// state.form.userNegImgUrl = data.imageUrl;
// }
// });
// })
// .catch((error) => { });
// },
// });
// };
//替换图片地址
const strReplace = (str : string) => {
let imgUrl = str.replace("http://192.168.101.145:9000", envs[process.env.NODE_ENV].baseUrl);
@@ -658,6 +674,135 @@
state.form.tel = data.customerTel;
})
}
const takePhotoMode = (index, isMy) => {
console.log("index", index, isMy)
state.isTakePhotoModeShow = true
state.choiceIndex = index
state.isMy = isMy
}
const xiangce = (val) => {
console.log("val", val)
var imageType = val;
uni.chooseImage({
count: 1, //只能选取一张照片
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
sourceType: ["album"], //从相册选择
success: function (res) {
console.log("tempFilePaths[0].startsWith('file://')", res.tempFilePaths[0], res.tempFilePaths[0].startsWith('file://'))
pathToBase64(res.tempFilePaths[0])
.then((path) => {
var data = {
source: "1",
agencyId: "52010106004",
imageType: imageType,
fileName: res.tempFilePaths[0],
imageBase64: path,
};

const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(etcOcrCard, options).then((res) => {
const data = stringToJson(res.bizContent);
if (state.isMy == "my") {
if (state.choiceIndex === "1") {
state.form.userName = data.name;
state.form.gender = data.gender;
state.form.userIdNum = data.idno;
state.form.userPosImgUrl = data.imageUrl;
state.form.address = data.address;
} else {
state.form.customerIdVld = data.enddate;
state.form.userNegImgUrl = data.imageUrl;
}
state.isTakePhotoModeShow = false
} else {
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 {
state.form.agentIdVld = data.enddate;
state.form.agentNegImgUrl = data.imageUrl;
}
state.isTakePhotoModeShow = false
}

});
})
.catch((error) => { });
},
})
}
const takePhoto = (val) => {
console.log("拍照", val)
// uni.navigateTo({
// url: `/subpackage/orders/takePhoto?phoneType=${val}`
// })
state.phoneType = val;
}
const confirmReturn = (val) => {
state.phoneType = 0
state.isTakePhotoModeShow = false
var imageType = state.choiceIndex;
console.log("图片地址val", val.tempImagePath)
pathToBase64(val.tempImagePath)
.then((path) => {
var data = {
source: "1",
agencyId: "52010106004",
imageType: imageType,
fileName: val.tempImagePath,
imageBase64: path,
};

const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(etcOcrCard, options).then((res) => {
const data = stringToJson(res.bizContent);
if (state.isMy == "my") {
if (state.choiceIndex === "1") {
state.form.userName = data.name;
state.form.gender = data.gender;
state.form.userIdNum = data.idno;
state.form.userPosImgUrl = data.imageUrl;
state.form.address = data.address;
} else {
state.form.customerIdVld = data.enddate;
state.form.userNegImgUrl = data.imageUrl;
}
state.isTakePhotoModeShow = false
} else {
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)
state.form.agentIdVld = data.enddate;
state.form.agentNegImgUrl = data.imageUrl;
}
state.isTakePhotoModeShow = false
}

});
})
.catch((error) => { });
}
const cancle = () => {
state.isTakePhotoModeShow = false
}
</script>

<style lang="scss" scoped>
@@ -827,4 +972,45 @@
margin-bottom: 60rpx;
}
}

.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>

+ 193
- 42
subpackage/orders/opening-account-unit.vue Vedi File

@@ -20,7 +20,7 @@
<image v-else class="icon" :src="strReplace(state.form.posImgUrl)"></image>
</view>
</view>
<view class="picture-wrapper" @click="cardImageOcr('1')">
<view class="picture-wrapper" @click="takePhotoMode('1')">
<view class="bg">
<view class="">
<view class="name"> 人像面 </view>
@@ -34,7 +34,7 @@
<image v-else class="icon" :src="strReplace(state.form.agentPosImgUrl)"></image>
</view>
</view>
<view class="picture-wrapper" @click="cardImageOcr('2')">
<view class="picture-wrapper" @click="takePhotoMode('2')">
<view class="bg">
<view class="">
<view class="name"> 国徽面 </view>
@@ -96,6 +96,14 @@
下一步
</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" @confirmReturn="confirmReturn"></viewfinder>
</view>
</template>

@@ -105,6 +113,7 @@
} from "vue";
import navBgCar from "./components/nav-bg-car3";
import navBar from "@/components/nav-bar/nav-bar2.vue";
import viewfinder from "../../components/viewfinder.vue"
import {
pathToBase64
} from "@/utils/image-tools/index.js";
@@ -140,6 +149,9 @@
const scrollTop = ref(0);//滚动距离

const state = reactive({
phoneType: 0, // 1 身份证正面 2 身份证反面 3行驶证正面 4行驶证反面
choiceIndex: 1, // 1 身份证正面 2 身份证反面
isTakePhotoModeShow: false, //选择拍照方式是否出来
form: {
orderId: "", //订单ID
//营业执照信息
@@ -331,46 +343,46 @@
},
});
};
const cardImageOcr = (val : any) => {
var imageType = val;
uni.chooseImage({
count: 1, //只能选取一张照片
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
sourceType: ["camera", "album"], //从相册选择
success: function (res) {
pathToBase64(res.tempFilePaths[0])
.then((path) => {
var data = {
source: "WECHAT",
agencyId: "52010106004",
imageType: imageType,
fileName: res.tempFilePaths[0],
imageBase64: path,
};
const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(etcOcrCard, options).then((res) => {
const data = stringToJson(res.bizContent);
if (val === "1") {
state.form.agentName = data.name;
state.form.agentIdNum = data.idno;
state.form.agentPosImgUrl = data.imageUrl;
state.form.address = data.address;
state.form.agentGender = data.gender;
} else {
state.form.agentIdVld = data.enddate;
state.form.agentNegImgUrl = data.imageUrl;
}
});
})
.catch((error) => { });
},
});
};
// const cardImageOcr = (val : any) => {
// var imageType = val;
// uni.chooseImage({
// count: 1, //只能选取一张照片
// sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
// sourceType: ["camera", "album"], //从相册选择
// success: function (res) {
// pathToBase64(res.tempFilePaths[0])
// .then((path) => {
// var data = {
// source: "WECHAT",
// agencyId: "52010106004",
// imageType: imageType,
// fileName: res.tempFilePaths[0],
// imageBase64: path,
// };
// const options = {
// type: 2,
// data: data,
// method: "POST",
// showLoading: true,
// };
// request(etcOcrCard, options).then((res) => {
// const data = stringToJson(res.bizContent);
// if (val === "1") {
// state.form.agentName = data.name;
// state.form.agentIdNum = data.idno;
// state.form.agentPosImgUrl = data.imageUrl;
// state.form.address = data.address;
// state.form.agentGender = data.gender;
// } else {
// state.form.agentIdVld = data.enddate;
// state.form.agentNegImgUrl = data.imageUrl;
// }
// });
// })
// .catch((error) => { });
// },
// });
// };
//委托书获取图片给后端
const cardFileImageUpdateyy = (val : any) => {
var data = {
@@ -420,6 +432,104 @@
imgUrl = imgUrl.replace("http://100.64.2.113:9000", envs[process.env.NODE_ENV].baseUrl);
return imgUrl;
}
const takePhotoMode = (index) => {
console.log("index", index)
state.isTakePhotoModeShow = true
state.choiceIndex = index
}
const xiangce = (val) => {
console.log("val", val)
var imageType = val;
uni.chooseImage({
count: 1, //只能选取一张照片
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
sourceType: ["album"], //从相册选择
success: function (res) {
console.log("tempFilePaths[0].startsWith('file://')", res.tempFilePaths[0], res.tempFilePaths[0].startsWith('file://'))
pathToBase64(res.tempFilePaths[0])
.then((path) => {
var data = {
source: "1",
agencyId: "52010106004",
imageType: imageType,
fileName: res.tempFilePaths[0],
imageBase64: path,
};

const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(etcOcrCard, options).then((res) => {
const data = stringToJson(res.bizContent);
if (state.choiceIndex === "1") {
state.form.agentName = data.name;
state.form.agentIdNum = data.idno;
state.form.agentPosImgUrl = data.imageUrl;
state.form.address = data.address;
state.form.agentGender = data.gender;
} else {
state.form.agentIdVld = data.enddate;
state.form.agentNegImgUrl = data.imageUrl;
}
state.isTakePhotoModeShow = false
});
})
.catch((error) => { });
},
})
}
const takePhoto = (val) => {
console.log("拍照", val)
// uni.navigateTo({
// url: `/subpackage/orders/takePhoto?phoneType=${val}`
// })
state.phoneType = val;
}
const confirmReturn = (val) => {
state.phoneType = 0
state.isTakePhotoModeShow = false
var imageType = state.choiceIndex;
console.log("图片地址val", val.tempImagePath)
pathToBase64(val.tempImagePath)
.then((path) => {
var data = {
source: "1",
agencyId: "52010106004",
imageType: imageType,
fileName: val.tempImagePath,
imageBase64: path,
};

const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(etcOcrCard, options).then((res) => {
const data = stringToJson(res.bizContent);
if (state.choiceIndex === "1") {
state.form.agentName = data.name;
state.form.agentIdNum = data.idno;
state.form.agentPosImgUrl = data.imageUrl;
state.form.address = data.address;
state.form.agentGender = data.gender;
} else {
state.form.agentIdVld = data.enddate;
state.form.agentNegImgUrl = data.imageUrl;
}
state.isTakePhotoModeShow = false

});
})
.catch((error) => { });
}
const cancle = () => {
state.isTakePhotoModeShow = false
}
</script>

<style lang="scss" scoped>
@@ -561,4 +671,45 @@
::v-deep .u-form-item--left .u-form-item--left__content {
padding-right: 0px;
}

.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>

+ 60
- 0
subpackage/orders/takePhoto.vue Vedi File

@@ -0,0 +1,60 @@
<template>
<view>
<viewfinder :phoneType="state.phoneType" @confirmReturn="confirmReturn"></viewfinder>
</view>
</template>

<script setup lang="ts">
import viewfinder from "../../components/viewfinder.vue"
import {
onLoad
} from "@dcloudio/uni-app";
import {
reactive
} from "vue";
const state = reactive({
phoneType: 1,
allParams: {}
})
onLoad((option : any) => {
state.phoneType = option.phoneType;
state.allParams = option.allParams;
});
const confirmReturn = (val) => {
// uni.navigateTo({
// url: ``
// })
uni.navigateBack({
delta: 1
})
console.log("val", val)
}
</script>

<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}

.text-area {
display: flex;
justify-content: center;
}

.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>

Write Preview
Loading…
Annulla
Salva