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">
                                <renderJobsCheckBox
                                    ref="jobListRef"
                                    :list="pageState.list"
                                    v-if="pageState.list.length"
                                    :longitude="longitudeVal"
                                    :latitude="latitudeVal"
                                    @update:selected="updateSelectedCount"
                                ></renderJobsCheckBox>
                                <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>
        <template #footer>
            <view v-if="selectedJobCount > 0 && type === 0" class="compare-bar">
                <view class="selected-count">已选中 {{ selectedJobCount }} 个岗位</view>
                <button class="compare-btn" @click="handleCompare">岗位对比</button>
            </view>
        </template>
    </AppLayout>
</template>

<script setup>
import { inject, ref, reactive, nextTick } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import useLocationStore from '@/stores/useLocationStore';
import renderJobsCheckBox from '@/components/renderJobs/renderJobsCheckBox.vue';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const { $api, navBack, navTo } = inject('globalFunction');
const type = ref(0);
// 新增：获取renderJobs组件实例
const jobListRef = ref(null);
// 新增：选中的岗位数量
const selectedJobCount = 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 updateSelectedCount() {
    nextTick(() => {
        if (jobListRef.value) {
            selectedJobCount.value = jobListRef.value.selectedJobs.length;
        }
    });
}

// 新增：对比按钮点击事件
function handleCompare() {
    if (selectedJobCount.value < 2) {
        uni.showToast({
            title: '请至少选择2个岗位进行对比',
            icon: 'none',
        });
        return;
    }
    // 获取选中的岗位数据
    const selectedJobs = jobListRef.value.selectedJobs;
    const selectedJobData = pageState.list.filter((job) => selectedJobs.includes(job.jobId));
    uni.setStorageSync('compare', selectedJobData);
    // 跳转到对比页面（假设已创建对比页面）
    navTo('/packageA/pages/collection/compare');
}

function handleScrollToLower() {
    getJobList();
}

function handleScrollToLowerCompany() {
    getCompanyList();
}

function getJobList(type = 'add') {
    if (type === 'refresh') {
        pageState.page = 1;
        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 = 1;
        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>
// 新增底部对比栏样式
.compare-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    background-color: #fff;
    border-top: 1rpx solid #eee;
    box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);

    .selected-count {
        font-size: 28rpx;
        color: #333;
    }

    .compare-btn {
        width: 200rpx;
        height: 60rpx;
        line-height: 60rpx;
        background-color: #4C6EFB;
        color: #fff;
        border-radius: 30rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0
    }
}
.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>