|
|
@@ -0,0 +1,354 @@
|
|
|
+<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: 40rpx 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: 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-color: #f5f5f5;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm-button {
|
|
|
+ flex: 1;
|
|
|
+ padding: 24rpx;
|
|
|
+ background: linear-gradient(90deg, #007AFF, #00BFFF);
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
your_username