ss_dc_wechat_mini_program/pages/main/index.vue

<template>
    <view class="main-container">
        <!-- 主内容区域 - 使用 swiper 实现滑动切换 -->
        <swiper class="main-swiper" :current="currentIndex" @change="onSwiperChange" :circular="false" :duration="300">
            <!-- 动态渲染页面 -->
            <swiper-item v-for="(page, index) in pages" :key="index">
                <view class="page-container">
                    <BjdmStatisticsPage v-if="page.key === 'mp_njdmHomep' && page.activated"
                        v-show="currentIndex === index" :ref="el => setPageRef(el, index)" />
                    <XcdmPage v-else-if="page.key === 'xcDm' && page.activated" v-show="currentIndex === index"
                        :ref="el => setPageRef(el, index)" />
                    <BzrdmPage v-else-if="page.key === 'bzrDm' && page.activated" v-show="currentIndex === index"
                        :ref="el => setPageRef(el, index)" />
                    <TodoPage v-else-if="page.key === 'todo' && page.activated" v-show="currentIndex === index"
                        :ref="el => setPageRef(el, index)" />
                    <MyPage v-else-if="page.key === 'my' && page.activated" v-show="currentIndex === index"
                        :ref="el => setPageRef(el, index)" />
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { onShow, onHide, onLoad, onUnload } from '@dcloudio/uni-app'
import Icon from '@/components/icon/index.vue'

// 引入各个页面组件
import MyPage from '@/pages/my/index.vue'
import TodoPage from '@/pages/todo/todo_list.vue'
import BjdmStatisticsPage from '@/pages/statistics/bjdm_statistics.vue'
import BzrdmPage from '@/pages/bjdm/bjdm_bzrDmHomep.vue'
import XcdmPage from '@/pages/xcdm/index.vue'

// 当前选中的页面索引
const currentIndex = ref(0)
// 上一个页面索引
const prevIndex = ref(0)

// 页面组件引用数组
const pageRefs = ref([])

// 页面配置（根据登录态与 syList 动态构建）
const pages = ref([])

// WebSocket 连接地址
const SOCKET_URL = 'wss://m.hfdcschool.com/btcSkt?ssToken=1'
// WebSocket 连接实例
let socketTask = null

/**
 * 初始化 WebSocket 连接
 */
function initWebSocket() {
    if (socketTask) return

    socketTask = uni.connectSocket({
        url: SOCKET_URL,
        fail: (err) => {
            console.error('[Main] WebSocket connectSocket 调用失败:', err)
        },
        complete: () => { }
    })

    socketTask.onOpen(() => {
        console.log('[Main] WebSocket 连接成功:', SOCKET_URL)

        // 连接成功后立刻发送 ping
        socketTask.send({
            data: 'ping',
            success: () => {
                console.log('[Main] WebSocket ping 发送成功')
            },
            fail: (err) => {
                console.error('[Main] WebSocket ping 发送失败:', err)
            }
        })
    })

    socketTask.onError((err) => {
        console.error('[Main] WebSocket 连接失败:', err)
    })

    socketTask.onMessage((res) => {
        console.log('[Main] WebSocket 收到消息:', res?.data)
    })

    socketTask.onClose((res) => {
        console.log('[Main] WebSocket 连接关闭:', res)
        socketTask = null
    })
}

/**
 * 关闭 WebSocket 连接
 */
function closeWebSocket() {
    if (!socketTask) return

    socketTask.close({
        complete: () => {
            socketTask = null
        }
    })
}

/**
 * 设置页面组件引用
 */
const setPageRef = (el, index) => {
    if (el) {
        pageRefs.value[index] = el

    }
}

/**
 * 触发子组件的生命周期
 */
const triggerPageLifecycle = (pageIndex, lifecycle) => {
    const pageRef = pageRefs.value[pageIndex]

    if (pageRef && typeof pageRef[lifecycle] === 'function') {
        //  console.log(`[Main] 触发页面 ${pages.value[pageIndex]?.title} 的 ${lifecycle}`)
        pageRef[lifecycle]()
    } else {
        try {
            console.warn('[Main] 生命周期调用失败: 未找到方法', {
                pageIndex,
                lifecycle,
                hasRef: !!pageRef,
                refKeys: pageRef ? Object.keys(pageRef) : []
            })
        } catch (e) { }
    }
}

// 在小程序环境中，组件渲染与 ref 赋值可能比 nextTick 更晚
// 增加一个轻量重试机制，确保拿到子组件并调用其暴露的生命周期
function ensureRefReady(pageIndex, lifecycle, tries = 0) {
    const pageRef = pageRefs.value[pageIndex]
    if (pageRef && typeof pageRef[lifecycle] === 'function') {
        //  console.log(`[Main] ensureRefReady 命中 -> 调用 ${pages.value[pageIndex]?.title}.${lifecycle}`)
        pageRef[lifecycle]()
        return
    }
    if (tries >= 8) {
        console.warn('[Main] ensureRefReady 超过重试次数，放弃调用', {
            pageIndex,
            lifecycle,
            hasRef: !!pageRef,
            refKeys: pageRef ? Object.keys(pageRef) : []
        })
        return
    }
    setTimeout(() => ensureRefReady(pageIndex, lifecycle, tries + 1), 30)
}

/**
 * swiper 切换事件
 */
const onSwiperChange = (e) => {
    const newIndex = e.detail.current
    const oldIndex = currentIndex.value

    // 触发前一个页面的 onHide
    if (oldIndex !== newIndex) {
        console.log(`[Main] 触发页面 ${oldIndex} 的 onHide`)
        triggerPageLifecycle(oldIndex, 'onHide')
    }

    // 更新当前页面索引
    prevIndex.value = oldIndex
    currentIndex.value = newIndex

    // 懒加载激活
    activateByIndex(currentIndex.value)

    // 触发新页面的 onShow（可能需要等待 ref 就绪）
    nextTick(() => {
        console.log(`[Main] 触发页面 ${newIndex} 的 onShow`)
        ensureRefReady(currentIndex.value, 'onShow')
    })

    console.log('切换到页面:', pages.value[currentIndex.value].title)
}

/**
 * 点击指示器切换页面
 */
function switchToPage(index) {
    if (currentIndex.value !== index) {
        const oldIndex = currentIndex.value

        // 触发前一个页面的 onHide
        // console.log(`[Main] switchToPage 触发页面 ${oldIndex} 的 onHide`)
        triggerPageLifecycle(oldIndex, 'onHide')

        // 更新页面索引
        prevIndex.value = oldIndex
        currentIndex.value = index

        // 懒加载激活
        activateByIndex(currentIndex.value)

        // 触发新页面的 onShow（可能需要等待 ref 就绪）
        nextTick(() => {
            // console.log(`[Main] switchToPage 触发页面 ${index} 的 onShow`)
            ensureRefReady(currentIndex.value, 'onShow')
        })
    }
}

/**
 * 激活页面
 */
function activateByIndex(pageIndex) {
    const page = pages.value[pageIndex]
    if (!page) return
    if (!page.activated) {
        // 标记为已激活，触发首次挂载
        page.activated = true
        // 首次激活后，等组件挂载完成再触发子组件 onLoad（自定义）
        nextTick(() => {
            ensureRefReady(pageIndex, 'onLoad')
        })
    }
}

/**
 * 是否已登录
 */
function isLoggedIn() {
    try {
        const u = uni.getStorageSync('userInfo')
        if (!u) return false
        const info = typeof u === 'string' ? JSON.parse(u) : u
        return !!info?.yhsbToken
    } catch (e) {
        return false
    }
}

/**
 * 获取 syList（数组）
 */
function getSyList() {
    try {
        const u = uni.getStorageSync('userInfo')
        const info = typeof u === 'string' ? JSON.parse(u) : u
        const raw = info?.syList || info?.sylist || '[]'
        // return ['statistics','bzrDmHomep']
        if (Array.isArray(raw)) return raw
        return JSON.parse(raw)
    } catch (e) {
        return []
    }
}

/**
 * 按登录态构建一级页
 * - 未登录：仅“我的”
 * - 已登录：按 syList 渲染可见首页
 */
function buildPagesFromAuth() {
    const list = []
    const loggedIn = isLoggedIn()
    const sy = loggedIn ? getSyList() : []

    // 能力 → 页面配置映射（按需扩展）
    const capabilityMap = {
        mp_xcdmHomep: {
            key: 'xcDm',
            title: '校车点名',
            icon: 'icon-dianming',
            path: 'pages/xcdm/index',
            component: XcdmPage,
        },
        mp_njdmHomep: {
            key: 'mp_njdmHomep',
            title: '点名统计',
            icon: 'icon-tongji',
            path: 'pages/statistics/bjdm_statistics',
            component: BjdmStatisticsPage,
        },
        mp_bzrdmHomep: {
            key: 'bzrDm',
            title: '班主任点名',
            icon: 'icon-dianming',
            path: 'pages/bjdm/bjdm_bzrDm',
            component: BzrdmPage,
        },
        todo: {
            key: 'todo',
            title: '待办',
            icon: 'icon-daiban',
            path: 'pages/todo/todo_list',
            component: TodoPage,
        },
    }

    if (loggedIn) {
        const added = new Set()
        // 仅当 syList 含 mp_xcdmHomep 时才展示“校车点名”
        if (sy.includes('mp_xcdmHomep')) {
            list.push({ ...capabilityMap.mp_xcdmHomep, activated: false })
            added.add(capabilityMap.mp_xcdmHomep.key)
        }
        sy.forEach(cap => {
            const conf = capabilityMap[cap]
            if (conf && !added.has(conf.key)) {
                list.push({ ...conf, activated: false })
                added.add(conf.key)
            }
        })
    }

    // 末尾永远追加“我的”
    list.push({
        key: 'my',
        title: '我的',
        icon: 'icon-wode',
        path: 'pages/my/index',
        component: MyPage,
        activated: false,
    })

    pages.value = list
    console.log('✅ 获取权限列表成功:', list)
}

// 主容器的生命周期
onLoad((options) => {
    // 页面进入时建立 WebSocket 连接
    initWebSocket()

    // 测试写死
    // options.sn = 'A100006B6256E6'
    // options.cardNo = 'E00401532101245F'
    if(options.cardNo == 'E004015316BE6182'){
        options.cardNo = 'E004015316BE61821'
    }
    // if (true) {

    if (typeof wmpf !== 'undefined') { 
        console.log('WMPF环境')

        uni.reLaunch({
            url: `/pages/device/index?sn=${options.sn}&cardNo=${options.cardNo}`
        })
    } else {
        console.log('非WMPF环境')
        //  console.log('主容器页面加载', options)
        // 先按登录态构建一级页
        buildPagesFromAuth()
        // 临时：主首页写死默认打开“校车点名”
        const xcdmIndex = pages.value.findIndex(p => p.key === 'xcDm')
        currentIndex.value = xcdmIndex >= 0 ? xcdmIndex : 0
        // 激活当前页（首次时会触发 onLoad）
        activateByIndex(currentIndex.value)

        // 监听登录事件，登录后重建一级页
        uni.$on('login', () => {
            const currentKey = pages.value[currentIndex.value]?.key
            buildPagesFromAuth()
            // 临时：登录后默认打开“校车点名”
            const idx = pages.value.findIndex(p => p.key === 'xcDm')
            currentIndex.value = idx >= 0 ? idx : 0
            activateByIndex(currentIndex.value)
            nextTick(() => {
                ensureRefReady(currentIndex.value, 'onShow')
            })
        })
    }
})

onShow(() => {
    //  console.log('主容器页面显示')
    // 触发当前页面的 onShow（可能需要等待 ref 就绪）
    nextTick(() => {
        ensureRefReady(currentIndex.value, 'onShow')
    })
})

onHide(() => {
    //  console.log('主容器页面隐藏')
    // 触发当前页面的 onHide
    triggerPageLifecycle(currentIndex.value, 'onHide')
})

onUnload(() => {
    //  console.log('主容器页面卸载')
    // 触发所有页面的 onUnload
    pages.value.forEach((_, index) => {
        triggerPageLifecycle(index, 'onUnload')
    })

    // 页面卸载时关闭 WebSocket 连接
    closeWebSocket()
})
</script>

<style lang="scss" scoped>
.main-container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.top-indicator {
    height: 100rpx;
    background: #ffffff;
    border-bottom: 1rpx solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 20rpx;
    box-sizing: border-box;
    flex-shrink: 0;
}

.indicator-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    gap: 8rpx;

    text {
        font-size: 24rpx;
        transition: color 0.3s;
    }

    &.active {
        text {
            font-weight: bold;
        }
    }

    &:active {
        background-color: rgba(83, 156, 248, 0.1);
    }
}

.main-swiper {
    flex: 1;
    width: 100%;
    height: calc(100vh - 100rpx);
}

.page-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>