Merge branch 'master' of http://124.243.245.42:3000/sdz/ks-app-employment-service

2026-07-16 13:37:16 +08:00
parent 5d08291ef6 76b1a65f9f
commit 3cce6621ad
4 changed files with 730 additions and 595 deletions
--- a/.codegraph/.gitignore
+++ b/.codegraph/.gitignore
@@ -0,0 +1,16 @@
+# CodeGraph data files
+# These are local to each machine and should not be committed
+
+# Database
+*.db
+*.db-wal
+*.db-shm
+
+# Cache
+cache/
+
+# Logs
+*.log
+
+# Hook markers
+.dirty
--- a/.codegraph/daemon.pid
+++ b/.codegraph/daemon.pid
@@ -0,0 +1,6 @@
+{
+  "pid": 37252,
+  "version": "0.9.9",
+  "socketPath": "\\\\.\\pipe\\codegraph-27b009ff71560217",
+  "startedAt": 1784169684502
+}
--- a/components/new-filter-page/new-filter-page.vue
+++ b/components/new-filter-page/new-filter-page.vue
@@ -135,6 +135,97 @@
                </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 v-if="activeTab === 'area'" class="content-section">
+                <checkbox-group @change="(e) => handleAreaSelect(e)">
+                    <label
+                        v-for="option in areaOptions"
+                        :key="option.value"
+                        class="radio-item"
+                        :class="{ checked: selectedValues['area'].includes(String(option.value)) }"
+                    >
+                        <checkbox
+                            :value="String(option.value)"
+                            :checked="selectedValues['area'].includes(String(option.value))"
+                        />
+                        <text class="option-label">{{ option.label }}</text>
+                    </label>
+                </checkbox-group>
+            </view>
            <!-- 底部按钮 -->
            <view class="filter-footer">
                <button class="footer-btn clear-btn" @click="handleClear">清除</button>
@@ -146,10 +237,9 @@
 </template>

 <script setup>
-import { ref, reactive, onBeforeMount } from 'vue';
+import { ref, reactive, onBeforeMount, watch } from 'vue';
 import useDictStore from '@/stores/useDictStore';
-const dictStore = useDictStore();
-const { getTransformChildren } = dictStore;
+const { getTransformChildren } = useDictStore();

 const props = defineProps({
    show: Boolean,
@@ -171,7 +261,6 @@ const getJobTypeData = () => {
 const tabs = [
    { key: 'education', label: '学历要求' },
    { key: 'experience', label: '工作经验' },
-    { key: 'salary', label: '薪资' },
    { key: 'scale', label: '公司规模' },
    { key: 'jobType', label: '岗位类型' },
    { key: 'area', label: '地区' }
@@ -184,47 +273,36 @@ const activeTab = ref('education');
 const selectedValues = reactive({
    education: '',
    experience: '',
-    salary: '',
    scale: '',
-    area: [],
-    jobType: ''
+    jobType: '',
+    area: []
 });

 // 从字典获取的选项数据
 const educationOptions = ref([]);
 const experienceOptions = ref([]);
 const scaleOptions = ref([]);
-const areaOptions = ref([]);
 const jobTypeOptions = ref([]);
-
-// 薪资区间数据（单位：元/月），min/max 为空表示该侧不设限
-const salaryOptions = ref([
-    { label: '3K以下', value: '0-3000', min: '', max: 3000 },
-    { label: '3-5K', value: '3000-5000', min: 3000, max: 5000 },
-    { label: '5-10K', value: '5000-10000', min: 5000, max: 10000 },
-    { label: '10-20K', value: '10000-20000', min: 10000, max: 20000 },
-    { label: '20-50K', value: '20000-50000', min: 20000, max: 50000 },
-    { label: '50K以上', value: '50000-0', min: 50000, max: '' },
-]);
-
-// 加载状态
-const loading = ref(true);
+const areaOptions = ref([]);

 // 初始化获取数据
-onBeforeMount(async () => {
-    try {
-        // 先获取字典数据
-        await dictStore.getDictData();
-        // 再初始化选项数据
-        educationOptions.value = getTransformChildren('education', '学历要求').options || [];
-        experienceOptions.value = getTransformChildren('experience', '工作经验').options || [];
-        scaleOptions.value = getTransformChildren('scale', '公司规模').options || [];
-        areaOptions.value = getTransformChildren('area', '地区').options || [];
-        jobTypeOptions.value = getJobTypeData();
-    } catch (error) {
-        console.error('获取字典数据失败:', error);
-    } finally {
-        loading.value = false;
+const initData = () => {
+    educationOptions.value = getTransformChildren('education', '学历要求').options || [];
+    experienceOptions.value = getTransformChildren('experience', '工作经验').options || [];
+    scaleOptions.value = getTransformChildren('scale', '公司规模').options || [];
+    jobTypeOptions.value = getJobTypeData();
+    areaOptions.value = getTransformChildren('area', '地区').options || [];
+};
+
+// 组件挂载时初始化数据
+onBeforeMount(() => {
+    initData();
+});
+
+// 监听组件显示状态，当显示时重新初始化数据
+watch(() => props.show, (newVal) => {
+    if (newVal) {
+        initData();
    }
 });

@@ -234,24 +312,23 @@ const handleSelect = (key, e) => {
 };

 // 处理多选选项选择（地区）
-// 兼容不同平台：H5 可能返回逗号分隔字符串，小程序返回数组
+// 兼容不同平台：H5 返回逗号分隔字符串，小程序返回数组，统一规范化为逗号分隔字符串
 const handleCheckboxSelect = (key, e) => {
    let val = e.detail.value;
    if (typeof val === 'string') {
-        selectedValues[key] = val ? val.split(',').map((s) => s.trim()) : [];
+        // H5 平台返回逗号分隔字符串，直接使用
+        selectedValues[key] = val || '';
    } else if (Array.isArray(val)) {
-        selectedValues[key] = val.map((v) => String(v));
+        // 小程序返回数组，转为逗号分隔字符串
+        selectedValues[key] = val ? val.join(',') : '';
    } else {
-        selectedValues[key] = [];
+        selectedValues[key] = '';
    }
 };

-// 判断地区选项是否被选中（兼容数组和字符串）
+// 判断地区选项是否被选中（area 统一为逗号分隔字符串）
 const isAreaSelected = (value) => {
    const areaVal = selectedValues.area;
-    if (Array.isArray(areaVal)) {
-        return areaVal.includes(value);
-    }
    if (typeof areaVal === 'string' && areaVal) {
        return areaVal.split(',').includes(value);
    }
@@ -262,7 +339,7 @@ const isAreaSelected = (value) => {
 const handleClear = () => {
    Object.keys(selectedValues).forEach((key) => {
        if (key === 'area') {
-            selectedValues[key] = [];
+            selectedValues[key] = '';
        } else {
            selectedValues[key] = '';
        }
@@ -272,15 +349,7 @@ const handleClear = () => {
 // 确认筛选
 const handleConfirm = () => {
    const payload = { ...selectedValues };
-    // 将多选的地区数组转为逗号分隔字符串（兼容各种格式）
-    if (Array.isArray(payload.area) && payload.area.length > 0) {
-        payload.area = payload.area.map((v) => String(v)).join(',');
-    } else if (typeof payload.area === 'string' && payload.area) {
-        // 如果已经是逗号分隔字符串，保持原样
-        payload.area = payload.area;
-    } else {
-        payload.area = '';
-    }
+    // area 已统一为逗号分隔字符串，无需额外转换
    console.log('[new-filter-page] area value to emit:', payload.area);
    // 将选中的薪资区间转换为 minSalary / maxSalary 参数
    // 始终带上 minSalary / maxSalary（含空值），便于父组件在清除时移除旧值
@@ -322,7 +391,7 @@ const handleClose = () => {
 }

 .filter-header {
-    height: 96rpx;
+    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
@@ -382,6 +451,33 @@ const handleClose = () => {
            }
        }
    }
+
+    .header-close-btn {
+        display: flex;
+        align-items: center;
+        gap: 8rpx;
+        padding: 12rpx 24rpx;
+        border-radius: 8rpx;
+        border: 1rpx solid #256BFA;
+        background: rgba(37, 107, 250, 0.08);
+
+        .close-text {
+            font-size: 39rpx;
+            color: #256BFA;
+        }
+
+        &:active {
+            background: rgba(37, 107, 250, 0.18);
+            transform: scale(0.96);
+        }
+    }
+}
+
+.filter-body {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
 }

 .filter-body {
@@ -392,35 +488,40 @@ const handleClose = () => {
 }

 .filter-tabs {
-    width: 200rpx;
-    border-right: 1rpx solid #eee;
-    background-color: #f8f8f8;
    display: flex;
    flex-direction: column;
+    width: 250rpx;
+    border-right: 1rpx solid #eee;
+    background-color: #f9f9f9;
+    box-shadow: 3rpx 0 15rpx rgba(0, 0, 0, 0.05);
+    height: 100%;
+    box-sizing: border-box;

    .tab-item {
-        height: 100rpx;
-        line-height: 100rpx;
+        height: 130rpx;
+        line-height: 130rpx;
        text-align: center;
-        font-size: 28rpx;
+        font-size: 42rpx;
        color: #666;
        position: relative;
        transition: all 0.3s ease;
+        border-bottom: 1rpx solid #f0f0f0;

        &.active {
            color: #256BFA;
            font-weight: 600;
            background-color: #fff;
+            box-shadow: 3rpx 0 10rpx rgba(37, 107, 250, 0.1);
            
            &::after {
                content: '';
                position: absolute;
-                left: 0;
+                right: 0;
                top: 25%;
-                width: 4rpx;
+                width: 6rpx;
                height: 50%;
                background-color: #256BFA;
-                border-radius: 2rpx;
+                border-radius: 3rpx 0 0 3rpx;
            }
        }

@@ -430,24 +531,23 @@ const handleClose = () => {
    }
 }

-.filter-right {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-}
-
 .filter-content {
    flex: 1;
-    padding: 40rpx 32rpx;
-    overflow-y: auto;
+    padding: 30rpx 0rpx;
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 160rpx;
+    box-sizing: border-box;
 }

 .content-section {
+    padding: 0 4%;
+    overflow-y: auto;
+    flex: 12;
    .radio-item {
            display: flex;
            align-items: center;
-            padding: 30rpx 0;
+            padding: 45rpx 0;
            border-bottom: 1rpx solid #f0f0f0;
            transition: all 0.3s ease;
            position: relative;
@@ -461,9 +561,9 @@ const handleClose = () => {
            }

            radio {
-                width: 28rpx;
-                height: 28rpx;
-                margin-right: 24rpx;
+                width: 42rpx;
+                height: 42rpx;
+                margin-right: 36rpx;
                transform: scale(1);
                display: flex;
                align-items: center;
@@ -471,10 +571,10 @@ const handleClose = () => {
            }

            radio .wx-radio-input {
-                width: 28rpx;
-                height: 28rpx;
+                width: 42rpx;
+                height: 42rpx;
                border-radius: 50%;
-                border: 2rpx solid #ccc;
+                border: 3rpx solid #ccc;
                background: transparent;
            }

@@ -484,11 +584,11 @@ const handleClose = () => {
            }

            radio .wx-radio-input::before {
-                width: 16rpx;
-                height: 16rpx;
-                line-height: 16rpx;
+                width: 24rpx;
+                height: 24rpx;
+                line-height: 24rpx;
                text-align: center;
-                font-size: 12rpx;
+                font-size: 18rpx;
                color: #fff;
                background: transparent;
                transform: translate(-50%, -50%) scale(0);
@@ -501,38 +601,40 @@ const handleClose = () => {
            }

            .option-label {
-                font-size: 30rpx;
+                font-size: 45rpx;
                color: #333;
                flex: 1;
                font-weight: 400;
-                line-height: 40rpx;
+                line-height: 60rpx;
            }
        }
 }

 .filter-footer {
-    height: 160rpx;
+    height: 200rpx;
+    flex: 1;
    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;
+    box-shadow: 0 -3rpx 15rpx rgba(0, 0, 0, 0.05);
+    padding: 30rpx 0;
    flex-shrink: 0;
-    position: relative;
    z-index: 10;
+    margin-top: auto;
+    box-sizing: border-box;

    .footer-btn {
        flex: 1;
-        margin: 0;
-        border-radius: 16rpx;
-        height: 80rpx;
-        line-height: 80rpx;
-        font-size: 32rpx;
+        margin: 0 40rpx;
+        border-radius: 24rpx;
+        height: 100rpx;
+        line-height: 100rpx;
+        font-size: 45rpx;
        transition: all 0.3s ease;
        font-weight: 500;

        &:first-child {
-            margin-right: 20rpx;
+            margin-right: 30rpx;
            background-color: #f5f5f5;
            color: #666;
            border: 1rpx solid #e0e0e0;
--- a/pages/index/components/index-one.vue
+++ b/pages/index/components/index-one.vue