aiot-app/pages/warehouse/picking/components/CardList.vue

<template>
	<view class="marginTop">
		<u-list>
			<u-list-item v-for="(item, index) in list" :key="item.id" v-show="list.length !== 0">
				<view class="card_box" @click="goDetail(item)">
					<view class="item_box flex_between">
						<view class="rx-sc">
							<view class="round">{{Number(index)+1}}</view>
							<view class="orderId">{{item.code}} </view>
						</view>
						<view class="status"
							:class="statusList[item.status && item.status] && statusList[item.status && item.status].class">
							{{ statusList[item.status] && statusList[item.status].label }}
						</view>
					</view>
					<view class="item_box rx-bc">
						<view class="item_one perce50 rx-sc">
							<view class="lable">名称：</view>
							<view>{{item.name }}</view>
						</view>
					</view>
					<view class="item_box rx-bc">
						<view class="item_one perce50 rx-sc">
							<view class="lable">领料单号：</view>
							<view>{{item.sourceNo }}</view>
						</view>
					</view>
					<view class="item_box rx-bc">
						<view class="item_one perce50 rx-sc">
							<view class="lable">出库单号：</view>
							<view>{{item.outInNo }}</view>
						</view>
					</view>
					<view class="item_box rx-bc">
						<view class="item_one perce50 rx-sc">
							<view class="lable">拣货人：</view>
							<view>{{item.createName}}</view>
						</view>
					</view>
					<view class="item_box rx-bc">
						<view class="item_one perce50 rx-sc">
							<view class="lable">创建时间：</view>
							<view>{{item.createTime}}</view>
						</view>
					</view>
					<view class="item_box rx-bc">
						<view class="item_one perce50 rx-sc">
							<view class="lable">仓库：</view>
							<view>{{item.warehouseName}}</view>
						</view>
					</view>
				</view>
			</u-list-item>
			<u-list-item v-if="list.length === 0">
				<view style='margin-top: 20vh;'>
					<u-empty iconSize='150' textSize='32' text='暂无数据'>
					</u-empty>
				</view>
			</u-list-item>

		</u-list>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				statusList: {
					0: {
						class: 'text-danger',
						label: '拣货中'
					},
					1: {
						class: 'normal',
						label: '拣货完成'
					},
					2: {
						class: 'text-primary',
						label: '已出库'
					}
				}
			}
		},
		methods: {
			goDetail(val) {
				uni.navigateTo({
					url: `/pages/warehouse/outHouse/details?&bizNo=${val.outInNo}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.marginTop {
		border-top: 20rpx solid $page-bg;
	}

	.card_box {
		width: 750rpx;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #E1E1E1;


		.item_box {
			margin-top: 10rpx;

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

			.orderId {
				color: #000;
				font-family: PingFang HK;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 600;
				margin-left: 16rpx;
			}

			.item_one {
				width: 100%;
				font-size: 26rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 38rpx;
				word-wrap: break-word;
			}

			.gylx {
				color: $theme-color;
			}

			.perce50 {
				width: 100%;
			}
		}

		.flex_between {
			display: flex;
			justify-content: space-between;
		}
	}

	.status {
		font-size: 28rpx;
		display: inline-block;
		padding: 4rpx 10rpx;
		border-radius: 18rpx;

		&.normal {
			background-color: $page-bg;
		}

		&.text-danger {
			background-color: rgba($color: $uni-color-order-error, $alpha: 0.1);
		}

		&.text-primary {
			background-color: rgba($color: $j-primary-green, $alpha: 0.1);
		}
	}

	// 	.kd-row {
	// 		font-size: 28rpx;
	// 		padding: 14rpx 12rpx 6rpx;
	// 		border-bottom: 1rpx solid $page-bg;

	// 		.kd-col {
	// 			display: flex;
	// 			justify-content: space-between;
	// 			align-items: center;
	// 			padding: 2rpx;
	// 			color: #aaaaaa;


	// 		}

	// 		.title {
	// 			font-weight: bold;
	// 			color: #333333;
	// 		}
	// 	}

	// 	.center {
	// 		text-align: center;
	// 		margin-bottom: 10rpx;
	// 		color: #999;
	// 	}

	// 	.no_data {
	// 		position: fixed;
	// 		top: 50%;
	// 		left: 50%;
	// 		transform: translate(-50%, -50%);
	// 		color: #999;
	// 		font-size: 28rpx;
	// 	}
</style>