bonus-checkVerify-app/pages/verify/orderOcrScan.nvue

<template>
	<view class="page">
		<view class="page-container">
			<view style="width: 100%;height: 100%;">
				<live-pusher v-once id="livePusher" ref="livePusher" class="livePusher" mode="FHD" beauty="0" whiteness="0"
					device-position="back" :auto-focus="false" :muted="true" :enable-camera="true" :enable-mic="true"
					:zoom="true" :style="[{height: '500px' ,width:'100%'}]">
				</live-pusher>
			</view>
		</view> 
		<scroll-view class="img-list-item" scroll-x="true" v-if="pageImgUrlList&&pageImgUrlList.length>0">
			<view class="img-box" v-for="item in pageImgUrlList">
				<image :src="item.imageUrl" mode="aspectFill" class="preview-image" /> 
			</view>   
		</scroll-view>
		<view class="table-list-item">
		    <view class="scan-btn" @click="handleInstruct('shutter')">
				<text style="color: #FFF;">拍照识别</text> 
			</view> 
			<view class="scan-btn" @click="handleUploadOrder">
				<text style="color: #FFF;">上传解析</text> 
			</view> 
			<view class="scan-btn" @click="handleChooseImage">
				<text style="color: #FFF;">相册选择</text> 
			</view> 
		</view>
	</view> 
</template>

<script>
	import config from '@/config'
	import { editProtectionOrderApi } from '@/api/protection/index.js'
	import { getToken } from '@/utils/auth'
	export default {
		data() {
			return {
				livePusher: null,
				ready: true,
				cameraHeight: '', //相机画面宽度 
				coverImage: null,
				queryParams:{},
				pageImgUrlList: [],//页面图片数组（手机图片路径）
				checkUrlList: [],//接口图片数组（已上传路径）
				imageUrl:""
			}
		},
		onShow() {
			
		},
		onLoad(options) {
			this.queryParams = JSON.parse(options.queryParams) 
		},
		onReady() { 
			this.cameraHeight = uni.getSystemInfoSync().screenHeight * 0.5
			console.log(this.cameraHeight) 
			this.pageImgUrlList=[]
			this.checkUrlList=[]
			this.init() 
		},
		methods: {
			//初始化相机
			init() { 
				this.livePusher = uni.createLivePusherContext('livePusher', this);
				console.log(this.livePusher)
				setTimeout(() => {
					this.startPreview()
				}, 1000)
			},
			// 开始相机
			startPreview() {
				this.livePusher.startPreview({
					success: () => {
						console.log('相机初始化成功');
						switch (plus.os.name) {
							case 'Android':
								break;
							case 'iOS':
								this.livePusher.switchCamera()
								break
						}
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			//截屏
			handleInstruct(instruct) {
				if (this.ready) {
					this.ready = false
					this.livePusher.snapshot({
						success: (res) => {
							console.log(res)
							this.ready = true;  
							let obj = {
								imageUrl:res.message.tempImagePath
							}
							this.pageImgUrlList.push(obj) 
							uni.uploadFile({
									url:  config.baseUrl+`/file/upload`, //服务器地址
									fileType:"dishes",//ZFB必填,不然报错
									filePath: res.message.tempImagePath,//这个就是我们上面拍照返回或者先中照片返回的数组
									name: "file",
									formData: {
										fileType:'dishes',
									},
									header: {
										'Authorization': 'Bearer ' + getToken(), 
									},
									success: (uploadFileRes) => {
										let uploadRes = JSON.parse(uploadFileRes.data)
										console.log(uploadRes)
										if(uploadRes.code==200){
											this.checkUrlList.push(uploadRes.data.url)
										}else{
											uni.$u.toast('上传失败');
										} 
									},
									fail: err => {
										uni.$u.toast('上传失败');
										console.log(err)
									}
							});
							// this.$emit('getImage', res.message.tempImagePath)
						}
					})
				}
			},
			handleChooseImage() {
				uni.chooseImage({ 
					count: 1,
					sourceType: ['album'],
					success: resImage => {
						console.log(resImage)
						console.log(config.baseUrl)  
						let obj = {
							imageUrl:resImage.tempFilePaths[0]
						}
						this.pageImgUrlList.push(obj) 
						uni.uploadFile({
								url:  config.baseUrl+`/file/upload`, //服务器地址
								fileType:"dishes",//ZFB必填,不然报错
								filePath: resImage.tempFilePaths[0],//这个就是我们上面拍照返回或者先中照片返回的数组
								name: "file",
								formData: {
									fileType:'dishes',
								},
								header: {
									'Authorization': 'Bearer ' + getToken(), 
								},
								success: (uploadFileRes) => {
									let uploadRes = JSON.parse(uploadFileRes.data)
									console.log(uploadRes)
									if(uploadRes.code==200){
										this.checkUrlList.push(uploadRes.data.url)
									}else{
										uni.$u.toast('上传失败');
									} 
								},
								fail: err => {
									uni.$u.toast('上传失败');
									console.log(err)
								}
						});
					}
				});
			},
			async handleUploadOrder() {
				console.log(this.pageImgUrlList) 
				console.log(this.checkUrlList) 
				if(this.checkUrlList.length>0){
					try {
						let params = {
							checkUrlList:this.checkUrlList,  
							type:'0'
						} 
						const res = await editProtectionOrderApi(params) 
						console.log('?? ~ getList ~ res:', res)
						uni.navigateBack()
					} catch (error) {
						console.log(error)
					}
				}else{
					uni.showToast({
						title: '请先拍照或选择图片！',
						icon: 'none',
					}) 
				}
			},  
		}
	}
</script>

<style>
	.page {  
	  height: 750px;
	}  
	.page-container { 
	    display: flex; 
	    height: 520px;
	    flex-direction: column;
	    background-color: #FFF;
	    padding: 24rpx;
	}
	.table-list-item {  
		width: 740rpx;
		margin: 0 auto;
		margin-top: 10rpx;
	    background: #;
	    padding: 20rpx;
	    margin-bottom: 20rpx;  
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	} 
	.scan-btn {
	    width: 160rpx;
	    height: 88rpx; 
	    background: #4b8eff;
		display: flex;
		justify-content: center;
		align-items: center;  
	    border-radius: 12rpx;
	    font-size: 32rpx;
	    font-weight: 600;
	    box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
	    /* transition: all 0.3s ease; */
	    margin: 0;
	    padding: 0;  
	}  
	
	.img-list-item{
		width: 700rpx; 
		height: 120px;
		margin: 0 10px;
		margin-top: 10rpx;
		background: #;
		padding: 10rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06); 
		margin-bottom: 20rpx;  
		overflow-y: scroll;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.img-box{
		width: 70px;
		height: 70px;
		background: #000;
		margin: 5px;
	}
	/* 
	.camera-background {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
	}
	
	.cover-image {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}
	
	.camera-options {
		flex-direction: row;
		align-items: center;
	}
	
	.camera-item {
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	
	.camera-item .camera-item-image {
		width: 80rpx;
		height: 80rpx;
	}
	
	.camera-options-center .camera-item-image {
		width: 120rpx;
		height: 120rpx;
	} */
</style>