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

<template>
    <view class="test-page">
        <view class="header">
            <text class="title">用户类型测试页面</text>
        </view>
        
        <view class="content">
            <view class="current-info">
                <text class="label">当前用户类型：</text>
                <text class="value">{{ getCurrentTypeLabel() }}</text>
            </view>
            
            <view class="type-switcher">
                <text class="section-title">切换用户类型：</text>
                <view class="buttons">
                    <button 
                        v-for="(type, index) in userTypes" 
                        :key="index"
                        :class="['btn', { active: currentUserType === type.value }]"
                        @click="switchUserType(type.value)"
                    >
                        {{ type.label }}
                    </button>
                </view>
            </view>
            
            <view class="navigation-info">
                <text class="section-title">底部导航栏配置：</text>
                <view class="nav-items">
                    <view 
                        v-for="(item, index) in tabbarConfig" 
                        :key="index"
                        class="nav-item"
                    >
                        <text class="nav-text">{{ item.text || 'AI助手' }}</text>
                    </view>
                </view>
            </view>
            
            <view class="description">
                <text class="desc-title">说明：</text>
                <text class="desc-text">• 企业用户（userType=0）：显示"发布岗位"导航，隐藏"招聘会"</text>
                <text class="desc-text">• 其他用户（userType=1,2,3）：显示"招聘会"导航</text>
                <text class="desc-text">• 切换用户类型后，底部导航栏会自动更新</text>
                <text class="desc-text">• 企业用户模式下，"招聘会"导航项完全隐藏</text>
            </view>
        </view>
    </view>
</template>

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

const { userInfo } = storeToRefs(useUserStore());

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

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

const switchUserType = (userType) => {
    userInfo.value.userType = userType;
    uni.setStorageSync('userInfo', userInfo.value);
    uni.showToast({
        title: `已切换到${getCurrentTypeLabel()}`,
        icon: 'success'
    });
};

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

const tabbarConfig = computed(() => {
    const baseItems = [
        { text: '首页' },
        { text: currentUserType.value === 0 ? '发布岗位' : '招聘会' },
        { text: '' }, // AI助手
        { text: '消息' },
        { text: '我的' }
    ];
    return baseItems;
});
</script>

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

.header {
    text-align: center;
    margin-bottom: 40rpx;
    
    .title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
    }
}

.content {
    .current-info {
        background: #fff;
        padding: 30rpx;
        border-radius: 10rpx;
        margin-bottom: 30rpx;
        
        .label {
            font-size: 28rpx;
            color: #666;
        }
        
        .value {
            font-size: 28rpx;
            font-weight: 600;
            color: #256BFA;
            margin-left: 10rpx;
        }
    }
    
    .type-switcher {
        background: #fff;
        padding: 30rpx;
        border-radius: 10rpx;
        margin-bottom: 30rpx;
        
        .section-title {
            font-size: 28rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 20rpx;
            display: block;
        }
        
        .buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 15rpx;
            
            .btn {
                padding: 15rpx 30rpx;
                border: 2rpx solid #ddd;
                border-radius: 8rpx;
                background: #fff;
                font-size: 24rpx;
                color: #666;
                
                &.active {
                    background: #256BFA;
                    color: #fff;
                    border-color: #256BFA;
                }
            }
        }
    }
    
    .navigation-info {
        background: #fff;
        padding: 30rpx;
        border-radius: 10rpx;
        margin-bottom: 30rpx;
        
        .section-title {
            font-size: 28rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 20rpx;
            display: block;
        }
        
        .nav-items {
            display: flex;
            justify-content: space-around;
            
            .nav-item {
                text-align: center;
                
                .nav-text {
                    font-size: 24rpx;
                    color: #666;
                }
            }
        }
    }
    
    .description {
        background: #fff;
        padding: 30rpx;
        border-radius: 10rpx;
        
        .desc-title {
            font-size: 28rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 15rpx;
            display: block;
        }
        
        .desc-text {
            font-size: 24rpx;
            color: #666;
            line-height: 1.6;
            display: block;
            margin-bottom: 10rpx;
        }
    }
}
</style>