feat(add): 新增多页面新增和编辑表单功能
- 添加编辑和新增收货地址页面，支持表单数据加载和提交 - 新增应用密钥凭证、新增应用操作动态、新增应用成员、新增应用版本页面配置 - 实现文章新增及编辑页面，包含图片上传及多种文章属性配置 - 增加注册会员页面，支持头像上传、手机号获取和邀请人关系处理 - 引入统一表单提交成功和失败处理，支持编辑模式数据回显 - 配置统一eslint和editorconfig规则，增强代码规范和编辑体验 - 新增.gitignore规则，屏蔽无关文件和目录，优化版本管理
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;
|
||||
}
|
||||
200
src/user/profile/profile.tsx
Normal file
200
src/user/profile/profile.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
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, updateUserInfo} 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";
|
||||
function Profile() {
|
||||
const formId = Number(router?.params.id)
|
||||
|
||||
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 = (values: any) => {
|
||||
console.log(values, 'values')
|
||||
console.log(formId, 'formId>>')
|
||||
updateUserInfo(values).then(() => {
|
||||
Taro.showToast({title: `保存成功`, icon: 'success'})
|
||||
setTimeout(() => {
|
||||
return Taro.navigateBack()
|
||||
}, 1000)
|
||||
}).catch(() => {
|
||||
Taro.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'error'
|
||||
});
|
||||
})
|
||||
}
|
||||
const submitFailed = (error: any) => {
|
||||
console.log(error, 'err...')
|
||||
}
|
||||
|
||||
const uploadAvatar = ({detail}) => {
|
||||
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: (res) => {
|
||||
const data = JSON.parse(res.data);
|
||||
if (data.code === 0) {
|
||||
updateUserInfo({
|
||||
userId: FormData?.userId,
|
||||
avatar: `${data.data.thumbnail}`
|
||||
}).then(() => {
|
||||
Taro.showToast({
|
||||
title: '上传成功',
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取微信昵称
|
||||
const getWxNickname = (nickname: string) => {
|
||||
// 更新表单数据
|
||||
setFormData({
|
||||
...FormData,
|
||||
nickname: nickname
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
}, []);
|
||||
|
||||
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) => 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