delivery-depot-uniapp/pages/outInWarehouse/outInWarehouse.vue

<template>
	<view class="page">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{current: tabCurrentIndex === index}" @click="tabClick(index)">
				{{item.text}}
			</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content">
				<scroll-view class="list-scroll-content" scroll-y>
					<view class="warehouse-list">
						<view v-for="(warehouse, index) in warehouses" :key="index" class="warehouse-item">
							
							<view class="warehouse-details">
								<view class="detail-row">
									<text class="label">业务时间：<text class="blackValue">{{ warehouse.emptyRooms }}</text></text>
									<text class="label">粮食品种：<text class="blackValue">{{ warehouse.selected ? '1个' : '0个' }}</text></text>
								</view>
								<view class="detail-row">
									<text class="label">粮食等级：<text class="blackValue">{{ warehouse.capacity }}</text></text>
									<text class="label">净重(吨)：<text class="blackValue">{{ warehouse.rooms }}</text></text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="tab-content">
				<scroll-view class="list-scroll-content" scroll-y>
					<view class="warehouse-list">
						<view v-for="(warehouse, index) in warehouses" :key="index" class="warehouse-item">
							
							<view class="warehouse-details">
								<view class="detail-row">
									<text class="label">业务时间：<text class="blackValue">{{ warehouse.emptyRooms }}</text></text>
									<text class="label">粮食品种：<text class="blackValue">{{ warehouse.selected ? '1个' : '0个' }}</text></text>
								</view>
								<view class="detail-row">
									<text class="label">粮食等级：<text class="blackValue">{{ warehouse.capacity }}</text></text>
									<text class="label">净重(吨)：<text class="blackValue">{{ warehouse.rooms }}</text></text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const navList = [{
			state: 0,
			text: '出库',
			loadingType: 'more',
			orderList: []
		},
		{
			state: 1,
			text: '入库',
			loadingType: 'more',
			orderList: []
		}
	]
	const tabCurrentIndex = ref(0)
	const tabClick = (index) => {
		tabCurrentIndex.value = index;
	}
	const warehouses = ref([{
			name: '1-1',
			address: 'XXXXXXXXXX',
			capacity: '1500吨',
			rooms: '10个',
			emptyRooms: '5个',
			selected: false
		},
		{
			name: 'XXXXX',
			address: 'XXXXXXXXXX',
			capacity: '1500吨',
			rooms: '10个',
			emptyRooms: '5个',
			selected: false
		},
		{
			name: 'XXXXX',
			address: 'XXXXXXXXXX',
			capacity: '1500吨',
			rooms: '10个',
			emptyRooms: '5个',
			selected: false
		}
	]);

	const toggleSelection = (index) => {
		warehouses.value[index].selected = !warehouses.value[index].selected;
	};
	
	
	const changeTab = () => {

	};

	const selectAll = () => {
		warehouses.value.forEach(warehouse => {
			warehouse.selected = true;
		});
	};

	const confirmSelection = () => {
		// Implement confirmation logic here
	};
</script>

<style lang="scss" scoped>
	.page {
		position: relative; // 确保伪元素相对于 .page 定位
	}

	.page::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 200rpx; // 设置渐变的高度
		background: linear-gradient(180deg, #cfddfc, #eff2f5);
		z-index: -1; // 确保它在内容之下
	}

	.warehouse-list {
		padding: 40rpx 40rpx 20rpx;

		.warehouse-item {
			border-left: 2px solid #3872E3;
			background: linear-gradient(180deg, #ffffff, #F5F8FF);
			border-radius: 10px;
			padding: 10px 0 10px 20px;
			margin-bottom: 20px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

			.warehouse-details {
				padding-top: 30rpx;
				font-size: 30rpx;
				color: #747476;

				.detail-row {
					margin-bottom: 10px;
					text.label{
						width: 50%;
						display: inline-flex;
						.blackValue{ color: #000000;}
					}
				}
			}
		}
	}
	.button-container {
		position: fixed;
		bottom: 0;
		background-color: #ffffff;
		width: 100vw;
		padding: 40rpx 0;

		.button-pad {
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
		}


		.select-all,
		.confirm {
			width: 44%;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 10rpx;
			background-color: #1E5FDF;
			color: #fff;
			font-size: 28rpx;
			text-align: center;

		}
	}
	
	.warehouse-info{
		padding-top: 20rpx;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		position: relative;
		z-index: 10;
	
		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 35rpx;
			position: relative;
			color: #334b68;
	
			&.current {
				color: #0f2239;
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 60%;
					height: 0;
					border-bottom: 4px solid #789fec;
				}
			}
		}
	}
	
	.swiper-box {
		height: calc(100vh - 80rpx);
	}
	
	.list-scroll-content {
		height: calc(100vh - 200rpx);
	}
	.info-scroll-content{
		height: calc(100vh - 120rpx);
	}
</style>