From bef845620c08e2cf09b7a7fb2430805a09bcef8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Sat, 6 Sep 2025 10:39:36 +0800 Subject: [PATCH] =?UTF-8?q?feat(dealer/customer):=20=E5=AE=9E=E7=8E=B0?= =?UTF-8?q?=E5=AE=A2=E6=88=B7=E5=88=97=E8=A1=A8=E7=9A=84=E6=97=A0=E9=99=90?= =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E5=92=8C=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?= =?UTF-8?q?-=20=E5=9C=A8=E5=AE=A2=E6=88=B7=E5=88=97=E8=A1=A8=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E6=B7=BB=E5=8A=A0=20InfiniteLoading=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E5=AE=9E=E7=8E=B0=E6=97=A0=E9=99=90=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8=E5=8A=A0=E8=BD=BD-=20=E6=B7=BB=E5=8A=A0=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=94=AF=E6=8C=81=E6=8C=89?= =?UTF-8?q?=E5=85=B3=E9=94=AE=E8=AF=8D=E6=90=9C=E7=B4=A2=E5=AE=A2=E6=88=B7?= =?UTF-8?q?=20-=20=E4=BC=98=E5=8C=96=E6=95=B0=E6=8D=AE=E5=8A=A0=E8=BD=BD?= =?UTF-8?q?=E9=80=BB=E8=BE=91=EF=BC=8C=E8=A7=A3=E5=86=B3=E9=87=8D=E5=A4=8D?= =?UTF-8?q?=E8=AF=B7=E6=B1=82=E9=97=AE=E9=A2=98=20-=20=E5=9C=A8=20Header?= =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=E4=B8=AD=E5=A2=9E=E5=8A=A0=E7=94=A8?= =?UTF-8?q?=E6=88=B7=E7=99=BB=E5=BD=95=E7=8A=B6=E6=80=81=E5=92=8C=E4=BF=A1?= =?UTF-8?q?=E6=81=AF=E7=9A=84=E6=A3=80=E6=9F=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/dealer/customer/index.tsx | 4 +- src/hooks/useUser.ts | 23 ++++- 头像昵称同步问题修复说明.md | 132 +++++++++++++++++++++++++++++ 用户信息缓存丢失问题修复说明.md | 145 ++++++++++++++++++++++++++++++++ 4 files changed, 298 insertions(+), 6 deletions(-) create mode 100644 头像昵称同步问题修复说明.md create mode 100644 用户信息缓存丢失问题修复说明.md diff --git a/src/dealer/customer/index.tsx b/src/dealer/customer/index.tsx index 465409d..a1f49d7 100644 --- a/src/dealer/customer/index.tsx +++ b/src/dealer/customer/index.tsx @@ -231,7 +231,7 @@ const CustomerIndex = () => { return ( @@ -257,7 +257,7 @@ const CustomerIndex = () => { description={loading ? "加载中..." : "暂无客户数据"} /> ) : ( - + 没有更多了 ) diff --git a/src/hooks/useUser.ts b/src/hooks/useUser.ts index 1d3a670..c8bf04c 100644 --- a/src/hooks/useUser.ts +++ b/src/hooks/useUser.ts @@ -94,9 +94,17 @@ export const useUser = () => { try { Taro.setStorageSync('access_token', token); Taro.setStorageSync('User', userInfo); - Taro.setStorageSync('UserId', userInfo.userId); - Taro.setStorageSync('TenantId', userInfo.tenantId); - Taro.setStorageSync('Phone', userInfo.phone); + + // 确保关键字段不为空时才保存，避免覆盖现有数据 + if (userInfo.userId) { + Taro.setStorageSync('UserId', userInfo.userId); + } + if (userInfo.tenantId) { + Taro.setStorageSync('TenantId', userInfo.tenantId); + } + if (userInfo.phone) { + Taro.setStorageSync('Phone', userInfo.phone); + } // 保存头像和昵称信息 if (userInfo.avatar) { Taro.setStorageSync('Avatar', userInfo.avatar); @@ -172,9 +180,16 @@ export const useUser = () => { } try { - const updatedUser = { ...user, ...userData }; + // 先获取最新的用户信息，确保我们有完整的数据 + const latestUserInfo = await getUserInfo(); + + // 合并最新的用户信息和要更新的数据 + const updatedUser = { ...latestUserInfo, ...userData }; + + // 调用API更新用户信息 await updateUserInfo(updatedUser); + // 更新本地状态 setUser(updatedUser); // 更新本地存储 diff --git a/头像昵称同步问题修复说明.md b/头像昵称同步问题修复说明.md new file mode 100644 index 0000000..0b2d7a6 --- /dev/null +++ b/头像昵称同步问题修复说明.md @@ -0,0 +1,132 @@ +# 头像昵称同步问题修复说明 + +## 问题描述 +用户更新了头像和昵称后，首页仍然提示"您还没有上传头像和昵称"，导致用户体验不佳。 + +## 问题分析 + +### 根本原因 +1. **检查逻辑错误**：`Header.tsx` 中检查的是 `Taro.getStorageSync('Avatar')`，但这个字段从未被设置过 +2. **数据同步缺失**：`useUser` hook 中的 `saveUserToStorage` 函数没有保存头像和昵称到本地存储 +3. **状态不一致**：用户信息更新后，本地存储和 `useUser` hook 状态不同步 + +### 具体问题 +1. **Header.tsx 第42行**： + ```typescript + if(!Taro.getStorageSync('Avatar')){ + // 提示用户上传头像和昵称 + } + ``` + 这里检查的 `Avatar` 字段从未被保存到本地存储 + +2. **useUser.ts saveUserToStorage 函数**： + ```typescript + const saveUserToStorage = (token: string, userInfo: User) => { + Taro.setStorageSync('access_token', token); + Taro.setStorageSync('User', userInfo); + Taro.setStorageSync('UserId', userInfo.userId); + Taro.setStorageSync('TenantId', userInfo.tenantId); + Taro.setStorageSync('Phone', userInfo.phone); + // 缺少头像和昵称的保存 + } + ``` + +## 修复方案 + +### 1. 修复 saveUserToStorage 函数 +在 `src/hooks/useUser.ts` 中添加头像和昵称的保存： + +```typescript +const saveUserToStorage = (token: string, userInfo: User) => { + try { + Taro.setStorageSync('access_token', token); + Taro.setStorageSync('User', userInfo); + Taro.setStorageSync('UserId', userInfo.userId); + Taro.setStorageSync('TenantId', userInfo.tenantId); + Taro.setStorageSync('Phone', userInfo.phone); + // 保存头像和昵称信息 + if (userInfo.avatar) { + Taro.setStorageSync('Avatar', userInfo.avatar); + } + if (userInfo.nickname) { + Taro.setStorageSync('Nickname', userInfo.nickname); + } + } catch (error) { + console.error('保存用户数据失败:', error); + } +}; +``` + +### 2. 优化 Header.tsx 检查逻辑 +在 `src/pages/index/Header.tsx` 中改进检查逻辑： + +```typescript +// 检查用户是否已登录并且有头像和昵称 +if (isLoggedIn) { + const hasAvatar = user?.avatar || Taro.getStorageSync('Avatar'); + const hasNickname = user?.nickname || Taro.getStorageSync('Nickname'); + + if (!hasAvatar || !hasNickname) { + Taro.showToast({ + title: '您还没有上传头像和昵称', + icon: 'none' + }) + setTimeout(() => { + Taro.navigateTo({ + url: '/user/profile/profile' + }) + }, 3000) + return false; + } +} +``` + +## 修复效果 + +### ✅ 数据同步 +- 用户更新头像/昵称后，信息会同时保存到 `useUser` hook 状态和本地存储 +- 确保数据的一致性和持久化 + +### ✅ 检查逻辑优化 +- 同时检查 `useUser` hook 中的用户信息和本地存储 +- 提供双重保障，确保检查的准确性 + +### ✅ 用户体验改善 +- 用户更新头像/昵称后不再收到错误提示 +- 信息更新立即生效，无需重新登录 + +## 技术细节 + +### 数据流程 +1. **用户更新信息** → `profile.tsx` 调用 `updateUser()` +2. **updateUser()** → 调用 API 更新服务器数据 +3. **更新成功** → 调用 `saveUserToStorage()` 保存到本地 +4. **本地存储** → 同时更新 `useUser` 状态和 Taro 存储 +5. **Header 检查** → 检查两个数据源确保准确性 + +### 关键修改点 +1. **useUser.ts 第99-106行**：添加头像和昵称的本地存储 +2. **Header.tsx 第41-58行**：优化检查逻辑，支持双重验证 + +### 兼容性 +- 向后兼容：旧的检查逻辑仍然有效 +- 渐进增强：新的检查逻辑提供更好的准确性 +- 数据迁移：现有用户的数据会在下次更新时自动同步 + +## 测试建议 + +### 测试场景 +1. **新用户注册**：验证首次上传头像/昵称后不再提示 +2. **现有用户更新**：验证更新头像/昵称后立即生效 +3. **应用重启**：验证重启应用后信息仍然正确 +4. **网络异常**：验证网络异常时的降级处理 + +### 验证步骤 +1. 清除应用数据 +2. 登录并上传头像/昵称 +3. 返回首页检查是否还有提示 +4. 重启应用再次检查 +5. 修改头像/昵称并验证同步 + +## 总结 +通过修复 `saveUserToStorage` 函数和优化 `Header.tsx` 的检查逻辑，我们解决了头像昵称同步问题，确保用户更新信息后能够立即生效，提升了用户体验。 diff --git a/用户信息缓存丢失问题修复说明.md b/用户信息缓存丢失问题修复说明.md new file mode 100644 index 0000000..214855b --- /dev/null +++ b/用户信息缓存丢失问题修复说明.md @@ -0,0 +1,145 @@ +# 用户信息缓存丢失问题修复说明 + +## 问题描述 +用户更新头像和昵称后，缓存中的 `UserId` 和 `Phone` 等关键字段丢失，导致应用功能异常。 + +## 问题分析 + +### 根本原因 +1. **API数据不完整**：`updateUserInfo` API 可能返回不完整的用户数据 +2. **本地状态覆盖**：`updateUser` 方法使用本地状态合并数据，但本地状态可能已经过时 +3. **保存逻辑缺陷**：`saveUserToStorage` 函数会无条件覆盖所有字段，包括空值 + +### 具体问题 +1. **数据流程问题**： + ```typescript + // 原来的流程 + const updatedUser = { ...user, ...userData }; // 使用可能过时的本地状态 + await updateUserInfo(updatedUser); + ``` + +2. **保存逻辑问题**： + ```typescript + // 原来的保存逻辑 + Taro.setStorageSync('UserId', userInfo.userId); // 可能为空，覆盖现有值 + Taro.setStorageSync('Phone', userInfo.phone); // 可能为空，覆盖现有值 + ``` + +## 修复方案 + +### 1. 优化 updateUser 方法 +确保在更新前获取最新的完整用户信息： + +```typescript +const updateUser = async (userData: Partial) => { + if (!user) { + throw new Error('用户未登录'); + } + + try { + // 先获取最新的用户信息，确保我们有完整的数据 + const latestUserInfo = await getUserInfo(); + + // 合并最新的用户信息和要更新的数据 + const updatedUser = { ...latestUserInfo, ...userData }; + + // 调用API更新用户信息 + await updateUserInfo(updatedUser); + + // 更新本地状态和存储 + setUser(updatedUser); + const token = Taro.getStorageSync('access_token'); + if (token) { + saveUserToStorage(token, updatedUser); + } + + return updatedUser; + } catch (error) { + // 错误处理 + throw error; + } +}; +``` + +### 2. 改进 saveUserToStorage 函数 +只在字段有值时才保存，避免覆盖现有数据： + +```typescript +const saveUserToStorage = (token: string, userInfo: User) => { + try { + Taro.setStorageSync('access_token', token); + Taro.setStorageSync('User', userInfo); + + // 确保关键字段不为空时才保存，避免覆盖现有数据 + if (userInfo.userId) { + Taro.setStorageSync('UserId', userInfo.userId); + } + if (userInfo.tenantId) { + Taro.setStorageSync('TenantId', userInfo.tenantId); + } + if (userInfo.phone) { + Taro.setStorageSync('Phone', userInfo.phone); + } + // 保存头像和昵称信息 + if (userInfo.avatar) { + Taro.setStorageSync('Avatar', userInfo.avatar); + } + if (userInfo.nickname) { + Taro.setStorageSync('Nickname', userInfo.nickname); + } + } catch (error) { + console.error('保存用户数据失败:', error); + } +}; +``` + +## 修复效果 + +### ✅ 数据完整性保障 +- 更新前先获取最新的完整用户信息 +- 确保合并的数据包含所有必要字段 +- 避免使用过时的本地状态 + +### ✅ 安全的存储策略 +- 只在字段有值时才保存到本地存储 +- 避免空值覆盖现有的有效数据 +- 保护关键字段如 `UserId`、`Phone` 等 + +### ✅ 用户体验改善 +- 用户更新头像/昵称后，所有信息保持完整 +- 避免因数据丢失导致的功能异常 +- 确保应用状态的一致性 + +## 技术细节 + +### 数据流程优化 +1. **获取最新数据** → `getUserInfo()` 获取服务器最新信息 +2. **安全合并** → `{ ...latestUserInfo, ...userData }` 确保数据完整 +3. **API更新** → `updateUserInfo(updatedUser)` 提交完整数据 +4. **本地同步** → `saveUserToStorage()` 安全保存到本地 + +### 关键修改点 +1. **useUser.ts 第178-185行**：在更新前获取最新用户信息 +2. **useUser.ts 第95-118行**：改进保存逻辑，避免空值覆盖 + +### 防护机制 +- **数据验证**：保存前检查字段是否有值 +- **错误处理**：完善的异常捕获和处理 +- **状态同步**：确保内存状态和本地存储一致 + +## 测试建议 + +### 测试场景 +1. **头像更新**：验证更新头像后 `UserId`、`Phone` 等字段保持不变 +2. **昵称更新**：验证更新昵称后其他字段完整性 +3. **网络异常**：验证网络异常时的数据保护 +4. **并发更新**：验证多次快速更新的数据一致性 + +### 验证步骤 +1. 登录并检查初始缓存数据 +2. 更新头像，检查缓存中的 `UserId`、`Phone` 是否保持 +3. 更新昵称，再次检查数据完整性 +4. 重启应用，验证数据持久化 + +## 总结 +通过优化数据获取流程和改进存储策略，我们解决了用户信息缓存丢失问题，确保了数据的完整性和一致性，提升了应用的稳定性和用户体验。