一体机和小程序样式错乱问题修复。

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

@@ -2,134 +2,154 @@
     <view v-if="show" class="filter-container">
         <!-- 头部 -->
         <view class="filter-header">
-            <text class="header-title">筛选</text>
-            <view class="header-close-btn btn-feel" @click="handleClose">
-                <uni-icons type="closeempty" size="18" color="#666"></uni-icons>
-                <text class="close-text">关闭</text>
+            <view class="header-title">筛选</view>
+            <view class="header-close" @click="handleClose">
+                <view class="close-icon"></view>
+            </view>
+        </view>
+        <!-- 主体内容 -->
+        <view class="filter-body">
+        <!-- 左侧标签页 -->
+        <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-body">
-            <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 class="filter-right">
+            <!-- 内容区域 -->
+            <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 === 'salary'" class="content-section">
+                    <radio-group @change="(e) => handleSelect('salary', e)">
+                        <label
+                            v-for="option in salaryOptions"
+                            :key="option.value"
+                            class="radio-item"
+                            :class="{ checked: selectedValues['salary'] === String(option.value) }"
+                        >
+                            <radio
+                                :value="String(option.value)"
+                                :checked="selectedValues['salary'] === 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 === 'area'" class="content-section">
+                    <checkbox-group @change="(e) => handleCheckboxSelect('area', e)">
+                        <label
+                            v-for="option in areaOptions"
+                            :key="option.value"
+                            class="radio-item"
+                            :class="{ checked: isAreaSelected(String(option.value)) }"
+                        >
+                            <checkbox
+                                :value="String(option.value)"
+                                :checked="isAreaSelected(String(option.value))"
+                            />
+                            <text class="option-label">{{ option.label }}</text>
+                        </label>
+                    </checkbox-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-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>
                 <button class="footer-btn confirm-btn" @click="handleConfirm">确认</button>
             </view>
         </view>
-        </view>
-
-
+        </view><!-- end filter-body -->
     </view>
 </template>
 
 <script setup>
-import { ref, reactive, onBeforeMount, watch } from 'vue';
+import { ref, reactive, onBeforeMount } from 'vue';
 import useDictStore from '@/stores/useDictStore';
-const { getTransformChildren } = useDictStore();
+const dictStore = useDictStore();
+const { getTransformChildren } = dictStore;
 
 const props = defineProps({
     show: Boolean,
@@ -151,6 +171,7 @@ const getJobTypeData = () => {
 const tabs = [
     { key: 'education', label: '学历要求' },
     { key: 'experience', label: '工作经验' },
+    { key: 'salary', label: '薪资' },
     { key: 'scale', label: '公司规模' },
     { key: 'jobType', label: '岗位类型' },
     { key: 'area', label: '地区' }
@@ -163,47 +184,78 @@ const activeTab = ref('education');
 const selectedValues = reactive({
     education: '',
     experience: '',
+    salary: '',
     scale: '',
-    jobType: '',
-    area: []
+    area: [],
+    jobType: ''
 });
 
 // 从字典获取的选项数据
 const educationOptions = ref([]);
 const experienceOptions = ref([]);
 const scaleOptions = ref([]);
-const jobTypeOptions = 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 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();
+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 handleSelect = (key, e) => {
     selectedValues[key] = e.detail.value;
 };
 
-// 处理地区多选
-const handleAreaSelect = (e) => {
-    selectedValues.area = e.detail.value;
+// 处理多选选项选择（地区）
+// 兼容不同平台：H5 可能返回逗号分隔字符串，小程序返回数组
+const handleCheckboxSelect = (key, e) => {
+    let val = e.detail.value;
+    if (typeof val === 'string') {
+        selectedValues[key] = val ? val.split(',').map((s) => s.trim()) : [];
+    } else if (Array.isArray(val)) {
+        selectedValues[key] = val.map((v) => String(v));
+    } else {
+        selectedValues[key] = [];
+    }
+};
+
+// 判断地区选项是否被选中（兼容数组和字符串）
+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);
+    }
+    return false;
 };
 
 // 清除所有选择
@@ -219,8 +271,33 @@ const handleClear = () => {
 
 // 确认筛选
 const handleConfirm = () => {
-    console.log('selectedValues:', selectedValues);
-    emit('confirm', selectedValues);
+    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 = '';
+    }
+    console.log('[new-filter-page] area value to emit:', payload.area);
+    // 将选中的薪资区间转换为 minSalary / maxSalary 参数
+    // 始终带上 minSalary / maxSalary（含空值），便于父组件在清除时移除旧值
+    let minSalary = '';
+    let maxSalary = '';
+    if (payload.salary) {
+        const selected = salaryOptions.value.find((item) => item.value === payload.salary);
+        if (selected) {
+            minSalary = selected.min;
+            maxSalary = selected.max;
+        }
+    }
+    payload.minSalary = minSalary;
+    payload.maxSalary = maxSalary;
+    delete payload.salary;
+    console.log('selectedValues:', payload);
+    emit('confirm', payload);
     handleClose();
 };
 
@@ -242,42 +319,67 @@ const handleClose = () => {
     z-index: 9999;
     display: flex;
     flex-direction: column;
-    box-sizing: border-box;
 }
 
 .filter-header {
-    height: 88rpx;
+    height: 96rpx;
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding: 24rpx 32rpx;
+    justify-content: center;
+    padding: 0 32rpx;
     border-bottom: 1rpx solid #eee;
     background-color: #fff;
     flex-shrink: 0;
+    position: relative;
 
     .header-title {
-        font-size: 48rpx;
+        font-size: 34rpx;
         font-weight: 600;
         color: #333;
     }
 
-    .header-close-btn {
+    .header-close {
+        position: absolute;
+        right: 32rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 48rpx;
+        height: 48rpx;
         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;
-        }
+        justify-content: center;
+        padding: 10rpx;
+        border-radius: 50%;
+        transition: all 0.3s ease;
 
         &:active {
-            background: rgba(37, 107, 250, 0.18);
-            transform: scale(0.96);
+            background-color: rgba(37, 107, 250, 0.1);
+        }
+
+        .close-icon {
+            position: relative;
+            width: 28rpx;
+            height: 28rpx;
+
+            &::before,
+            &::after {
+                content: '';
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                width: 4rpx;
+                height: 28rpx;
+                border-radius: 2rpx;
+                background: #5A5A68;
+            }
+
+            &::before {
+                transform: translate(-50%, -50%) rotate(45deg);
+            }
+
+            &::after {
+                transform: translate(-50%, -50%) rotate(-45deg);
+            }
         }
     }
 }
@@ -290,40 +392,35 @@ 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: 130rpx;
-        line-height: 130rpx;
+        height: 100rpx;
+        line-height: 100rpx;
         text-align: center;
-        font-size: 42rpx;
+        font-size: 28rpx;
         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;
-                right: 0;
+                left: 0;
                 top: 25%;
-                width: 6rpx;
+                width: 4rpx;
                 height: 50%;
                 background-color: #256BFA;
-                border-radius: 3rpx 0 0 3rpx;
+                border-radius: 2rpx;
             }
         }
 
@@ -333,23 +430,24 @@ const handleClose = () => {
     }
 }
 
-.filter-content {
+.filter-right {
     flex: 1;
-    padding: 30rpx 0rpx;
     display: flex;
     flex-direction: column;
-    padding-bottom: 160rpx;
-    box-sizing: border-box;
+    position: relative;
+}
+
+.filter-content {
+    flex: 1;
+    padding: 40rpx 32rpx;
+    overflow-y: auto;
 }
 
 .content-section {
-    padding: 0 4%;
-    overflow-y: auto;
-    flex: 12;
     .radio-item {
             display: flex;
             align-items: center;
-            padding: 45rpx 0;
+            padding: 30rpx 0;
             border-bottom: 1rpx solid #f0f0f0;
             transition: all 0.3s ease;
             position: relative;
@@ -363,9 +461,9 @@ const handleClose = () => {
             }
 
             radio {
-                width: 42rpx;
-                height: 42rpx;
-                margin-right: 36rpx;
+                width: 28rpx;
+                height: 28rpx;
+                margin-right: 24rpx;
                 transform: scale(1);
                 display: flex;
                 align-items: center;
@@ -373,10 +471,10 @@ const handleClose = () => {
             }
 
             radio .wx-radio-input {
-                width: 42rpx;
-                height: 42rpx;
+                width: 28rpx;
+                height: 28rpx;
                 border-radius: 50%;
-                border: 3rpx solid #ccc;
+                border: 2rpx solid #ccc;
                 background: transparent;
             }
 
@@ -386,11 +484,11 @@ const handleClose = () => {
             }
 
             radio .wx-radio-input::before {
-                width: 24rpx;
-                height: 24rpx;
-                line-height: 24rpx;
+                width: 16rpx;
+                height: 16rpx;
+                line-height: 16rpx;
                 text-align: center;
-                font-size: 18rpx;
+                font-size: 12rpx;
                 color: #fff;
                 background: transparent;
                 transform: translate(-50%, -50%) scale(0);
@@ -403,40 +501,38 @@ const handleClose = () => {
             }
 
             .option-label {
-                font-size: 45rpx;
+                font-size: 30rpx;
                 color: #333;
                 flex: 1;
                 font-weight: 400;
-                line-height: 60rpx;
+                line-height: 40rpx;
             }
         }
 }
 
 .filter-footer {
-    height: 200rpx;
-    flex: 1;
+    height: 160rpx;
     display: flex;
     border-top: 1rpx solid #eee;
     background-color: #fff;
-    box-shadow: 0 -3rpx 15rpx rgba(0, 0, 0, 0.05);
-    padding: 30rpx 0;
+    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
+    padding: 20rpx 32rpx 100rpx;
     flex-shrink: 0;
+    position: relative;
     z-index: 10;
-    margin-top: auto;
-    box-sizing: border-box;
 
     .footer-btn {
         flex: 1;
-        margin: 0 40rpx;
-        border-radius: 24rpx;
-        height: 100rpx;
-        line-height: 100rpx;
-        font-size: 45rpx;
+        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: 30rpx;
+            margin-right: 20rpx;
             background-color: #f5f5f5;
             color: #666;
             border: 1rpx solid #e0e0e0;

components/renderJobs/renderJobs.vue

@@ -21,14 +21,8 @@
             </view>
             <view class="card-bottom">
                 <view>{{ job.postingDate }}</view>
-                <view>
-                    <convert-distance
-                        :alat="job.latitude"
-                        :along="job.longitude"
-                        :blat="latitude"
-                        :blong="longitude"
-                    ></convert-distance>
-                    <dict-Label class="mar_le10" dictType="area" :value="job.jobLocationAreaCode"></dict-Label>
+                <view class="card-bottom-right">
+                    <text v-if="job.regionName">地区：{{ job.regionName }}</text>
                 </view>
             </view>
         </view>

pages/search/search.vue

@@ -1,9 +1,9 @@
 <template>
     <view class="container safe-area-top">
         <!-- 自定义头部搜索框 -->
-        <view class="custom-header">
+        <view class="custom-header" :style="{ paddingTop: statusBarHeight + 'px' }">
             <view class="top">
-                <!-- <image class="btnback button-click" src="@/static/icon/back.png" @click="navBack"></image> -->
+                <image class="btnback button-click" src="@/static/icon/back.png" @click="navBack"></image>
                 <view class="search-box">
                     <uni-icons
                         class="iconsearch"
@@ -55,6 +55,11 @@ import { storeToRefs } from 'pinia';
 import { useColumnCount } from '@/hook/useColumnCount';
 import img from '@/static/icon/filter.png';
 const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
+const statusBarHeight = ref(0);
+// #ifdef H5
+const sysInfo = uni.getSystemInfoSync();
+statusBarHeight.value = sysInfo.statusBarHeight || 0;
+// #endif
 const searchValue = ref('');
 const historyList = ref([]);
 const searchParams = ref({});
@@ -79,7 +84,16 @@ onLoad((query) => {
     if (arr) {
         historyList.value = uni.getStorageSync('searchList');
     }
-    const {job} = query;
+    const {job, area, regionCode} = query;
+    // 从首页筛选条件传入的地区和区域编码
+    console.log('[search-page] onLoad query:', JSON.stringify(query));
+    if (area) {
+        pageState.search.area = String(area);
+        console.log('[search-page] set area:', pageState.search.area);
+    }
+    if (regionCode) {
+        pageState.search.regionCode = String(regionCode);
+    }
     if (job) {
         searchValue.value = job;
         searchBtn();
@@ -161,6 +175,7 @@ function getJobList(type = 'add') {
         ...pageState.search,
         jobTitle: searchValue.value,
     };
+    console.log('[search-page] getJobList params:', JSON.stringify(params));
 
     $api.createRequest('/app/job/list', params, 'GET', true).then((resData) => {
         const { rows, total } = resData;