货无忧
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.
 
 
 
 
 

285 lines
6.2 KiB

<template>
<u-navbar title="自提明细扫描" placeholder border=true :autoBack="true" leftIconSize='35'></u-navbar>
<view class="headtop">
<view>
<view>配车类型自提</view>
</view>
<view>
<view>车牌号川A88888</view>
<view>司机张琪罗翔</view>
</view>
</view>
<view class="tabmabx">
<view>
<uni-table :loading='false' emptyText="暂无更多数据" >
<uni-tr>
<uni-th width="70" align="center"></uni-th>
<uni-th align="center">订单总数</uni-th>
<uni-th align="center">签收件数</uni-th>
</uni-tr>
<uni-tr v-for="item in [1,2]">
<uni-td align="center" class="jhjs">{{item==1?'计划':'完成'}}</uni-td>
<uni-td align="center">{{item==1?details.orderNum:details.completeNum}}</uni-td>
<uni-td align="center">{{item==1?details.planNum:details.signedNum}}</uni-td>
</uni-tr>
</uni-table>
</view>
</view>
<view class="scinp">
<view>齐套状态</view>
<view>
<cusSelects @change='checktype' :data='typearr' :value="schanvalue" placeholder='全部' :arrLeft='5' size='145' :clearable='true'></cusSelects>
</view>
<view class="inputs">
<input placeholder="请输入查询的订单号"/>
</view>
<view class="btscan">查询</view>
</view>
<scroll-view scroll-y="true" class="scrollv">
<view class="mabxs">
<view class="ite" v-for="item in dataList">
<view>
<view>订单号:{{item.orderCode}}</view>
<view>包装号:{{item.packetBarCode}}</view>
</view>
<view>
<view>是否扫描:{{item.scanStatusStr}}</view>
<view>异常:{{item.errorStatusStr}}</view>
</view>
</view>
</view>
</scroll-view>
</template>
<script lang="ts" setup>
import {
onLoad,
onShow,
onHide,
onUnload
} from '@dcloudio/uni-app'
import { billLadingdetailList } from '@/api/user.js'
import { pagedetailType } from '@/interfaces/pagesHome/SelfPickupDetails'
import cusSelects from '@/compoment/cus-selects-fan/cus-selects-fan.vue'
import { reactive, toRefs } from "vue";
let details=reactive<pagedetailType>({
schanvalue:'',
typearr:[
{
value:1,
label:'齐套'
},
{
value:2,
label:'部分扫'
},
{
value:3,
label:'未扫'
}
],
dataList:[],
orderStatus:0,
billLadingId:'',
orderCode:'',
consignee:'',
pickUpPlate:'',
carTypeStr:'',
orderNum:'',
planNum:'',
completeNum:'',
signedNum:'',
})
onLoad((op)=>{
details.billLadingId=op.billLadingId
initpage()
})
async function initpage(){
let data={
orderStatus:details.orderStatus,
billLadingId:details.billLadingId,
orderCode:details.orderCode
}
let response=await billLadingdetailList(data)
details.dataList=response.data.list
details.consignee=response.data.consignee
details.pickUpPlate=response.data.pickUpPlate
details.carTypeStr=response.data.carTypeStr
details.orderNum=response.data.orderNum
details.planNum=response.data.planNum
details.completeNum=response.data.completeNum
details.signedNum=response.data.signedNum
}
function checktype(e){
if(e==''){
details.schanvalue=''
}
details.typearr.map(item=>{
if(item.value==e){
details.schanvalue=item.label
console.log(details.schanvalue)
}
})
}
const { schanvalue,typearr,dataList }=toRefs(details)
</script>
<style lang="scss">
.scrollv{
width: 686upx;
height: 48.5vh;
// padding: 10upx;
box-sizing: border-box;
background-color: #ffffff;
margin: auto;
margin-top: 20upx;
padding: 20upx;
box-sizing: border-box;
.mabxs{
display: flex;
flex-direction: column;
align-items: center;
padding-top: 5upx;
.ite{
width: 96%;
// width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 20upx 15upx;
box-sizing: border-box;
border-radius: 8upx;
box-shadow: 0upx 2upx 10upx 0upx #e2e2e3;
margin-bottom: 20upx;
padding-bottom: 10upx;
&:nth-last-child(1){
margin-bottom: 5upx;
}
>view{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 20upx;
&:nth-last-child(1){
margin-bottom: none !important;
}
>view{
// width: 50%;
// flex: 1;
font-size: 28upx;
font-weight: 400;
color: #092C4D;
}
}
}
}
}
.tabmabx{
width: 100%;
padding:0 32upx;
box-sizing: border-box;
background-color: #ffffff;
padding-bottom: 20upx;
.uni-table-th{
background-color: #F8FBFF;
font-size: 28upx;
font-weight: 400;
color: #092C4D;
}
.jhjs{
}
.uni-table-tr:nth-last-child(2)>.uni-table-td{
font-size: 36upx;
font-weight: 400;
color: #092C4D;
&:nth-of-type(1){
font-size: 28upx !important;
font-weight: 400;
color: #092C4D !important;
}
}
.uni-table-tr:nth-last-child(1)>.uni-table-td{
border-bottom: none !important;
font-size: 36upx;
font-weight: 400;
color: #0086F1;
&:nth-of-type(1){
font-size: 28upx !important;
font-weight: 400;
color: #092C4D !important;
}
}
>view{
border-radius: 8upx;
border: 1upx solid #EEEEEE;
padding-bottom: -2upx;
}
}
.headtop{
display: flex;
flex-direction: column;
padding: 34upx 32upx;
box-sizing: border-box;
background-color: #ffffff;
>view{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28upx;
font-weight: 400;
color: #092C4D;
margin-bottom: 24upx;
&:nth-of-type(2){
margin-bottom: 0;
}
>view{
flex: 1;
}
}
}
.scinp{
display: flex;
align-items: center;
justify-content: space-between;
padding: 12upx 32upx;
box-sizing: border-box;
background-color: #ffffff;
>view:nth-of-type(1){
font-size: 28upx;
font-weight: 400;
color: #092C4D;
}
.inputs {
width: 276upx;
height: 64upx;
background: #F5F5F6;
border-radius: 8upx;
opacity: 1;
border: 2upx solid #EEEEEE;
padding: 10upx;
box-sizing: border-box;
font-size: 24upx;
font-weight: 400;
color: #AFB4BA;
>input{
flex: 1;
font-size: 24upx;
color: #092C4D;
}
}
.btscan{
width: 128upx;
height: 64upx;
background: #D3832A;
border-radius: 8upx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32upx;
font-weight: 400;
color: #FFFFFF;
}
}
</style>