aiot-app/pages/pda/picking/details.vue

<template>
	<view class="content-box">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="领料" background-color="#F7F9FA"
			color="#404446" @clickLeft="back"></uni-nav-bar>

		<view class="list_box">
			<u-list @scrolltolower="scrolltolower">

				<view v-for="(item,index) in idsList" :key="index" class="card_box">
					<view class="title_box rx-bc">
						<view class="left rx-sc">
							<view class="round">{{index + 1}}</view>
							<view class="code">工单编号:{{item.code}}</view>
						</view>

						<view class="right_box rx-ec">
							<view class="btn">添加物料</view>
						</view>

					</view>

					<view class="material rx-ss">

						<view class="left rx-ss" @click="item.checked = ! item.checked">
							<view class="zdy_check rx-cc" :class="{ check_active : item.checked  }">
								<u-icon size="28" v-if='item.checked' name='checkbox-mark'></u-icon>
							</view>
						</view>
						<view class="content_table">
							<view class="item">
								<view class="lable rx-cc">物料编码</view>
								<view class="content">
									624644626624644626624644626</view>
							</view>

							<view class="item">
								<view class="lable rx-cc">名称</view>
								<view class="content">物料名称物料名称物料</view>
							</view>

							<view class="item rx-sc">
								<view class="rx ww55 ">
									<view class="lable rx-cc">牌号</view>
									<view class="content ">YL10Y</view>
								</view>

								<view class="rx ww45" >
									<view class="lable rx-cc ww80" >数量</view>
									<view class="content content_num">
											<input class="uni-input"   type="digit"></input>
											<view class="unit">kg</view>
									</view>
								</view>

							</view>
							
							
							<view class="item">
								<view class="lable rx-cc">领料仓库</view>
								<view class="content">
							<zxz-uni-data-select :localdata="localdata"  v-model="value"
								 dataValue='id' format='{name}' :clear='false'></zxz-uni-data-select>
								</view>
							</view>

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

		</view>

		<view class="bottom-wrapper">
			<view class="btn_box" @click="save">确认</view>
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				idsList: [{
					checked: false,
					code: 55
				}],
				
				value: 2,
				localdata: [
					{
						id: 1,
						name: '测试'
					},
					{
						id: 2,
						name: '测试2'
					}
				],

			}
		},
		onLoad(options) {
			// let queryArray = decodeURIComponent(options.arr);
			// this.idsList = JSON.parse(queryArray);

			console.log(this.idsList)

		},

		methods: {
			scrolltolower() {},

			save() {
				console.log(this.idsList)
			},

			groupChange(n) {
				console.log('groupChange', n);
			},
			
			handleUserChange(e) {
				console.log(e)
			}

		},

	}
</script>

<style lang="scss" scoped>
	.content-box {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;

	}


	.list_box {
		flex: 1;
		overflow: hidden;
		padding: 4rpx 0;

		.u-list {
			height: 100% !important;
		}

		.card_box {
			padding: 16rpx 24rpx;
			

		}


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

			.code {
				margin-left: 16rpx;
				font-family: PingFang SC;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
				color: $theme-color;
			}
		}

		.right_box {
			.btn {
				height: 40rpx;
				line-height: 40rpx;
				padding: 4rpx 8rpx;
				background: #157A2C;
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				color: #fff;
				border-radius: 4rpx;
			}

		}


		.material {
			margin-top: 10rpx;

			.left {
				width: 40rpx;
			}

			.zdy_check {
				width: 30rpx;
				height: 30rpx;
				border: 2rpx solid #c8c9cc;
				border-radius: 4rpx;


			}

			.check_active {
				background: $theme-color;
				border: 2rpx solid $theme-color;

				/deep/ .u-icon__icon {
					color: #fff !important;
				}
			}

			.content_table {
				width: 652rpx;
				border: 2rpx solid $border-color;

				.item {
					display: flex;
					border-bottom: 2rpx solid $border-color;


					.lable {
						width: 132rpx;
						text-align: center;
						background-color: #F7F9FA;
						font-size: 26rpx;
						border-right: 2rpx solid $border-color;
						flex-shrink: 0;
					}

					.ww80 {
						width: 80rpx;
					}

					.content {
						width: 518rpx;
						min-height: 64rpx;
						font-size: 28rpx;
						line-height: 28rpx;
						font-style: normal;
						font-weight: 400;
						padding: 18rpx 8rpx;
						box-sizing: border-box;
						word-wrap: break-word;
						flex-grow: 1 !important;

					}
					
					.content_num{
						display: flex;
						align-items: center;
						padding:0 4rpx;
						/deep/ .uni-input-input{
							border: 2rpx solid #F0F8F2;
							background:#F0F8F2;
							color: $theme-color;
						}
						
						.unit{
							 padding: 0 4rpx;
							 font-size: 24rpx;
							 color: #404446;
						}
					}
					
					

					&:last-child {
						border-bottom: none;
					}
				}

				.ww55 {
					width: 55%;
				}

				.ww45 {
					width: 45%;
				}
			}
		}


	}

	.bottom-wrapper {
		.btn_box {
			width: 750rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: $theme-color;
			text-align: center;
			font-size: 36rpx;
			font-style: normal;
			font-weight: 400;
			color: #fff;
		}
	}
</style>