ks-app-employment-service/packageA/pages/collection/collection.vue

<template>
    <AppLayout title="我的收藏" :show-bg-image="false" :use-scroll-view="false">
        <template #headerleft>
            <view class="btn">
                <image src="@/static/icon/back.png" @click="navBack"></image>
            </view>
        </template>
        <view class="collection-content">
            <view class="header">
                <view class="button-click" :class="{ active: type === 0 }" @click="changeType(0)">工作职位</view>
                <view class="button-click" :class="{ active: type === 1 }" @click="changeType(1)">公司企业</view>
            </view>
            <view class="coll-main">
                <swiper class="swiper" :current="type" @change="changeSwiperType">
                    <swiper-item class="list">
                        <scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
                            <view class="mian">
                                <renderJobs
                                    :list="pageState.list"
                                    v-if="pageState.list.length"
                                    :longitude="longitudeVal"
                                    :latitude="latitudeVal"
                                ></renderJobs>
                                <empty v-else pdTop="200"></empty>
                            </view>
                        </scroll-view>
                    </swiper-item>
                    <swiper-item class="list">
                        <scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLowerCompany">
                            <view class="mian">
                                <renderCompanys
                                    :list="pageCompanyState.list"
                                    v-if="pageCompanyState.list.length"
                                    :longitude="longitudeVal"
                                    :latitude="latitudeVal"
                                ></renderCompanys>
                                <empty v-else pdTop="200"></empty>
                            </view>
                        </scroll-view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
    </AppLayout>
</template>

<script setup>
import { inject, ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import useLocationStore from '@/stores/useLocationStore';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const { $api, navBack } = inject('globalFunction');
const type = ref(0);

const pageState = reactive({
    page: 0,
    list: [],
    total: 0,
    maxPage: 1,
    pageSize: 10,
});

const pageCompanyState = reactive({
    page: 0,
    list: [],
    total: 0,
    maxPage: 1,
    pageSize: 10,
});

onShow(() => {
    getJobList();
    getCompanyList();
});

function changeSwiperType(e) {
    const current = e.detail.current;
    type.value = current;
}

function changeType(e) {
    type.value = e;
}

function handleScrollToLower() {
    getJobList();
}

function handleScrollToLowerCompany() {
    getCompanyList();
}

function getJobList(type = 'add') {
    if (type === 'refresh') {
        pageState.page = 0;
        pageState.maxPage = 1;
    }
    if (type === 'add' && pageState.page < pageState.maxPage) {
        pageState.page += 1;
    }
    let params = {
        current: pageState.page,
        pageSize: pageState.pageSize,
    };
    $api.createRequest('/app/user/collection/job', params).then((resData) => {
        const { rows, total } = resData;
        if (type === 'add') {
            const str = pageState.pageSize * (pageState.page - 1);
            const end = pageState.list.length;
            const reslist = rows;
            pageState.list.splice(str, end, ...reslist);
        } else {
            pageState.list = rows;
        }
        // pageState.list = resData.rows;
        pageState.total = resData.total;
        pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
    });
}

function getCompanyList(type = 'add') {
    if (type === 'refresh') {
        pageCompanyState.page = 0;
        pageCompanyState.maxPage = 1;
    }
    if (type === 'add' && pageCompanyState.page < pageCompanyState.maxPage) {
        pageCompanyState.page += 1;
    }
    let params = {
        current: pageCompanyState.page,
        pageSize: pageCompanyState.pageSize,
    };
    $api.createRequest('/app/user/collection/company', params).then((resData) => {
        const { rows, total } = resData;
        if (type === 'add') {
            const str = pageCompanyState.pageSize * (pageCompanyState.page - 1);
            const end = pageCompanyState.list.length;
            const reslist = rows;
            pageCompanyState.list.splice(str, end, ...reslist);
        } else {
            pageCompanyState.list = rows;
        }
        // pageCompanyState.list = resData.rows;
        pageCompanyState.total = resData.total;
        pageCompanyState.maxPage = Math.ceil(pageCompanyState.total / pageCompanyState.pageSize);
    });
}
</script>

<style lang="stylus" scoped>
.btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 60rpx;
    height: 60rpx;
    image {
        height: 100%;
        width: 100%;
    }
}
.collection-content{
   background: #F4F4F4;
   height: 100%
   display: flex
   flex-direction: column
   .header{
        background: #FFFFFF;
        display: flex
        justify-content: space-evenly;
        align-items: center
        padding: 28rpx 100rpx
        font-weight: 400;
        font-size: 32rpx;
        color: #666D7F;
        .active {
            font-weight: 500;
            font-size: 32rpx;
            color: #000000;
        }
    }
   .coll-main{
        flex: 1
        overflow: hidden
        .main-scroll,
        .swiper{
            height: 100%
            .mian{
                padding: 0 28rpx 28rpx 28rpx
            }
        }
   }
}
</style>