logpm/pagesHome/pages/directGoMarketDetails/directGoMarketDetails.vue

<template>
	<BasicContainer ref="basicContainer" :option="option">
		<template #head>
			<view class="top">

				<view class="hdtp">
					<PullDownBox :isShowIcon="false" :ExistenceOrNot="true" :isShow="true" @change="handleChangePullDown">
						<template #title>
							<view class="flex-c-sb mb10">
								<view>
									配载批次：{{details.pageInfo.carsNo}}
								</view>
								<view class="butlur" @click.stop="showsdqs">
									{{Number(details.pageType) === 1? '录入包条码': '录入托盘码'}}
								</view>
							</view>
						</template>

						<template #content>
							<view class="flex">
								<view class="flex1">司机：{{details.pageInfo.driverName}}</view>
								<view class="flex1">电话：{{details.pageInfo.driverMobile}}</view>
							</view>
							<view class="mt10">车牌号：{{details.pageInfo.carNumber}}</view>
							<view class="mt10">路线：{{details.pageInfo.carsLineName}}</view>
						</template>
					</PullDownBox>

				</view>

				<view class="hdtpnum">
					<view>
						<view>计划件数</view>
						<view>{{details.pageInfo.planNum || 0}}</view>
					</view>
					<view>
						<view>装车件数</view>
						<view>{{details.pageInfo.loadingNum || 0}}</view>
					</view>
					<view>
						<view>计划签收数 </view>
						<view>{{details.pageInfo.loadingNum || 0}}</view>
					</view>
					<view>
						<view>签收数</view>
						<view>{{details.pageInfo.signNum || 0}}</view>
					</view>
				</view>
			</view>

			<view class="tabtip">
				<view @click="setorderStatus(1)" :class="orderStatus==1?'active':''">
					<view>
						<text>
							定制品
						</text>

						<!-- <text>
							({{ details.packageNum }})
						</text> -->
					</view>
				</view>
				<view @click="setorderStatus(2)" :class="orderStatus==2?'active':''">
					<view>
						<text>
							零担
						</text>
					</view>
				</view>
				<view @click="setorderStatus(3)" :class="orderStatus==3?'active':''">
					<view>
						<text>
							异常
						</text>

						<text>
							({{ details.exceptionList ? details.exceptionList.length : 0 }})
						</text>
					</view>
				</view>
			</view>
		</template>

		<template #body>
			<view class="jpScorllView">
				<block v-for="item in datalist" :key="item.waybillNo">
					<view>
						<template v-if="Number(orderStatus) !== 3">
							<PullDownBox>
								<template #title>
									<view class="contenbx1">
										<view style="flex: 1; display: flex;">
											<view>订单号：</view>
											<view class="row_value">
												{{item.orderCode}}
											</view>
										</view>
									</view>

									<view class="contenbx1">
										<view style="flex: 1; display: flex;">
											<view>运单号：</view>
											<view class="row_value">
												{{item.waybillNo}}
											</view>
										</view>
									</view>

									<!-- 零担 -->
									<template v-if="Number(orderStatus) === 2">
										<view class="contenbx1">
											<view style="flex: 1; display: flex;">
												<view>收货单位：</view>
												<view class="row_value">
													{{item.waybillNo}}
												</view>
											</view>
										</view>
									</template>

									<view class="contenbx1">
										<view>
											<text>订单总数：</text>
											{{item.totalNumber}}
										</view>
										<view>
											<text>
												装车数/签收数：
											</text>
											<text style="color: #000;">
												{{item.loadingNum}}
											</text>
											/
											<text style="color: #00d400;">
												{{item.signNum}}
											</text>
										</view>
									</view>
								</template>

								<template #content>
									<u-divider text="详 情"></u-divider>
									<block v-for="value in item.signPackageList" :key="value.name">
										<view class="details_container position-r">
											<!-- 定制品 -->
											<template v-if="Number(orderStatus) === 1">
												<view>
													包条码: {{value.orderPackageCode}}
												</view>
												<!-- <view class="flex1" style="display: flex; align-items: center; margin-left:5px;">
														卸车状态: -->
												<view :class="{
													
																'tip': true,
																'red': Number(value.scanStatus) === 1,
																'portion': Number(value.scanStatus) === 2,
																'blue': Number(value.scanStatus) === 3
																}">
													{{Number(value.scanStatus) === 1? '已装车': Number(value.scanStatus) === 2? '已卸车': '已签收'}}
												</view>
												<!-- </view> -->
												<view class="flex-c-sb mt10">
													<view class="flex1">
														托盘名称: {{ value.trayName }}
													</view>
													<view class="flex1">
														托盘码: {{ value.trayCode }}
													</view>
												</view>
											</template>

											<!-- 零担 -->
											<template v-if="Number(orderStatus) === 2">
												<view>
													产品名称: {{value.orderPackageCode}}
												</view>
												<view class="flex-c-sb mt10">
													<view class="flex1">
														托盘名称: {{value.trayName}}
													</view>
													<view class="flex1">
														托盘码: {{value.trayCode}}
													</view>
												</view>

												<view class="flex-c-sb mt10">
													<view class="flex1">
														装车数/签收数: {{value.num + '/' + (value.unloadNum || 0)}}
													</view>
												</view>

												<view class="flex-c-sb mt10">
													<view class="">

													</view>

													<view class="button" @click="handleZeroStowage(item, value)">
														零担签收
													</view>
												</view>
											</template>
										</view>
									</block>
								</template>
							</PullDownBox>
						</template>

						<template v-else>
							<view class="abnormal">
								<view class="scroll_row" style="zoom: 0.9;">
									<view class="flex1">
										包条码: {{item.scanCode}}
									</view>
									<view class="flex1 flex ml10">
										卸车状态:
										<view :class="{
												'tip': true,
												'red': Number(item.scanStatus) === 1,
												'portion': Number(item.scanStatus) === 2,
												'blue': Number(item.scanStatus) === 3
												}">
											{{Number(item.scanStatus) === 1? '已装车': Number(item.scanStatus) === 2? '已卸车': '已签收'}}
										</view>
									</view>
								</view>

								<view class="scroll_row mt10" style="zoom: 0.9;">
									<view class="flex1">
										托盘名称: {{item.trayName || '暂无数据'}}
									</view>
									<view class="flex1">
										托盘码: {{item.trayCode || '暂无数据'}}
									</view>
								</view>

								<view class="deleteBtn" @click="()=> handleDeleteAbnormal(item)" v-if="item.isData === 0">
									删除
								</view>
							</view>
						</template>
					</view>
				</block>
			</view>
		</template>
	</BasicContainer>

	<tiplist ref="tiplists">

	</tiplist>

	<!-- 零担装车 -->
	<PopUp ref='ZeroStowage'>

		<scroll-view scroll-y="true">
			<view class="contenbx1">
				<view><text style="color: #90A0AF;">订单编号：</text>{{details.zeroInfo.orderCode}}
				</view>
			</view>
			<view class="contenbx1">
				<view><text style="color: #90A0AF;">运单号：</text>{{details.zeroInfo.waybillNo}}
				</view>
			</view>
			<view class="contenbx1">
				<view><text style="color: #90A0AF;">物料名称：</text>{{details.zeroInfo.orderPackageCode}}
				</view>
			</view>
			<view class="ZeroStowage_row_title mt10 fwb">
				品类列表
			</view>

			<block v-for="item in details.zeroInfo.scanZeroDetailList">

				<view class="ZeroStowage_item">
					<view class="ZeroStowage_row"><text style="color: #90A0AF;">品类：</text>{{item.goodsName|| '暂无数据'}}</view>

					<view class="flex-c-sb ZeroStowage_row mt10">
						<view class="flex1"><text style="color: #90A0AF;">装车数：</text>{{item.loadingNum || 0}}</view>
						<view class="flex1"><text style="color: #90A0AF;">卸车数：</text>{{item.unloadNum || 0}}
						</view>
					</view>

					<view class="ZeroStowage_row mt10">
						<inputNum :minNum="0" :maxNum="item.maxNum" v-model="item.enterNum" />
					</view>
				</view>

			</block>

		</scroll-view>
	</PopUp>

	<!-- 定制品异常装车 -->
	<PopUp ref='OrderStowage'>
		<scroll-view scroll-y="true">
			<view class="">
				当前包件未在本次计划, 是否异常卸车
			</view>
			<view class="">
				包条码: {{details.scancode}}
			</view>
		</scroll-view>
	</PopUp>

	<!-- 整托卸车 -->
	<PopUp ref='TrayStowage'>
		<view>托盘名称：{{details.trayInfo.trayName}}</view>
		<view>托盘码：{{details.trayInfo.trayCode}}</view>
		<scroll-view style="margin-top: 10px; height: 50vh; zoom: 0.9" scroll-y="true">
			<view class="">
				零担:
			</view>
			<block v-for="item in details.trayInfo.zeroList" :key="item.scanCode">
				<view class="pop_row">
					<view>订单号：{{item.orderCode}}</view>
					<view>运单号：{{item.waybillNo}}</view>
					<view class="flex-c-sb">
						<view>产品名称：{{item.scanCode}}</view>
						<view>数量：{{item.num}}</view>
					</view>
				</view>
			</block>

			<view class="mt10">
				定制品:
			</view>
			<block v-for="item in details.trayInfo.packageList" :key="item">
				<view class="pop_row">
					<view>订单号：{{item.orderCode}}</view>
					<view class="flex-c-sb">
						<view>包条码：{{item.scanCode}}</view>
						<view>数量：{{item.num}}</view>
					</view>
				</view>
			</block>
		</scroll-view>
	</PopUp>
	<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
</template>

<script lang="ts" setup>
	import {
		postRemoveCarsLoadScan,
		postFinaSignOrderDetail,
		postSignScanPackageCode,
		postSignZeroOrder
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
	} from '@dcloudio/uni-app'
	import { computed, inject, nextTick, onMounted, reactive, ref, toRefs, } from "vue";
	import useSystemSettingsStore from '@/store/useSystemSettingsStore';
	import { storeToRefs } from 'pinia';
	import utils from '@/utils/utils.js';
	const { scanState } = storeToRefs(useSystemSettingsStore())

	const option = reactive({
		title: '直发商家签收',
		haveData: true,
		async pullDownRefreshInitPage() {
			return await initpage()

		},
		haveReachBottom: false,
		isFixed: true
	})

	let details = reactive({
		schanvalue: '',
		typearr: [
			{
				value: 3,
				label: '齐套'
			},
			{
				value: 2,
				label: '部分扫'
			},
			{
				value: 1,
				label: '未扫'
			}
		],
		items: {} as any,
		datalist: [],
		scancode: '',
		orderStatus: 1,
		loadId: '',
		orderType: 0,
		inputtxt: '',
		listcheckindex: -1,
		/** 是否为扫描后执行刷新 */
		isscan: false,
		/** 是否异常提交后执行刷新 */
		isAbnormal: false,
		// 零担详情装车列表
		signScanZeroOrderList: [],
		signScanOrderList: [],
		exceptionList: [],
		pageInfo: {
		},
		/** 包件数 */
		packageNum: 0,
		/** 零担数 */
		zeroNum: 0,
		page: 'ArrivalList' as 'ArrivalList' | 'RelayScanList',
		// 零担详情装车列表
		zeroList: [],
		/** 页面类型 1: 按件装车 2: 整托卸车 */
		pageType: 1,
		/** 整托渲染列表 */
		trayInfo: {
			zeroList: [],
			packageList: []
		},
		/** 卸车的零担信息 */
		zeroInfo: {},
	})


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

	/** 零担装车 */
	const ZeroStowage = ref()
	/** 定制品异常装车 */
	const OrderStowage = ref()

	/** 整托卸车 */
	const TrayStowage = ref()


	onLoad((op) => {
		details.loadId = op.id

		let content = '请扫描包件码'
		// #ifdef APP
		utils.ttsspke(content)
		// #endif
	})

	/** 查看订单详情 -- 上架数据(保留页面, 后续跳详情直接cv) */
	function goorderdetail(item) {
		uni.navigateTo({
			url: '/pagesHome/pages/orderDetails/orderDetails?orderCode=' + item.orderCode
		})
	}

	onShow(async () => {
		uni.$off('scancodedate')
		uni.$on('scancodedate', function (code) {
			if (code) {
				console.log('code', code);
				details.scancode = code
				details.isscan = true
				scandata()
			}
		})

		await nextTick()
		// 请求页面
		basicContainer.value.startPullDownRefresh()
	})

	onMounted(async () => {
		// 等待子组件加载完毕

	})

	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() {
		try {

			const response = await postFinaSignOrderDetail({
				signOrderId: details.loadId
			})

			const { code, data } = response
			console.log('response :>> ', response);
			if (code === 200) {
				details.pageInfo = data.signOrder
				details.exceptionList = data.exceptionList
				details.signScanOrderList = data.signScanOrderList
				details.signScanZeroOrderList = data.signScanZeroOrderList

				details.datalist = details.orderStatus === 1 ?
					details.signScanOrderList :
					details.orderStatus === 2 ?
						details.signScanZeroOrderList :
						details.exceptionList

				if (details.isscan) {
					// 签收总数
					let _total = 0

					let _abnormal = 0

					// 定制品
					for (let iterator of details.signScanOrderList) {
						if (iterator.signNum)
							_total += iterator.signNum || 0
					}

					// 零担
					for (let iterator of details.signScanZeroOrderList) {
						if (iterator.signNum)
							_total += iterator.signNum || 0
					}

					_total += details.exceptionList.length

					_abnormal += details.exceptionList.length

					if (details.isAbnormal) {
						console.log('222 :>> ', 222);
						utils.handleToast(`签收${_total}件, 异常签收${_abnormal}件`)
						return
					}

					console.log('333 :>> ', 333);
					utils.handleToast(`${_total}件`)
				}
			}
		} catch (e) {
			//TODO handle the exception
		} finally {
			details.isscan = false
			details.isAbnormal = false
			return null
		}
	}

	/**
	 * 切换tabBer状态
	 * @param {type} state 选中的状态 
	 */
	function setorderStatus(state : number) {
		if (details.orderStatus === state) return
		details.orderStatus = state


		details.datalist = details.orderStatus === 1 ?
			details.signScanOrderList || [] :
			details.orderStatus === 2 ?
				details.signScanZeroOrderList || [] :
				details.exceptionList || []
		console.log('details.datalist :>> ', details.datalist);
		// for (let i = 0; i < 1000; i++) {
		// 	details.datalist.push({ orderCode: i, signPackageList: [] })
		// }

		// return
	}

	/** 包件卸车 -- 单个 */
	const handleOrderStowage = async (_scanCode) => {
		try {
			const submitData = {
				orderPackageCode: _scanCode,
				signOrderId: details.loadId
			}

			const res = await postSignScanPackageCode(submitData)

			if (res.code !== 200) return
			details.isscan = true
			basicContainer.value.startPullDownRefresh()
			return res

		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		}
	}

	/** 扫描包件 */
	const scanOrder = async () => {
		OrderStowage.value.details.showPopUp = false
		let _scanCode = details.scancode

		// 是否存在该包件
		let isHave = false

		// 该包件是否已被卸车或签收
		let returnContent = ''

		for (let item of details.signScanOrderList) {
			let isBreak = false
			for (let val of item.signPackageList) {
				if (_scanCode === val.orderPackageCode) {
					isHave = true
					isBreak = true
					if (Number(val.scanStatus) === 2) {
						returnContent = '该包件已卸车'
					} else if (Number(val.scanStatus) === 3) {
						returnContent = '该包件已签收'
					}
				}
			}

			if (isBreak) break
		}

		if (returnContent) {
			// #ifdef APP
			utils.ttsspke(returnContent)
			// #endif
			uni.showToast({
				title: returnContent,
				icon: 'none'
			})
			return
		}

		if (!isHave) {
			// #ifdef APP
			utils.handleToast('是否异常签收')
			// #endif

			OrderStowage.value.setDetails({
				title: '异常签收',
				showPopUp: true,
				async success() {
					try {
						const submitData = {
							orderPackageCode: _scanCode,
							signOrderId: details.loadId
						}
						const res = await postSignScanPackageCode(submitData)

						if (res.code !== 200) return
						details.isscan = true
						details.isAbnormal = true
						OrderStowage.value.details.showPopUp = false
						// 刷新
						basicContainer.value.startPullDownRefresh()

					} catch (err) {
						console.log('err :>> ', err);
						//TODO handle the exception
					}
				}
			})
			return
		}

		handleOrderStowage(_scanCode)
	}


	/** 扫描接口
	 * */
	function scandata() {
		scanOrder()
	}

	/** 零担 -- 单独卸车 */
	const handleZeroSoleStowage = (_item, _value) => {
		console.log('_item :>> ', _item);
		console.log('_value :>> ', _value);

		details.zeroInfo = { waybillNo: _item.waybillNo, orderCode: _item.orderCode, ..._value }

		// details.zeroInfo.unloadNum = !details.zeroInfo.unloadNum ? details.zeroInfo.num : details.zeroInfo.unloadNum

		if (utils.getObjType(_value.scanZeroDetailList) !== 'array') return utils.handleToast('该零担存在数据异常，请联系文员')
		if (_value.scanZeroDetailList.length === 0) return utils.handleToast('该零担没有品类，无法卸车')

		let _total = 0

		for (let i = 0; i < _value.scanZeroDetailList.length; i++) {
			const _val = _value.scanZeroDetailList[i]

			_val.maxNum = _val.loadingNum || 0
			_val.enterNum = _val.unloadNum || 0
			_total += _val.loadingNum || 0
		}

		if (_total === _value.num && _value.unloadNum === 0) {
			for (let i = 0; i < _value.scanZeroDetailList.length; i++) {
				const _val = _value.scanZeroDetailList[i]

				_val.enterNum = _val.loadingNum || 0
			}
		}

		ZeroStowage.value.setDetails({
			title: '零担卸车',
			showPopUp: true,
			async success() {
				let _enterNum = 0
				for (let i = 0; i < _value.scanZeroDetailList.length; i++) {
					const _val = _value.scanZeroDetailList[i]

					_enterNum += _val.enterNum || 0
				}

				if (!_enterNum) {
					return uni.showToast({
						title: '请输入大于零的数字',
						icon: 'none'
					})
				}

				if (_enterNum > _item.num) return utils.handleToast('总数大于装车数量，请调整')

				console.log('details.zeroInfo :>> ', details.zeroInfo);
				const submitData = {
					signOrderId: details.loadId,
					waybillNo: details.zeroInfo.waybillNo,
					orderCode: details.zeroInfo.orderCode,
					productName: details.zeroInfo.orderPackageCode,
					enterNum: _enterNum,
					incomingType: '7',
					carsLoadScanId: _value.carsLoadScanId,
					zeroPackageList: _value.scanZeroDetailList
				}

				let res = {} as any

				res = await postSignZeroOrder(submitData)


				if (res.code !== 200) return

				ZeroStowage.value.details.showPopUp = false
				basicContainer.value.startPullDownRefresh()
			}
		})
	}

	/** 零担卸车 */
	const handleZeroStowage = (_item, _value) => {

		handleZeroSoleStowage(_item, _value)
	}

	/** 移除异常数据 */
	const handleDeleteAbnormal = (item) => {
		tiplists.value.setdetails({
			isshow: true,
			tipstate: 2,
			list: [],
			isonecheck: true,
			title: '是否删除异常包件',
			content: '12441',
			success: async () => {
				tiplists.value.setdetails({ isshow: false })

				const submitData = {
					orderCode: item.scanCode,
					carsLoadScanIds: item.carsLoadScanId,
				}
				const res = await postRemoveCarsLoadScan(submitData)
				const { code } = res

				if (code !== 200) return
				basicContainer.value.startPullDownRefresh()
			},
			cancel: () => {
				tiplists.value.setdetails({ isshow: false })
			},
			close: () => {
				tiplists.value.setdetails({ isshow: false })
			}
		})
	}

	/** 是否显示头部详情数据 */
	const handleChangePullDown = async (changeValue) => {
		await nextTick()
		basicContainer.value.handleSetHeaderHeight(300)
	}

	const { orderStatus, items, datalist } = toRefs(details)
</script>

<style lang="scss" scoped>
	@import url(@/utils/style/common.scss);

	:deep(.PullDownBox) {
		background: #fff;

		.Pulldown_content {
			padding: 20upx;
		}
	}

	:deep(.Pulldown-title-container) {
		padding: 20upx;
	}

	.top {
		font-size: 0.9rem;

		:deep(.PullDownBox) {
			margin: 0;

			.Pulldown_content {
				padding: 0;
			}
		}

		:deep(.Pulldown-title-container) {
			padding: 0;
		}
	}

	.hdtp {
		width: 100vw;
		padding: 20upx;
		padding-bottom: 0upx;
		box-sizing: border-box;
		background-color: #ffffff;
		word-break: break-all;
	}

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

	.tabtip {
		display: flex;
		background-color: #fff;

		>view {
			padding: 20upx 0;
			flex: 1;
			position: relative;
			text-align: center;

			&::after {
				content: '';
				display: block;
				position: absolute;
				width: 0%;
				height: 6upx;
				background: var(--subjectColor);
				bottom: 3upx;
				left: 50%;
				transform: translateX(-50%);
				transition: all .3s;


			}

			&.active {
				&::after {
					content: '';
					display: block;
					width: 60%;
				}
			}
		}


	}



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

		.mabx {
			background: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #FFFFFF;
		}
	}

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

		>view {

			// &:first-child {
			// margin-right: 20upx;
			// }
			>view:first-child {
				flex: none;
			}
		}

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

		// >view {
		// 	flex: 1;
		// }
	}

	.hdtpnum {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #ffffff;
		padding: 20upx 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;
			}
		}
	}

	.flex-c-sb {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	// 按钮
	.button {
		padding: 10upx 15upx;
		background: var(--subjectColor);
		color: #fff;
		border-radius: 5upx;
		width: auto;
		display: inline-block;
		font-size: 28upx;

		&.abnormalBtn {
			background: #f8544b;
		}
	}

	// 异常
	.abnormal {
		padding: 10upx;
		background: #fff;
		margin: 20upx;
		border-radius: 15upx;
		position: relative;
		overflow: hidden;

		.deleteBtn {
			position: absolute;
			right: 0;
			top: 0;
			padding: 10upx 20upx;
			background-color: var(--errColor);
			color: #fff;
			zoom: 0.8;
		}
	}

	.w100 {
		width: 100%;
	}

	.input {
		padding: 10upx 20upx;
		border: 2upx solid #aaa;
		border-radius: 10upx;
		margin: 5upx 0 20upx;
	}

	.pop_row {
		padding: 10upx 0;
		border-bottom: 2upx solid #aaa;
	}

	// 零担弹窗 -- 标题
	.ZeroStowage_row_title {
		color: var(--subjectColor);
		text-align: center;
		display: flex;
		align-items: center;

		&::before {
			content: '';
			display: block;
			flex: 1;
			height: 4upx;
			background-color: var(--subjectColor);
			margin-right: 20upx;
		}

		&::after {
			content: '';
			display: block;
			flex: 1;
			height: 4upx;
			background-color: var(--subjectColor);
			margin-left: 20upx;
		}
	}

	// 零担弹窗 -- 行
	.ZeroStowage_row {
		// margin-top: 20upx;
		font-size: 0.9rem;
		flex-wrap: wrap;
		word-break: break-all;
	}

	.ZeroStowage_item {
		padding: 20upx;
		margin: 10upx;
		margin-top: 20upx;
		border: 6upx solid var(--subjectColor);
		border-radius: 10upx;
	}

	// 分界线
	:deep(.u-divider) {
		margin: 10upx 0;
	}

	:deep(.u-divider__text) {
		font-size: 0.9rem !important;
		font-weight: bold;
		color: var(--subjectColor) !important;
	}

	// 详情
	.details_container {
		font-size: 0.9rem;
		border: 4upx solid #FA8C16;
		border-radius: 10upx;
		padding: 20upx;
		margin: 10upx;
	}

	// 每行的值
	.row_value {
		font-size: 0.8rem;
		word-break: break-all;
	}

	.mt10 {
		margin-top: 10upx;
	}

	.flex1 {
		flex: 1;
	}

	// 标签
	.tip {
		position: absolute;
		top: 0;
		right: 0;
		padding: 10upx 15upx;
		background: var(--subjectColor);
		color: #fff;
		border-radius: 5upx;
		margin-left: 10upx;
		height: fit-content;

		&.red {
			color: #f8625a;
			background-color: #feeded;
		}

		&.blue {
			color: #0086F1;
			background-color: #e5f2fd;
		}

		&.portion {
			color: #fa8c16;
			background: #fef3e7;
		}
	}

	.scroll_row {
		display: flex;

		>view {
			word-break: break-all;
			flex: 1;
		}
	}

	:deep(.PullDownBox) {
		margin: 20upx;
	}
</style>