flat: 暂存

2025-11-07 11:30:07 +08:00
parent 7d2faa6c1b
commit e12241b0e4
24 changed files with 980 additions and 237 deletions
--- a/pages/nearby/components/four.vue
+++ b/pages/nearby/components/four.vue
@@ -1,15 +1,26 @@
 <template>
    <scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom">
        <view class="two-head">
-            <view
-                class="head-item"
-                :class="{ active: state.comId === item.commercialAreaId }"
-                v-for="(item, index) in state.comlist"
-                :key="item.commercialAreaName"
-                @click="clickCommercialArea(item)"
-            >
-                {{ item.commercialAreaName }}
+            <view class="head-all">
+                <text>热门商圈</text>
+                <text class="color_333333 button-click" @click="handleOpenBusinessDistrict">
+                    更多
+                    <uni-icons type="forward" color="#333333" size="14"></uni-icons>
+                </text>
            </view>
+            <scroll-view class="scroll-head" :scroll-x="true" :scroll-into-view="activeTab" :show-scrollbar="false">
+                <view class="head-item-content">
+                    <view
+                        class="head-item"
+                        :class="{ active: state.comId === item.commercialAreaId }"
+                        v-for="(item, index) in comlistPuted"
+                        :key="item.commercialAreaName"
+                        @click="clickCommercialArea(item)"
+                    >
+                        {{ item.commercialAreaName }}
+                    </view>
+                </view>
+            </scroll-view>
        </view>
        <view class="nearby-list">
            <view class="nav-filter" @touchmove.stop.prevent>
@@ -70,11 +81,12 @@
        </view>
        <!-- 筛选 -->
        <select-filter ref="selectFilterModel"></select-filter>
+        <select-filter2-col ref="selectFilter2ColModel"></select-filter2-col>
    </scroll-view>
 </template>

 <script setup>
-import { reactive, inject, watch, ref, onMounted, onBeforeUnmount } from 'vue';
+import { reactive, inject, watch, ref, onMounted, onBeforeUnmount, computed } from 'vue';
 import { onLoad, onShow } from '@dcloudio/uni-app';
 const { $api, navTo, debounce, customSystem } = inject('globalFunction');
 import { storeToRefs } from 'pinia';
@@ -87,6 +99,7 @@ const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
 import point2 from '@/static/icon/point2.png';
 import LocationPng from '@/static/icon/Location.png';
 import selectFilter from '@/components/selectFilter/selectFilter.vue';
+import selectFilter2Col from '@/components/selectFilter/selectFilter2Col.vue';

 const emit = defineEmits(['onFilter']);
 const state = reactive({
@@ -96,12 +109,15 @@ const state = reactive({
    comId: 0,
    areaInfo: {},
 });
+const commercialAreaList = ref([]);
 const isLoaded = ref(false);
 const showFilter = ref(false);
 const selectFilterModel = ref();
+const selectFilter2ColModel = ref();
 const fromValue = reactive({
    area: 0,
 });
+const activeTab = ref('');
 const loadmoreRef = ref(null);
 const pageState = reactive({
    page: 0,
@@ -114,6 +130,18 @@ const pageState = reactive({
 });
 const list = ref([]);

+const comlistPuted = computed(() => {
+    // const commercialArea = state.comlist.find((item) => item.commercialAreaId === state.comId);
+    // if (commercialArea) {
+    //     const otherItems = state.comlist.filter((item) => item.commercialAreaId !== state.comId);
+    //     return [commercialArea, ...otherItems];
+    // } else {
+    //     return [state.areaInfo, ...state.comlist];
+    // }
+    // activeTab.value = state.areaInfo.commercialAreaId;
+    return state.comlist;
+});
+
 const rangeOptions = ref([
    { value: 0, text: '推荐' },
    { value: 1, text: '最热' },
@@ -149,7 +177,6 @@ function openFilter() {
                pageState.search[key] = value.join(',');
            }
            showFilter.value = false;
-            console.log(pageState.search);
            getJobList('refresh');
        },
        cancel: () => {
@@ -201,7 +228,7 @@ function changeArea(area, item) {
 }

 function getBusinessDistrict() {
-    $api.createRequest(`/app/common/commercialArea`).then((resData) => {
+    $api.createRequest(`/app/common/commercialArea/getAllData`).then((resData) => {
        if (resData.data.length) {
            state.comlist = resData.data;
            state.areaInfo = resData.data[0];
@@ -266,10 +293,49 @@ function handleFilterConfirm(val) {
    getJobList('refresh');
 }

+function handleOpenBusinessDistrict() {
+    if (commercialAreaList.value.length) {
+        openFilter2Col();
+    } else {
+        getBusinessDistrictList();
+    }
+}
+
+function getBusinessDistrictList() {
+    $api.createRequest(`/app/common/commercialArea`).then((resData) => {
+        if (resData.data.length) {
+            commercialAreaList.value = resData.data;
+            openFilter2Col();
+        }
+    });
+}
+
+function openFilter2Col() {
+    selectFilter2ColModel.value?.open({
+        data: commercialAreaList.value,
+        title: '商圈',
+        currentValue: state.comId,
+        maskClick: true,
+        success: (values) => {
+            pageState.search = {
+                ...pageState.search,
+                latitude: values.latitude,
+                longitude: values.longitude,
+            };
+            state.areaInfo = values;
+            state.comId = values.value;
+            getJobList('refresh');
+        },
+    });
+}
+
 defineExpose({ loadData, handleFilterConfirm });
 </script>

 <style lang="stylus" scoped>
+.scroll-head
+    width: 100%;
+    overflow: hidden;
 .tabchecked
    color:  #4778EC !important
 .nearby-scroll
@@ -277,18 +343,30 @@ defineExpose({ loadData, handleFilterConfirm });
    .two-head
        margin: 22rpx;
        display: flex;
-        flex-wrap: wrap
+        flex-direction: column
+        flex-wrap: no-wrap
        // grid-template-columns: repeat(4, 1fr);
        // grid-column-gap: 10rpx;
        // grid-row-gap: 24rpx;
        border-radius: 17rpx 17rpx 17rpx 17rpx;
+        .head-all{
+            display: flex;
+            justify-content: space-between;
+            align-items: center
+            margin-bottom: 16rpx
+        }
+        .head-item-content{
+            display: flex
+            flex-wrap: nowrap
+        }
        .head-item
+            padding: 0 10rpx
            margin: 10rpx
            white-space: nowrap
-            min-width: 156rpx
+            // min-width: 156rpx
            line-height: 64rpx
            text-align: center;
-            width: fit-content;
+            // width: fit-content;
            font-size: 21rpx;
            font-weight: 400;
            font-size: 28rpx;
@@ -369,4 +447,4 @@ defineExpose({ loadData, handleFilterConfirm });
                    height: 26rpx;
                .active
                    transform: rotate(180deg)
-</style>
+</style>
--- a/pages/nearby/nearby.vue
+++ b/pages/nearby/nearby.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppLayout title="附近" :use-scroll-view="false">
+    <AppLayout title="附近" :use-scroll-view="false" :show-bg-image="false">
        <template #headerleft>
            <view class="btnback">
                <image src="@/static/icon/back.png" @click="navBack"></image>