297 lines
7.9 KiB
Vue
297 lines
7.9 KiB
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>
|