294 lines
7.5 KiB
Vue
294 lines
7.5 KiB
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>
|