USER_TYPE_STORAGE.md 3.3 KB

用户类型独立存储功能说明

功能概述

将用户类型 (user_type) 从 userInfo 中分离出来,单独存储到本地存储中,确保用户类型在页面刷新后仍然保持。

实现方案

1. 独立存储字段

// store/user.js
const state = () => ({
  // ... 其他字段
  userType: getStorage('userType') || 1 // 单独存储用户类型,默认为卖家
})

2. 存储键名

  • 用户类型存储键: userType
  • 存储位置: 本地存储 (localStorage)
  • 默认值: 1 (卖家)

3. 用户类型定义

  • 1: 卖家
  • 2: 买家

核心方法

设置用户类型

// 设置为买家
useUser.setUserType(2);

// 设置为卖家
useUser.setUserType(1);

获取用户类型

const userType = useUser.getUserType();
// 返回: 1 或 2

判断用户类型

const isBuyer = computed(() => {
  return useUser.getUserType() === 2;
});

存储机制

1. 数据持久化

  • 用户类型存储在 localStorage 中,键名为 userType
  • 页面刷新、应用重启后数据仍然保持
  • 不受 userInfo 更新影响

2. 数据同步

  • 设置用户类型时自动同步到本地存储
  • 应用启动时从本地存储读取用户类型
  • 退出登录时清除用户类型存储

3. 默认行为

  • 首次使用默认为卖家类型 (1)
  • 退出登录后重置为卖家类型
  • 未登录状态下根据页面路径判断

使用场景

1. 用户模式切换

// 切换到买家模式
const switchToBuyer = () => {
  useUser.setUserType(2);
  uni.reLaunch({ url: '/pagesBuyer/home/index' });
};

// 切换到卖家模式
const switchToSeller = () => {
  useUser.setUserType(1);
  uni.reLaunch({ url: '/pages/index/index' });
};

2. 导航栏显示

// Tabbar 组件中根据用户类型显示不同导航
const currentNavList = computed(() => {
  if (userInfo.value && Object.keys(userInfo.value).length > 0) {
    return isBuyer.value ? buyerNavList.value : navList.value;
  }
  // 未登录时根据页面路径判断
  const currentPath = getCurrentPages()[getCurrentPages().length - 1].route;
  const isBuyerPage = currentPath.includes("pagesBuyer");
  return isBuyerPage ? buyerNavList.value : navList.value;
});

优势

1. 数据独立性

  • 用户类型与用户信息分离
  • 不受用户信息更新影响
  • 避免数据冲突

2. 持久化保证

  • 页面刷新后用户类型保持不变
  • 应用重启后状态保持
  • 用户体验更佳

3. 灵活控制

  • 可以独立控制用户类型
  • 支持动态切换
  • 便于扩展更多用户类型

注意事项

  1. 存储键名: 使用 userType 作为存储键名,避免与其他数据冲突
  2. 默认值: 始终设置默认值为 1 (卖家),确保应用正常运行
  3. 清理机制: 退出登录时清除用户类型存储,避免数据残留
  4. 兼容性: 保持与原有代码的兼容性,不影响现有功能

调试信息

在买家端首页添加了调试信息显示当前用户类型:

<view class="debug-info" v-if="token">
  <text>当前用户类型: {{ userType === 1 ? '卖家' : '买家' }} ({{ userType }})</text>
</view>

可以通过这个信息验证用户类型是否正确存储和显示。