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

<template>
  <view class="page">
    <view class="filter-wrap">
      <view class="filter-content">
		  <view class="filter-header">
			  <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>
			  <uni-icons class="delIcons" type="trash-filled" size="30"></uni-icons>

		  </view>
		  
		  <swiper :current="tabCurrentIndex" class="swiper-box" duration="300">
		  	<swiper-item class="tab-content">
		  		<scroll-view class="list-scroll-content" scroll-y>
		  			<view class="address-list">
						<view class="address-city">
							<uni-data-checkbox multiple v-model="cityValue" :localdata="cityList" class="checkbox-item"></uni-data-checkbox>
						</view>
						<view class="address-county">
							<uni-data-checkbox multiple v-model="cityValue" :localdata="cityList" class="checkbox-item"></uni-data-checkbox>
						</view>
		  			</view>
		  		</scroll-view>
		  	</swiper-item>
		  	<swiper-item class="tab-content">
		  		<scroll-view class="info-scroll-content" scroll-y>
		  			<view class="warehouse-info">
		  				<!-- 基础用法，不包含校验规则 -->
		  				<uni-forms ref="baseForm" :model="baseFormData" label-align="right" labelWidth="120px">
		  					<uni-forms-item label="企业名称">
		  						<uni-easyinput v-model="baseFormData.name" placeholder="请输入企业名称" />
		  					</uni-forms-item>
							<uni-forms-item label="仓房类型">
								<uni-data-select v-model="baseFormData.skills" :localdata="skillsRange" >
								</uni-data-select>
							</uni-forms-item>
							<uni-forms-item label="仓房状态">
								<uni-data-select v-model="baseFormData.skills" :localdata="skillsRange" >
								</uni-data-select>
							</uni-forms-item>
							<uni-forms-item label="空仓数量">
								<uni-row>
									<uni-col :span="20">
									  <uni-easyinput v-model="baseFormData.name" placeholder="请输入空仓数量" />
									</uni-col>
									<uni-col :span="4">个</uni-col>
								</uni-row>
							</uni-forms-item>
							<uni-forms-item label="库区空仓仓容">
								<uni-row>
									<uni-col :span="9">
									  <uni-easyinput v-model="baseFormData.minEmptyCapacity" placeholder="最小值" />
									</uni-col>
									<uni-col :span="2"><text>-</text></uni-col>
									<uni-col :span="9">
									  <uni-easyinput v-model="baseFormData.maxEmptyCapacity" placeholder="最大值" />
									</uni-col>
									<uni-col :span="4">吨</uni-col>
								  </uni-row>
							</uni-forms-item>
							<uni-forms-item label="仓房仓容">
								<uni-row>
									<uni-col :span="9">
									  <uni-easyinput v-model="baseFormData.minEmptyCapacity" placeholder="最小值" />
									</uni-col>
									<uni-col :span="2">-</uni-col>
									<uni-col :span="9">
									  <uni-easyinput v-model="baseFormData.maxEmptyCapacity" placeholder="最大值" />
									</uni-col>
									<uni-col :span="4">吨</uni-col>
								  </uni-row>
							</uni-forms-item>
							
		  				</uni-forms>
		  			</view>
		  		</scroll-view>
		  	</swiper-item>
		  </swiper>
        
      </view>
    </view>

    <view class="button-container">
		<view class="button-pad">
			<button class="confirm" @click="confirmSelection">确认筛选</button>
		</view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } 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 cityValue = ref([0]);
const cityList = ref([
  { text: '朝阳区', value: 0 },
  { text: '昌平区', value: 1 },
  { text: '海淀区', value: 2 },
  { text: '丰台区', value: 3 },
  { text: '丰台区1', value: 4 },
    { text: '丰台区1', value: 5 },
	  { text: '丰台区1', value: 6 },
]);

// 基础表单数据
const baseFormData = reactive({
  name: '',
  skills: 0,
  minEmptyCapacity: '',
  maxEmptyCapacity: '',
});
const skillsRange = ref([{
						value: 0,
						text: "编程"
					},
					{
						value: 1,
						text: "绘画"
					},
					{
						value: 2,
						text: "运动"
					},
				])
const confirmSelection = () => {
  // Implement confirmation logic here
};

const goFilterPage = () => {
  uni.navigateTo({
    url: '/pages/filter/filter' // 注意路径前的斜杠
  });
};
</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; // 确保它在内容之下
}

.filter-wrap {
  padding: 80rpx 40rpx 20rpx;
  .filter-content {
    background: linear-gradient(180deg, #ffffff, #F5F8FF);
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	.filter-header{
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #E0E6F0;
		
	}
	.delIcons{ margin: 10px 10px 0 0;}
	.navbar {
		width: 60%;
		display: flex;
		height: 50px;
		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: #1E5FDF;
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 40%;
					height: 0;
					border-bottom: 4px solid #1E5FDF;
					border-radius: 5px;
				}
			}
		}
	}
	.address-list{
		display: flex;
		.address-city,
		.address-county {
		  flex: 1;
		  box-sizing: border-box;
		}
	}
	.address-city {
	  border-right: 1px solid #E0DEF3;
	  min-height: 1050rpx;
	  padding: 15rpx 0;
	  display: flex;
	  flex-wrap: wrap;
	  gap: 0.5rem;
		.checkbox-item {
		  font-size: 32rpx;
		  flex: 1 1 100%;
		  box-sizing: border-box;
		  padding-left: 30rpx;
		}
	}
	.address-county{
		padding: 15rpx 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		.checkbox-item {
			font-size: 32rpx;
		  flex: 1 1 100%;
		  box-sizing: border-box;
		  padding-left: 30rpx;
		}
	}
   
   
   .warehouse-info{
	   margin: 30rpx 35rpx 10rpx 0;

   }
   
   
   
   
   
   
   
   
   
   
  }
}
	

.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;
	}
  

  .confirm {
    width: 88%;
    height: 70rpx;
	line-height: 70rpx;
    border-radius: 10rpx;
    background-color: #1E5FDF;
    color: #fff;
    font-size: 28rpx;
    text-align: center;
  }
}
</style>
<style lang="scss">
	.filter-wrap{
		.swiper-box{ min-height: 1050rpx;}
		.uni-data-checklist .checklist-group .checklist-box{
			margin: 15rpx 0 !important;
		}
		.uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text{
			font-size: 34rpx;
		}
		.uni-forms-item__label{
			font-size: 30rpx;
		}
		.uni-forms-item__content{
			.uni-col-4{
				text-align: right;
				line-height: 35px;
			}
			.uni-col-2{
				text-align: center;
				line-height: 35px;
			}
		}
	}
</style>