aiot-app/pages/pda/picking/components/pickCard.vue

<template>
	<view>

		<checkbox-group v-for="(item, index) in list" :key="index" @change="e => selectVal(e, item, index)">
		     <label>
			<view class="card_box">
				<view class="item_box rx-bc">
					<view class="rx-sc">
						<checkbox  v-if='item.pickStatus == 0' :checked="item.checked" />
							
						<view class="orderId">{{item.code}} </view>
					</view>
					<view class="status FAA" :class="[item.pickStatus == 0 ? 'FAA': '' ]"> {{ item.pickStatus == 0 ? '未领料' : '已领料' }}</view>
				</view>

				<view class="item_box rx-bc">
					<view class="item_one perce50 rx-sc">
						<view class="lable">产品编码：</view>
						<view>{{item.productCode}}</view>
					</view>
					<view class="item_one perce50 rx-sc">
						<view>名称：</view>
						<view>{{item.productName}}</view>
					</view>
				</view>


				<view class="item_box rx-bc">
					<view class="item_one perce50 rx-sc">
						<view class="lable">牌号：</view>
						<view>{{item.brandNo}}</view>
					</view>
					<view class="item_one perce50 rx-sc">
						<view>型号：</view>
						<view>{{item.model}}</view>
					</view>
				</view>


				<view class="item_box rx-bc">
					<view class="item_one perce50 rx-sc">
						<view class="lable">生产数量：</view>
						<view>{{item.formingWeight}}</view>
					</view>
					<view class="item_one perce50 rx-sc">
						<view>状态：</view>
						<view>{{statusList[item.status]}}</view>
					</view>
				</view>


				<view class="item_box rx-sc">
					<view class="item_one rx-sc">
						<view class="lable">工艺路线：</view>
						<view class="gylx">{{item.produceRoutingName}}</view>
					</view>

				</view>




			</view>
			</label>

		</checkbox-group>

	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
		},

		data() {
			return {
				statusList: {
					4: '待生产',
					5: '生产中',
					6: '已完成',
					7: '已延期',
					8: '待下达'
				}
			}
		},
		methods: {
			selectVal(e, val, index) {
				this.list[index].checked = !this.list[index].checked
			}
		}

	}
</script>


<style lang="scss" scoped>
	.card_box {
		width: 750rpx;
		padding: 16rpx 24rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #E1E1E1;


		.item_box {
			margin-top: 10rpx;

		

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

			.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: 50%;
			}

			.status {
				font-size: 26rpx;

				&.FAA {
					color: #FFA929;
				}
			}
			
			
			/deep/ .uni-checkbox-input-checked {
				background-color: $theme-color !important;
				border-color: $theme-color !important;
			}
		}
	}
	
	
	
</style>