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

<template>
    <view class="tabbar-test">
        <view class="header">
            <text class="title">自定义TabBar测试页面</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>
            </view>
            
            <view class="switch-section">
                <text class="section-title">切换用户类型：</text>
                <view class="switch-buttons">
                    <button 
                        v-for="(type, index) in userTypes" 
                        :key="index"
                        @click="switchUserType(type.value)"
                        :class="{ active: currentUserType === type.value }"
                        class="switch-btn"
                    >
                        {{ type.label }}
                    </button>
                </view>
            </view>
            
            <view class="description">
                <text class="desc-title">功能说明：</text>
                <text class="desc-text">• 未登录状态：默认显示求职者tabbar（职位 + 招聘会 + AI+ + 消息 + 我的）</text>
                <text class="desc-text">• 企业用户（userType=0）：显示"发布岗位"导航，隐藏"招聘会"</text>
                <text class="desc-text">• 求职者用户（userType=1,2,3）：显示"招聘会"导航</text>
                <text class="desc-text">• 登录后根据用户角色自动切换对应的tabbar</text>
                <text class="desc-text">• 系统默认tabbar已被隐藏，使用自定义tabbar</text>
            </view>
            
            <view class="test-section">
                <text class="section-title">测试功能：</text>
                <button @click="testHideTabBar" class="test-btn">检查系统TabBar状态</button>
                <button @click="testShowTabBar" class="test-btn">临时显示系统TabBar</button>
                <button @click="testLogin" class="test-btn" v-if="!hasLogin">模拟登录</button>
                <button @click="testLogout" class="test-btn" v-if="hasLogin">模拟登出</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';

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?.isCompanyUser !== undefined ? userInfo.value.isCompanyUser : 0);

const switchUserType = (userType) => {
    console.log('切换用户类型:', userType);
    userInfo.value.isCompanyUser = userType;
    // 更新到本地存储
    uni.setStorageSync('userInfo', userInfo.value);
};

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 testHideTabBar = () => {
    uni.hideTabBar();
    uni.showToast({
        title: '系统TabBar已隐藏',
        icon: 'success'
    });
};

const testShowTabBar = () => {
    uni.showTabBar();
    uni.showToast({
        title: '系统TabBar已显示（测试用）',
        icon: 'none'
    });
    // 3秒后自动隐藏
    setTimeout(() => {
        uni.hideTabBar();
    }, 3000);
};

const testLogin = () => {
    // 模拟登录，设置用户信息
    const mockUserInfo = {
        userType: 1, // 默认设置为求职者
        name: '测试用户',
        id: 'test123'
    };
    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'
    });
};
</script>

<style lang="scss" scoped>
.tabbar-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;
}

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

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

.switch-section {
    margin-bottom: 40rpx;
}

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

.switch-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
}

.switch-btn {
    padding: 20rpx 30rpx;
    background: #f0f0f0;
    border: none;
    border-radius: 10rpx;
    font-size: 24rpx;
    color: #666;
    transition: all 0.3s;
}

.switch-btn.active {
    background: #256BFA;
    color: white;
}

.description {
    background: #f8f9fa;
    padding: 30rpx;
    border-radius: 10rpx;
}

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

.desc-text {
    font-size: 24rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 10rpx;
    display: block;
}

.test-section {
    margin-top: 40rpx;
    background: #f8f9fa;
    padding: 30rpx;
    border-radius: 10rpx;
}

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

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

.not-logged-in {
    color: #ff4d4f !important;
    font-weight: bold;
}
</style>