yizhizan-h5/pages/talentSearch/filter.vue

<template>
	<view class="filter-page">
		<!-- 导航栏 -->
		<view class="filter-header">
			<view class="header-content">
				<view class="header-left" @click="goBack">
					<u-icon name="arrow-left" color="rgba(51, 51, 51, 1)" size="32"></u-icon>
				</view>
				<view class="header-title">筛选</view>
				<view class="header-right"></view>
			</view>
		</view>
		
		<!-- 筛选内容 -->
		<view class="filter-content">
			<!-- 学历要求 -->
			<view class="filter-section">
				<view class="section-title">学历要求 (不限)</view>
				<view class="range-slider">
					<view class="range-labels">
						<text class="range-label">初中及以下</text>
						<text class="range-label">博士</text>
					</view>
					<view class="slider-container">
						<view class="slider-track">
							<view class="slider-fill"></view>
							<view class="slider-thumb slider-thumb-left"></view>
							<view class="slider-thumb slider-thumb-right"></view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 工作经验 -->
			<view class="filter-section">
				<view class="section-title">工作经验 (不限)</view>
				<view class="range-slider">
					<view class="range-labels">
						<text class="range-label">在校/应届生</text>
						<text class="range-label">10年+</text>
					</view>
					<view class="slider-container">
						<view class="slider-track">
							<view class="slider-fill"></view>
							<view class="slider-thumb slider-thumb-left"></view>
							<view class="slider-thumb slider-thumb-right"></view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 期望薪资 -->
			<view class="filter-section">
				<view class="section-title">期望薪资 (15K-150K)</view>
				<view class="range-slider">
					<view class="range-labels">
						<text class="range-label">15K</text>
						<text class="range-label">150K</text>
					</view>
					<view class="slider-container">
						<view class="slider-track">
							<view class="slider-fill"></view>
							<view class="slider-thumb slider-thumb-left"></view>
							<view class="slider-thumb slider-thumb-right"></view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 求职状态 -->
			<view class="filter-section">
				<view class="section-title">求职状态 (不限)</view>
				<view class="status-buttons">
					<view class="status-button active">不限</view>
					<view class="status-button">离职&随时到岗</view>
					<view class="status-button">在职&暂不考虑</view>
					<view class="status-button">在职&考虑机会</view>
					<view class="status-button">在职&月内到岗</view>
				</view>
			</view>
			
			<!-- 年龄要求 -->
			<view class="filter-section">
				<view class="section-title">年龄要求 (不限)</view>
				<view class="range-slider">
					<view class="range-labels">
						<text class="range-label">16岁</text>
						<text class="range-label">46岁+</text>
					</view>
					<view class="slider-container">
						<view class="slider-track">
							<view class="slider-fill"></view>
							<view class="slider-thumb slider-thumb-left"></view>
							<view class="slider-thumb slider-thumb-right"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 免责声明 -->
		<view class="disclaimer">
			<text class="disclaimer-text">筛选功能仅供您分析招聘数据,请勿有招聘歧视行为,如因名族、种族、性别等行为不合理差别对待候选人</text>
		</view>
		
		<!-- 底部按钮 -->
		<view class="bottom-buttons">
			<view class="clear-button" @click="clearFilters">清除</view>
			<view class="confirm-button" @click="confirmFilters">确定</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 筛选数据
			educationRange: [0, 100],
			experienceRange: [0, 100],
			salaryRange: [15, 150],
			ageRange: [16, 46],
			jobStatus: '不限'
		}
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 清除筛选
		clearFilters() {
			this.educationRange = [0, 100]
			this.experienceRange = [0, 100]
			this.salaryRange = [15, 150]
			this.ageRange = [16, 46]
			this.jobStatus = '不限'
			
			uni.showToast({
				title: '已清除筛选条件',
				icon: 'success'
			})
		},
		
		// 确认筛选
		confirmFilters() {
			console.log('筛选条件:', {
				education: this.educationRange,
				experience: this.experienceRange,
				salary: this.salaryRange,
				age: this.ageRange,
				jobStatus: this.jobStatus
			})
			
			uni.showToast({
				title: '筛选条件已应用',
				icon: 'success'
			})
			
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}
	}
}
</script>

<style lang="scss" scoped>
.filter-page {
	min-height: 100vh;
	// background-color: #f5f5f5;
}

// 导航栏
.filter-header {
	// background-color: #333333;
	padding-top: 80rpx;
	
	.header-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		
		.header-left {
			width: 60rpx;
		}
		
		.header-title {
			color:  rgba(51, 51, 51, 1);
			font-size: 36rpx;
			font-weight: 600;
			text-align: center;
		}
		
		.header-right {
			width: 60rpx;
		}
	}
}

// 筛选内容
.filter-content {
	padding: 20rpx 30rpx 0 30rpx;
	background-color: #ffffff;
	margin-bottom: 20rpx;
}

.filter-section {
	// margin-bottom: 60rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.section-title {
	color: #333333;
	font-size: 32rpx;
	font-weight: 600;
	margin-bottom: 30rpx;
}

// 范围滑块
.range-slider {
	.range-labels {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		
		.range-label {
			color: #666666;
			font-size: 24rpx;
		}
	}
	
	.slider-container {
		padding: 20rpx 0;
	}
	
	.slider-track {
		position: relative;
		height: 8rpx;
		background-color: #e5e5e5;
		border-radius: 4rpx;
		
		.slider-fill {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 100%;
			background-color: #007AFF;
			border-radius: 4rpx;
		}
		
		.slider-thumb {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 32rpx;
			height: 32rpx;
			background-color: #ffffff;
			border: 4rpx solid #007AFF;
			border-radius: 50%;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
			
			&.slider-thumb-left {
				left: 0;
			}
			
			&.slider-thumb-right {
				right: 0;
			}
		}
	}
}

// 状态按钮
.status-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
	.status-button {
		width: 48%;
		padding: 16rpx 32rpx;
		background-color: rgba(245, 248, 254, 1);
		border-radius: 16rpx;
		color: rgba(153, 153, 153, 1);
        font-family: DM Sans;
        font-size: 28rpx;
        font-weight: 400;
        line-height: 44rpx;
        letter-spacing: 0px;
        text-align: center;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		
		&.active {
			background-color: rgba(1, 107, 246, 1);
			color: #ffffff;
		}
	}
}

// 免责声明
.disclaimer {
	padding: 0 30rpx;
	
	.disclaimer-text {
		color: #999999;
		font-size: 24rpx;
		line-height: 1.5;
		text-align: center;
	}
}

// 底部按钮
.bottom-buttons {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	background-color: #ffffff;
	// border-top: 1rpx solid #e5e5e5;
	padding: 20rpx 30rpx;
	gap: 20rpx;
	
	.clear-button {
		flex: 1;
		padding: 24rpx;
		background: rgba(216, 216, 216, 1);
		color: rgba(255, 255, 255, 1);
		font-family: DM Sans;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 48rpx;
		letter-spacing: 0%;
		text-align: center;
		border-radius: 50rpx;
	}
	
	.confirm-button {
		flex: 1;
		padding: 24rpx;
		background: linear-gradient(90deg, #007AFF, #00BFFF);
		color: rgba(255, 255, 255, 1);
		font-family: DM Sans;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 48rpx;
		letter-spacing: 0%;
		text-align: center;
		border-radius: 50rpx;
	}
}
</style>