ks-app-employment-service/pages/nearby/nearby.vue

<template>
    <view class="app-container">
        <view class="nearby-head">
            <view class="head-item" :class="{ actived: state.current === 0 }" @click="changeType(0)">附近工作</view>
            <view class="head-item" :class="{ actived: state.current === 1 }" @click="changeType(1)">区县工作</view>
            <view class="head-item" :class="{ actived: state.current === 2 }" @click="changeType(2)">地铁周边</view>
            <view class="head-item" :class="{ actived: state.current === 3 }" @click="changeType(3)">商圈附近</view>
        </view>
        <view class="nearby-content">
            <swiper class="swiper" :current="state.current" @change="changeSwiperType">
                <!-- 动态绑定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: 0,
    all: [{}],
});

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

<style lang="stylus" scoped>
.app-container
    width: 100%;
    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
    background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
    display: flex;
    flex-direction: column;
    .nearby-head
        height: 63rpx;
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 63rpx;
        text-align: center;
        display: flex;
        align-items: center;
        .head-item
            width: calc(100%  / 4);
            z-index: 9
        .actived
            // width: 169rpx;
            height: 63rpx;
            background: #13C57C;
            box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
            border-radius: 0rpx 0rpx 0rpx 0rpx;
    .nearby-content
        flex: 1;
        overflow: hidden;
        .swiper
            height: 100%;
            .swiper-item
                display: flex;
                flex-direction: column;
</style>