岗位发布开发
This commit is contained in:
冯辉
170
pages/test/company-search-test.vue
Normal file
170
pages/test/company-search-test.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<view class="test-page">
|
||||
<view class="header">
|
||||
<text class="title">企业搜索功能测试</text>
|
||||
</view>
|
||||
|
||||
<view class="test-section">
|
||||
<view class="section-title">功能说明</view>
|
||||
<view class="description">
|
||||
<text class="desc-text">• 企业用户（isCompanyUser=0）：招聘公司输入框为普通输入框</text>
|
||||
<text class="desc-text">• 网格员（isCompanyUser=2）：招聘公司输入框为选择器，点击跳转到搜索页面</text>
|
||||
<text class="desc-text">• 搜索页面支持防抖节流，500ms延迟</text>
|
||||
<text class="desc-text">• 搜索接口：/app/company/likeList，参数：name</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="test-section">
|
||||
<view class="section-title">当前用户类型</view>
|
||||
<view class="user-type-info">
|
||||
<text class="type-label">用户类型：</text>
|
||||
<text class="type-value">{{ getCurrentTypeLabel() }} ({{ currentUserType }})</text>
|
||||
</view>
|
||||
<view class="user-type-info">
|
||||
<text class="type-label">是否企业用户：</text>
|
||||
<text class="type-value">{{ isCompanyUser ? '是' : '否' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="test-section">
|
||||
<view class="section-title">测试操作</view>
|
||||
<view class="button-group">
|
||||
<button class="test-btn" @click="switchToCompany">切换到企业用户</button>
|
||||
<button class="test-btn" @click="switchToGrid">切换到网格员</button>
|
||||
<button class="test-btn" @click="goToPublishJob">进入发布岗位页面</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import useUserStore from '@/stores/useUserStore';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const { userInfo } = 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 : 1);
|
||||
|
||||
const isCompanyUser = computed(() => {
|
||||
return currentUserType.value === 0;
|
||||
});
|
||||
|
||||
const getCurrentTypeLabel = () => {
|
||||
const type = userTypes.find(t => t.value === currentUserType.value);
|
||||
return type ? type.label : '未知';
|
||||
};
|
||||
|
||||
const switchToCompany = () => {
|
||||
userInfo.value.isCompanyUser = 0;
|
||||
uni.setStorageSync('userInfo', userInfo.value);
|
||||
uni.showToast({
|
||||
title: '已切换到企业用户',
|
||||
icon: 'success'
|
||||
});
|
||||
};
|
||||
|
||||
const switchToGrid = () => {
|
||||
userInfo.value.isCompanyUser = 2;
|
||||
uni.setStorageSync('userInfo', userInfo.value);
|
||||
uni.showToast({
|
||||
title: '已切换到网格员',
|
||||
icon: 'success'
|
||||
});
|
||||
};
|
||||
|
||||
const goToPublishJob = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/job/publishJob'
|
||||
});
|
||||
};
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
.test-section {
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.description {
|
||||
.desc-text {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.user-type-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15rpx;
|
||||
|
||||
.type-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.type-value {
|
||||
font-size: 28rpx;
|
||||
color: #256BFA;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
|
||||
.test-btn {
|
||||
height: 80rpx;
|
||||
background: #256BFA;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
|
||||
&:active {
|
||||
background: #1e5ce6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
296
pages/test/homepage-test.vue
Normal file
296
pages/test/homepage-test.vue
Normal file
@@ -0,0 +1,296 @@
|
||||
<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>
|
||||
293
pages/test/tabbar-test.vue
Normal file
293
pages/test/tabbar-test.vue
Normal file
@@ -0,0 +1,293 @@
|
||||
<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>
|
||||
232
pages/test/tabbar-user-type-test.vue
Normal file
232
pages/test/tabbar-user-type-test.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user