You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
535 lines
12 KiB
535 lines
12 KiB
<template>
|
|
<view class="page1">
|
|
<view class="top" ref="top">
|
|
<view @tap="backPage" style="width: 80rpx;height: 80rpx;margin: 98rpx 0 0 30rpx;">
|
|
<uni-icons type="left" color="#fff" size="27"></uni-icons>
|
|
</view>
|
|
<view class="top1">
|
|
<text style="display: block;margin-top: 107rpx;color: #fff;">Ai入库</text>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="prompt">
|
|
<view class="prompt-title">
|
|
<view class="hello-right"></view>
|
|
<view class="ai-bot"></view>
|
|
<view class="hello-left">
|
|
<text style="font-size: 40rpx;font-weight: 800;line-height: 56rpx;color: #fff;">Hi</text>
|
|
</view>
|
|
</view>
|
|
<view class="prompt-title-text">
|
|
<text>欢迎使用Ai助手，为了提高图片识别准确率，建议您按照以下要求上传图片：</text>
|
|
<text>1.每张图片建议您裁剪到20个规格或以下</text>
|
|
<text>2.确保最后一款商品规格截取完整</text>
|
|
<text>3.每张图片输入对应的规格数量</text>
|
|
</view>
|
|
<view class="prompt-title-img">
|
|
<view class="img" v-for="(item,index) in imgList" :key="index">
|
|
<image show-menu-by-longpress :src="item" @tap="showImage(item)"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view @tap="upLoadImg()"
|
|
style="height: 98rpx;line-height: 98rpx;font-size: 34rpx;font-weight: bold;padding-left: 30rpx;position: relative;">
|
|
上传图片
|
|
<view class="title-line"></view>
|
|
<view class="icon-upload">
|
|
<uni-icons type="cloud-upload" color="#00BFFF" size="30"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view v-for="(item,index) in purchaseOcrPictureList" :key="index" style="display: flex;width: 100%;overflow: scroll;">
|
|
<view class="content-list-img">
|
|
<view class="del-icon" @tap="delImage(index)">
|
|
<uni-icons type="trash" color="#00BFFF" size="20"></uni-icons>
|
|
</view>
|
|
<image show-menu-by-longpress :src="item.ocrPicture" @tap="showImage(item.ocrPicture)"></image>
|
|
<uni-easyinput type='number' prefixIcon="compose" v-model='item.count'
|
|
placeholder="请输入规格数量"></uni-easyinput>
|
|
</view>
|
|
<view v-for="(items,indexs) in item.children" :key="indexs" style="width: 200rpx;height: 280rpx;position: relative;background: #fff;margin-left: 20rpx;border-radius: 10px;">
|
|
<view class="del-icon" @tap="delImage(index)">
|
|
<uni-icons type="trash" color="#00BFFF" size="20"></uni-icons>
|
|
</view>
|
|
<image show-menu-by-longpress :src="items.ocrPicture" @tap="showImage(items.ocrPicture)" style="width: 200rpx;height: 200rpx;padding: 5px;"></image>
|
|
<uni-easyinput type='number' v-model='items.count' placeholder="子图规格数量"></uni-easyinput>
|
|
</view>
|
|
<view @tap="addSonImg(item.id)" style="width: 200rpx;height: 219rpx;background: rgba(255,255,255,0.4);margin: 0 20rpx;border-radius: 10px;font-size: 24rpx;color: #777;text-align: center;">
|
|
<uni-icons type="plusempty" color="#777" size="80"></uni-icons>
|
|
<view style="height: 30rpx;line-height: 30rpx;">点击添加子图</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom" @tap="identify">
|
|
<view class="run-line"></view>
|
|
<img class="bottom-img"
|
|
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/27e2655fe19f454d93970f968d91fbef.png" alt="" />
|
|
<view class="bottom-btn">Ai识别</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
imgList: [
|
|
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f51c446ef147437c9a8200ed2b43ec7f.jpg',
|
|
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/5444bab7df8d47e09c831c054b6e447b.jpg',
|
|
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/44e7ccc2fae74db593bd1a10f538e2de.jpg',
|
|
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/2a55142e562b4ea480ce553c8b84d092.jpg'
|
|
],
|
|
purchaseOcrPictureList: [],
|
|
parentPicturePath:'',
|
|
parentId:'',
|
|
newSubmit:[]
|
|
}
|
|
},
|
|
onShow() {
|
|
if (this.uploadUrl && this.uploadNum == 1) {
|
|
if(this.parentId !=''){
|
|
for(let i=0;i<this.purchaseOcrPictureList.length;i++){
|
|
if(this.purchaseOcrPictureList[i].id == this.parentId){
|
|
let data = {
|
|
ocrPicture: this.uploadUrl,
|
|
count: '',
|
|
}
|
|
this.purchaseOcrPictureList[i].children.push(data)
|
|
}
|
|
}
|
|
this.parentId = ''
|
|
}else{
|
|
let data = {
|
|
ocrPicture: this.uploadUrl,
|
|
count: '',
|
|
id:this.splitData(this.uploadUrl),
|
|
children:[]
|
|
}
|
|
this.purchaseOcrPictureList.push(data)
|
|
}
|
|
|
|
console.log('查看图片',this.purchaseOcrPictureList)
|
|
this.uploadUrl = ''
|
|
this.uploadNum = ''
|
|
this.parentPicturePath = ''
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
addSonImg(id){
|
|
this.parentId = id
|
|
this.upLoadImg()
|
|
},
|
|
splitData(str){
|
|
return str.split('/')[3].split('.')[0]
|
|
},
|
|
identify() {
|
|
this.newSubmit = []
|
|
if(this.purchaseOcrPictureList.length == 0){
|
|
this.tui.toast("请选择要上传的图片")
|
|
return
|
|
}
|
|
for(let i=0;i<this.purchaseOcrPictureList.length;i++){
|
|
if(this.purchaseOcrPictureList[i].count == 0 || this.purchaseOcrPictureList[i].count == ''){
|
|
this.tui.toast("请输入数量")
|
|
return
|
|
}else{
|
|
let data = {
|
|
ocrPicture: this.purchaseOcrPictureList[i].ocrPicture,
|
|
count: this.purchaseOcrPictureList[i].count,
|
|
parentPicturePath:''
|
|
}
|
|
this.newSubmit.push(data)
|
|
if(this.purchaseOcrPictureList[i].children.length > 0){
|
|
for(let m=0;m<this.purchaseOcrPictureList[i].children.length;m++){
|
|
if(this.purchaseOcrPictureList[i].children[m].count == 0 || this.purchaseOcrPictureList[i].children[m].count == ''){
|
|
this.tui.toast("请输入子图片的规格数量")
|
|
return
|
|
}else{
|
|
let data = {
|
|
ocrPicture: this.purchaseOcrPictureList[i].children[m].ocrPicture,
|
|
count: this.purchaseOcrPictureList[i].children[m].count,
|
|
parentPicturePath:this.purchaseOcrPictureList[i].ocrPicture
|
|
}
|
|
this.newSubmit.push(data)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
console.log(this.newSubmit)
|
|
this.tui.request("/purchaseOcrPicture/batchSave", "POST", {
|
|
orderId: "",
|
|
purchaseOcrPictureList: this.newSubmit
|
|
|
|
}, false, false).then((res) => {
|
|
if (res.code == 200) {
|
|
this.tui.toast("识别中，请等待...")
|
|
setTimeout(res => {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}, 2000)
|
|
|
|
} else {
|
|
this.tui.toast(res.message)
|
|
}
|
|
}).catch((res) => {})
|
|
},
|
|
backPage() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},
|
|
//点击图片放大
|
|
showImage(img) {
|
|
uni.previewImage({
|
|
urls: [img],
|
|
current: img
|
|
})
|
|
},
|
|
upLoadImg() {
|
|
let that = this;
|
|
uni.chooseMedia({
|
|
count: 1,
|
|
mediaType: ['image'],
|
|
sourceType: ['album', 'camera'],
|
|
camera: 'back',
|
|
success(res) {
|
|
uni.navigateTo({
|
|
url: '/package1/cropper/cropper?imgSrc='+res.tempFiles[0].tempFilePath
|
|
})
|
|
}
|
|
})
|
|
},
|
|
delImage(index) {
|
|
let that = this;
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "确定删除吗？",
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
that.purchaseOcrPictureList.splice(index, 1);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page,
|
|
.page1 {
|
|
background: #F1F5FB;
|
|
}
|
|
|
|
.top {
|
|
width: 780rpx;
|
|
height: 390rpx;
|
|
opacity: 1;
|
|
background: linear-gradient(90deg, #6484fa 0%, #66e8ff 100%);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.top1 {
|
|
width: 780rpx;
|
|
height: 390rpx;
|
|
opacity: 1;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 38rpx;
|
|
display: block;
|
|
background: linear-gradient(360deg, #FAF7F7 0%, rgba(255, 255, 255, 0) 100%);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ai-bot {
|
|
position: absolute;
|
|
top: -8rpx;
|
|
left: 10rpx;
|
|
width: 70rpx;
|
|
height: 60rpx;
|
|
background-size: 100% !important;
|
|
background: url(https://jewel-shop.oss-cn-beijing.aliyuncs.com/66dc640d9e8f4749a234d9ef2af1b257.png) no-repeat;
|
|
}
|
|
|
|
|
|
.hello-left {
|
|
width: 102rpx;
|
|
height: 56rpx;
|
|
opacity: 1;
|
|
margin-left: 100rpx;
|
|
background: linear-gradient(127.96deg, #6585fa 0%, #6ad5fe 100%);
|
|
border-radius: 3px;
|
|
text-align: center;
|
|
-webkit-transform: skewX(8deg);
|
|
transform: skewX(-6deg);
|
|
}
|
|
|
|
.hello-right {
|
|
position: absolute;
|
|
left: 5px;
|
|
bottom: 0rpx;
|
|
width: 120rpx;
|
|
height: 2px;
|
|
opacity: 1;
|
|
background: linear-gradient(180deg, #6585fa 0%, #6ad5fe 100%);
|
|
}
|
|
|
|
.image-box {
|
|
width: 120rpx;
|
|
height: 170rpx;
|
|
display: block;
|
|
overflow: hidden;
|
|
float: left;
|
|
}
|
|
|
|
.image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
margin: 35rpx 0 0 20rpx;
|
|
font-size: 36rpx;
|
|
background: #8470FF;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.content-text {
|
|
width: 400rpx;
|
|
height: 200rpx;
|
|
float: left;
|
|
line-height: 50rpx;
|
|
padding-left: 30rpx;
|
|
}
|
|
|
|
.text {
|
|
color: #747474;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.content-btn {
|
|
position: relative;
|
|
width: 190rpx;
|
|
height: 170rpx;
|
|
float: left;
|
|
}
|
|
|
|
.btn {
|
|
position: absolute;
|
|
width: 120rpx;
|
|
height: 60rpx;
|
|
background: linear-gradient(90deg, #6691fb 0%, #6ad3fe 100%);
|
|
color: #fff;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
bottom: 20rpx;
|
|
right: 20rpx;
|
|
}
|
|
|
|
@keyframes blinking {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.blink {
|
|
position: absolute;
|
|
top: 40rpx;
|
|
right: 20rpx;
|
|
animation: blinking 1s infinite;
|
|
}
|
|
|
|
.bottom {
|
|
position: fixed;
|
|
bottom: 100rpx;
|
|
right: 0;
|
|
left: 0;
|
|
margin: auto;
|
|
background: #fff;
|
|
width: 255rpx;
|
|
height: 85rpx;
|
|
padding: 5rpx;
|
|
z-index: 99;
|
|
background: linear-gradient(90deg, #FFF0F5 0%, #BCD2EE 100%);
|
|
border-radius: 80rpx;
|
|
overflow: hidden;
|
|
|
|
.bottom-img {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
background-size: 100%;
|
|
margin: 10rpx;
|
|
float: left;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
.btn-x {
|
|
width: 2px;
|
|
height: 40rpx;
|
|
background: #fff;
|
|
border-radius: 2rpx;
|
|
position: absolute;
|
|
top: 40rpx;
|
|
left: 59rpx;
|
|
}
|
|
|
|
.btn-y {
|
|
width: 40rpx;
|
|
height: 2px;
|
|
background: #fff;
|
|
border-radius: 2rpx;
|
|
position: absolute;
|
|
top: 59rpx;
|
|
left: 40rpx;
|
|
}
|
|
|
|
.prompt {
|
|
background: #fff;
|
|
width: 95%;
|
|
height: auto;
|
|
border-radius: 10px;
|
|
margin: -150rpx auto 0;
|
|
display: block;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.prompt-title {
|
|
position: relative;
|
|
width: 300rpx;
|
|
margin: 40rpx 40rpx 20rpx 40rpx;
|
|
}
|
|
|
|
.prompt-title-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #777;
|
|
font-size: 26rpx;
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.img {
|
|
width: 23%;
|
|
margin-left: 1.5%;
|
|
height: 178rpx;
|
|
border: 1px solid #eee;
|
|
padding: 5px;
|
|
float: left;
|
|
border-radius: 10px;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.prompt-title-img {
|
|
width: 93%;
|
|
height: 185rpx;
|
|
margin: 20rpx auto;
|
|
}
|
|
|
|
.content-list-img {
|
|
position: relative;
|
|
width: 360rpx;
|
|
margin-left: 1.5%;
|
|
height: 400rpx;
|
|
border: 1px solid #eee;
|
|
background: #fff;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
margin-bottom: 40rpx;
|
|
|
|
image {
|
|
width: 360rpx;
|
|
height: 80%;
|
|
padding: 10px;
|
|
}
|
|
}
|
|
.uni-easyinput {
|
|
width: 100%;
|
|
height: 20%;
|
|
font-size: 36rpx;
|
|
line-height: 40rpx;
|
|
background: #F8FAFF;
|
|
text-align: center;
|
|
display: block;
|
|
border:none;
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
.del-icon {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
.icon-upload {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 190rpx;
|
|
height: 100%;
|
|
}
|
|
|
|
.title-line {
|
|
width: 70px;
|
|
height: 7px;
|
|
position: absolute;
|
|
bottom: 30rpx;
|
|
left: 30rpx;
|
|
background: rgba(0, 191, 255, 0.5);
|
|
}
|
|
|
|
.bottom-btn {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
padding-left: 100rpx;
|
|
color: #777;
|
|
line-height: 80rpx;
|
|
font-weight: bold;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 40rpx;
|
|
font-size: 34rpx;
|
|
}
|
|
|
|
.run-line {
|
|
width: 200px;
|
|
height: 200px;
|
|
-webkit-animation: rotate2 2s linear infinite;
|
|
animation: rotate2 3s linear infinite;
|
|
-webkit-transform-origin: 50% 50%;
|
|
z-index: -2;
|
|
margin: -50% 0 0 -50%;
|
|
background: linear-gradient(90deg, #FFF0F5 0%, #BCD2EE 100%);
|
|
}
|
|
|
|
@keyframes rotate2 {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|