forestry-wx/src/pages/index/index.vue

<template>
    <z-paging ref="paging" v-model="list" @query="queryList" @onRefresh="onRefresh">
        <template #top>
            <!-- 用户信息区域 -->
            <view class="user-info-section">
                <view v-if="userInfo" class="user-card">
                    <image 
                        :src="userInfo.avatar || '/static/logo.png'" 
                        class="user-avatar"
                    />
                    <view class="user-details">
                        <text class="user-name">{{ userInfo.nickname || userInfo.username }}</text>
                        <text class="user-roles">{{ userInfo.roles.join(', ') }}</text>
                    </view>
                    <button class="logout-btn" @click="handleLogout">退出登录</button>
                </view>
                <view v-else class="login-prompt">
                    <text class="prompt-text">请先登录</text>
                    <button class="login-btn" @click="goToLogin">前往登录</button>
                </view>
            </view>
        </template>
        
        <view class="content">
            <image class="logo" src="/static/logo.png" />
            <view class="text-area">
                <text class="title">{{ title }}</text>
            </view>
            <view class="mb-80">{{ selectDictLabel(class_type, 1) }}</view>
            <view class="bg-blue-500 text-white p-4 rounded">Hello UnoCSS!</view>
         
            <template v-for="(item, index) in list" :key="index">
                <up-button 
                    text="渐变色按钮" 
                    color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
                />
            </template>
        </view> 
    </z-paging>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useAuthStore } from '@/store/modules/auth';
import { useUserStore } from '@/store/modules/user';
import { checkAuth, logoutAndRedirect } from '@/utils/routeGuard';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { class_type } = toRefs<any>(proxy?.useDict("class_type"));
const title = ref("Hello");
const paging = ref<any>(null);

// Store
const authStore = useAuthStore();
const userStore = useUserStore();

// 计算属性
const userInfo = computed(() => userStore.userInfo);

console.log(import.meta.env);

onMounted(async () => {
    // 检查登录状态
    await checkAuth({ requireAuth: false });
    
    uni.showToast({
        title: "Hello World!",
        icon: "none",
        duration: 2000,
    });
});

const list = ref<any[]>([]);

const queryList = (pageNo: number, pageSize: number) => {
    console.log(`请求第${pageNo}页，每页${pageSize}条数据`);
    
    // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
    // 这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过paging.value.complete(请求回来的数组)将请求结果传给z-paging
    setTimeout(() => {
        const data = Array.from({ length: pageSize }, (_, i) => ({
            id: pageNo * pageSize + i + 1,
            name: `Item ${pageNo * pageSize + i + 1}`,
        }));
        paging.value.complete(data);
    }, 1000);
};

const onRefresh = () => {
    try {
        // 这里可以执行一些刷新操作，比如重新请求数据
        console.log("页面刷新");
        paging.value.refresh(); // 调用z-paging的refresh方法
    } catch (error) {
        console.error("刷新失败", error);
    }
};

/**
 * 前往登录页
 */
const goToLogin = (): void => {
    uni.navigateTo({
        url: '/pages/login/login'
    });
};

/**
 * 处理退出登录
 */
const handleLogout = async (): Promise<void> => {
    try {
        uni.showModal({
            title: '确认退出',
            content: '确定要退出登录吗？',
            success: async (res) => {
                if (res.confirm) {
                    await logoutAndRedirect();
                    uni.showToast({
                        title: '已退出登录',
                        icon: 'success'
                    });
                }
            }
        });
    } catch (error) {
        console.error('退出登录失败:', error);
        uni.showToast({
            title: '退出失败',
            icon: 'error'
        });
    }
};
</script>

<style lang="scss" scoped>
.user-info-section {
    padding: 20rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    .user-card {
        display: flex;
        align-items: center;
        padding: 20rpx;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 12rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        
        .user-avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }
        
        .user-details {
            flex: 1;
            
            .user-name {
                display: block;
                font-size: 32rpx;
                font-weight: 600;
                color: #333;
                margin-bottom: 8rpx;
            }
            
            .user-roles {
                display: block;
                font-size: 24rpx;
                color: #666;
            }
        }
        
        .logout-btn {
            padding: 12rpx 24rpx;
            background: #f56c6c;
            color: #fff;
            border: none;
            border-radius: 8rpx;
            font-size: 24rpx;
        }
    }
    
    .login-prompt {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 12rpx;
        
        .prompt-text {
            font-size: 28rpx;
            color: #666;
        }
        
        .login-btn {
            padding: 12rpx 24rpx;
            background: #667eea;
            color: #fff;
            border: none;
            border-radius: 8rpx;
            font-size: 24rpx;
        }
    }
}

.content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
}

.text-area {
    display: flex;
    justify-content: center;
}

.title {
    font-size: 36rpx;
    color: #8f8f94;
}
</style>