筛选条件功能开发

components/renderJobs/renderJobs.vue

@@ -28,7 +28,7 @@
                         :blat="latitude"
                         :blong="longitude"
                     ></convert-distance>
-                    <dict-Label class="mar_le10" dictType="area" :value="job.jobLocationAreaCode"></dict-Label>
+                    {{ job.regionName || config.appInfo.areaName }}
                 </view>
             </view>
         </view>
@@ -40,6 +40,7 @@
 
 <script setup>
 import { inject, computed, toRaw } from 'vue';
+import config from '@/config.js';
 const { insertSortData, navTo, vacanciesTo } = inject('globalFunction');
 import { useRecommedIndexedDBStore } from '@/stores/useRecommedIndexedDBStore.js';
 const recommedIndexDb = useRecommedIndexedDBStore();

pages/index/components/index-one.vue

@@ -46,7 +46,7 @@
             :class="{ 'hidden-height': shouldHideTop }"
         >
             <view class="container-search" v-if="shouldShowJobSeekerContent">
-                <view class="search-input button-click" @click="navTo('/pages/search/search', { query: { regionCode: selectedCity.code, regionName: selectedCity.name } })">
+                <view class="search-input button-click" @click="goToSearch">
                     <uni-icons class="iconsearch" color="#666666" type="search" size="18"></uni-icons>
                     <text class="inpute">职位名称、薪资要求等</text>
                 </view>
@@ -279,9 +279,15 @@
                         {{ item.text }}
                     </view>
                 </view>
-                <view class="btm-right button-click" @click="openFilter">
+                <view class="btm-right-group">
-                    筛选
+                    <view class="btm-right button-click" @click="openFilter">
-                    <image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
+                        筛选
+                        <image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
+                    </view>
+                    <view class="btm-clear button-click" v-if="hasActiveFilters" @click="clearFilters">
+                        <uni-icons type="trash" size="18" color="#256BFA"></uni-icons>
+                        <text>清除</text>
+                    </view>
                 </view>
             </view>
         </view>
@@ -345,10 +351,7 @@
                                         </view>
                                     </view>
                                     <view class="falls-card-company2">
-                                        <image class="point3" src="/static/icon/point3.png"></image>
+                                        {{ job.companyName }}
-                                        <view class="fl_1">
-                                            {{ job.companyName }}
-                                        </view>
                                     </view>
                                     <!-- 招聘者显示上下架开关 -->
                                     <view class="falls-card-actions" v-if="isRecruiter">
@@ -414,7 +417,7 @@
                                         </view>
                                     </view>
                                     <view class="falls-card-company" v-show="isShowJw !== 3">
-                                        {{ config.appInfo.areaName }}
+                                        {{ job.regionName  }}
                                         <!-- {{ job.jobLocation }} -->
                                         <dict-Label dictType="jobLocationAreaCode" :value="job.jobLocationAreaCode"></dict-Label>
                                     </view>
@@ -433,10 +436,7 @@
                                         </view>
                                     </view>
                                     <view class="falls-card-company2">
-                                        <image class="point3" src="/static/icon/point3.png"></image>
+                                        {{ job.companyName }}
-                                        <view class="fl_1">
-                                            {{ job.companyName }}
-                                        </view>
                                     </view>
                                     <!-- 招聘者显示上下架开关 -->
                                     <view class="falls-card-actions" v-if="isRecruiter">
@@ -733,6 +733,15 @@ const showFilter = ref(false);
 const selectFilterModel = ref(null);
 const showModel = ref(false);
 const showNewFilter = ref(false);
+// 判断是否有活跃的筛选条件
+const hasActiveFilters = computed(() => {
+    // 城市选择
+    if (selectedCity.value.code) return true;
+    // 筛选弹窗的条件（除了 order 之外还有其他字段）
+    const searchKeys = Object.keys(pageState.search).filter(k => k !== 'order');
+    if (searchKeys.length > 0) return true;
+    return false;
+});
 // 选中的城市
 const selectedCity = ref({ code: '', name: '' });
 const rangeOptions = ref([
@@ -893,6 +902,19 @@ const handleLoginSuccess = () => {
 // H5环境下从URL获取token并自动登录
 // onLoad 函数已移至下方，包含筛选参数处理
 
+// 跳转到搜索页面，筛选弹窗的地区用 area，添加旁地区的城市用 regionCode
+const goToSearch = () => {
+    const query = {
+        regionCode: selectedCity.value.code,
+        regionName: selectedCity.value.name,
+    };
+    // area 只有在筛选弹窗选了地区时才传
+    if (pageState.search.area) {
+        query.area = pageState.search.area;
+    }
+    navTo('/pages/search/search', { query });
+};
+
 // 处理附近工作点击
 const handleNearbyClick = (options  ) => {
     // #ifdef MP-WEIXIN
@@ -1094,6 +1116,16 @@ function openFilter() {
     emits('onShowTabbar', false);
 }
 
+function clearFilters() {
+    // 清除筛选弹窗条件，保留 order
+    pageState.search = { order: pageState.search.order };
+    // 清除城市选择
+    selectedCity.value = { code: '', name: '' };
+    conditionSearch.value = {};
+    // 刷新列表
+    getJobRecommend('refresh');
+}
+
 function handleNewFilterConfirm(values) {
     pageState.search = {
         ...pageState.search,
@@ -1993,6 +2025,9 @@ defineExpose({ loadData });
                 font-weight: 500;
                 font-size: 66rpx;
                 color: #256BFA;
+        .btm-right-group
+            display: flex
+            align-items: center
         .btm-right
             font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
             font-weight: 400;
@@ -2003,6 +2038,18 @@ defineExpose({ loadData });
                 height: 32rpx;
             .active
                 transform: rotate(180deg)
+        .btm-clear
+            display: flex
+            align-items: center
+            gap: 4rpx
+            padding: 10rpx 16rpx
+            margin-left: 12rpx
+            background: #EBF0FF
+            border: 1rpx solid #B3C6FF
+            border-radius: 10rpx
+            font-size: 36rpx
+            color: #256BFA
+            white-space: nowrap
 .table-list
     background: #F4F4F4
     flex: 1

pages/search/search.vue

@@ -79,13 +79,13 @@ onLoad((query) => {
     if (arr) {
         historyList.value = uni.getStorageSync('searchList');
     }
-    const {job, regionCode, regionName} = query;
+    const {job, area, regionCode} = query;
+    if (area) {
+        pageState.search.area = area;
+    }
     if (regionCode) {
         pageState.search.regionCode = regionCode;
     }
-    if (regionName) {
-        pageState.search.regionName = regionName;
-    }
     if (job) {
         searchValue.value = job;
         searchBtn();