首页布局更改

This commit is contained in:
冯辉
2025-10-16 16:44:30 +08:00
parent 028e3202bd
commit 14dafac147
12 changed files with 1281 additions and 54 deletions

View File

@@ -0,0 +1,100 @@
<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>