290 lines
6.9 KiB
Plaintext
290 lines
6.9 KiB
Plaintext
<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>
|