flat:AI+

pages/nearby/nearby.vue

@@ -8,44 +8,112 @@
         </view>
         <view class="nearby-content">
             <swiper class="swiper" :current="state.current" @change="changeSwiperType">
-                <swiper-item class="swiper-item" disable-touch>
-                    <oneComponent></oneComponent>
-                </swiper-item>
-                <swiper-item class="swiper-item">
-                    <twoComponent></twoComponent>
-                </swiper-item>
-                <swiper-item class="swiper-item">
-                    <threeComponent></threeComponent>
-                </swiper-item>
-                <swiper-item class="swiper-item">
-                    <fourComponent></fourComponent>
+                <!-- 动态绑定ref -->
+                <swiper-item class="swiper-item" v-for="(_, index) in 4" :key="index">
+                    <component
+                        :is="components[index]"
+                        @onFilter="addfileter"
+                        :ref="(el) => handelComponentsRef(el, index)"
+                    />
                 </swiper-item>
             </swiper>
         </view>
+        <!-- 弹窗  -->
+        <screeningJobRequirementsVue
+            :area="false"
+            v-model:show="showFilter"
+            @confirm="handleFilterConfirm"
+        ></screeningJobRequirementsVue>
+        <screeningJobRequirementsVue
+            :area="false"
+            v-model:show="showFilter1"
+            @confirm="handleFilterConfirm"
+        ></screeningJobRequirementsVue>
+        <screeningJobRequirementsVue
+            :area="false"
+            v-model:show="showFilter2"
+            @confirm="handleFilterConfirm"
+        ></screeningJobRequirementsVue>
+        <screeningJobRequirementsVue
+            :area="false"
+            v-model:show="showFilter3"
+            @confirm="handleFilterConfirm"
+        ></screeningJobRequirementsVue>
     </view>
 </template>
 
 <script setup>
+import screeningJobRequirementsVue from '@/components/screening-job-requirements/screening-job-requirements.vue';
 import oneComponent from './components/one.vue';
 import twoComponent from './components/two.vue';
 import threeComponent from './components/three.vue';
 import fourComponent from './components/four.vue';
 import { reactive, inject, watch, ref, onMounted } from 'vue';
 import { onLoad, onShow } from '@dcloudio/uni-app';
+const { $api, debounce, throttle } = inject('globalFunction');
+const loadedMap = reactive([false, false, false, false]);
+const swiperRefs = [ref(null), ref(null), ref(null), ref(null)];
+const components = [oneComponent, twoComponent, threeComponent, fourComponent];
+
+const filterId = ref(0);
+const showFilter = ref(false);
+const showFilter1 = ref(false);
+const showFilter2 = ref(false);
+const showFilter3 = ref(false);
+
 const state = reactive({
-    current: 2,
+    current: 0,
     all: [{}],
 });
 
-onLoad(() => {});
+// filter education aera scale 。。。。
+function handleFilterConfirm(e) {
+    swiperRefs[filterId.value].value?.handleFilterConfirm(e);
+}
 
+function addfileter(val) {
+    filterId.value = val;
+    switch (val) {
+        case 0:
+            showFilter.value = true;
+            break;
+        case 1:
+            showFilter1.value = true;
+            break;
+        case 2:
+            showFilter2.value = true;
+            break;
+        case 3:
+            showFilter3.value = true;
+            break;
+    }
+}
+
+onMounted(() => {
+    handleTabChange(state.current);
+});
+
+const handelComponentsRef = (el, index) => {
+    if (el) {
+        swiperRefs[index].value = el;
+    }
+};
 // 查看消息类型
 function changeSwiperType(e) {
-    const currented = e.detail.current;
-    state.current = currented;
+    const index = e.detail.current;
+    state.current = index;
+    handleTabChange(index);
 }
 function changeType(index) {
     state.current = index;
+    handleTabChange(index);
+}
+
+function handleTabChange(index) {
+    if (!loadedMap[index]) {
+        swiperRefs[index].value?.loadData();
+        loadedMap[index] = true;
+    }
 }
 </script>
 
@@ -68,7 +136,7 @@ function changeType(index) {
             width: calc(100%  / 4);
             z-index: 9
         .actived
-            width: 169rpx;
+            // width: 169rpx;
             height: 63rpx;
             background: #13C57C;
             box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);