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

<template>
    <view class="app-custom-root">
        <view class="app-container">
            <!-- 顶部头部区域 -->
            <view class="container-header">
                <view class="header-top">
                    <view class="header-btnLf button-click" @click="seemsg(0)" :class="{ active: state.current === 0 }">
                        现场招聘
                    </view>
                    <view class="header-btnLf button-click" @click="seemsg(1)" :class="{ active: state.current === 1 }">
                        VR虚拟招聘会
                    </view>
                </view>
                <view class="header-input btn-feel">
                    <uni-icons class="iconsearch" color="#666666" type="search" size="18"></uni-icons>
                    <input class="input" placeholder="招聘会" placeholder-class="inputplace" />
                </view>
                <view class="header-date">
                    <view class="data-week">
                        <view
                            class="weel-days button-click"
                            :class="{ active: currentDay.fullDate === item.fullDate }"
                            v-for="(item, index) in weekList"
                            :key="index"
                            @click="selectDate(item)"
                        >
                            <view class="label">{{ item.day }}</view>
                            <view class="day">{{ item.date }}</view>
                        </view>
                    </view>
                    <view class="data-all">
                        <image class="allimg button-click" @click="toSelectDate" src="/static/icon/date1.png"></image>
                    </view>
                </view>
            </view>

            <!-- 主体内容区域 -->
            <view class="container-main">
                <scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
                    <view class="cards" v-if="fairList.length">
                        <view
                            class="card press-button"
                            v-for="(item, index) in fairList"
                            :key="index"
                            @click="navTo('/packageA/pages/exhibitors/exhibitors?jobFairId=' + item.jobFairId)"
                        >
                            <view class="card-title">{{ item.name }}</view>
                            <view class="card-row">
                                <text class="">{{ item.location }}</text>
                                <text class="">
                                    <convert-distance
                                        :alat="item.latitude"
                                        :along="item.longitude"
                                        :blat="latitudeVal"
                                        :blong="longitudeVal"
                                    ></convert-distance>
                                </text>
                            </view>
                            <view class="card-times">
                                <view class="time-left">
                                    <view class="left-date">{{ parseDateTime(item.startTime).time }}</view>
                                    <view class="left-dateDay">{{ parseDateTime(item.startTime).date }}</view>
                                </view>
                                <view class="line"></view>
                                <view class="time-center">
                                    <view class="center-date">
                                        {{ getTimeStatus(item.startTime, item.endTime).statusText }}
                                    </view>
                                    <view class="center-dateDay">
                                        {{ getHoursBetween(item.startTime, item.endTime) }}小时
                                    </view>
                                </view>
                                <view class="line"></view>
                                <view class="time-right">
                                    <view class="left-date">{{ parseDateTime(item.endTime).time }}</view>
                                    <view class="left-dateDay">{{ parseDateTime(item.endTime).date }}</view>
                                </view>
                            </view>
                            <view class="recommend-card-line"></view>
                            <view class="card-footer">内容简介：{{ item.description }}</view>
                        </view>
                    </view>
                    <empty v-else pdTop="200"></empty>
                </scroll-view>
            </view>
            <Tabbar :currentpage="1"></Tabbar>
        </view>
    </view>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import Tabbar from '@/components/tabbar/midell-box.vue';
import useLocationStore from '@/stores/useLocationStore';
import { storeToRefs } from 'pinia';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const { $api, navTo, cloneDeep } = inject('globalFunction');
const weekList = ref([]);
const fairList = ref([]);
const currentDay = ref({});
const state = reactive({
    current: 0,
    all: [{}],
});
const pageState = reactive({
    page: 0,
    total: 0,
    maxPage: 2,
    pageSize: 10,
    search: {},
});

onLoad(() => {
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0');
    const day = String(today.getDate()).padStart(2, '0');

    const currentDate = `${year}-${month}-${day}`;
    const result = getNextDates({
        startDate: currentDate,
    });
    weekList.value = result;
    getFair('refresh');
});

function toSelectDate() {
    navTo('/packageA/pages/selectDate/selectDate', {
        query: {
            date: currentDay.value.fullDate,
        },
        onBack: (res) => {
            console.log(res);
            const result = getNextDates({
                startDate: res.date,
            });
            const formattedDate = res.date.slice(5); // MM-DD
            const dateFull = {
                date: res.date.slice(5),
                day: '周' + res.week,
                fullDate: res.date,
            };
            currentDay.value = dateFull;
            weekList.value = result;
            getFair('refresh');
        },
    });
}
// 查看消息类型
function changeSwiperMsgType(e) {
    const currented = e.detail.current;
    state.current = currented;
}

function seemsg(index) {
    if (index === 1) {
        return $api.msg('功能确定中');
    }
    state.current = index;
}

const handleScrollToLower = () => {
    getFair();
    console.log('触底');
};

function getFair(type = 'add') {
    if (type === 'refresh') {
        pageState.page = 1;
        pageState.maxPage = 1;
    }
    if (type === 'add' && pageState.page < pageState.maxPage) {
        pageState.page += 1;
    }
    let params = {
        ...pageState.search,
        current: pageState.page,
        pageSize: pageState.pageSize,
    };
    if (currentDay.value?.fullDate) {
        params.queryDate = currentDay.value.fullDate;
    }
    $api.createRequest('/app/fair', params).then((resData) => {
        const { rows, total } = resData;
        console.log(rows);
        if (type === 'add') {
            const str = pageState.pageSize * (pageState.page - 1);
            const end = fairList.value.length;
            const reslist = rows;
            fairList.value.splice(str, end, ...reslist);
        } else {
            fairList.value = rows;
        }
        // pageState.list = resData.rows;
        pageState.total = resData.total;
        pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
    });
}

function parseDateTime(datetimeStr) {
    if (!datetimeStr) return { time: '', date: '' };

    const dateObj = new Date(datetimeStr);

    if (isNaN(dateObj.getTime())) return { time: '', date: '' }; // 无效时间

    const year = dateObj.getFullYear();
    const month = String(dateObj.getMonth() + 1).padStart(2, '0');
    const day = String(dateObj.getDate()).padStart(2, '0');
    const hours = String(dateObj.getHours()).padStart(2, '0');
    const minutes = String(dateObj.getMinutes()).padStart(2, '0');

    return {
        time: `${hours}:${minutes}`,
        date: `${year}年${month}月${day}日`,
    };
}

function getTimeStatus(startTimeStr, endTimeStr) {
    const now = new Date();
    const startTime = new Date(startTimeStr);
    const endTime = new Date(endTimeStr);

    // 判断状态：0 开始中，1 过期，2 待开始
    let status = 0;
    let statusText = '开始中';
    if (now < startTime) {
        status = 2; // 待开始
        statusText = '待开始';
    } else if (now > endTime) {
        status = 1; // 已过期
        statusText = '已过期';
    } else {
        status = 0; // 进行中
        statusText = '进行中';
    }
    return {
        status, // 0: 进行中，1: 已过期，2: 待开始
        statusText,
    };
}

function getHoursBetween(startTimeStr, endTimeStr) {
    const start = new Date(startTimeStr);
    const end = new Date(endTimeStr);

    const diffMs = end - start;
    const diffHours = diffMs / (1000 * 60 * 60);

    return +diffHours.toFixed(2); // 保留 2 位小数
}

const selectDate = (item) => {
    if (currentDay.value?.fullDate === item.fullDate) {
        currentDay.value = {};
        getFair('refresh');
        return;
    }
    currentDay.value = item;
    getFair('refresh');
};

function getNextDates({ startDate = '', count = 6 }) {
    const baseDate = startDate ? new Date(startDate) : new Date(); // 指定起点或今天
    const dates = [];
    const dayNames = ['日', '一', '二', '三', '四', '五', '六'];

    for (let i = 0; i < count; i++) {
        const date = new Date(baseDate);
        date.setDate(baseDate.getDate() + i);

        const fullDate = date.toISOString().slice(0, 10); // YYYY-MM-DD
        const formattedDate = fullDate.slice(5); // MM-DD
        const dayOfWeek = dayNames[date.getDay()];

        dates.push({
            date: formattedDate,
            fullDate,
            day: '周' + dayOfWeek,
        });
    }

    // 可选设置默认选中项
    // currentDay.value = dates[0];

    return dates;
}
</script>

<style lang="stylus" scoped>
.app-custom-root {
    position: fixed;
    z-index: 10;
    width: 100vw;
    height: calc(100% - var(--window-bottom));
    overflow: hidden;
}
.app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    .container-header {
        background: url('@/static/icon/background2.png') 0 0 no-repeat;
        background-size: 100% 400rpx;
        .header-top{
            display: flex;
            line-height: calc(88rpx - 14rpx);
            padding: 16rpx 44rpx 14rpx 44rpx;
            .header-btnLf {
                display: flex;
                width: fit-content;
                white-space: nowrap
                justify-content: flex-start;
                align-items: center;
                width: calc(60rpx * 3);
                font-weight: 500;
                font-size: 40rpx;
                color: #696969;
                margin-right: 44rpx;
                position: relative;
                .btns-wd{
                    position: absolute
                    top: 2rpx;
                    right: 2rpx
                    width: 16rpx;
                    height: 16rpx;
                    background: #F73636;
                    border-radius: 50%;
                    border: 4rpx solid #EEEEFF;
                }
            }
            .active {
                font-weight: 600;
                font-size: 40rpx;
                color: #000000;
            }
        }
        .header-input{
            padding: 0 24rpx
            width: calc(100% - 48rpx);
            position: relative
            .iconsearch{
                position: absolute
                left: 50rpx;
                top: 50%
                transform: translate(0, -50%)
            }
            .input{
                padding: 0 30rpx 0 80rpx
                height: 80rpx;
                background: #FFFFFF;
                border-radius: 75rpx 75rpx 75rpx 75rpx;
                font-size: 28rpx;
            }
            .inputplace{
                font-weight: 400;
                font-size: 28rpx;
                color: #B5B5B5;
            }

        }
        .header-date{
            padding: 28rpx
            display: flex
            justify-content: space-between
            align-items: center
            .data-week{
                flex: 1
                display: flex
                justify-content: space-between
                flex-wrap: nowrap
                overflow: hidden
                .weel-days{
                    font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
                    display: flex
                    justify-content: center
                    flex-direction: column
                    text-align: center
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #333333;
                    width: 96rpx;
                    height: 88rpx;

                    .label{}
                    .day{
                        font-weight: 500;
                    }
                }
                .active{
                    background: rgba(37,107,250,0.1);
                    border-radius: 12rpx 12rpx 12rpx 12rpx;
                    color: #256BFA;
                }
            }
            .data-all{
                width: 66rpx;
                height: 66rpx;
                margin-left: 18rpx
                .allimg{
                    width: 100%;
                    height: 100%
                }
            }
        }
    }
}

.container-main {
    flex: 1;
    overflow: hidden;
    background-color: #f4f4f4;
}
.main-scroll {
    width: 100%
    height: 100%;
}
.cards{
    padding: 28rpx 28rpx 28rpx 28rpx;
    .card{
        margin-top: 28rpx
        padding: 32rpx;
        background: #FFFFFF
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        .card-title{
            font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
        }
        .card-row{
            display: flex
            justify-content: space-between
            font-weight: 400;
            font-size: 28rpx;
            color: #495265;
            margin-top: 4rpx
        }
        .card-times{
            display: flex;
            justify-content: space-between
            align-items: center
            margin-top: 24rpx
            .time-left,
            .time-right{
                text-align: center
                .left-date{
                    font-weight: 500;
                    font-size: 48rpx;
                    color: #333333;
                    font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
                }
                .left-dateDay{
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #333333;
                    margin-top: 12rpx
                }
            }
            .line{
                width: 40rpx;
                height: 0rpx;
                border: 2rpx solid #D4D4D4;
                margin-top: 64rpx
            }
            .time-center{
                text-align: center;
                display: flex
                flex-direction: column
                justify-content: center
                align-items: center
                .center-date{
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #FF881A;
                    padding-top: 10rpx
                }
                .center-dateDay{
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #333333;
                    margin-top: 6rpx
                    line-height: 48rpx;
                    width: 104rpx;
                    height: 48rpx;
                    background: #F9F9F9;
                    border-radius: 8rpx 8rpx 8rpx 8rpx;
                }
            }
        }
        .recommend-card-line{
            width: calc(100%);
            height: 0rpx;
            border-radius: 0rpx 0rpx 0rpx 0rpx;
            border: 2rpx dashed rgba(0,0,0,0.14);
            margin-top: 32rpx
            position: relative
        }

        .recommend-card-line::before{
            position: absolute
            content: ''
            left: 0
            top: 0
            transform: translate(-50% - 110rpx, -50%)
            width: 28rpx;
            height: 28rpx;
            background: #F4F4F4;
            border-radius: 50%;
        }

        .recommend-card-line::after{
            position: absolute
            content: ''
            right: 0
            top: 0
            transform: translate(50% + 100rpx, -50%)
            width: 28rpx;
            height: 28rpx;
            background: #F4F4F4;
            border-radius: 50%;
        }
        .card-footer{
            margin-top: 32rpx
            min-height: 50rpx;
            font-weight: 400;
            font-size: 28rpx;
            color: #6C7282;
        }
    }
    .card:first-child{
        margin-top: 0
    }
}
</style>