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

<template>
    <view class="test-page">
        <view class="header">
            <text class="title">TabBar用户类型切换测试</text>
        </view>
        
        <view class="content">
            <view class="current-info">
                <text class="label">当前用户类型：</text>
                <text class="value">{{ getCurrentTypeLabel() }} ({{ currentUserType }})</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="tabbar-preview">
                <text class="section-title">TabBar预览：</text>
                <view class="tabbar-container">
                    <view 
                        v-for="(item, index) in tabbarConfig" 
                        :key="index"
                        class="tabbar-item"
                    >
                        <text class="tabbar-text">{{ item.text }}</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）：显示"招聘会"导航</text>
                <text class="desc-text">• 网格员（userType=2）：显示"招聘会"导航</text>
                <text class="desc-text">• 政府人员（userType=3）：显示"招聘会"导航</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?.isCompanyUser !== undefined ? userInfo.value.isCompanyUser : 1);

const switchUserType = (userType) => {
    console.log('切换用户类型:', userType);
    userInfo.value.isCompanyUser = 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: bold;
        color: #333;
    }
}

.content {
    .current-info {
        background: #fff;
        padding: 30rpx;
        border-radius: 16rpx;
        margin-bottom: 30rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        
        .label {
            font-size: 28rpx;
            color: #666;
        }
        
        .value {
            font-size: 32rpx;
            font-weight: bold;
            color: #256BFA;
            margin-left: 10rpx;
        }
    }
    
    .type-switcher {
        background: #fff;
        padding: 30rpx;
        border-radius: 16rpx;
        margin-bottom: 30rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        
        .section-title {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
            display: block;
        }
        
        .buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 20rpx;
            
            .btn {
                flex: 1;
                min-width: 140rpx;
                height: 80rpx;
                background: #f8f9fa;
                border: 2rpx solid #e9ecef;
                border-radius: 12rpx;
                font-size: 26rpx;
                color: #666;
                transition: all 0.3s ease;
                
                &.active {
                    background: #256BFA;
                    border-color: #256BFA;
                    color: #fff;
                }
            }
        }
    }
    
    .tabbar-preview {
        background: #fff;
        padding: 30rpx;
        border-radius: 16rpx;
        margin-bottom: 30rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        
        .section-title {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
            display: block;
        }
        
        .tabbar-container {
            display: flex;
            background: #f8f9fa;
            border-radius: 12rpx;
            padding: 20rpx;
            
            .tabbar-item {
                flex: 1;
                text-align: center;
                padding: 20rpx 10rpx;
                
                .tabbar-text {
                    font-size: 24rpx;
                    color: #666;
                    font-weight: 500;
                }
            }
        }
    }
    
    .description {
        background: #fff;
        padding: 30rpx;
        border-radius: 16rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        
        .desc-title {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
            display: block;
        }
        
        .desc-text {
            font-size: 24rpx;
            color: #666;
            line-height: 1.6;
            display: block;
            margin-bottom: 10rpx;
        }
    }
}
</style>