aiot-app/pages/warehouse/workOrder/details/AssetsCard2.vue

<template>
	<view class="listBox">
		<view class="listBox-con">
			<view class="listBox-top">
				<view class="listBox-name" style="display: flex;">
					<view class="round">{{index}}</view>
					{{ item.info.categoryCode }}
				</view>
				<view class="listBox-name">
					<u-tag @click="open(item.planDetailVOList)" :text="item.info.categoryName"></u-tag>
				</view>
			</view>
			<view class="listBox-bottom">
				<view>批次号：{{ item.info.batchNo }}</view>
				<view>牌号：{{ item.info.brandNum }}</view>
				<view>型号：{{ item.info.categoryModel }}</view>
				<view>规格：{{ item.info.specification }}</view>
				<view>计量数量：{{ item.info.packingCountBase }}</view>
				<view>计量单位：{{ item.info.packingUnit }}</view>
				<view>重量：{{ item.info.weight }}</view>
				<view>重量单位：{{ item.info.weightUnit }}</view>
			</view>
		</view>
		<u-popup mode="right" :show="show" @close="close">
			<u-list>
				<u-list-item v-for="(item, index) in list" :key="index">
					<view class="listBox-item">
						<view class="w100" style="font-weight: bold;">序号：{{ index + 1 }}</view>
						<view>包装数量：{{ item.info.packingCountBase }}</view>
						<view>包装单位：{{ item.info.packingUnit }}</view>
						<view class="w100">包装编码：{{ item.info.packageNo }}</view>
						<view class="w100">生产日期：</view>
					</view>
				</u-list-item>
			</u-list>
		</u-popup>
	</view>
</template>

<script>
	import {
		number
	} from 'echarts'

	export default {
		props: {
			index: {
				type: Number,
				default: 0
			},
			item: {
				type: Object,
				default: () => ({
					info: {}
				})
			}
		},
		data() {
			return {
				list: [],
				show: false,
				statusOption: [{
						label: '盘盈',
						value: '2',
						numKey: 'surplusQuantity'
					},
					{
						label: '丢失',
						value: '3',
						numKey: 'loseQuantity'
					},
					{
						label: '破损',
						value: '4',
						numKey: 'wornQuantity'
					}
				],
				statusInfo: {
					2: '盘盈',
					3: '丢失',
					4: '破损'
				},
				countInfo: {
					2: 'surplusQuantity',
					3: 'loseQuantity',
					4: 'wornQuantity'
				}
			}
		},
		methods: {
			close() {
				this.show = false
			},
			open(list) {
				console.log(list)
				this.list = list
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listBox {
		display: flex;
		// height: 180rpx;
		padding: 20rpx;
		border-bottom: 2rpx solid #e5e5e5;

		.listBox-sel {
			height: 90rpx;
			width: 80rpx;
			// line-height: 90rpx;
			text-align: center;

			checkbox {
				transform: scale(1.2);
			}
		}

		.listBox-con {
			width: 100%;
			padding: 0 16px 8px 8px;

			.listBox-top {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 10rpx;

				.listBox-name,
				.listBox-code {
					display: inline-block;
					font-size: $uni-font-size-sm;
					font-weight: bold;
				}
			}

			.round {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 50%;
				background: $theme-color;
				color: #fff;
				text-align: center;
				font-size: 20rpx;
				margin-right: 8px;
			}

			.listBox-bottom {
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: $uni-font-size-sm;
				flex-wrap: wrap;

				>view {
					width: 50%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					line-height: 24px;
				}

				.input_view {
					display: flex;
					align-items: center;
					justify-content: center;

					.u-input {
						height: 36rpx;
						padding: 0 !important;
						margin-right: 10rpx;
						border: 1px solid #ddd;
					}
				}

				.w100 {
					width: 100%;
				}
			}
		}

		.listBox-item {
			width: 70vw;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			font-size: $uni-font-size-sm;
			flex-wrap: wrap;
			border-bottom: 1px solid #ddd;

			>view {
				width: 50%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				line-height: 24px;
			}

			.w100 {
				width: 100%;
			}
		}
	}

	.noDate {
		height: 100%;
	}
</style>