aiot-app/pages/warehouse/outHouse/batchDetails.vue

<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="批次号详情" @clickLeft="back">
			<!--右菜单-->
			<template slot="float">
				<!-- <view class="nav-icon-caozuo rightNav" @click="getsure">
					<u-button type="success" size="small" class="u-reset-button" text="选择"></u-button>
				</view> -->
			</template>
		</uni-nav-bar>

		<view class="listContent">
			<view class="listBox" v-for="(item,index) in listData" :key="index">
				<view class="listBox-sel">
					<checkbox :value="item.code" color="#fff" :disabled="item.disabled" :checked="item.checked"
						@click="selectVal(item,index)" />
				</view>
				<view class="listBox-con">
					<view class="listBox-top">
						<view class="listBox-name">
							{{item.name}}
						</view>
						<view class="listBox-code">
							{{item.code}}
						</view>
					</view>
					<view class="listBox-bottom">
						<view class="bot-left">
							牌号：{{item.mark}}
						</view>
						<view class="bot-right">
							型号：{{item.model}}
						</view>
					</view>
					<view class="listBox-bottom">
						<view class="bot-left">
							批次号：{{item.batchNo}}
						</view>
						<view class="bot-right">
							重量：{{item.weight}}
						</view>
					</view>
					<view class="listBox-bottom">
						<view class="bot-left">
							单位：{{item.init}}
						</view>
						<view class="bot-right">
							状态：{{item.status}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="bottom">
				<checkbox v-if="!seletedAll" color="#fff" :checked="seletedAll" @tap="_seletedAll">全选</checkbox>
				<checkbox class="select-all" color="#fff" v-else :checked="seletedAll" @tap="_seletedAll">取消全选
				</checkbox>
			</view>
			<u-button type="success" size="small" class="u-reset-button">
				<view class="selBtn">
					选择( {{checkListLen}} )
				</view>
			</u-button>
		</view>
	</view>
</template>

<script>
	let [page, size, isEnd] = [1, 20, true];
	export default {
		data() {
			return {
				listData: [{
					name: "混炼料1",
					code: "TO5636633221653",
					mark: "E3888235",
					model: "B@3.0",
					batchNo: "aaaa",
					weight: "60",
					init: "kg",
					status: "部分出库"
				}, {
					name: "混炼料1",
					code: "TO5636633221653",
					mark: "E3888236",
					model: "B@3.0",
					batchNo: "bbbb",
					weight: "70",
					init: "kg",
					status: "部分出库"
				}, {
					name: "混炼料1",
					code: "TO5636633221653",
					mark: "E3888237",
					model: "B@3.0",
					batchNo: "cccc",
					weight: "80",
					init: "kg",
					status: "部分出库"
				}], //列表数据
				seletedAll: true, //全选状态
			}
		},
		computed: {
			checkListLen() {
				const list = this.listData.filter((el) => {
					if (el.checked) {
						return el
					}
				})
				return list.length
			},
		},
		onReachBottom: function() {
			if (isEnd) {
				return;
			}
			// 显示加载图标
			uni.showLoading({
				title: "数据加载中"
			});
			this.getInitList();
		},
		mounted() {
			this.getInitList();
		},
		methods: {
			//列表数据
			getInitList() {
				this.listData.forEach((el) => {
					this.$set(el, 'checked', true);
				});
			},
			//全选按钮
			_seletedAll() {
				if (!this.seletedAll) {
					this.seletedAll = true;
					this.listData.map(item => {
						this.$set(item, 'checked', true)
					})
				} else {
					this.seletedAll = false
					//this.checkListLen = 0;
					this.listData.map(item => {
						this.$set(item, 'checked', false)
					})
				};
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mainBox {
		.listContent {
			.listBox {
				display: flex;
				height: 200rpx;
				border-bottom: 2rpx solid #e5e5e5;

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

					checkbox {
						transform: scale(1.2);
					}
				}

				.listBox-con {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					align-items: center;

					.listBox-top {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.listBox-name,
						.listBox-code {
							display: inline-block;
							width: 50%;
						}

						.listBox-code {
							text-align: right;
							padding-right: 20rpx;
						}
					}

					.listBox-bottom {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.bot-left,
						.bot-right {
							display: inline-block;
							width: 50%;
							color: $uni-text-color-grey;
						}

						.bot-right {
							text-align: right;
							padding-right: 20rpx;
						}
					}
				}

			}

		}

		.footer {
			position: fixed;
			display: flex;
			justify-content: space-between;
			align-items: center;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			border-top: 1rpx solid #eeecec;
			background-color: #FFFFFF;
			z-index: 999;

			.bottom {
				margin-left: 10rpx;
			}

			.u-reset-button {
				position: absolute;
				right: 10rpx;
				top: 20rpx;
			}
		}
	}
</style>