feat(dealer/customer): 实现客户列表的无限滚动和搜索功能- 在客户列表页面添加 InfiniteLoading 组件,实现无限滚动加载- 添加搜索功能,支持按关键词搜索客户

- 优化数据加载逻辑,解决重复请求问题
- 在 Header 组件中增加用户登录状态和信息的检查
This commit is contained in:
2025-09-06 10:29:58 +08:00
parent 6f799e6775
commit 3077b44344
5 changed files with 278 additions and 22 deletions

View File

@@ -64,7 +64,7 @@ const AddShopDealerApply = () => {
...values,
realName: values.realName || user?.nickname,
mobile: user?.phone,
refereeId: Taro.getStorageSync('UserId'),
refereeId: 33534,
applyStatus: 10,
auditTime: undefined
};

View File

@@ -97,6 +97,13 @@ export const useUser = () => {
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);
}

View File

@@ -3,7 +3,7 @@ import {ArrowRight} from '@nutui/icons-react-taro'
import {useEffect, useState} from "react";
import {ConfigProvider} from '@nutui/nutui-react-taro'
import Taro, {getCurrentInstance} from '@tarojs/taro'
import {getUserInfo, updateUserInfo} from "@/api/layout";
import {getUserInfo} from "@/api/layout";
import {TenantId} from "@/config/app";
import { TextArea } from '@nutui/nutui-react-taro'
import './profile.scss'
@@ -34,7 +34,7 @@ interface InputEvent {
}
function Profile() {
const formId = Number(router?.params.id)
const {fetchUserInfo} =useUser()
const {user, updateUser} = useUser()
const [sex, setSex] = useState<DictData[]>()
const [FormData, setFormData] = useState<User>(
@@ -63,31 +63,32 @@ function Profile() {
}
// 提交表单
const submitSucceed = (values: User) => {
const submitSucceed = async (values: User) => {
console.log(values, 'values')
console.log(formId, 'formId>>')
updateUserInfo(values).then(() => {
fetchUserInfo().then()
Taro.showToast({title: `保存成功`, icon: 'success'})
try {
// 使用 useUser hook 的 updateUser 方法,它会自动更新状态和本地存储
await updateUser(values)
// 由于 useEffect 监听了 user 变化FormData 会自动同步更新
setTimeout(() => {
return Taro.navigateBack()
}, 1000)
}).catch(() => {
Taro.showToast({
title: '保存失败',
icon: 'error'
});
})
} catch (error) {
// updateUser 方法已经处理了错误提示,这里不需要重复显示
console.error('提交表单失败:', error)
}
}
const submitFailed = (error: unknown) => {
console.log(error, 'err...')
}
const uploadAvatar = ({detail}: ChooseAvatarEvent) => {
// 先更新本地显示的头像
setFormData({
...FormData,
avatar: `${detail.avatarUrl}`,
})
Taro.uploadFile({
url: 'https://server.websoft.top/api/oss/upload',
filePath: detail.avatarUrl,
@@ -96,19 +97,36 @@ function Profile() {
'content-type': 'application/json',
TenantId
},
success: (res) => {
success: async (res) => {
const data = JSON.parse(res.data);
if (data.code === 0) {
updateUserInfo({
userId: FormData?.userId,
avatar: `${data.data.thumbnail}`
}).then(() => {
fetchUserInfo().then()
Taro.showToast({
title: '上传成功',
try {
// 使用 useUser hook 的 updateUser 方法更新头像
await updateUser({
avatar: `${data.data.thumbnail}`
})
})
// 由于 useEffect 监听了 user 变化FormData 会自动同步更新
} catch (error) {
console.error('更新头像失败:', error)
// 如果更新失败,恢复原来的头像
setFormData({
...FormData,
avatar: user?.avatar || ''
})
}
}
},
fail: (error) => {
console.error('上传头像失败:', error)
Taro.showToast({
title: '上传失败',
icon: 'error'
})
// 恢复原来的头像
setFormData({
...FormData,
avatar: user?.avatar || ''
})
}
})
}
@@ -126,6 +144,13 @@ function Profile() {
reload()
}, []);
// 监听 useUser hook 中的用户信息变化,同步更新表单数据
useEffect(() => {
if (user) {
setFormData(user)
}
}, [user]);
return (
<>
<div className={'p-4'}>