logpm/pagesHome/pages/CustomerTrayDetails/CustomerTrayDetails.vue

<template>
	<u-navbar title="客户订单扫描" bgColor='#D3832A' leftIconColor='#ffffff' titleStyle='color:#ffffff' placeholder
		:autoBack="true" leftIconSize='35'></u-navbar>
	<view class="hdtp">
		<view>
			<view>
				客户：{{items.consignee}}
			</view>
			<view class="butlur" @click="showsdqs">
				录入托盘码
			</view>
		</view>
		<view>
			<view>备货是否完成：{{items.isstock}}</view>
			<view>装车是否完成：{{items.isload}}</view>
		</view>
	</view>
	<view class="hdtpnum">
		<view>
			<view>订单总数</view>
			<view>{{items.ordNub}}</view>
		</view>
		<view>
			<view>计划件数</view>
			<view>{{items.reservationNum}}</view>
		</view>
		<view>
			<view>装车件数</view>
			<view>{{loadingNub}}</view>
		</view>
	</view>
	<scroll-view class="scve" scroll-y="true">
		<view class="mabx">
			<view class="itec" @click="checkphon(index)" v-if="orderStatus==1" v-for="(item,index) in datalist">
				<view class="contenbx1">
					<view><text style="color: #90A0AF;" @click.stop="goorderdetail(item)">托盘编码：</text>{{item.trayCode}}
					</view>
				</view>
				<view class="contenbx1">
					<view><text style="color: #90A0AF;">货物类型：</text>{{item.associationType}}</view>
					<view><text style="color: #90A0AF;">货物件数：</text>{{item.packageList.length}}</view>
				</view>
				<view class="xialaxz" v-if="listcheckindex==index">
					<view v-for="ite in item.packageList">
						<view>包条码：{{ite.orderPackageCode}}</view>
						<view>货物品类：{{ite.thirdProduct}}</view>
						<view>扫描状态：{{ite.orderPackageLoadingStatusName}}</view>
					</view>
				</view>
				<view :class="item.isScan==3?'tip tp1':'tip tp2'">{{typearr.find(val => val.value === item.isScan).label}}
				</view>
			</view>
			<view class="itec" @click="checkphon(index)" v-if="orderStatus==2" v-for="(item,index) in datalist">
				<view class="contenbx1">
					<view><text style="color: #90A0AF;">SKU：</text>{{item.sku}}</view>
				</view>
				<view class="contenbx1">
					<view><text style="color: #90A0AF;">物品：</text>{{item.descriptionGoods}}</view>
					<view><text style="color: #90A0AF;">规格：</text>{{item.specification}}</view>
				</view>
				<view class="contenbx1">
					<view><text style="color: #90A0AF;">单位：</text>{{item.logpmUnit}}</view>
					<!-- <view><text style="color: #90A0AF;">签收：</text>{{item.signforNub}}</view> -->
				</view>
				<!-- <view :class="item.completecode==3?'tip tp1':item.completecode==1?'tip tp2':'tip tp3'">{{item.complete}}</view> -->
			</view>
		</view>
	</scroll-view>
	<tiplist ref="tiplists"></tiplist>
	<saomiao2></saomiao2>
</template>

<script lang="ts" setup>
	import {
		deliveryorder,
		signforinventory,
		deliveryloadingscan,
		deliveryloadinginventory,
		distributionTrayDetail,
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	import { computed, inject, reactive, ref, toRefs, watchEffect } from "vue";
	const utils = inject('utils') as any
	let details = reactive({
		schanvalue: '',
		typearr: [
			{
				value: 1,
				label: '未扫'
			},
			{
				value: 2,
				label: '已扫'
			}
		],
		items: {} as any,
		datalist: [],
		scancode: '',
		orderStatus: 1,
		id: '',
		orderType: 0,
		inputtxt: '',
		listcheckindex: -1,
		isscan:false
	})
	const tiplists = ref(null)
	onLoad((op) => {
		console.log('op', op)
		details.items = JSON.parse(op.item)
		details.id = op.id
	})
	function goorderdetail(item) {
		uni.navigateTo({
			url: '/pagesHome/pages/orderDetails/orderDetails?orderCode=' + item.orderCode
		})
	}
	onShow(() => {
		uni.$on('scancodedate', function (code) {
			if (code) {
				console.log(code);
				details.scancode = code
				details.isscan = true
				scandata()
			}
		})
		initpage()
	})
	onHide(() => {
		uni.$off('scancodedate')
	})

	const loadingNub = computed(() => {
		let num = 0
		if (!!details.datalist){
			details.datalist.map(item => {
				if (item.loadingNub) {
					num += item.loadingNub
				}
			})
		}
		return num
	})
	function showsdqs() {
		tiplists.value.setdetails({
			isshow: true,
			tipstate: 1,
			title: '请输入扫描的码',
			placeholder: '请输入扫描的码',
			inputtext: '',
			success: (detail) => {
				details.scancode = detail.inputtext
				scandata()
				tiplists.value.setdetails({ isshow: false })
			},
			cancel: () => {
				tiplists.value.setdetails({ isshow: false })
			},
			close: () => {
				tiplists.value.setdetails({ isshow: false })
			}
		})
	}
	async function initpage() {
		let data = {
			reservationId: details.items.id,
			// reservationId:'1707271276416094210',
			// completecode: details.orderType,
			// orderCode: details.inputtxt
		}
		details.datalist = []
		// let response = null
		// if (details.orderStatus == 1) {
		// 	response = await deliveryorder(data)
		// } else if (details.orderStatus == 2) {
		// 	response = await signforinventory(data)
		// }
		const res = await distributionTrayDetail(data)
		console.log('res', res);
		const {code } = res
		const resData = res.data
		// 重置数据列表
		details.datalist = []
		if (code === 200 && !!resData){
			details.datalist = resData.records
		}
		if (loadingNub.value != 0 && details.isscan) {
			console.log(loadingNub.value + '件')
			utils.ttsspke(loadingNub.value + '件')
		}
	}
	function checktype(e) {
		if (e == '') {
			details.schanvalue = ''
			details.orderType = 0
		}
		details.typearr.map(item => {
			if (item.value == e) {
				details.schanvalue = item.label
				details.orderType = item.value
				console.log(details.schanvalue)
			}
		})
	}
	function setorderStatus(state : number) {
		details.orderStatus = state
		initpage()
	}
	/** 扫描接口
	 * */
	async function scandata() {
		let loadingId = uni.getStorageSync('checkvehicle').id

		let data = {
			reservationId: details.items.id,
			deliveryId: details.id,
			// reservationId: '1707271276416094210',
			// deliveryId: '1707271279670874114',
			loadingId,
			type: 2,
			barcode: details.scancode
		}
		
		data.barcode = 'HTLQ000019'
		let res = await deliveryloadingscan(data)
		console.log('res', res);
		const {code} = res
		// 语音播报
		if (code === 3001 || code === 200) utils.ttsspke(res.audio)
		initpage()
	}
	function checkphon(index : number) {
		// details.listcheckindex=index
		if (details.listcheckindex == index) {
			details.listcheckindex = -1
		} else {
			details.listcheckindex = index
		}
	}
	
	const { listcheckindex, inputtxt, orderStatus, schanvalue, typearr, items, datalist } = toRefs(details)
</script>

<style lang="scss">
	.xialaxz {
		display: flex;
		flex-direction: column;

		>view {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			border-top: 1upx solid #00000010;
			padding: 20upx 0;
			box-sizing: border-box;
			font-size: 28upx;
			color: #092C4D;

			>view {
				word-wrap: break-word;
				word-break: break-all;
				margin-right: 10upx;

				&:nth-last-child(1) {
					margin-right: 0upx;
				}
			}
		}
	}

	.butlur {
		width: 200upx !important;
		height: 64upx !important;
		background: #D3832A;
		border-radius: 8upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32upx;
		font-weight: 400;
		color: #FFFFFF;
	}

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

	.hdtp {
		padding: 34upx 32upx;
		box-sizing: border-box;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;

		>view {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;
			margin-bottom: 24upx;

			&:nth-last-child(1) {
				margin-bottom: 0;
			}

			>view {
				width: 50%;
				// flex: 1;
			}
		}
	}

	.scve {
		width: 100%;
		height: 50vh;
		margin-top: 20upx;

		.mabx {
			display: flex;
			flex-direction: column;
			align-items: center;

			>.itec {
				width: 686upx;
				// height: 176upx;
				background: #FFFFFF;
				border-radius: 8upx;
				padding: 36upx 24upx;
				box-sizing: border-box;
				position: relative;
				margin-bottom: 20upx;

				&:nth-last-child(1) {
					margin-bottom: 0;
				}

				>.contenbx1 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28upx;
					color: #092C4D;
					margin-bottom: 20upx;

					&:nth-last-child(1) {
						margin-bottom: 0;
					}

					>view {
						flex: 1;
					}
				}

				.tip {
					position: absolute;
					right: 0;
					top: 0;
					width: 96upx;
					height: 48upx;
					border-radius: 0 8upx 0 8upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24upx;
				}

				.tp1 {
					background-color: #0086F120;
					color: #0086F1;
				}

				.tp2 {
					background-color: #F8544B20;
					color: #F8544B;
				}
			}
		}
	}

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

	.hdtpnum {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #ffffff;
		padding: 28upx 0;
		border-bottom: 3upx solid #EEEEEE;

		>view {
			display: flex;
			align-items: center;
			flex-direction: column;
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;

			&:nth-of-type(1) {
				>view:nth-of-type(2) {
					color: #092C4D;
				}
			}

			&:nth-of-type(2) {
				>view:nth-of-type(2) {
					color: #0086F1;
				}
			}

			&:nth-of-type(3) {
				>view:nth-of-type(2) {
					color: #3AD8BC;
				}
			}

			&:nth-of-type(4) {
				>view:nth-of-type(2) {
					color: #FA8C16;
				}
			}

			>view:nth-of-type(2) {
				font-size: 36upx;
				font-weight: 400;
				color: #092C4D;
				margin-top: 20upx;
			}
		}
	}
</style>