edu/uniapp/src/pages/index/index.vue

<template>
    <page-meta :page-style="$theme.pageStyle">
        <!-- #ifndef H5 -->
        <navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
        <!-- #endif -->
    </page-meta>
    <view class="index">
        <!-- 顶部渐变背景 -->
        <view class="header-bg">
            <view class="header-content">
                <view class="welcome-text">
                    <view class="title">👋 您好，招生老师</view>
                    <view class="subtitle">祝您招生顺利，业绩长虹！</view>
                </view>
            </view>
        </view>

        <!-- 主要内容区域 -->
        <view class="main-content">
            <!-- 数据概览卡片 -->
            <view class="stats-card" v-if="isLogin">
                <view class="card-header">
                    <view class="card-title">
                        <view class="title-icon">📊</view>
                        <text>招生数据</text>
                    </view>
                    <view class="view-more" @click="goToMyRecruitment">
                        <text>查看详情</text>
                        <u-icon name="arrow-right" size="24" color="#3B82F6"></u-icon>
                    </view>
                </view>
                <view class="stats-grid">
                    <view class="stat-item">
                        <view class="stat-value blue">{{ stats.total || 0 }}</view>
                        <view class="stat-label">总招生人数</view>
                    </view>
                    <view class="stat-divider"></view>
                    <view class="stat-item">
                        <view class="stat-value green">{{ stats.today || 0 }}</view>
                        <view class="stat-label">今日新增</view>
                    </view>
                    <view class="stat-divider"></view>
                    <view class="stat-item">
                        <view class="stat-value orange">{{ stats.week || 0 }}</view>
                        <view class="stat-label">本周新增</view>
                    </view>
                </view>
            </view>

            <!-- 快捷操作入口 -->
            <view class="quick-actions" v-if="isLogin">
                <view class="section-title">
                    <view class="title-icon">🚀</view>
                    <text>快捷操作</text>
                </view>
                <view class="action-grid three-column">
                    <view class="action-item" @click="goToPreRegistration">
                        <view class="action-icon blue">
                            <u-icon name="edit-pen" size="40" color="#FFFFFF"></u-icon>
                        </view>
                        <text class="action-text">预报名</text>
                    </view>
                    <view class="action-item" @click="goToMyRecruitment">
                        <view class="action-icon green">
                            <u-icon name="list" size="40" color="#FFFFFF"></u-icon>
                        </view>
                        <text class="action-text">我的招生</text>
                    </view>
                    <view class="action-item" @click="goToUser">
                        <view class="action-icon purple">
                            <u-icon name="account" size="40" color="#FFFFFF"></u-icon>
                        </view>
                        <text class="action-text">个人中心</text>
                    </view>
                </view>
            </view>

            <!-- 未登录提示 -->
            <view class="login-tip" v-if="!isLogin">
                <view class="tip-icon">🔒</view>
                <view class="tip-text">登录后查看更多功能</view>
                <view class="tip-button" @click="goToLogin">立即登录</view>
            </view>
        </view>

        <!--  #ifdef H5  -->
        <view class="footer" v-if="isH5">
            <router-navigate
                class="footer-link"
                :to="{
                    path: '/pages/webview/webview',
                    query: {
                        url: item.value
                    }
                }"
                v-for="item in appStore.getCopyrightConfig"
                :key="item.key"
            >
                {{ item.key }}
            </router-navigate>
        </view>
        <!--  #endif  -->

        <!-- 返回顶部按钮 -->
        <u-back-top
            :scroll-top="scrollTop"
            :top="100"
            :customStyle="{
                backgroundColor: '#FFF',
                color: '#000',
                boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'
            }"
        >
        </u-back-top>

        <!--  #ifdef MP  -->
        <!--  微信小程序隐私弹窗  -->
        <MpPrivacyPopup></MpPrivacyPopup>
        <!--  #endif  -->
    </view>
</template>

<script setup lang="ts">
import { getIndex } from '@/api/shop'
import { getEnrollmentStatistical } from '@/api/app'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { computed, reactive, ref } from 'vue'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'

// #ifdef MP
import MpPrivacyPopup from './component/mp-privacy-popup.vue'
// #endif

const appStore = useAppStore()
const userStore = useUserStore()
const { isLogin, userInfo } = storeToRefs(userStore)

const state = reactive<{
    pages: any[]
    meta: any[]
    article: any[]
}>({
    pages: [],
    meta: [],
    article: []
})

const scrollTop = ref<number>(0)
const stats = ref({
    total: 0,
    today: 0,
    week: 0
})

const isH5 = ref(false)
// #ifdef H5
isH5.value = true
// #endif

const getData = async () => {
    try {
        const data = await getIndex()
        if (data?.page?.data) {
            state.pages = JSON.parse(data.page.data)
        }
        if (data?.page?.meta) {
            state.meta = JSON.parse(data.page.meta)
        }
        state.article = data?.article || []
    } catch (error) {
        console.error('获取首页数据失败:', error)
    }
}

const getStats = async () => {
    if (!isLogin.value) {
        return
    }
    try {
        const res = await getEnrollmentStatistical()
        // 接口直接返回数据对象，没有 code 包装
        if (res && res.total_enroll_count !== undefined) {
            stats.value = {
                total: res.total_enroll_count,
                today: res.today_enroll_count,
                week: res.week_enroll_count
            }
        }
    } catch (error) {
        console.error('获取招生统计失败:', error)
    }
}

const goToPreRegistration = () => {
    uni.navigateTo({
        url: '/pages/pre_registration/pre_registration'
    })
}

const goToMyRecruitment = () => {
    uni.navigateTo({
        url: '/pages/my_recruitment/my_recruitment'
    })
}

const goToUser = () => {
    uni.switchTab({
        url: '/pages/user/user'
    })
}

const goToLogin = () => {
    uni.navigateTo({
        url: '/pages/login/login'
    })
}

const shareQrcode = () => {
    uni.switchTab({
        url: '/pages/user/user'
    })
    setTimeout(() => {
        uni.$emit('openQrcodeModal')
    }, 300)
}

onLoad(() => {
    getData()
})

onShow(async () => {
    // 等待一下确保登录状态已确定
    await new Promise(resolve => setTimeout(resolve, 100))
    getStats()
})
</script>

<style lang="scss" scoped>
.index {
    min-height: 100vh;
    background-color: #F5F7FA;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

/* 顶部渐变背景 */
.header-bg {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    padding: 80rpx 30rpx 80rpx;
    border-radius: 0 0 40rpx 40rpx;
}

.header-content {
    .welcome-text {
        .title {
            font-size: 40rpx;
            font-weight: 600;
            color: #FFFFFF;
            margin-bottom: 12rpx;
        }
        .subtitle {
            font-size: 28rpx;
            color: rgba(255, 255, 255, 0.8);
        }
    }
}

/* 主要内容区域 */
.main-content {
    margin-top: 20rpx;
    padding: 0 30rpx;
    position: relative;
    z-index: 1;
}

/* 数据概览卡片 */
.stats-card {
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;

        .card-title {
            display: flex;
            align-items: center;
            font-size: 32rpx;
            font-weight: 600;
            color: #1F2937;

            .title-icon {
                margin-right: 12rpx;
                font-size: 36rpx;
            }
        }

        .view-more {
            display: flex;
            align-items: center;
            font-size: 26rpx;
            color: #3B82F6;

            text {
                margin-right: 8rpx;
            }
        }
    }

    .stats-grid {
        display: flex;
        align-items: center;
        justify-content: space-around;

        .stat-item {
            flex: 1;
            text-align: center;

            .stat-value {
                font-size: 48rpx;
                font-weight: 700;
                margin-bottom: 12rpx;

                &.blue {
                    color: #3B82F6;
                }
                &.green {
                    color: #10B981;
                }
                &.orange {
                    color: #F97316;
                }
            }

            .stat-label {
                font-size: 26rpx;
                color: #6B7280;
            }
        }

        .stat-divider {
            width: 2rpx;
            height: 80rpx;
            background-color: #E5E7EB;
        }
    }
}

/* 快捷操作 */
.quick-actions {
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

    .section-title {
        display: flex;
        align-items: center;
        font-size: 32rpx;
        font-weight: 600;
        color: #1F2937;
        margin-bottom: 30rpx;

        .title-icon {
            margin-right: 12rpx;
            font-size: 36rpx;
        }
    }

    .action-grid {
        display: flex;
        justify-content: space-between;

        &.three-column {
            justify-content: space-around;
        }

        .action-item {
            display: flex;
            flex-direction: column;
            align-items: center;

            &:active {
                opacity: 0.7;
            }

            .action-icon {
                width: 100rpx;
                height: 100rpx;
                border-radius: 24rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 16rpx;
                box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

                &.blue {
                    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
                }
                &.green {
                    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
                }
                &.purple {
                    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
                }
            }

            .action-text {
                font-size: 26rpx;
                color: #4B5563;
            }
        }
    }
}

/* 未登录提示 */
.login-tip {
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 60rpx 40rpx;
    text-align: center;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

    .tip-icon {
        font-size: 80rpx;
        margin-bottom: 20rpx;
    }

    .tip-text {
        font-size: 30rpx;
        color: #6B7280;
        margin-bottom: 30rpx;
    }

    .tip-button {
        display: inline-block;
        background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
        color: #FFFFFF;
        font-size: 30rpx;
        font-weight: 500;
        padding: 20rpx 60rpx;
        border-radius: 40rpx;

        &:active {
            opacity: 0.9;
        }
    }
}

/* 底部 */
.footer {
    padding: 40rpx 30rpx;
    text-align: center;

    .footer-link {
        font-size: 24rpx;
        color: #9CA3AF;
        margin: 0 16rpx;
    }
}
</style>