|
|
|
<template>
|
|
|
|
<!-- <u-navbar title="扫描" placeholder border=true :autoBack="true" leftIconSize='35'></u-navbar> -->
|
|
|
|
|
|
|
|
<u-navbar
|
|
|
|
title="详情"
|
|
|
|
placeholder
|
|
|
|
:autoBack="true"
|
|
|
|
leftIconSize='35'
|
|
|
|
bgColor='#d3832a'
|
|
|
|
leftIconColor='#ffffff'
|
|
|
|
titleStyle='color:#ffffff'
|
|
|
|
></u-navbar>
|
|
|
|
<image mode="widthFix" class="bgimg" src="/pagesHome/static/bgby.png"></image>
|
|
|
|
<view class="mabxtop">
|
|
|
|
<view class="type1s">
|
|
|
|
<view>
|
|
|
|
<view>汇通龙泉</view>
|
|
|
|
<view>托盘码</view>
|
|
|
|
</view>
|
|
|
|
<view>
|
|
|
|
<view>26</view>
|
|
|
|
<view>托盘件数</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="type2s">
|
|
|
|
<view>
|
|
|
|
已扫
|
|
|
|
</view>
|
|
|
|
<view>
|
|
|
|
18件
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- <view class="headtop">
|
|
|
|
<view class="typto">
|
|
|
|
<view>
|
|
|
|
<view>物料编码:</view>
|
|
|
|
<view>LS00125</view>
|
|
|
|
</view>
|
|
|
|
<view>
|
|
|
|
<view>物料名称:</view>
|
|
|
|
<view>智能冲洗梳妆台0021</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="typto">
|
|
|
|
<view>
|
|
|
|
<view>已扫:</view>
|
|
|
|
<view>19件</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="butsca">
|
|
|
|
<view>
|
|
|
|
全选
|
|
|
|
</view>
|
|
|
|
<view>
|
|
|
|
反选
|
|
|
|
</view>
|
|
|
|
<view @click="removeall">
|
|
|
|
批量删除
|
|
|
|
</view>
|
|
|
|
</view> -->
|
|
|
|
<view class="maboxite">
|
|
|
|
<view class="headtops">
|
|
|
|
<view>
|
|
|
|
<image src="/pagesHome/static/nocheck.png"></image>
|
|
|
|
<view>全选</view>
|
|
|
|
</view>
|
|
|
|
<view @click="removeall">批量删除</view>
|
|
|
|
</view>
|
|
|
|
<scroll-view scroll-y="true" class="scvbox">
|
|
|
|
<view class="maxboxs">
|
|
|
|
<view class="items" @click="checkidx(index)" v-for="(item,index) in list">
|
|
|
|
<view class="lefticon">
|
|
|
|
<image :src="checkindex.indexOf(index)!=-1?'/pagesHome/static/check.png':'/pagesHome/static/nocheck.png'"></image>
|
|
|
|
</view>
|
|
|
|
<view class="rigth">
|
|
|
|
<view class="type1">
|
|
|
|
<view>
|
|
|
|
<view>包条码:</view>
|
|
|
|
<view>LWP120321654650</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="type1">
|
|
|
|
<view>
|
|
|
|
<view>数量:</view>
|
|
|
|
<view>15件</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="removeicon">
|
|
|
|
<image src="/pagesHome/static/removeitem.png" @click="removeitem"></image>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</scroll-view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<tips ref="tip"></tips>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
import { reactive, ref, toRefs } from "vue";
|
|
|
|
let tip=ref(null)
|
|
|
|
let details=reactive({
|
|
|
|
list:[
|
|
|
|
1,2,3,4,5,6,7,8,9,0
|
|
|
|
],
|
|
|
|
checkindex:[]
|
|
|
|
})
|
|
|
|
function removeitem(){
|
|
|
|
tip.value.setdetails({
|
|
|
|
isshow:true,
|
|
|
|
content:'确认删除该数据?',
|
|
|
|
confirmTxt:'删除',
|
|
|
|
success:()=>{
|
|
|
|
tip.value.setdetails({isshow:false})
|
|
|
|
},
|
|
|
|
cancel:()=>{
|
|
|
|
tip.value.setdetails({isshow:false})
|
|
|
|
},
|
|
|
|
close:()=>{
|
|
|
|
tip.value.setdetails({isshow:false})
|
|
|
|
},
|
|
|
|
})
|
|
|
|
}
|
|
|
|
function removeall(){
|
|
|
|
if(details.checkindex.length==0){
|
|
|
|
uni.showToast({
|
|
|
|
title:'请先选择数据',
|
|
|
|
icon:'none'
|
|
|
|
})
|
|
|
|
return
|
|
|
|
}
|
|
|
|
tip.value.setdetails({
|
|
|
|
isshow:true,
|
|
|
|
content:'确认删除选中数据?',
|
|
|
|
confirmTxt:'删除',
|
|
|
|
success:()=>{
|
|
|
|
tip.value.setdetails({isshow:false})
|
|
|
|
},
|
|
|
|
cancel:()=>{
|
|
|
|
tip.value.setdetails({isshow:false})
|
|
|
|
},
|
|
|
|
close:()=>{
|
|
|
|
tip.value.setdetails({isshow:false})
|
|
|
|
},
|
|
|
|
})
|
|
|
|
}
|
|
|
|
function checkidx(index:number){
|
|
|
|
if(details.checkindex.indexOf(index)!=-1){
|
|
|
|
details.checkindex.splice(details.checkindex.indexOf(index),1)
|
|
|
|
}else{
|
|
|
|
details.checkindex.push(index)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const { checkindex,list }=toRefs(details)
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.maboxite{
|
|
|
|
width: 684upx;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
padding: 20upx;
|
|
|
|
box-sizing: border-box;
|
|
|
|
background-color: #ffffff;
|
|
|
|
margin: auto;
|
|
|
|
margin-top: 20upx;
|
|
|
|
border-radius: 20upx;
|
|
|
|
>.headtops{
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
padding: 10upx 0;
|
|
|
|
box-sizing: border-box;
|
|
|
|
border-bottom: 4upx solid #EEEEEE;
|
|
|
|
padding-bottom: 30upx;
|
|
|
|
>view:nth-of-type(1){
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
>image{
|
|
|
|
width: 48upx;
|
|
|
|
height: 48upx;
|
|
|
|
margin-right: 20upx;
|
|
|
|
}
|
|
|
|
>view{
|
|
|
|
font-size: 32upx;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #020B18;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
>view:nth-of-type(2){
|
|
|
|
font-size: 32upx;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #D3832A;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.mabxtop{
|
|
|
|
position: relative;
|
|
|
|
width: 684upx;
|
|
|
|
// height: 348upx;
|
|
|
|
background: #FFFFFF;
|
|
|
|
border-radius: 20upx;
|
|
|
|
margin: auto;
|
|
|
|
margin-top: 80upx;
|
|
|
|
padding: 60upx;
|
|
|
|
box-sizing: border-box;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
>.type1s{
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
margin-bottom: 70upx;
|
|
|
|
|
|
|
|
&:nth-last-child(1){
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
>view{
|
|
|
|
width: 50%;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: flex-start;
|
|
|
|
>view:nth-of-type(1){
|
|
|
|
font-size: 32upx;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #020B18;
|
|
|
|
}
|
|
|
|
>view:nth-of-type(2){
|
|
|
|
font-size: 28upx;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #90A0AF;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.type2s{
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
>view:nth-of-type(1){
|
|
|
|
width: 50%;
|
|
|
|
font-size: 32upx;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #020B18;
|
|
|
|
}
|
|
|
|
>view:nth-of-type(2){
|
|
|
|
width: 50%;
|
|
|
|
font-size: 32upx;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #1197EB;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.bgimg{
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
top: 0;
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
}
|
|
|
|
.scvbox{
|
|
|
|
width: 100%;
|
|
|
|
height: 48vh;
|
|
|
|
margin-top: 20upx;
|
|
|
|
.maxboxs{
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
>.items{
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
// flex-direction: column;
|
|
|
|
align-items: flex-start;
|
|
|
|
padding: 20upx 0;
|
|
|
|
box-sizing: border-box;
|
|
|
|
background-color: #ffffff;
|
|
|
|
border-radius: 10upx;
|
|
|
|
margin-bottom: 30upx;
|
|
|
|
border-bottom: 4upx solid #EEEEEE;
|
|
|
|
&:nth-last-child(1){
|
|
|
|
margin-bottom: 20upx;
|
|
|
|
border-bottom:none;
|
|
|
|
}
|
|
|
|
.rigth{
|
|
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
.lefticon{
|
|
|
|
display: flex;
|
|
|
|
align-items: flex-start;
|
|
|
|
justify-content: center;
|
|
|
|
margin-right: 30upx;
|
|
|
|
>image{
|
|
|
|
width: 48upx;
|
|
|
|
height: 48upx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.removeicon{
|
|
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
>image{
|
|
|
|
width: 64upx;
|
|
|
|
height: 64upx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.removebt{
|
|
|
|
width: 128upx;
|
|
|
|
height: 64upx;
|
|
|
|
background: #ec2400;
|
|
|
|
border-radius: 8upx 8upx 8upx 8upx;
|
|
|
|
opacity: 1;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
font-size: 32upx;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #FFFFFF !important;
|
|
|
|
}
|
|
|
|
.type1{
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
margin-bottom: 20upx;
|
|
|
|
>view{
|
|
|
|
display: flex;
|
|
|
|
align-items: flex-start;
|
|
|
|
font-size: 28upx;
|
|
|
|
>view:nth-of-type(1){
|
|
|
|
color: #90A0AF;
|
|
|
|
}
|
|
|
|
>view:nth-of-type(2){
|
|
|
|
color: #092C4D;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.butsca{
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: flex-start;
|
|
|
|
background-color: #ffffff;
|
|
|
|
padding: 20upx 15upx;
|
|
|
|
box-sizing: border-box;
|
|
|
|
>view{
|
|
|
|
width: 204upx;
|
|
|
|
height: 64upx;
|
|
|
|
background: #FFFFFF;
|
|
|
|
border-radius: 8upx 8upx 8upx 8upx;
|
|
|
|
opacity: 1;
|
|
|
|
border: 2upx solid #D3832A;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
font-size: 28upx;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #D3832A;
|
|
|
|
margin-right: 30upx;
|
|
|
|
&:nth-last-child(1){
|
|
|
|
margin-right: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.headtop{
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
padding: 34upx 32upx;
|
|
|
|
box-sizing: border-box;
|
|
|
|
background-color: #ffffff;
|
|
|
|
>view{
|
|
|
|
display: flex;
|
|
|
|
align-items: flex-start;
|
|
|
|
justify-content: space-between;
|
|
|
|
font-size: 28upx;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #092C4D;
|
|
|
|
margin-bottom: 24upx;
|
|
|
|
>view{
|
|
|
|
display: flex;
|
|
|
|
align-items: flex-start;
|
|
|
|
// flex-wrap: wrap;
|
|
|
|
>view:nth-of-type(1){
|
|
|
|
width: 170upx;
|
|
|
|
color: #90A0AF;
|
|
|
|
}
|
|
|
|
>view:nth-of-type(2){
|
|
|
|
color: #092C4D;
|
|
|
|
word-wrap: break-word;
|
|
|
|
word-break: break-all;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&:nth-of-type(2){
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
>view{
|
|
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|