3 Commits

Author SHA1 Message Date
francis-fh
9ce22a7949 一体机和小程序样式错乱问题修复。 2026-07-16 12:36:56 +08:00
Apcallover
43eb458c6a flat:1 2026-07-02 16:19:08 +08:00
Apcallover
809e57347a =【首页】岗位筛选 - 新增按薪资筛选条件(minSalary/maxSalary)
Co-Authored-By: Claude <noreply@anthropic.com>
2026-07-01 14:57:27 +08:00
6 changed files with 639 additions and 480 deletions

3
.gitignore vendored
View File

@@ -23,4 +23,5 @@ pnpm-debug.log*
/output/
/hs_err_pid*
*.local
yarn.lock
yarn.lock
.codegraph

View File

@@ -1,5 +1,14 @@
<template>
<view v-if="show" class="filter-container">
<!-- 头部 -->
<view class="filter-header">
<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
@@ -53,6 +62,24 @@
</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)">
@@ -71,22 +98,22 @@
</radio-group>
</view>
<!-- 地区 -->
<!-- 地区多选 -->
<view v-if="activeTab === 'area'" class="content-section">
<radio-group @change="(e) => handleSelect('area', e)">
<checkbox-group @change="(e) => handleCheckboxSelect('area', e)">
<label
v-for="option in areaOptions"
:key="option.value"
class="radio-item"
:class="{ checked: selectedValues['area'] === String(option.value) }"
:class="{ checked: isAreaSelected(String(option.value)) }"
>
<radio
<checkbox
:value="String(option.value)"
:checked="selectedValues['area'] === String(option.value)"
:checked="isAreaSelected(String(option.value))"
/>
<text class="option-label">{{ option.label }}</text>
</label>
</radio-group>
</checkbox-group>
</view>
<!-- 岗位类型 -->
@@ -114,6 +141,7 @@
<button class="footer-btn confirm-btn" @click="handleConfirm">确认</button>
</view>
</view>
</view><!-- end filter-body -->
</view>
</template>
@@ -143,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: '地区' }
@@ -155,8 +184,9 @@ const activeTab = ref('education');
const selectedValues = reactive({
education: '',
experience: '',
salary: '',
scale: '',
area: '',
area: [],
jobType: ''
});
@@ -167,6 +197,16 @@ 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);
@@ -188,22 +228,76 @@ onBeforeMount(async () => {
}
});
// 处理选项选择
// 处理单选选项选择
const handleSelect = (key, e) => {
selectedValues[key] = 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;
};
// 清除所有选择
const handleClear = () => {
Object.keys(selectedValues).forEach((key) => {
selectedValues[key] = '';
if (key === 'area') {
selectedValues[key] = [];
} else {
selectedValues[key] = '';
}
});
};
// 确认筛选
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();
};
@@ -224,22 +318,33 @@ const handleClose = () => {
background-color: #fff;
z-index: 9999;
display: flex;
flex-direction: row;
flex-direction: column;
}
.filter-header {
height: 96rpx;
display: flex;
align-items: center;
justify-content: space-between;
justify-content: center;
padding: 0 32rpx;
border-bottom: 1rpx solid #eee;
background-color: #fff;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
flex-shrink: 0;
position: relative;
.back-btn {
font-size: 36rpx;
.header-title {
font-size: 34rpx;
font-weight: 600;
color: #333;
}
.header-close {
position: absolute;
right: 32rpx;
top: 50%;
transform: translateY(-50%);
width: 48rpx;
height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
@@ -250,15 +355,42 @@ const handleClose = () => {
&:active {
background-color: rgba(37, 107, 250, 0.1);
}
}
.filter-title {
font-size: 34rpx;
font-weight: 600;
color: #333;
.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);
}
}
}
}
.filter-body {
flex: 1;
display: flex;
flex-direction: row;
overflow: hidden;
}
.filter-tabs {
width: 200rpx;
border-right: 1rpx solid #eee;

View File

@@ -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>

50
package-lock.json generated
View File

@@ -1,11 +1,13 @@
{
"name": "ks-app-employment-service",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"dependencies": {
"@dcloudio/uni-ui": "^1.5.11",
"crypto-js": "^3.3.0",
"dayjs": "^1.11.19",
"mp-html": "^2.5.2",
"sm-crypto": "^0.3.13"
},
"devDependencies": {
@@ -13,40 +15,36 @@
}
},
"node_modules/@dcloudio/uni-ui": {
"lockfileVersion": 1,
"dependencies": {
"@dcloudio/uni-ui": {
"version": "1.5.11",
"resolved": "https://registry.npmmirror.com/@dcloudio/uni-ui/-/uni-ui-1.5.11.tgz",
"integrity": "sha512-DBtk046ofmeFd82zRI7d89SoEwrAxYzUN3WVPm1DIBkpLPG5F5QDNkHMnZGu2wNrMEmGBjBpUh3vqEY1L3jaMw=="
"version": "1.5.12",
"resolved": "https://registry.npmjs.org/@dcloudio/uni-ui/-/uni-ui-1.5.12.tgz",
"integrity": "sha512-mGDl2OZSz7D8xcUAzJegWDHOqB4MEFBSW9Esb/oJiu2/3Gk9+P/Z4bA4JZ9jv9VWBYbMrYwaTfK1Z728kABdYg==",
"license": "Apache-2.0"
},
"node_modules/crypto-js": {
"version": "4.2.0",
"resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz",
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
"integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
"dev": true
"dev": true,
"license": "MIT"
},
"node_modules/dayjs": {
"crypto-js": {
"version": "3.3.0",
"resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-3.3.0.tgz",
"integrity": "sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q=="
"version": "1.11.21",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.21.tgz",
"integrity": "sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==",
"license": "MIT"
},
"dayjs": {
"version": "1.11.19",
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.19.tgz",
"integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw=="
},
"jsbn": {
"node_modules/jsbn": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/jsbn/-/jsbn-1.1.0.tgz",
"integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A=="
"resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
"integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==",
"license": "MIT"
},
"sm-crypto": {
"version": "0.3.13",
"resolved": "https://registry.npmmirror.com/sm-crypto/-/sm-crypto-0.3.13.tgz",
"integrity": "sha512-ztNF+pZq6viCPMA1A6KKu3bgpkmYti5avykRHbcFIdSipFdkVmfUw2CnpM2kBJyppIalqvczLNM3wR8OQ0pT5w==",
"requires": {
"node_modules/sm-crypto": {
"version": "0.3.14",
"resolved": "https://registry.npmjs.org/sm-crypto/-/sm-crypto-0.3.14.tgz",
"integrity": "sha512-sR7NuGAJH93Om8keAF2/rj1EqFzEiUey4aKGyDo3nQ2BiVqhgq8UkiIoIp5qhV9w4pG7qArhfqyewcG8AbhXbg==",
"license": "MIT",
"dependencies": {
"jsbn": "^1.1.0"
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -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;