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>
|