edu/uniapp/src/pages/my_recruitment/my_recruitment.vue

<template>
    <page-meta :page-style="$theme.pageStyle">
    </page-meta>
    <view class="my-recruitment min-h-full pb-[env(safe-area-inset-bottom)]">
        <view class="nav-bar">
            <view class="back-btn" @click="goBack">
                <text class="back-icon">←</text>
            </view>
            <view class="nav-title">我的招生</view>
        </view>
        <image
            src="/static/yubaoming/recruitment_3.png"
            mode="aspectFill"
            class="page-bg"
        />
        <view class="px-[30rpx] content-wrapper">
            <view class="intro-box">
                启东市科信技工学校秉持着一系列极具特色与前瞻性的办学理念，致力于为学生打造优质教育，推动区域协同发展。
            </view>
            <view class="student-image-wrapper">
                <image
                    src="/static/yubaoming/student.png"
                    mode="aspectFit"
                    class="student-image"
                />
            </view>
            <z-paging
                ref="paging"
                v-model="list"
                @query="queryList"
                :fixed="false"
                height="100%"
                use-page-scroll
            >
                <view class="student-table">
                    <!-- 表头 -->
                    <view class="table-header">
                        <view class="th th-name">姓名</view>
                        <view class="th th-gender">性别</view>
                        <view class="th th-score">成绩</view>
                        <view class="th th-major">专业</view>
                        <view class="th th-status">状态</view>
                    </view>
                    <!-- 数据行 -->
                    <view
                        v-for="(item, index) in list"
                        :key="index"
                        class="table-row"
                    >
                        <view class="td td-name">{{ item.name }}</view>
                        <view class="td td-gender">{{ item.gender === 1 ? '男' : item.gender === 2 ? '女' : '-' }}</view>
                        <view class="td td-score">{{ item.highSchoolScore || '-' }}</view>
                        <view class="td td-major">{{ item.majorName || '-' }}</view>
                        <view class="td td-status">
                            <text :class="item.studentStatus === 1 ? 'status-enrolled' : 'status-pre'">
                                {{ item.studentStatus === 1 ? '已报名' : '预报名' }}
                            </text>
                        </view>
                    </view>
                </view>
            </z-paging>
        </view>

    </view>
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getPreRegistrationList } from '@/api/app'

const list = ref<any[]>([])
const paging = shallowRef()

const queryList = async (pageNo, pageSize) => {
    console.log('=== queryList 开始执行 ===', pageNo, pageSize)
    try {
        const params = {
            page: pageNo,
            limit: pageSize,
            studentStatus: -1
        }
        console.log('请求参数:', params)
        const res = await getPreRegistrationList(params)
        console.log('接口返回结果:', res)

        if (res && res.lists) {
            console.log('获取数据成功, list长度:', res.lists?.length)
            paging.value.complete(res.lists)
        } else {
            console.log('接口返回异常:', res)
        }
    } catch (error) {
        console.error('获取招生列表失败:', error)
        uni.$u.toast('获取数据失败')
    }
}

const goBack = () => {
    uni.navigateBack()
}

onLoad(() => {
    queryList(1, 10)
})
</script>

<style lang="scss" scoped>
.my-recruitment {
    position: relative;
    min-height: 100vh;
    background-color: transparent;
}

.nav-bar {
    position: fixed;
    top: 50rpx;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: calc(20rpx + env(safe-area-inset-top));
}

.back-btn {
    position: absolute;
    left: 0;
    padding: 20rpx 30rpx;
    cursor: pointer;
}

.back-icon {
    font-size: 48rpx;
    color: white;
    font-weight: bold;
}

.nav-title {
    font-size: 36rpx;
    color: white;
    font-weight: 600;
}

.page-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

.content-wrapper {
    position: relative;
    z-index: 10;
    padding-top: 320rpx;
}

.intro-box {
    background-color: white;
    border: 2rpx solid white;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-bottom: 150rpx;
    text-align: center;
    font-size: 26rpx;
    color: #0056e9;
    line-height: 1.8;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.student-image-wrapper {
    display: flex;
    justify-content: center;
    margin-top: -200rpx;
    margin-bottom: -330rpx;
    position: relative;
    z-index: -1;
}

.student-image {
    width: 800rpx;
    height: 600rpx;
}

.student-table {
    background: white;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.table-header {
    display: flex;
    background: #ccddfb;
    padding: 24rpx 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}

.th {
    color: #333;
    font-size: 26rpx;
    font-weight: 600;
    text-align: center;
}

.table-row {
    display: flex;
    padding: 24rpx 20rpx;
    border-bottom: 1rpx solid #f0f0f0;
    align-items: center;

    &:last-child {
        border-bottom: none;
    }

    &:nth-child(even) {
        background-color: #fafafa;
    }
}

.td {
    font-size: 26rpx;
    color: #333;
    text-align: center;
}

/* 列宽设置 */
.th-name, .td-name {
    width: 20%;
    font-weight: 500;
}

.th-gender, .td-gender {
    width: 12%;
}

.th-score, .td-score {
    width: 15%;
}

.th-major, .td-major {
    width: 33%;
}

.th-status, .td-status {
    width: 20%;
}

/* 状态标签样式 */
.status-enrolled {
    color: #10B981;
    font-weight: 500;
}

.status-pre {
    color: #F59E0B;
    font-weight: 500;
}
</style>