feat(pages): 添加管理页面功能和配置
- 创建 .editorconfig 文件统一代码风格配置 - 配置 .eslintrc 使用 taro/react 规则集 - 完善 .gitignore 忽略编译产物和敏感文件 - 添加 admin/article/add 页面实现文章管理功能 - 添加 dealer/apply/add 页面实现经销商申请功能 - 添加 dealer/bank/add 页面实现银行卡管理功能 - 添加 dealer/customer/add 页面实现客户管理功能 - 添加 user/address/add 页面实现用户地址管理功能 - 添加 user/chat/message/add 页面实现消息功能 - 添加 user/gift/add 页面实现礼品管理功能 - 配置各页面导航栏标题和样式 - 实现表单验证和数据提交功能 - 集成图片上传和头像选择功能 - 添加日期选择和数据校验逻辑 - 实现编辑和新增模式切换 - 集成用户权限和角色管理功能
This commit is contained in:
3
src/user/profile/profile.config.ts
Normal file
3
src/user/profile/profile.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '个人资料'
|
||||
})
|
||||
6
src/user/profile/profile.scss
Normal file
6
src/user/profile/profile.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
.nut-form-item-label-left {
|
||||
padding-left: 8px !important;
|
||||
}
|
||||
.nut-form-item-label-required{
|
||||
top: 0 !important;
|
||||
}
|
||||
242
src/user/profile/profile.tsx
Normal file
242
src/user/profile/profile.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
import {Cell, Avatar} from '@nutui/nutui-react-taro';
|
||||
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} from "@/api/layout";
|
||||
import {TenantId} from "@/config/app";
|
||||
import { TextArea } from '@nutui/nutui-react-taro'
|
||||
import './profile.scss'
|
||||
|
||||
const {router} = getCurrentInstance()
|
||||
import {
|
||||
Form,
|
||||
Button,
|
||||
Input,
|
||||
Radio,
|
||||
} from '@nutui/nutui-react-taro'
|
||||
import {DictData} from "@/api/system/dict-data/model";
|
||||
import {pageDictData} from "@/api/system/dict-data";
|
||||
import {User} from "@/api/system/user/model";
|
||||
import {useUser} from "@/hooks/useUser";
|
||||
|
||||
// 类型定义
|
||||
interface ChooseAvatarEvent {
|
||||
detail: {
|
||||
avatarUrl: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface InputEvent {
|
||||
detail: {
|
||||
value: string;
|
||||
};
|
||||
}
|
||||
function Profile() {
|
||||
const formId = Number(router?.params.id)
|
||||
const {user, updateUser} = useUser()
|
||||
|
||||
const [sex, setSex] = useState<DictData[]>()
|
||||
const [FormData, setFormData] = useState<User>(
|
||||
{
|
||||
userId: undefined,
|
||||
nickname: undefined,
|
||||
realName: undefined,
|
||||
avatar: undefined,
|
||||
sex: undefined,
|
||||
phone: undefined,
|
||||
address: undefined,
|
||||
comments: undefined
|
||||
}
|
||||
)
|
||||
|
||||
const reload = () => {
|
||||
// 获取数据字典
|
||||
pageDictData({limit: 200}).then(res => {
|
||||
setSex(res?.list.filter((item) => item.dictCode === 'sex'))
|
||||
})
|
||||
// 获取用户信息
|
||||
getUserInfo().then((data) => {
|
||||
// 更新表单数据
|
||||
setFormData(data);
|
||||
})
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const submitSucceed = async (values: User) => {
|
||||
console.log(values, 'values')
|
||||
console.log(formId, 'formId>>')
|
||||
try {
|
||||
// 使用 useUser hook 的 updateUser 方法，它会自动更新状态和本地存储
|
||||
await updateUser(values)
|
||||
// 由于 useEffect 监听了 user 变化，FormData 会自动同步更新
|
||||
setTimeout(() => {
|
||||
return Taro.navigateBack()
|
||||
}, 1000)
|
||||
} 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,
|
||||
name: 'file',
|
||||
header: {
|
||||
'content-type': 'application/json',
|
||||
TenantId
|
||||
},
|
||||
success: async (res) => {
|
||||
const data = JSON.parse(res.data);
|
||||
if (data.code === 0) {
|
||||
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 || ''
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取微信昵称
|
||||
const getWxNickname = (nickname: string) => {
|
||||
// 更新表单数据
|
||||
setFormData({
|
||||
...FormData,
|
||||
nickname: nickname
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
}, []);
|
||||
|
||||
// 监听 useUser hook 中的用户信息变化，同步更新表单数据
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
setFormData(user)
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={'p-4'}>
|
||||
<Cell.Group>
|
||||
<Cell title={'头像'} align={'center'} extra={
|
||||
<>
|
||||
<Button open-type="chooseAvatar" style={{height: '58px'}} onChooseAvatar={uploadAvatar}>
|
||||
<Avatar src={FormData?.avatar} size="54"/>
|
||||
</Button>
|
||||
<ArrowRight color="#cccccc" className={'ml-1'} size={20}/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Cell title={'手机号码'} align={'center'} extra={FormData?.phone}/>
|
||||
</Cell.Group>
|
||||
<ConfigProvider>
|
||||
<Form
|
||||
divider
|
||||
initialValues={FormData}
|
||||
labelPosition="left"
|
||||
onFinish={(values) => submitSucceed(values)}
|
||||
onFinishFailed={(errors) => submitFailed(errors)}
|
||||
footer={
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<Button nativeType="submit" block type="info">
|
||||
提交
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Form.Item
|
||||
label={'昵称'}
|
||||
name="nickname"
|
||||
initialValue={FormData.nickname}
|
||||
rules={[{message: '请获取微信昵称'}]}
|
||||
>
|
||||
<Input
|
||||
type="nickname"
|
||||
className="info-content__input"
|
||||
placeholder="请输入昵称"
|
||||
value={FormData?.nickname}
|
||||
onInput={(e: InputEvent) => getWxNickname(e.detail.value)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="性别"
|
||||
name="sex"
|
||||
initialValue={FormData.sex}
|
||||
rules={[
|
||||
{message: '请选择性别'}
|
||||
]}
|
||||
>
|
||||
<Radio.Group value={FormData?.sex} direction="horizontal">
|
||||
{
|
||||
sex?.map((item, index) => (
|
||||
<Radio key={index} value={item.dictDataCode}>
|
||||
{item.dictDataName}
|
||||
</Radio>
|
||||
))
|
||||
}
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="备注信息"
|
||||
name="comments"
|
||||
initialValue={FormData.comments}
|
||||
rules={[{message: '备注信息'}]}
|
||||
>
|
||||
<TextArea
|
||||
placeholder={'个性签名'}
|
||||
value={FormData?.comments}
|
||||
onChange={(value) => setFormData({...FormData, comments: value})}
|
||||
/>
|
||||
<Input placeholder={'个性签名'} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Profile
|
||||
Reference in New Issue
Block a user