fix: 个人信息页修改

This commit is contained in:
qitmac000249 2017-08-11 12:19:31 +08:00
parent 77c1154e48
commit b80b75dfdf
3 changed files with 79 additions and 39 deletions

View File

@ -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>&nbsp;&nbsp;
{/*<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>&nbsp;&nbsp;
{/*<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>&nbsp;&nbsp;
{/*<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!');
}

View File

@ -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} />

View File

@ -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;
}
}