ks-app-employment-service/pages/test/homepage-test.vue

<template>
    <view class="homepage-test">
        <view class="header">
            <text class="title">首页内容测试</text>
        </view>
        
        <view class="content">
            <view class="user-info">
                <text class="label">当前用户类型：</text>
                <text class="value">{{ getCurrentUserTypeLabel() }}</text>
            </view>
            
            <view class="login-status">
                <text class="label">登录状态：</text>
                <text class="value" :class="{ 'logged-in': hasLogin, 'not-logged-in': !hasLogin }">
                    {{ hasLogin ? '已登录' : '未登录' }}
                </text>
            </view>
            
            <view class="debug-info">
                <text class="label">调试信息：</text>
                <text class="value">userType: {{ userInfo?.userType ?? 'undefined' }}</text>
                <text class="value">hasLogin: {{ hasLogin }}</text>
                <text class="value">shouldShowJobSeeker: {{ shouldShowJobSeekerContent }}</text>
                <text class="value">shouldShowCompany: {{ shouldShowCompanyContent }}</text>
                <text class="value">完整userInfo: {{ JSON.stringify(userInfo) }}</text>
            </view>
            
            <view class="content-preview">
                <text class="section-title">首页内容预览：</text>
                
                <view class="content-item" v-if="shouldShowJobSeekerContent">
                    <text class="content-label">✅ 求职者内容</text>
                    <text class="content-desc">• 附近工作卡片</text>
                    <text class="content-desc">• 服务功能网格</text>
                    <text class="content-desc">• 职位筛选器</text>
                </view>
                
                <view class="content-item" v-if="shouldShowCompanyContent">
                    <text class="content-label">✅ 企业用户内容</text>
                    <text class="content-desc">• 企业服务标题</text>
                    <text class="content-desc">• 发布岗位按钮</text>
                    <text class="content-desc">• 企业管理功能</text>
                </view>
                
                <view class="content-item" v-if="!shouldShowJobSeekerContent && !shouldShowCompanyContent">
                    <text class="content-label">❌ 无内容显示</text>
                    <text class="content-desc">请检查用户类型设置</text>
                </view>
            </view>
            
            <view class="test-buttons">
                <button @click="testLoginAsJobSeeker" class="test-btn">模拟求职者登录</button>
                <button @click="testLoginAsCompany" class="test-btn">模拟企业用户登录</button>
                <button @click="testLogout" class="test-btn" v-if="hasLogin">模拟登出</button>
                <button @click="forceRefreshUserInfo" class="test-btn">强制刷新用户信息</button>
                <button @click="clearUserInfo" class="test-btn">清除用户信息</button>
                <button @click="refreshTabBar" class="test-btn">刷新TabBar</button>
            </view>
        </view>
        
        <!-- 自定义tabbar -->
        <CustomTabBar :currentPage="0" />
    </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
import { tabbarManager } from '@/utils/tabbarManager';

const userStore = useUserStore();
const { userInfo, hasLogin } = storeToRefs(userStore);

const userTypes = [
    { value: 0, label: '企业用户' },
    { value: 1, label: '求职者' },
    { value: 2, label: '网格员' },
    { value: 3, label: '政府人员' }
];

const currentUserType = computed(() => userInfo.value?.userType || 1);

const getCurrentUserTypeLabel = () => {
    const type = userTypes.find(t => t.value === currentUserType.value);
    return type ? type.label : '未知';
};

// 计算是否显示求职者内容
const shouldShowJobSeekerContent = computed(() => {
    if (!hasLogin.value) {
        return true;
    }
    const userType = userInfo.value?.isCompanyUser;
    return userType !== 0;
});

// 计算是否显示企业用户内容
const shouldShowCompanyContent = computed(() => {
    if (!hasLogin.value) {
        return false;
    }
    const userType = userInfo.value?.isCompanyUser;
    return userType === 0;
});

const testLoginAsJobSeeker = () => {
    const mockUserInfo = {
        userType: 1,
        name: '求职者用户',
        id: 'jobseeker123'
    };
    userInfo.value = mockUserInfo;
    userStore.hasLogin = true;
    uni.setStorageSync('userInfo', mockUserInfo);
    uni.showToast({
        title: '模拟求职者登录成功',
        icon: 'success'
    });
};

const testLoginAsCompany = () => {
    const mockUserInfo = {
        userType: 0,
        name: '企业用户',
        id: 'company123'
    };
    userInfo.value = mockUserInfo;
    userStore.hasLogin = true;
    uni.setStorageSync('userInfo', mockUserInfo);
    uni.showToast({
        title: '模拟企业用户登录成功',
        icon: 'success'
    });
};

const testLogout = () => {
    userStore.logOut(false);
    uni.showToast({
        title: '模拟登出成功',
        icon: 'success'
    });
};

const forceRefreshUserInfo = () => {
    // 从本地存储重新加载用户信息
    const cachedUserInfo = uni.getStorageSync('userInfo');
    if (cachedUserInfo) {
        userInfo.value = cachedUserInfo;
        userStore.hasLogin = true;
        uni.showToast({
            title: '用户信息已刷新',
            icon: 'success'
        });
    } else {
        uni.showToast({
            title: '未找到用户信息',
            icon: 'none'
        });
    }
};

const clearUserInfo = () => {
    // 清除所有用户信息
    uni.removeStorageSync('userInfo');
    uni.removeStorageSync('token');
    userInfo.value = {};
    userStore.hasLogin = false;
    uni.showToast({
        title: '用户信息已清除',
        icon: 'success'
    });
};

const refreshTabBar = () => {
    // 刷新tabbar
    tabbarManager.refreshTabBar();
    uni.showToast({
        title: 'TabBar已刷新',
        icon: 'success'
    });
};
</script>

<style lang="scss" scoped>
.homepage-test {
    padding: 40rpx;
    min-height: 100vh;
    background-color: #f5f5f5;
}

.header {
    text-align: center;
    margin-bottom: 40rpx;
}

.title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
}

.content {
    background: white;
    border-radius: 20rpx;
    padding: 40rpx;
    margin-bottom: 40rpx;
}

.user-info, .login-status, .debug-info {
    display: flex;
    flex-direction: column;
    margin-bottom: 20rpx;
    padding: 20rpx;
    background: #f8f9fa;
    border-radius: 10rpx;
}

.debug-info .value {
    font-size: 20rpx;
    color: #666;
    margin: 5rpx 0;
    display: block;
    word-break: break-all;
}

.label {
    font-size: 28rpx;
    color: #666;
    margin-right: 20rpx;
}

.value {
    font-size: 28rpx;
    color: #256BFA;
    font-weight: bold;
}

.logged-in {
    color: #52c41a !important;
}

.not-logged-in {
    color: #ff4d4f !important;
}

.content-preview {
    margin: 30rpx 0;
}

.section-title {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
}

.content-item {
    background: #f8f9fa;
    padding: 20rpx;
    border-radius: 10rpx;
    margin-bottom: 15rpx;
}

.content-label {
    font-size: 24rpx;
    color: #333;
    font-weight: bold;
    display: block;
    margin-bottom: 10rpx;
}

.content-desc {
    font-size: 22rpx;
    color: #666;
    margin: 5rpx 0;
    display: block;
}

.test-buttons {
    margin-top: 30rpx;
}

.test-btn {
    margin: 10rpx 0;
    padding: 20rpx 30rpx;
    background: #256BFA;
    color: white;
    border: none;
    border-radius: 10rpx;
    font-size: 24rpx;
    width: 100%;
}
</style>