mirror of
https://github.com/YMFE/yapi.git
synced 2024-12-21 05:19:42 +08:00
fix: 个人信息页修改
This commit is contained in:
parent
77c1154e48
commit
b80b75dfdf
@ -3,11 +3,23 @@ import { Row, Col, Input, Button, Select, message, Upload, Icon } from 'antd'
|
||||
import axios from 'axios';
|
||||
import {formatTime} from '../../common.js'
|
||||
import PropTypes from 'prop-types'
|
||||
import { connect } from 'react-redux'
|
||||
|
||||
@connect(state=>{
|
||||
return {
|
||||
curUid: state.user.uid,
|
||||
userType: state.user.type
|
||||
}
|
||||
},{
|
||||
|
||||
})
|
||||
|
||||
class Profile extends Component {
|
||||
|
||||
static propTypes = {
|
||||
match: PropTypes.object
|
||||
match: PropTypes.object,
|
||||
curUid: PropTypes.number,
|
||||
userType: PropTypes.string
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
@ -126,12 +138,21 @@ class Profile extends Component {
|
||||
const Option = Select.Option;
|
||||
let userinfo = this.state.userinfo;
|
||||
let _userinfo = this.state._userinfo;
|
||||
let roles = { admin: '管理员', member: '会员' }
|
||||
let roles = { admin: '管理员', member: '会员' };
|
||||
let userType = "";
|
||||
if(this.props.userType === "third"){
|
||||
userType = false;
|
||||
}else if(this.props.userType === "site"){
|
||||
userType = true;
|
||||
}else{
|
||||
userType = false;
|
||||
}
|
||||
|
||||
if (this.state.usernameEdit === false) {
|
||||
userNameEditHtml = <div >
|
||||
<span className="text">{userinfo.username}</span>
|
||||
{/*<span className="text-button" onClick={() => { this.handleEdit('usernameEdit', true) }}><Icon type="edit" />修改</span>*/}
|
||||
<Button icon="edit" onClick={() => { this.handleEdit('usernameEdit', true) }}>修改</Button>
|
||||
{userType?<Button icon="edit" onClick={() => { this.handleEdit('usernameEdit', true) }}>修改</Button>:""}
|
||||
</div>
|
||||
} else {
|
||||
userNameEditHtml = <div>
|
||||
@ -147,7 +168,7 @@ class Profile extends Component {
|
||||
emailEditHtml = <div >
|
||||
<span className="text">{userinfo.email}</span>
|
||||
{/*<span className="text-button" onClick={() => { this.handleEdit('emailEdit', true) }} ><Icon type="edit" />修改</span>*/}
|
||||
<Button icon="edit" onClick={() => { this.handleEdit('emailEdit', true) }}>修改</Button>
|
||||
{userType?<Button icon="edit" onClick={() => { this.handleEdit('emailEdit', true) }}>修改</Button>:""}
|
||||
</div>
|
||||
} else {
|
||||
emailEditHtml = <div>
|
||||
@ -163,7 +184,7 @@ class Profile extends Component {
|
||||
roleEditHtml = <div>
|
||||
<span className="text">{roles[userinfo.role]}</span>
|
||||
{/*<span className="text-button" onClick={() => { this.handleEdit('roleEdit', true) }} ><Icon type="edit" />修改</span>*/}
|
||||
<Button icon="edit" onClick={() => { this.handleEdit('roleEdit', true) }}>修改</Button>
|
||||
{userType?<Button icon="edit" onClick={() => { this.handleEdit('roleEdit', true) }}>修改</Button>:""}
|
||||
</div>
|
||||
} else {
|
||||
roleEditHtml = <Select defaultValue={_userinfo.role} onChange={ this.changeRole} style={{ width: 150 }} >
|
||||
@ -227,12 +248,12 @@ class Profile extends Component {
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className="user-item" type="flex" justify="start">
|
||||
{userType?<Row className="user-item" type="flex" justify="start">
|
||||
<Col span={4}>密码</Col>
|
||||
<Col span={12}>
|
||||
{secureEditHtml}
|
||||
</Col>
|
||||
</Row>
|
||||
</Row>:""}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@ -243,15 +264,16 @@ class Avatar extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
imageUrl:""
|
||||
imageUrl: ""
|
||||
}
|
||||
}
|
||||
static propTypes = {
|
||||
uid: PropTypes.number
|
||||
}
|
||||
uploadAvatar(basecode){
|
||||
axios.post("/user/upload_avatar",{basecode: basecode}).then(()=>{
|
||||
this.setState({ imageUrl: basecode })
|
||||
axios.post("/api/user/upload_avatar",{basecode: basecode}).then(()=>{
|
||||
this.setState({ imageUrl: basecode });
|
||||
|
||||
}).catch((e)=>{
|
||||
console.log(e);
|
||||
})
|
||||
@ -264,18 +286,13 @@ class Avatar extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
let imageUrl = "";
|
||||
if(this.props.uid && !this.state.imageUrl){
|
||||
imageUrl = `/user/avatar?uid=${this.props.uid}`;
|
||||
}else{
|
||||
imageUrl = this.state.imageUrl;
|
||||
}
|
||||
let imageUrl = this.state.imageUrl?this.state.imageUrl:`/api/user/avatar?uid=${this.props.uid}`;
|
||||
return <div className="avatar-box">
|
||||
<Upload
|
||||
className="avatar-uploader"
|
||||
name="basecode"
|
||||
showUploadList={true}
|
||||
action="/user/upload_avatar"
|
||||
action="/api/user/upload_avatar"
|
||||
beforeUpload={beforeUpload}
|
||||
onChange={this.handleChange.bind(this)} >
|
||||
{
|
||||
@ -284,6 +301,7 @@ class Avatar extends Component {
|
||||
<Icon type="plus" className="avatar-uploader-trigger" />
|
||||
}
|
||||
</Upload>
|
||||
<span className="avatarChange">点击头像更换</span>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@ -294,7 +312,7 @@ function beforeUpload(file) {
|
||||
if (!isJPG && !isPNG) {
|
||||
message.error('图片的格式只能为 jpg、png!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
const isLt2M = file.size / 1024 / 1024 < 0.2;
|
||||
if (!isLt2M) {
|
||||
message.error('图片必须小于 200kb!');
|
||||
}
|
||||
|
@ -8,10 +8,22 @@ import PropTypes from 'prop-types'
|
||||
import Profile from './Profile.js'
|
||||
import { Row } from 'antd';
|
||||
import Subnav from '../../components/Subnav/Subnav.js';
|
||||
@connect()
|
||||
@connect(state=>{
|
||||
console.log(state);
|
||||
return {
|
||||
curUid: state.user.uid,
|
||||
userType: state.user.type,
|
||||
role: state.user.role
|
||||
}
|
||||
},{
|
||||
|
||||
})
|
||||
class User extends Component {
|
||||
static propTypes = {
|
||||
match: PropTypes.object
|
||||
match: PropTypes.object,
|
||||
curUid: PropTypes.number,
|
||||
userType: PropTypes.string,
|
||||
role: PropTypes.string
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
@ -23,19 +35,22 @@ class User extends Component {
|
||||
}
|
||||
|
||||
render () {
|
||||
|
||||
let navData = [{
|
||||
name: '个人资料',
|
||||
path: `/user/profile/${this.props.curUid}`
|
||||
}];
|
||||
if(this.props.role === "admin"){
|
||||
navData.push({
|
||||
name: '成员管理',
|
||||
path: '/user/list'
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Subnav
|
||||
default={'我的关注'}
|
||||
data={[{
|
||||
name: '项目广场',
|
||||
path: '/group'
|
||||
}, {
|
||||
name: '我的关注',
|
||||
path: '/follow'
|
||||
}]}/>
|
||||
default={'个人资料'}
|
||||
data={navData}/>
|
||||
<div className="g-doc">
|
||||
<Row gutter={16} className="user-box">
|
||||
<Route path={this.props.match.path + '/list'} component={List} />
|
||||
|
@ -109,22 +109,23 @@
|
||||
border-bottom-left-radius: .04rem;
|
||||
border-bottom-right-radius: .04rem;
|
||||
}
|
||||
.avatar-uploader{
|
||||
border: none;
|
||||
}
|
||||
.avatar-uploader,
|
||||
.avatar-uploader-trigger,
|
||||
.avatar {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
border-radius: 50px;
|
||||
|
||||
img{
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.avatar-uploader {
|
||||
display: block;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.avatar-uploader {
|
||||
display: block;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.avatar-uploader-trigger {
|
||||
@ -133,4 +134,10 @@
|
||||
font-size: 28px;
|
||||
color: #999;
|
||||
}
|
||||
.avatarChange{
|
||||
display: block;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user