diff --git a/components/new-filter-page/new-filter-page.vue b/components/new-filter-page/new-filter-page.vue index f47565e..c834b8c 100644 --- a/components/new-filter-page/new-filter-page.vue +++ b/components/new-filter-page/new-filter-page.vue @@ -1,5 +1,14 @@ @@ -176,7 +186,7 @@ const selectedValues = reactive({ experience: '', salary: '', scale: '', - area: '', + area: [], jobType: '' }); @@ -218,21 +228,60 @@ 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 = () => { 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 = ''; @@ -269,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; @@ -295,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; diff --git a/components/renderJobs/renderJobs.vue b/components/renderJobs/renderJobs.vue index 3354ce2..9731062 100644 --- a/components/renderJobs/renderJobs.vue +++ b/components/renderJobs/renderJobs.vue @@ -21,14 +21,8 @@ {{ job.postingDate }} - - - + + 地区:{{ job.regionName }} diff --git a/pages/index/components/index-one.vue b/pages/index/components/index-one.vue index a860d95..0ab5ddc 100644 --- a/pages/index/components/index-one.vue +++ b/pages/index/components/index-one.vue @@ -40,7 +40,7 @@ - + 职位名称、薪资要求等 @@ -263,9 +263,14 @@ {{ item.text }} - - 筛选 - + + + 清除筛选 + + + 筛选 + + @@ -564,6 +569,12 @@ const shouldShowCompanyContent = computed(() => { return userType === 0; }); +// 判断是否有筛选条件(用于显示/隐藏清除按钮) +const hasFilterConditions = computed(() => { + const searchKeys = Object.keys(pageState.search).filter((k) => k !== 'order' && pageState.search[k]); + return searchKeys.length > 0 || Object.keys(conditionSearch.value).length > 0 || Boolean(selectedCity.value.code); +}); + // 判断当前用户是否为招聘者(企业用户) const isRecruiter = computed(() => { if (!hasLogin.value) { @@ -1067,6 +1078,38 @@ function openFilter() { emits('onShowTabbar', false); } +// 跳转到搜索页,并携带筛选条件 +function navToSearch() { + const query = {}; + // 携带筛选弹窗中选择的地区(确保是逗号分隔字符串) + const areaVal = pageState.search.area; + if (areaVal && String(areaVal)) { + query.area = String(areaVal); + } + // 携带城市选择器中选择的regionCode + if (conditionSearch.value.regionCode) { + query.regionCode = String(conditionSearch.value.regionCode); + } + console.log('[navToSearch] query params:', query); + navTo('/pages/search/search', { query }); +} + +// 清除所有筛选条件 +function clearFilter() { + // 保留 order 排序方式 + const currentOrder = pageState.search.order; + pageState.search = { order: currentOrder }; + // 清除城市选择 + conditionSearch.value = {}; + selectedCity.value = { code: '', name: '' }; + // 刷新列表 + if (state.tabIndex === 'all') { + getJobRecommend('refresh'); + } else { + getJobList('refresh'); + } +} + function handleNewFilterConfirm(values) { pageState.search = { ...pageState.search, @@ -1993,16 +2036,26 @@ defineExpose({ loadData }); font-weight: 500; font-size: 32rpx; color: #256BFA; - .btm-right - font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-weight: 400; - font-size: 32rpx; - color: #6C7282; - .right-sx - width: 26rpx; - height: 26rpx; - .active - transform: rotate(180deg) + .btm-right-wrap + display: flex + align-items: center + .clear-btn + font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-weight: 400; + font-size: 28rpx; + color: #999; + margin-right: 20rpx; + white-space: nowrap; + .btm-right + font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-weight: 400; + font-size: 32rpx; + color: #6C7282; + .right-sx + width: 26rpx; + height: 26rpx; + .active + transform: rotate(180deg) .table-list background: #F4F4F4 flex: 1 diff --git a/pages/search/search.vue b/pages/search/search.vue index a08c1bf..4db610c 100644 --- a/pages/search/search.vue +++ b/pages/search/search.vue @@ -1,9 +1,9 @@