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

<template>
    <AppLayout title="我的浏览" :show-bg-image="false" :use-scroll-view="false">
        <template #headerleft>
            <view class="btnback">
                <image src="@/static/icon/back.png" @click="navBack"></image>
            </view>
        </template>
        <view class="collection-content">
            <view class="collection-search">
                <view class="search-content">
                    <view class="header-input button-click">
                        <uni-icons class="iconsearch" color="#6A6A6A" type="search" size="22"></uni-icons>
                        <input
                            class="input"
                            @confirm="searchCollection"
                            placeholder="招聘会"
                            placeholder-class="inputplace"
                        />
                    </view>
                    <view class="data-all">
                        <image class="allimg button-click" @click="toSelectDate" src="/static/icon/date1.png"></image>
                    </view>
                </view>
            </view>
            <scroll-view scroll-y class="main-scroll" @scrolltolower="getJobList('add')">
                <view class="one-cards">
                    <view class="mian">
                        <renderJobs
                            :list="pageState.list"
                            v-if="pageState.list.length"
                            :longitude="longitudeVal"
                            :latitude="latitudeVal"
                        ></renderJobs>
                        <empty v-else pdTop="200"></empty>
                        <!-- <loadmore ref="loadmoreRef"></loadmore> -->
                    </view>
                </view>
            </scroll-view>
        </view>
    </AppLayout>
</template>

<script setup>
import dictLabel from '@/components/dict-Label/dict-Label.vue';
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { onLoad, onShow } from '@dcloudio/uni-app';
import useUserStore from '@/stores/useUserStore';
const { $api, navTo, navBack } = inject('globalFunction');
import useLocationStore from '@/stores/useLocationStore';
const { userInfo } = storeToRefs(useUserStore());
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const userStore = useUserStore();
const browseDate = ref('');
const weekday = ref([]);
const monthDay = ref([]);
const currentDay = ref('');
const pageState = reactive({
    page: 0,
    list: [],
    total: 0,
    maxPage: 1,
    pageSize: 10,
    search: {},
    lastDate: '',
});
const currentDate = ref('');

onLoad(() => {
    getBrowseDate();
    getJobList('refresh');
    // const today = new Date().toISOString().split('T')[0];
    // currentDate.value = today;
});

function toSelectDate() {
    navTo('/packageA/pages/selectDate/selectDate', {
        query: {
            date: currentDate.value,
            record: true,
        },
        onBack: (res) => {
            currentDate.value = res.date;
            pageState.search.startDate = getPreviousDay(res.date);
            pageState.search.endDate = res.date;
            getJobList('refresh');
        },
    });
}

function navToPost(jobId) {
    navTo(`/packageA/pages/post/post?jobId=${btoa(jobId)}`);
}

function searchCollection(e) {
    const value = e.detail.value;
    pageState.search.jobTitle = value;
    getJobList('refresh');
}

function getBrowseDate() {
    $api.createRequest('/app/user/review/array').then((res) => {
        browseDate.value = res.data.join(',');
    });
}

function getJobList(type = 'add', loading = true) {
    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,
        ...pageState.search,
    };
    $api.createRequest('/app/user/review', params, 'GET', loading).then((resData) => {
        const { rows, total } = resData;
        if (type === 'add') {
            const str = pageState.pageSize * (pageState.page - 1);
            const end = pageState.list.length;
            const [reslist, lastDate] = $api.insertSortData(rows, 'reviewDate');
            if (reslist.length) {
                // 日期监测是否一致
                if (reslist[0].title === pageState.lastDate) {
                    reslist.shift();
                }
            }
            pageState.list.splice(str, end, ...reslist);
            pageState.lastDate = lastDate;
        } else {
            const [reslist, lastDate] = $api.insertSortData(rows, 'reviewDate');
            pageState.list = reslist;
            pageState.lastDate = lastDate;
        }
        // pageState.list = resData.rows;
        pageState.total = resData.total;
        pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
    });
}

function getPreviousDay(dateStr) {
    const date = new Date(dateStr);
    date.setDate(date.getDate() - 1); // 减去一天

    // 格式化成 YYYY-MM-DD
    return date.toISOString().split('T')[0];
}
</script>

<style lang="stylus" scoped>
.btnback{
    width: 64rpx;
    height: 64rpx;
}
.btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 52rpx;
    height: 52rpx;
}
image {
    height: 100%;
    width: 100%;
}
.collection-content
    height: 100%
    display: flex
    flex-direction: column
.collection-search
    padding: 10rpx 20rpx;

    .search-content
        position: relative
        display: flex
        align-items: center
        padding: 14rpx 0
        .header-input{
            padding: 0
            width: calc(100% - 48rpx);
            position: relative
            .iconsearch{
                position: absolute
                left: 30rpx;
                top: 50%
                transform: translate(0, -50%)
            }
            .input{
                padding: 0 30rpx 0 80rpx
                height: 80rpx;
                background: #FFFFFF;
                border-radius: 75rpx 75rpx 75rpx 75rpx;
                border: 2rpx solid #ECECEC
                font-size: 28rpx;
            }
            .inputplace{
                font-weight: 400;
                font-size: 28rpx;
                color: #B5B5B5;
            }
        }
        .data-all{
            width: 66rpx;
            height: 66rpx;
            margin-left: 18rpx
            .allimg{
                width: 100%;
                height: 100%
            }
        }
.main-scroll{
    flex: 1
    overflow: hidden
}
.one-cards{
    padding: 0 20rpx 20rpx 20rpx;
    background: #f4f4f4

}
</style>