logpm/pagesHome/pages/SignDetailScan/SignDetailScan.vue

<template>
	<!-- <u-navbar title="签收明细扫描" placeholder border=true :autoBack="true" leftIconSize='35'></u-navbar> -->
	<u-navbar title="签收明细扫描"
	 bgColor='#D3832A' leftIconColor='#ffffff'
	titleStyle='color:#ffffff' placeholder 
	:autoBack="true" leftIconSize='35'></u-navbar>
	<view class="headtop">
		<view>
			<view>配车类型：{{items.type_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="60" 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.signNub:items.signNubSr}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
	<view class="scinp">
		<view class="left">
			<view class="titl">齐套状态</view>
			<view>
				<cusSelects @change='checktype(1,$event)' :data='signforStatearr' :value="signforStatevalue" placeholder='全部' :arrLeft='5' size='145'
					:clearable='true'></cusSelects>
			</view>
		</view>
		<!-- <view class="titl">包件类型</view>
		<view>
			<cusSelects @change='checktype(2,$event)' :data='typearr' :value="schanvalue" placeholder='全部' :arrLeft='5' size='145'
				:clearable='true'></cusSelects>
		</view> -->
		<view @click="initpage" 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 class="scbx" scroll-y="true">
		<view class="mabox">
			<view class="item" v-if="orderStatus==1" v-for="item in datalist">
				<view class="toptitl">
					<view class="toplft">
						订单号：{{item.orderCode}}
					</view>
					<!-- <view :class="item==3?'tis bf':'tis'">
						整托备货
					</view> -->
				</view>
				<view class="boxcontt">
					<view>
						<view><text style="color: #90A0AF;">包条码：</text>{{item.packetBarCode}}</view>
						<view><text style="color: #90A0AF;">货物名称：</text>{{item.materialName}}</view>
					</view>
					<view>
						<view :class="item.signforState==1?'scanstateerr':'scanstatesucc'">
							<text style="color: #90A0AF;">扫描状态：</text>
							{{item.signforState==1?'未扫码':'已扫码'}}
						</view>
						<!-- <view><text style="color: #90A0AF;">完成件数：</text>12</view> -->
					</view>
				</view>
				<!-- <view class="buttts">
					<view class="anj">
						异常上报
					</view>
				</view> -->
			</view>
			<view class="item" v-if="orderStatus==2" v-for="item in datalist">
				<view class="toptitl">
					<view class="toplft">
						SKU：{{item.sku}}
					</view>
					
				</view>
				<view class="boxcontt">
					<view>
						<view><text style="color: #90A0AF;">物品：</text>{{item.descriptionGoods}}</view>
						<view><text style="color: #90A0AF;">规格：</text>{{item.specification}}</view>
					</view>
					<view>
						<view><text style="color: #90A0AF;">单位：</text>{{item.logpmUnit}}</view>
						<!-- <view><text style="color: #90A0AF;">自提数：</text>{{item.quantity}}</view> -->
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script lang="ts" setup>
	import cusSelects from '@/compoment/cus-selects-fan/cus-selects-fan.vue'
	import {
		signforwrap,
		signforwrapIn
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	import { reactive, toRefs,ref } from "vue";
	let details = reactive({
		orderCodevalue: '',
		signforStatevalue: '',
		signforStatearr: [
			{
				value: 1,
				label: '齐套'
			},
			{
				value: 2,
				label: '部分扫'
			},
			{
				value: 3,
				label: '未扫'
			}
		],
		statearr: [
			{
				value: 1,
				label: '齐套'
			},
			{
				value: 2,
				label: '部分扫'
			},
			{
				value: 3,
				label: '未扫'
			}
		],
		items:{} as any,
		id:'',
		datalist:[],
		orderStatus:1,
		signforState:'' as string|number,
		
	})
	onLoad((op)=>{
		details.items=JSON.parse(op.item)
		details.id=JSON.parse(op.item).id
		initpage()
	})
	function setorderStatus(state:number){
		details.orderStatus=state
		initpage()
	}
	async function initpage(){
		details.datalist=[]
		let data={
			id:details.id,
			signforState:details.signforState
		}
		if(details.orderStatus==1){
			let res=await signforwrap(data)
			console.log(res);
			details.datalist=res.data.records
		}else if(details.orderStatus==2){
			let res=await signforwrapIn(data)
			console.log(res);
			details.datalist=res.data.records
		}
		
	}
	function checktype(type,e) {
		console.log(type,e);
		if(type==1){
			if(e==''){
				details.signforStatevalue=''
				details.signforState=''
			}
			details.signforStatearr.map(item=>{
				if(item.value==e){
					details.signforStatevalue=item.label
					details.signforState=item.value
					console.log(details.signforStatevalue)
				}
			})
			initpage()
		}else if(type==2){
			// if(e==''){
			// 	details.schanvalue=''
			// }
			// details.typearr.map(item=>{
			// 	if(item.value==e){
			// 		details.schanvalue=item.label
			// 		details.orderStatus=item.value
			// 		console.log(details.schanvalue)
			// 	}
			// })
		}
	}
	const { orderStatus,signforStatearr,signforStatevalue,items,datalist } = 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;
		}
	}
	.scbx{
		width: 100%;
		height: 45vh;
		padding-top: 20upx;
		.mabox{
			display: flex;
			flex-direction: column;
			align-items: center;
			>.item{
				width: 686upx;
				// height: 378upx;
				background: #FFFFFF;
				border-radius: 8upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				// padding: 10upx 20upx;
				box-sizing: border-box;
				border-bottom: 1upx solid #ebebeb;
				margin-bottom: 20upx;
				padding-bottom: 10upx;
				&:nth-last-child(1){
					margin-bottom: 5upx;
				}
				.toptitl{
					width: 100%;
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					border-bottom: 2upx solid #EEEEEE;
					padding: 34upx 24upx;
					box-sizing: border-box;
					.toplft{
						font-size: 32upx;
						font-weight: 400;
						color: #092C4D;
						word-wrap: break-word;
						word-break: break-all;
					}
					.tis{
						width: 180upx;
						font-size: 32upx;
						font-weight: 400;
						color: #0086F1;
						display: flex;
						justify-content: flex-end;
					}
					.bf{
						color: #D3832A;
					}
				}
				.boxcontt{
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 100%;
					padding: 32upx 24upx;
					box-sizing: border-box;
					font-size: 28upx;
					
					>view{
						width: 100%;
						display: flex;
						align-items: flex-start;
						justify-content: space-between;
						&:nth-of-type(1){
							margin-bottom: 20upx;
						}
						>view{
							width: 50%;
						}
					}
					.scanstatesucc{
						color: #3AD8BC;
					}
					.scanstateerr{
						color: #F8544B;
					}
				}
				.buttts{
					height:100upx;
					display: flex;
					align-items: center;
					justify-content: space-around;
					width: 100%;
					box-sizing: border-box;
					border-top: 2upx solid #EEEEEE;
					.antu{
						border: 2upx solid #0086F1;
						color: #0086F1;
					}
					.anj{
						border: 2upx solid #D3832A;
						color: #D3832A;
					}
					>view{
						width: 204upx;
						height: 64upx;
						background: #FFFFFF;
						border-radius: 8upx;
						opacity: 1;
						font-size: 28upx;
						display: flex;
						align-items: center;
						justify-content: center;
						
					}
				}
			}
		}
	}
	.scinp {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12upx 32upx;
		box-sizing: border-box;
		background-color: #ffffff;

		>.left{
			display: flex;
			align-items: center;
			justify-content: center;
			>.titl {
				font-size: 28upx;
				font-weight: 400;
				color: #092C4D;
				margin-right: 30upx;
			}
			
			.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;
		}
	}

	.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;
			}
		}
	}
</style>