logpm/pagesHome/pages/LoadingDetails/LoadingDetails.vue

<template>
	<u-navbar title="配车明细列表" placeholder border=true :autoBack="true" leftIconSize='35'></u-navbar>
	<view class="headtop">
		<view>
			<view>配车类型：{{items?.vehicleStatus_name}}</view>
		</view>
		<view>
			<view>车牌号：{{items?.vehicleName}}</view>
			<view>司机：{{items?.driverName}}</view>
		</view>
	</view>
	<view class="tabmabx">
		<view>
			<uni-table :loading='false' emptyText="暂无更多数据" >
				<uni-tr>
					<uni-th width="50" align="center"></uni-th>
					<uni-th width="70" align="center">配送客户数</uni-th>
					<uni-th width="70" align="center">订单总数</uni-th>
					<uni-th width="70" 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?items?.customersNumber:items?.loadCusNub}}</uni-td>
					<uni-td align="center">{{item==1?items?.orderNumber:items?.loadOrdNub}}</uni-td>
					<uni-td align="center">{{item==1?items?.deliveryNumber:items?.scannedNumber}}</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>
	<view class="tabtip">
		<view @click="setorderStatus(1)">
			<view :class="orderStatus==1?'xz':''">定制品</view>
		</view>
		<view @click="setorderStatus(2)">
			<view :class="orderStatus==2?'xz':''">库存品</view>
		</view>
	</view>
	<scroll-view scroll-y="true" class="scrollv">
		<view class="mabxs">
			<view class="ite" v-if="orderStatus==1" v-for="item in dataList">
				<view>
					<view>订单号：{{item.orderCode}}</view>
					<view>包装号：{{item.packageBarCode}}</view>
				</view>
				<view>
					<view>是否扫描：{{item.scanStatus}}</view>
					<!-- <view>异常：{{item.StockNot}}</view> -->
				</view>
			</view>
			<view class="ite" v-if="orderStatus==2" v-for="item in dataList">
				<view>
					<view>SKU：{{item.sku}}</view>
					<view>包件号：{{item.coding}}</view>
				</view>
				<view>
					<view>物品：{{item.goodsName}}</view>
					<view>规格：{{item.specification}}</view>
				</view>
				<view>
					<view>单位：{{item.cargoUnit}}</view>
					<view>扫描：{{item.scanStatus==1?'未扫描':item.scanStatus==''?'未扫描':'扫描'}}</view>
					<!-- <view>规格：{{item.specification}}</view> -->
				</view>
			</view>
		</view>
	</scroll-view>
	
</template>

<script lang="ts" setup>
	import {
		deliverywrap,
		deliverywrapIn
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	import cusSelects from '@/compoment/cus-selects-fan/cus-selects-fan.vue'
	import { reactive, toRefs } from "vue";
	let details=reactive({
		schanvalue:'',
		typearr:[
			{
				value:1,
				label:'齐套'
			},
			{
				value:2,
				label:'部分扫'
			},
			{
				value:3,
				label:'未扫'
			}
		],
		dataList:[],
		id:'',
		items:null as any,
		current:1,
		size:10,
		orderStatus:1
	})
	onLoad((op)=>{
		details.items=JSON.parse(op.item)
		details.id=JSON.parse(op.item).id
		init()
	})
	function init(){
		details.current=1
		initpage()
	}
	async function initpage(){
		let data={
			current:details.current,
			size:details.size,
			id:details.id,
		}
		let response=null
		if(details.orderStatus==1){
			response=await deliverywrap(data)
		}else if(details.orderStatus==2){
			response=await deliverywrapIn(data)
		}
		details.dataList=response.data.records
		
	}
	function setorderStatus(state:number){
		details.orderStatus=state
		init()
	}
	/** 扫描接口
	 * */
	function scandata(){
		
	}
	function checktype(e){
		if(e==''){
			details.schanvalue=''
		}
		details.typearr.map(item=>{
			if(item.value==e){
				details.schanvalue=item.label
				console.log(details.schanvalue)
			}
		})
	}
	const { orderStatus,schanvalue,typearr,dataList,items }=toRefs(details)
</script>

<style lang="scss">
	.tabtip{
		display: flex;
		align-items: center;
		justify-content: space-between;
		>view{
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ffffff;
			font-size: 32upx;
			font-weight: 400;
			color: #90A0AF;
			>view{
				height: 80upx;
				border-bottom: 8upx solid #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.xz{
			color: #D3832A;
			border-bottom: 8upx solid #D3832A;
			// border-radius: 5upx;
		}
	}
	.scrollv{
		width: 686upx;
		height: 48vh;
		// 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;
				>view{
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					width: 100%;
					margin-bottom: 20upx;
					word-wrap: break-word;
					word-break: break-all;
					&:nth-last-child(1){
						margin-bottom: none !important;
					}
					>view{
						width: 50%;
						// flex: 1;
						font-size: 28upx;
						font-weight: 400;
						color: #092C4D;
						margin-left: 5upx;
					}
				}
			}
		}
	}
	.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>