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">
        <!-- 顶部区域：Logo + 欢迎文字 + 首页图片 -->
        <view class="header-section">
            <image
                src="/static/yubaoming/school_logo.png"
                mode="aspectFit"
                class="school-logo"
            />
            <view class="welcome-text">
                <view class="title">您好，招生老师</view>
                <view class="subtitle">祝您招生顺利，业绩长虹！</view>
            </view>
            <image
                src="/static/yubaoming/home.png"
                mode="widthFix"
                class="home-image"
            />

            <!-- 快捷操作标题 -->
            <view class="section-title" v-if="isLogin">
                <view class="title-icon"></view>
                <text>快捷操作</text>
            </view>
        </view>

        <!-- 主要内容区域 -->
        <view class="main-content">
            <!-- 快捷操作入口 -->
            <view class="quick-actions" v-if="isLogin">
                <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="goToPayment">
                    <view class="action-icon orange">
                        <u-icon name="rmb-circle" 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 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 goToPayment = () => {
    uni.navigateTo({
        url: '/pages/payment/payment'
    })
}

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-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx 30rpx;
    position: relative;

    .school-logo {
        width: 350rpx;
        height: 350rpx;
        margin-top: -40rpx;
        margin-bottom: -80rpx;
    }

    .welcome-text {
        text-align: center;
        margin-bottom: -100rpx;

        .title {
            font-size: 40rpx;
            font-weight: 600;
            color: #000000;
            margin-bottom: 12rpx;
        }
        .subtitle {
            font-size: 28rpx;
            color: #333333;
        }
    }

    .home-image {
        width: calc(100% + 60rpx);
        margin-left: -30rpx;
        margin-right: -30rpx;
    }
}

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

/* 快捷操作标题 */
.section-title {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-weight: 600;
    color: #000000;
    padding: 20rpx 0;
    position: absolute;
    bottom: 50rpx;
    left: 30rpx;
    z-index: 10;

    .title-icon {
        margin-right: 12rpx;
        width: 10rpx;
        height: 32rpx;
        background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
        border-radius: 3rpx;
    }
}

/* 快捷操作 */
.quick-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20rpx;
    margin-top: -30rpx; 

    .action-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #FFFFFF;
        border-radius: 24rpx;
        padding: 30rpx 20rpx;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

        &: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%);
            }
            &.orange {
                background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
            }
        }

        .action-text {
            font-size: 26rpx;
            color: #1F2937;
            font-weight: 500;
        }
    }
}

/* 未登录提示 */
.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>