实现修改昵称功能（就随便做了）
This commit is contained in:
父節點
a5358fef87
當前提交
bbcfe3e324
@ -119,4 +119,33 @@
|
||||
.btn-close > svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.nickname-edit {
|
||||
margin-top: 5px;
|
||||
margin-left: -1px;
|
||||
width: 360px;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #e5e5e5;
|
||||
display: flex;
|
||||
}
|
||||
.nickname-edit > label {
|
||||
line-height: 1.7em;
|
||||
font-size: 18px;
|
||||
}
|
||||
.nickname-edit > input {
|
||||
flex-grow: 1;
|
||||
border: none;
|
||||
background-color: #eee;
|
||||
border-radius: 6px;
|
||||
margin-right: 10px;
|
||||
padding: 0 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.nickname-edit > .btn {
|
||||
padding: .1em 0;
|
||||
width: 60px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
@ -1,11 +1,11 @@
|
||||
import { useState, useCallback, useRef } from "react";
|
||||
import { useState, useCallback, useRef, useEffect } from "react";
|
||||
import Spinner from '../Spinner/Spinner';
|
||||
import './AvatarUnit.css';
|
||||
import { multiFormPost } from '../../helper/axios';
|
||||
import { multiFormPost, post } from '../../helper/axios';
|
||||
import { alert } from '../../helper/alert';
|
||||
import { apis } from "../../helper/apis";
|
||||
|
||||
export default function AvatarUnit({ avatar, onChangeAvatar, showTip }) {
|
||||
export default function AvatarUnit({ avatar, nickname, onChangeAvatar, showTip }) {
|
||||
const [showBubble, setShowBubble] = useState(showTip);
|
||||
const [showUpload, setShowUpload] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
@ -14,9 +14,15 @@ export default function AvatarUnit({ avatar, onChangeAvatar, showTip }) {
|
||||
const [uploaded, setUploaded] = useState(false);
|
||||
const [dataURL, setDataURL] = useState(null);
|
||||
const [file, setFile] = useState(null);
|
||||
const [nicknameNow, setNicknameNow] = useState('');
|
||||
const [nicknameUploading, setNicknameUploading] = useState(false);
|
||||
|
||||
const inputRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
setNicknameNow(nickname || '');
|
||||
}, [nickname]);
|
||||
|
||||
// useEffect(() => {
|
||||
// setShowBubble(!localStorage.getItem("avatarTipShown"));
|
||||
// localStorage.setItem("avatarTipShown", true);
|
||||
@ -66,20 +72,33 @@ export default function AvatarUnit({ avatar, onChangeAvatar, showTip }) {
|
||||
multiFormPost(apis.uploadAvatar, formData).then(data => {
|
||||
if (data.networkStatus === 200 && data.status) {
|
||||
setUploaded(true);
|
||||
setUploading(false);
|
||||
setTimeout(() => {
|
||||
handleClose();
|
||||
onChangeAvatar(data.data);
|
||||
}, 800);
|
||||
}
|
||||
else {
|
||||
alert(data.data);
|
||||
setUploading(false);
|
||||
alert('头像上传失败：' + data.data);
|
||||
}
|
||||
setUploading(false);
|
||||
});
|
||||
}
|
||||
}, [file, onChangeAvatar]);
|
||||
|
||||
const handleChangeNickname = useCallback(() => {
|
||||
setNicknameUploading(true);
|
||||
post(apis.updateNickname, { nickname: nicknameNow }).then(data => {
|
||||
if (data.networkStatus === 200 && data.status) {
|
||||
alert('昵称已修改为：' + nicknameNow);
|
||||
setNicknameNow(nicknameNow);
|
||||
}
|
||||
else {
|
||||
alert('修改失败：' + data.data.map(item => item.msg).join('，'));
|
||||
}
|
||||
setNicknameUploading(false);
|
||||
});
|
||||
}, [nicknameNow]);
|
||||
|
||||
return (
|
||||
<div className="user-avatar">
|
||||
<img src={avatar} alt="user avatar" onClick={() => {
|
||||
@ -96,7 +115,7 @@ export default function AvatarUnit({ avatar, onChangeAvatar, showTip }) {
|
||||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M597.333333 512l284.444445 284.444444c2.929778 3.328 2.929778 22.357333 0 28.444445l-56.888889 56.888889c-6.087111 2.929778-25.116444 2.929778-28.444445 0L512 597.333333 227.555556 881.777778c-3.328 2.929778-22.328889 2.929778-28.444445 0l-56.888889-56.888889c-2.929778-6.087111-2.929778-25.116444 0-28.444445l284.444445-284.444444L142.222222 227.555556c-2.929778-3.328-2.929778-22.328889 0-28.444445l56.888889-56.888889c6.115556-2.929778 25.116444-2.929778 28.444445 0l284.444444 284.444445L796.444444 142.222222c3.328-2.929778 22.357333-2.929778 28.444445 0l56.888889 56.888889c2.929778 6.115556 2.929778 25.116444 0 28.444445L597.333333 512z" fill="#4a4a4a"></path></svg>
|
||||
</button>
|
||||
<div className="user-avatar-edit-content">
|
||||
<span className={'user-avatar-edit-tip' + (showBubble && !showUpload ? ' show' : '')}>点击图标修改头像</span>
|
||||
<span className={'user-avatar-edit-tip' + (showBubble && !showUpload ? ' show' : '')}>点击图标修改头像和昵称</span>
|
||||
<div className="avatar-upload">
|
||||
<div className={"upload-unit-progress" + (uploaded ? ' show' : '')}>
|
||||
<div className="icon">
|
||||
@ -129,6 +148,19 @@ export default function AvatarUnit({ avatar, onChangeAvatar, showTip }) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="nickname-edit">
|
||||
<label>昵称：</label>
|
||||
<input type="text" value={nicknameNow} onChange={e => setNicknameNow(e.target.value)} />
|
||||
<button className="btn btn-primary" onClick={handleChangeNickname} disabled={nicknameUploading}>
|
||||
{
|
||||
nicknameUploading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
'保存'
|
||||
)
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -25,6 +25,7 @@ export default function UserControl({ pageAuthLevel, buttonOnly }) {
|
||||
name: data.realName,
|
||||
role: data.role,
|
||||
avatar: data.avatar,
|
||||
nickname: data.nickname
|
||||
});
|
||||
});
|
||||
return;
|
||||
@ -46,44 +47,49 @@ export default function UserControl({ pageAuthLevel, buttonOnly }) {
|
||||
<UserContext.Consumer>
|
||||
{({ userData, setUserData }) => (
|
||||
<div className="user">
|
||||
{buttonOnly || (
|
||||
<Fragment>
|
||||
{
|
||||
userData.role === -1
|
||||
? (
|
||||
<Spinner isGray />
|
||||
)
|
||||
: userData.role > 0 && (
|
||||
<AvatarUnit
|
||||
avatar={userData.avatar || images.avatar}
|
||||
onChangeAvatar={url => setUserData({ ...userData, avatar: url })}
|
||||
showTip={!userData.avatar}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
userData.role !== 0 && (
|
||||
<div className="user-name">{userData.name}</div>
|
||||
)
|
||||
}
|
||||
</Fragment>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-hollow btn-straight"
|
||||
onClick={() => {
|
||||
localStorage.setItem('jwt', '');
|
||||
setUserData({ role: 0, name: '' });
|
||||
History.force('/login');
|
||||
}}
|
||||
>{userData.role > 0 ? '退出账号' : '登录'}</button>
|
||||
{
|
||||
userData.role === 2 && pageAuthLevel !== 2 && (
|
||||
<button
|
||||
className="btn btn-light btn-straight"
|
||||
onClick={() => {
|
||||
History.push('/admin/review');
|
||||
}}
|
||||
>进入审核</button>
|
||||
userData.role === -1
|
||||
? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Fragment>
|
||||
{buttonOnly || (
|
||||
<Fragment>
|
||||
{
|
||||
userData.role > 0 && (
|
||||
<AvatarUnit
|
||||
avatar={userData.avatar || images.avatar}
|
||||
onChangeAvatar={url => setUserData({ ...userData, avatar: url })}
|
||||
showTip={!userData.avatar}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
userData.role !== 0 && (
|
||||
<div className="user-name">{userData.name}</div>
|
||||
)
|
||||
}
|
||||
</Fragment>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-hollow btn-straight"
|
||||
onClick={() => {
|
||||
localStorage.setItem('jwt', '');
|
||||
setUserData({ role: 0, name: '' });
|
||||
History.force('/login');
|
||||
}}
|
||||
>{userData.role > 0 ? '退出账号' : '登录'}</button>
|
||||
{
|
||||
userData.role === 2 && pageAuthLevel !== 2 && (
|
||||
<button
|
||||
className="btn btn-light btn-straight"
|
||||
onClick={() => {
|
||||
History.push('/admin/review');
|
||||
}}
|
||||
>进入审核</button>
|
||||
)
|
||||
}
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -5,6 +5,7 @@ export const apis = {
|
||||
login: backEndBaseURL + "/user/login",
|
||||
getProfile: backEndBaseURL + "/user/me",
|
||||
uploadAvatar: backEndBaseURL + "/user/uploadAvatar",
|
||||
updateNickname: backEndBaseURL + "/user/updateNickname",
|
||||
|
||||
submitMessage: backEndBaseURL + "/post/submit",
|
||||
listEssence: backEndBaseURL + "/post/listPublished?page=1",
|
||||
|
||||
載入中…
x
新增問題並參考
Block a user