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

<template>
    <view class="reser-content">
        <view class="content-top">
            <view
                class="top-item"
                :class="{ active: ranItem.value === item.value }"
                v-for="(item, index) in ranOptions"
                :key="index"
                @click="chnageRanOption(item)"
            >
                {{ item.label }}
            </view>
        </view>
        <view class="main">
            <scroll-view scroll-y>
                <view v-if="pageState.list.length">
                    <view class="card" v-for="(item, index) in pageState.list" :key="index">
                        <view @click="navTo('/packageA/pages/exhibitors/exhibitors?jobFairId=' + item.jobFairId)">
                            <view class="card-row">
                                <Countdown startTime="item.startTime" :endTime="item.endTime" />
                            </view>
                            <view class="card-Title">{{ item.name }}</view>
                            <view class="card-row">
                                <view class="rowleft">{{ item.location }}</view>
                                <view class="rowright">
                                    <convert-distance
                                        :alat="item.latitude"
                                        :along="item.longitude"
                                        :blat="latitudeVal"
                                        :blong="longitudeVal"
                                    ></convert-distance>
                                </view>
                            </view>
                        </view>
                        <view class="footer" v-if="isTimePassed(item.startTime)">
                            <view class="card_cancel" @click="updateCancel(item)">取消预约</view>
                        </view>
                    </view>
                </view>
                <empty v-else pdTop="200"></empty>
            </scroll-view>
        </view>
    </view>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted, onBeforeUnmount } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navTo, debounce, customSystem } = inject('globalFunction');
import Countdown from './component/countdown.vue';
import { storeToRefs } from 'pinia';
import useLocationStore from '@/stores/useLocationStore';
import useUserStore from '@/stores/useUserStore';
const { userInfo } = storeToRefs(useUserStore());
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());

const pageState = reactive({
    page: 0,
    list: [],
    total: 0,
    maxPage: 1,
    pageSize: 10,
    search: {},
    lastDate: '',
});
const ranItem = ref({});
const ranOptions = ref([
    { label: '全部', value: 0 },
    { label: '待开始', value: 1 },
    { label: '进行中', value: 2 },
    { label: '已结束', value: 3 },
]);

function isTimePassed(timeStr) {
    const targetTime = new Date(timeStr.replace(/-/g, '/')).getTime(); // 兼容格式
    const now = Date.now();
    return now < targetTime;
}

onLoad(() => {
    ranItem.value = ranOptions.value[0];
    getList();
});

function chnageRanOption(item) {
    ranItem.value = item;
    getList();
}

function updateCancel(item) {
    const fairId = item.jobFairId;
    $api.createRequest(`/app/fair/collection/${fairId}`, {}, 'DELETE').then((resData) => {
        getList('refresh');
        $api.msg('取消预约成功');
    });
}

function getList(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,
        type: ranItem.value.value,
    };
    $api.createRequest('/app/user/collection/fair', 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);
    });
}
</script>

<style lang="stylus" scoped>
.reser-content{
    width: 100%;
    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
    display: flex;
    flex-direction: column;
    .content-top{
        display: flex
        padding: 28rpx
        .top-item{
            font-weight: 400;
            font-size: 32rpx;
            margin-right: 48rpx
            color: #666D7F;
        }
        .active{
            font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
            font-weight: 500;
            font-size: 32rpx;
            color: #000000;
        }
    }
    .main{
        flex: 1
        overflow: hidden
        background: #F4F4F4
        padding: 28rpx
        .card{
            padding: 30rpx
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            color: #495264
            margin-bottom: 28rpx
            .card-row{
                display: flex
                justify-content: space-between
                .rowleft{
                    display: flex
                    align-items: center
                }
            }
            .card-Title{
                font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
                font-weight: 500;
                font-size: 32rpx;
                line-height: 70rpx
                color: #333333;
            }
            .footer{
                display: flex
                align-items: center
                justify-content: flex-end
            }
            .card_cancel{
                width: 228rpx;
                height: 80rpx;
                line-height: 80rpx;
                text-align: center;
                border-radius: 12rpx 12rpx 12rpx 12rpx;
                border: 2rpx solid #E8EAEE;
                margin-top: 32rpx
            }
        }

    }
}
</style>