新筛选页面开发

components/new-filter-page/new-filter-page.vue

@@ -0,0 +1,389 @@
+<template>
+    <view v-if="show" class="filter-container">
+        <!-- 头部 -->
+        <!-- <view class="filter-header">
+            <text class="back-btn" @click="handleClose">
+                <uni-icons type="left" size="24"></uni-icons>
+            </text>
+            <text class="filter-title">喀什智慧就业平台</text>
+            <view class="back-btn"></view>
+        </view> -->
+
+        <!-- 标签页 -->
+        <view class="filter-tabs">
+            <view
+                v-for="(tab, index) in tabs"
+                :key="index"
+                class="tab-item"
+                :class="{ active: activeTab === tab.key }"
+                @click="activeTab = tab.key"
+            >
+                {{ tab.label }}
+            </view>
+        </view>
+
+        <!-- 内容区域 -->
+        <view class="filter-content">
+            <!-- 学历要求 -->
+            <view v-if="activeTab === 'education'" class="content-section">
+                <radio-group @change="(e) => handleSelect('education', e)">
+                    <label
+                        v-for="option in educationOptions"
+                        :key="option.value"
+                        class="radio-item"
+                        :class="{ checked: selectedValues['education'] === String(option.value) }"
+                    >
+                        <radio
+                            :value="String(option.value)"
+                            :checked="selectedValues['education'] === String(option.value)"
+                        />
+                        <text class="option-label">{{ option.label }}</text>
+                    </label>
+                </radio-group>
+            </view>
+
+            <!-- 工作经验 -->
+            <view v-if="activeTab === 'experience'" class="content-section">
+                <radio-group @change="(e) => handleSelect('experience', e)">
+                    <label
+                        v-for="option in experienceOptions"
+                        :key="option.value"
+                        class="radio-item"
+                        :class="{ checked: selectedValues['experience'] === String(option.value) }"
+                    >
+                        <radio
+                            :value="String(option.value)"
+                            :checked="selectedValues['experience'] === String(option.value)"
+                        />
+                        <text class="option-label">{{ option.label }}</text>
+                    </label>
+                </radio-group>
+            </view>
+
+            <!-- 公司规模 -->
+            <view v-if="activeTab === 'scale'" class="content-section">
+                <radio-group @change="(e) => handleSelect('scale', e)">
+                    <label
+                        v-for="option in scaleOptions"
+                        :key="option.value"
+                        class="radio-item"
+                        :class="{ checked: selectedValues['scale'] === String(option.value) }"
+                    >
+                        <radio
+                            :value="String(option.value)"
+                            :checked="selectedValues['scale'] === String(option.value)"
+                        />
+                        <text class="option-label">{{ option.label }}</text>
+                    </label>
+                </radio-group>
+            </view>
+
+            <!-- 岗位类型 -->
+            <view v-if="activeTab === 'jobType'" class="content-section">
+                <radio-group @change="(e) => handleSelect('jobType', e)">
+                    <label
+                        v-for="option in jobTypeOptions"
+                        :key="option.value"
+                        class="radio-item"
+                        :class="{ checked: selectedValues['jobType'] === String(option.value) }"
+                    >
+                        <radio
+                            :value="String(option.value)"
+                            :checked="selectedValues['jobType'] === String(option.value)"
+                        />
+                        <text class="option-label">{{ option.label }}</text>
+                    </label>
+                </radio-group>
+            </view>
+        </view>
+
+        <!-- 底部按钮 -->
+        <view class="filter-footer">
+            <button class="footer-btn clear-btn" @click="handleClear">清除</button>
+            <button class="footer-btn confirm-btn" @click="handleConfirm">确认</button>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { ref, reactive, onBeforeMount } from 'vue';
+import useDictStore from '@/stores/useDictStore';
+const { getTransformChildren } = useDictStore();
+
+const props = defineProps({
+    show: Boolean,
+});
+
+const emit = defineEmits(['confirm', 'close', 'update:show']);
+
+// 岗位类型数据
+const getJobTypeData = () => {
+    return [
+        { label: '常规岗位', value: 0, text: '常规岗位' },
+        { label: '就业见习岗位', value: 1, text: '就业见习岗位' },
+        { label: '实习实训岗位', value: 2, text: '实习实训岗位' },
+        { label: '社区实践岗位', value: 3, text: '社区实践岗位' }
+    ];
+};
+
+// 标签页数据
+const tabs = [
+    { key: 'education', label: '学历要求' },
+    { key: 'experience', label: '工作经验' },
+    { key: 'scale', label: '公司规模' },
+    { key: 'jobType', label: '岗位类型' }
+];
+
+// 当前激活的标签
+const activeTab = ref('education');
+
+// 存储已选中的值
+const selectedValues = reactive({
+    education: '',
+    experience: '',
+    scale: '',
+    jobType: ''
+});
+
+// 从字典获取的选项数据
+const educationOptions = ref([]);
+const experienceOptions = ref([]);
+const scaleOptions = ref([]);
+const jobTypeOptions = ref([]);
+
+// 初始化获取数据
+onBeforeMount(() => {
+    educationOptions.value = getTransformChildren('education', '学历要求').options || [];
+    experienceOptions.value = getTransformChildren('experience', '工作经验').options || [];
+    scaleOptions.value = getTransformChildren('scale', '公司规模').options || [];
+    jobTypeOptions.value = getJobTypeData();
+});
+
+// 处理选项选择
+const handleSelect = (key, e) => {
+    selectedValues[key] = e.detail.value;
+};
+
+// 清除所有选择
+const handleClear = () => {
+    Object.keys(selectedValues).forEach((key) => {
+        selectedValues[key] = '';
+    });
+};
+
+// 确认筛选
+const handleConfirm = () => {
+    console.log('selectedValues:', selectedValues);
+    emit('confirm', selectedValues);
+    handleClose();
+};
+
+// 关闭弹窗
+const handleClose = () => {
+    emit('update:show', false);
+    emit('close');
+};
+</script>
+
+<style lang="scss" scoped>
+.filter-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: #fff;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+}
+
+.filter-header {
+    height: 96rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 32rpx;
+    border-bottom: 1rpx solid #eee;
+    background-color: #fff;
+    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+
+    .back-btn {
+        font-size: 36rpx;
+        width: 48rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 10rpx;
+        border-radius: 50%;
+        transition: all 0.3s ease;
+
+        &:active {
+            background-color: rgba(37, 107, 250, 0.1);
+        }
+    }
+
+    .filter-title {
+        font-size: 34rpx;
+        font-weight: 600;
+        color: #333;
+    }
+}
+
+.filter-tabs {
+    display: flex;
+    border-bottom: 1rpx solid #eee;
+    background-color: #fff;
+    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+
+    .tab-item {
+        flex: 1;
+        height: 90rpx;
+        line-height: 90rpx;
+        text-align: center;
+        font-size: 30rpx;
+        color: #666;
+        position: relative;
+        transition: all 0.3s ease;
+
+        &.active {
+            color: #256BFA;
+            font-weight: 600;
+            
+            &::after {
+                content: '';
+                position: absolute;
+                bottom: 0;
+                left: 25%;
+                width: 50%;
+                height: 4rpx;
+                background-color: #256BFA;
+                border-radius: 2rpx;
+            }
+        }
+
+        &:active {
+            background-color: rgba(37, 107, 250, 0.05);
+        }
+    }
+}
+
+.filter-content {
+    flex: 1;
+    padding: 40rpx 32rpx;
+    overflow-y: auto;
+}
+
+.content-section {
+    .radio-item {
+            display: flex;
+            align-items: center;
+            padding: 30rpx 0;
+            border-bottom: 1rpx solid #f0f0f0;
+            transition: all 0.3s ease;
+            position: relative;
+
+            &:last-child {
+                border-bottom: none;
+            }
+
+            &:active {
+                background-color: rgba(37, 107, 250, 0.05);
+            }
+
+            radio {
+                width: 28rpx;
+                height: 28rpx;
+                margin-right: 24rpx;
+                transform: scale(1);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            radio .wx-radio-input {
+                width: 28rpx;
+                height: 28rpx;
+                border-radius: 50%;
+                border: 2rpx solid #ccc;
+                background: transparent;
+            }
+
+            radio .wx-radio-input.wx-radio-input-checked {
+                border-color: #256BFA !important;
+                background: #256BFA !important;
+            }
+
+            radio .wx-radio-input::before {
+                width: 16rpx;
+                height: 16rpx;
+                line-height: 16rpx;
+                text-align: center;
+                font-size: 12rpx;
+                color: #fff;
+                background: transparent;
+                transform: translate(-50%, -50%) scale(0);
+                -webkit-transform: translate(-50%, -50%) scale(0);
+            }
+
+            radio .wx-radio-input.wx-radio-input-checked::before {
+                transform: translate(-50%, -50%) scale(1);
+                -webkit-transform: translate(-50%, -50%) scale(1);
+            }
+
+            .option-label {
+                font-size: 30rpx;
+                color: #333;
+                flex: 1;
+                font-weight: 400;
+                line-height: 40rpx;
+            }
+        }
+}
+
+.filter-footer {
+    height: 160rpx;
+    display: flex;
+    border-top: 1rpx solid #eee;
+    background-color: #fff;
+    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
+    padding: 20rpx 32rpx 100rpx;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 10;
+
+    .footer-btn {
+        flex: 1;
+        margin: 0;
+        border-radius: 16rpx;
+        height: 80rpx;
+        line-height: 80rpx;
+        font-size: 32rpx;
+        transition: all 0.3s ease;
+        font-weight: 500;
+
+        &:first-child {
+            margin-right: 20rpx;
+            background-color: #f5f5f5;
+            color: #666;
+            border: 1rpx solid #e0e0e0;
+
+            &:active {
+                background-color: #e0e0e0;
+                transform: scale(0.98);
+            }
+        }
+
+        &:last-child {
+            background-color: #256BFA;
+            color: #fff;
+            border: none;
+
+            &:active {
+                background-color: #1a56d9;
+                transform: scale(0.98);
+            }
+        }
+    }
+}
+</style>

pages/index/components/index-one.vue

@@ -478,6 +478,13 @@
         </view>
         <!-- 筛选 -->
         <select-filter ref="selectFilterModel" />
+        <!-- 新筛选页面 -->
+        <new-filter-page 
+            :show="showNewFilter" 
+            @confirm="handleNewFilterConfirm" 
+            @close="handleNewFilterClose"
+            @update:show="(value) => showNewFilter = value"
+        />
 
         <!-- 微信授权登录弹窗 -->
         <WxAuthLogin ref="wxAuthLoginRef" @success="handleLoginSuccess" />
@@ -601,6 +608,7 @@ import useDictStore from '@/stores/useDictStore';
 const { getTransformChildren, oneDictData, dictLabel: getDictLabel, industryLabel } = useDictStore();
 import useLocationStore from '@/stores/useLocationStore';
 import selectFilter from '@/components/selectFilter/selectFilter.vue';
+import newFilterPage from '@/components/new-filter-page/new-filter-page.vue';
 import { useRecommedIndexedDBStore, jobRecommender } from '@/stores/useRecommedIndexedDBStore.js';
 import { useScrollDirection } from '@/hook/useScrollDirection';
 import { useColumnCount } from '@/hook/useColumnCount';
@@ -724,6 +732,7 @@ const inputText = ref('');
 const showFilter = ref(false);
 const selectFilterModel = ref(null);
 const showModel = ref(false);
+const showNewFilter = ref(false);
 // 选中的城市
 const selectedCity = ref({ code: '', name: '' });
 const rangeOptions = ref([
@@ -882,14 +891,7 @@ const handleLoginSuccess = () => {
     getIsFourLevelLinkagePurview()
 };
 // H5环境下从URL获取token并自动登录
-onLoad(() => {
-    // #ifdef H5
-        const token = uni.getStorageSync('zkr-token');
-        if (token) {
-            useUserStore().loginSetToken(token);
-        }
-    // #endif
-});
+// onLoad 函数已移至下方，包含筛选参数处理
 
 // 处理附近工作点击
 const handleNearbyClick = (options  ) => {
@@ -1088,34 +1090,65 @@ function navToService(serviceType) {
 
 function openFilter() {
     isInteractingWithFilter.value = true;
-    showFilter.value = true;
+    showNewFilter.value = true;
     emits('onShowTabbar', false);
-    selectFilterModel.value?.open({
-        title: '筛选',
-        maskClick: true,
-        success: (values) => {
-            pageState.search = {
-                ...pageState.search,
-            };
-            for (const [key, value] of Object.entries(values)) {
-                // 特殊处理岗位类型，直接传递数字值
+}
+
+function handleNewFilterConfirm(values) {
+    pageState.search = {
+        ...pageState.search,
+    };
+    for (const [key, value] of Object.entries(values)) {
+        // 特殊处理岗位类型，直接传递数字值
+        if (key === 'jobType') {
+            pageState.search.type = value;
+        } else if (value) {
+            pageState.search[key] = value;
+        } else {
+            // 如果值为空，删除该搜索条件
+            delete pageState.search[key];
+        }
+    }
+    showNewFilter.value = false;
+    getJobList('refresh');
+    // 短暂延迟后解除交互锁，避免数据刷新导致顶部区域回弹
+    setTimeout(() => { isInteractingWithFilter.value = false; }, 400);
+    emits('onShowTabbar', true);
+}
+
+// 监听页面加载，接收筛选参数
+onLoad((options) => {
+    // #ifdef H5
+        const token = uni.getStorageSync('zkr-token');
+        if (token) {
+            useUserStore().loginSetToken(token);
+        }
+    // #endif
+    
+    // 接收从筛选页面传递过来的参数
+    if (options.filterParams) {
+        try {
+            const filterParams = JSON.parse(options.filterParams);
+            console.log('filterParams:', filterParams);
+            for (const [key, value] of Object.entries(filterParams)) {
                 if (key === 'jobType') {
-                    pageState.search.type = value.join(',');
-                } else {
-                    pageState.search[key] = value.join(',');
+                    pageState.search.type = value;
+                } else if (value) {
+                    pageState.search[key] = value;
                 }
             }
-            showFilter.value = false;
+            console.log('pageState.search:', pageState.search);
             getJobList('refresh');
-            // 短暂延迟后解除交互锁，避免数据刷新导致顶部区域回弹
-            setTimeout(() => { isInteractingWithFilter.value = false; }, 400);
-        },
-        cancel: () => {
-            showFilter.value = false;
-            emits('onShowTabbar', true);
-            setTimeout(() => { isInteractingWithFilter.value = false; }, 200);
-        },
-    });
+        } catch (error) {
+            console.error('解析筛选参数失败:', error);
+        }
+    }
+});
+
+function handleNewFilterClose() {
+    showNewFilter.value = false;
+    emits('onShowTabbar', true);
+    setTimeout(() => { isInteractingWithFilter.value = false; }, 200);
 }
 
 function handleFilterConfirm(e) {