delivery-depot-uniapp/pages/beixWarehouse/beixWarehouse.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-header">
								<view class="info-container">
									<view class="warehouse-name">
										<image src="../../static/icons/warehouse-ico.png" mode="widthFix"></image>
										<text>仓房名称：{{ warehouse.name }}</text>
									</view>
								</view>
								<view class="select-button">
									<checkbox :checked="warehouse.selected" @change="toggleSelection(index)"></checkbox>
								</view>
							</view>
							<view class="warehouse-details">
								<view class="detail-row">
									<text>仓库类型: {{ warehouse.emptyRooms }}</text>
									<text>仓库状态: {{ warehouse.selected ? '1个' : '0个' }}</text>
								</view>
								<view class="detail-row">
									<text>设计仓容: {{ warehouse.capacity }}</text>
									<text>是否空仓: {{ warehouse.rooms }}</text>
								</view>
								<view class="detail-row">
									<text>租仓参考价: {{ warehouse.emptyRooms }}</text>
									<text>委托保管参考价: {{ warehouse.selected ? '1个' : '0个' }}</text>
								</view>
							</view>
						</view>
					</view>

				</scroll-view>
				<view class="button-container">
					<view class="button-pad">
						<button class="select-all" @click="selectAll">全选</button>
						<button class="confirm" @click="confirmSelection">退回</button>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="tab-content">
				<scroll-view class="info-scroll-content" scroll-y>
					<view class="warehouse-info">
						<warehouse-info></warehouse-info>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script setup>
	import warehouseInfo from "./components/warehouseInfo/warehouseInfo.vue";
	import {
		ref
	} from 'vue';
	const navList = [{
			state: 0,
			text: '仓房基本信息',
			loadingType: 'more',
			orderList: []
		},
		{
			state: 1,
			text: '库区基本信息',
			loadingType: 'more',
			orderList: []
		},
		{
			state: 2,
			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 {
			background: linear-gradient(180deg, #ffffff, #F5F8FF);
			border-radius: 10px;
			padding: 20px;
			margin-bottom: 20px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

			.warehouse-header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start; // 对齐到顶部
				padding-bottom: 30rpx;
				border-bottom: 1px solid #E7E8EA;
				font-size: 35rpx;
				color: #00122F;

				.info-container {
					flex-grow: 1;

					.warehouse-name,
					.warehouse-address {
						display: flex;
						align-items: center;
						margin-bottom: 5px;

						&:last-child {
							margin-bottom: 0;
						}

						image {
							width: 20px;
							height: 20px;
							margin-right: 10px;
						}
					}
				}

				.select-button {
					display: flex;
					align-items: flex-start;
					margin-left: 10px;
				}
			}

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

				.detail-row {
					display: flex;
					justify-content: space-between;
					margin-bottom: 10px;
				}
			}
		}
	}
	.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: 80%;
					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>