101 lines
2.5 KiB
Vue
101 lines
2.5 KiB
Vue
|
<template>
|
|||
|
|
<view class="user-type-switcher">
|
|||
|
|
<view class="switcher-title">用户类型切换（测试用）</view>
|
|||
|
|
<view class="switcher-buttons">
|
|||
|
|
<button
|
|||
|
|
v-for="(type, index) in userTypes"
|
|||
|
|
:key="index"
|
|||
|
|
:class="['type-btn', { active: currentUserType === type.value }]"
|
|||
|
|
@click="switchUserType(type.value)"
|
|||
|
|
>
|
|||
|
|
{{ type.label }}
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
<view class="current-type">
|
|||
|
|
当前用户类型：{{ getCurrentTypeLabel() }} ({{ currentUserType }})
|
|||
|
|
</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) => {
|
|||
|
|
console.log('切换用户类型:', userType);
|
|||
|
|
console.log('切换前 userInfo:', userInfo.value);
|
|||
|
|
|
|||
|
|
userInfo.value.userType = userType;
|
|||
|
|
|
|||
|
|
console.log('切换后 userInfo:', userInfo.value);
|
|||
|
|
|
|||
|
|
// 保存到本地存储
|
|||
|
|
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 : '未知';
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.user-type-switcher {
|
|||
|
|
padding: 20rpx;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin: 20rpx;
|
|||
|
|
|
|||
|
|
.switcher-title {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.switcher-buttons {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 10rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.type-btn {
|
|||
|
|
padding: 10rpx 20rpx;
|
|||
|
|
border: 2rpx solid #ddd;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666;
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
background: #256BFA;
|
|||
|
|
color: #fff;
|
|||
|
|
border-color: #256BFA;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.current-type {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|