|
|
<template>
|
|
|
<view class="enterPage">
|
|
|
<view class="head">
|
|
|
<view class="headBox">
|
|
|
<text>单个扫描</text>
|
|
|
<image class="down22" src="@/PDA/static/down22.png" mode="aspectFill"></image>
|
|
|
</view>
|
|
|
<button class="scanBtn">
|
|
|
<uni-icons type="camera-filled" color="#FFFFFF" size="30"></uni-icons>
|
|
|
点击打开摄像头扫码
|
|
|
</button>
|
|
|
</view>
|
|
|
<view class="card">
|
|
|
<view class="cardHead">
|
|
|
<view class="">
|
|
|
<text class="title1">标签列表数量：-</text>
|
|
|
<text class="title1">产品总数：-</text>
|
|
|
</view>
|
|
|
<view class="">
|
|
|
<text>类型/产品名称</text>
|
|
|
<text>流水号/单品数量</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="cardBody">
|
|
|
<view class="" v-if="lists.length === 0">
|
|
|
<image class="scanImg" src="@/PDA/static/scanImg.png" mode="aspectFill"></image>
|
|
|
</view>
|
|
|
<view class="" v-else>
|
|
|
<scroll-view scroll-y="true" style="height: 800rpx">
|
|
|
<view class="proList">
|
|
|
<view class="proItem" v-for="item in 20">
|
|
|
<view class="itemLeft">
|
|
|
<view class="left1">
|
|
|
<text>箱</text>
|
|
|
</view>
|
|
|
<view class="proName">
|
|
|
<text>MV-ID5016M智能读码器</text>
|
|
|
</view>
|
|
|
<view class="left2">
|
|
|
<text class="pname">CS0000000001</text>
|
|
|
<text>1</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="itemRight">
|
|
|
<uni-icons type="trash" size="30" color="#FFFFFF"></uni-icons>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="bottom">
|
|
|
<view class="" style="height: 180rpx;"></view>
|
|
|
<view class="btnBox">
|
|
|
<button>确认入库</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import {ref} from 'vue'
|
|
|
const lists = ref([''])
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.enterPage{
|
|
|
width: 100%;
|
|
|
min-height: 100vh;
|
|
|
}
|
|
|
.head{
|
|
|
position: sticky;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
background: #f5f5f5;
|
|
|
z-index: 50;
|
|
|
padding-bottom: 26rpx;
|
|
|
.headBox{
|
|
|
width: 100%;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(0,0,0,0.05);
|
|
|
padding: 26rpx;
|
|
|
@include fontStyle(28rpx,#000000,left,bold,38rpx);
|
|
|
position: relative;
|
|
|
.down22{
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%,-50%);
|
|
|
width: 46rpx;
|
|
|
height: 46rpx;
|
|
|
}
|
|
|
}
|
|
|
.scanBtn{
|
|
|
width: 380rpx;
|
|
|
height: 92rpx;
|
|
|
background: $pda-btn-bg1;
|
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
|
font-weight: 500;
|
|
|
font-size: 28rpx;
|
|
|
color: $pda-btn-color;
|
|
|
@include flexBox();
|
|
|
margin-top: 36rpx;
|
|
|
}
|
|
|
}
|
|
|
.card{
|
|
|
margin: 0 26rpx 26rpx;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0rpx 4rpx 9rpx 0rpx rgba(0,0,0,0.1);
|
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
|
.cardHead{
|
|
|
box-sizing: border-box;
|
|
|
padding: 0 26rpx;
|
|
|
@include fontStyle(28rpx,#666666,left,400,38rpx);
|
|
|
&>view{
|
|
|
@include flexBox(between,center);
|
|
|
padding: 26rpx 0;
|
|
|
border-bottom: 2rpx solid rgba(0,0,0,0.1);
|
|
|
}
|
|
|
.title1{
|
|
|
@include fontStyle(28rpx,#333333,left,bold,38rpx);
|
|
|
}
|
|
|
}
|
|
|
.cardBody{
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
box-sizing: border-box;
|
|
|
padding: 20rpx;
|
|
|
.scanImg{
|
|
|
width: 410rpx;
|
|
|
height: 410rpx;
|
|
|
display: block;
|
|
|
margin: 40rpx auto;
|
|
|
}
|
|
|
.proList{
|
|
|
.proItem{
|
|
|
margin: 26rpx 0;
|
|
|
background: #F6F6F6;
|
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
|
@include flexBox(between,stretch);
|
|
|
.itemLeft{
|
|
|
flex: 1;
|
|
|
box-sizing: border-box;
|
|
|
padding: 16rpx 0;
|
|
|
@include flexBox(start,center);
|
|
|
&>view{
|
|
|
padding: 0 10rpx;
|
|
|
}
|
|
|
.left1{
|
|
|
height: 100%;
|
|
|
border-right: 2rpx solid rgba(0,0,0,0.3);
|
|
|
@include flexBox();
|
|
|
@include fontStyle(28rpx,#000000,left,500,38rpx);
|
|
|
}
|
|
|
.proName{
|
|
|
border-right: 2rpx solid rgba(0,0,0,0.3);
|
|
|
@include fontStyle(28rpx,#000000,left,400,38rpx);
|
|
|
}
|
|
|
.left2{
|
|
|
@include flexBox(start,center,column);
|
|
|
@include fontStyle(26rpx,#000000,center,400,38rpx);
|
|
|
.pname{
|
|
|
border-bottom: 2rpx solid rgba(0,0,0,0.3) ;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
.itemRight{
|
|
|
width: 72rpx;
|
|
|
background: #E51D1D;
|
|
|
border-radius: 0rpx 18rpx 18rpx 0rpx;
|
|
|
@include flexBox();
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.bottom{
|
|
|
.btnBox{
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 180rpx;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0rpx -4rpx 9rpx 0rpx rgba(0,0,0,0.05);
|
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
|
button{
|
|
|
width: 544rpx;
|
|
|
height: 92rpx;
|
|
|
background: $pda-btn-bg;
|
|
|
border-radius: 63rpx 63rpx 63rpx 63rpx;
|
|
|
font-weight: 500;
|
|
|
font-size: 32rpx;
|
|
|
color: $pda-btn-color;
|
|
|
@include flexBox();
|
|
|
margin-top: 36rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
