logpm/pagesHome/pages/LoadingDetails/LoadingDetails.vue

<template>
	<!-- <u-navbar title="配车明细列表" placeholder border=true :autoBack="true" leftIconSize='35'></u-navbar> -->
	<BasicContainer :option="option" ref="basicContainer">
		<template #head>
			<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="请输入查询的订单号" v-model="orderCode" />
				</view>
				<view @click="search" 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>
		</template>
		<template #body>

			<scroll-view scroll-y="true" class="scrollv">
				<view class="mabxs">
					<view class="ite" v-if="orderStatus==1" v-for="item in dataList">
						<view>
							<view @click="goorderdetail(item)">订单号：{{item.orderCode}}</view>
							<view>包条码：{{item.orderPackageCode}}</view>
						</view>
						<view>
							<view>
								是否扫描：{{item.scanStatus==1?'未扫描':item.scanStatus==''?'未扫描':item.scanStatus==4?'未扫描':(!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.descriptionGoods}}</view>
							<view>规格：{{item.specification}}</view>
						</view>
						<view>
							<view>单位：{{item.logpmUnit}}</view>
							<view>
								扫描：{{item.scanStatus==1?'未扫描':item.scanStatus==''?'未扫描':item.scanStatus==4?'未扫描':(!item.scanStatus)?'未扫描':'扫描'}}
							</view>
							<!-- <view>规格：{{item.specification}}</view> -->
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
	</BasicContainer>
	<u-navbar title="配车明细列表" bgColor='#D3832A' leftIconColor='#ffffff' titleStyle='color:#ffffff' placeholder
		:autoBack="true" leftIconSize='35'></u-navbar>


</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 { ref, reactive, toRefs } from "vue";

	// 获取组件实例
	const basicContainer = ref(null)

	const option = {
		ttile: '装车扫描',
		haveData: true,
		async pullDownRefreshInitPage() {
			return await init()
		}
	}

	let details = reactive({
		schanvalue: '',
		typearr: [
			{
				value: 2,
				label: '已扫'
			},
			{
				value: 1,
				label: '未扫'
			},
		],
		dataList: [],
		id: '',
		items: null as any,
		current: 1,
		size: 10,
		orderStatus: 1,
		scanStatus: '' as string | number,
		orderCode: ''
	})
	onLoad((op) => {
		details.items = JSON.parse(op.item)
		details.id = JSON.parse(op.item).id
	})
	onShow(() => {
		const timer = setTimeout(() => {
			basicContainer.value.startPullDownRefresh()
			clearTimeout(timer)
		}, 200)
	})
	async function init() {
		details.current = 1
		return await initpage()
	}
	async function initpage() {
		try {
			details.dataList = []
			let data = {
				current: details.current,
				size: details.size,
				id: details.id,
				scanStatus: details.scanStatus,
				orderCode: details.orderCode
			}
			let response = null
			if (details.orderStatus == 1) {
				response = await deliverywrap(data)
			} else if (details.orderStatus == 2) {
				response = await deliverywrapIn(data)
			}
			if (response.code !== 200) return
			if (data && data.records) details.dataList = response.data.records
			return null
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		} finally {
			return null
		}
	}
	function goorderdetail(item) {
		uni.navigateTo({
			url: '/pagesHome/pages/orderDetails/orderDetails?orderCode=' + item.orderCode
		})
	}
	function setorderStatus(state : number) {
		details.orderStatus = state
		// 调用组件刷新函数
		basicContainer.value.startPullDownRefresh()
	}
	/** 扫描接口
	 * */
	function scandata() {

	}
	function checktype(e) {
		if (e == '') {
			details.schanvalue = ''
			details.scanStatus = ''
		}
		details.typearr.map(item => {
			if (item.value == e) {
				details.schanvalue = item.label
				details.scanStatus = item.value
				console.log(details.schanvalue)
			}
		})
	}
	/**
	 * 查询
	 */
	function search() {
		basicContainer.value.startPullDownRefresh()
	}
	const { orderCode, 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: 41vh;
		// 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>