2017-07-17 11:01:05 +08:00
|
|
|
|
import React, { Component } from 'react'
|
2017-08-24 13:55:08 +08:00
|
|
|
|
import { Row, Col, Input, Button, Select, message, Upload, Tooltip} from 'antd'
|
2017-07-17 16:24:00 +08:00
|
|
|
|
import axios from 'axios';
|
2017-07-18 17:15:29 +08:00
|
|
|
|
import {formatTime} from '../../common.js'
|
2017-07-18 15:35:32 +08:00
|
|
|
|
import PropTypes from 'prop-types'
|
2017-08-24 15:39:22 +08:00
|
|
|
|
// import { Link } from 'react-router-dom'
|
2017-08-11 12:19:31 +08:00
|
|
|
|
import { connect } from 'react-redux'
|
|
|
|
|
|
|
|
|
|
@connect(state=>{
|
|
|
|
|
return {
|
|
|
|
|
curUid: state.user.uid,
|
2017-08-17 16:55:52 +08:00
|
|
|
|
userType: state.user.type,
|
|
|
|
|
curRole: state.user.role
|
2017-08-11 12:19:31 +08:00
|
|
|
|
}
|
|
|
|
|
},{
|
|
|
|
|
|
|
|
|
|
})
|
2017-07-18 15:35:32 +08:00
|
|
|
|
|
2017-07-17 11:01:05 +08:00
|
|
|
|
class Profile extends Component {
|
|
|
|
|
|
2017-07-18 15:35:32 +08:00
|
|
|
|
static propTypes = {
|
2017-08-11 12:19:31 +08:00
|
|
|
|
match: PropTypes.object,
|
|
|
|
|
curUid: PropTypes.number,
|
2017-08-17 16:55:52 +08:00
|
|
|
|
userType: PropTypes.string,
|
|
|
|
|
curRole: PropTypes.string
|
2017-07-18 15:35:32 +08:00
|
|
|
|
}
|
|
|
|
|
|
2017-07-17 11:01:05 +08:00
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props)
|
|
|
|
|
this.state = {
|
|
|
|
|
usernameEdit: false,
|
|
|
|
|
emailEdit: false,
|
|
|
|
|
secureEdit: false,
|
2017-07-18 15:35:32 +08:00
|
|
|
|
roleEdit: false,
|
|
|
|
|
userinfo: {
|
|
|
|
|
|
|
|
|
|
}
|
2017-07-17 11:01:05 +08:00
|
|
|
|
}
|
2017-07-27 19:08:40 +08:00
|
|
|
|
|
2017-07-18 15:35:32 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount(){
|
2017-08-24 15:39:22 +08:00
|
|
|
|
this._uid = this.props.match.params.uid;
|
|
|
|
|
this.handleUserinfo(this.props)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentWillReceiveProps(nextProps){
|
|
|
|
|
if(!nextProps.match.params.uid) return;
|
|
|
|
|
if(this._uid !== nextProps.match.params.uid){
|
|
|
|
|
this.handleUserinfo(nextProps)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handleUserinfo(props){
|
|
|
|
|
const uid = props.match.params.uid;
|
2017-07-18 15:35:32 +08:00
|
|
|
|
this.getUserInfo(uid)
|
2017-07-17 11:01:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
2017-07-18 15:35:32 +08:00
|
|
|
|
handleEdit = (key, val) => {
|
2017-07-17 11:01:05 +08:00
|
|
|
|
var s = {};
|
2017-07-18 15:35:32 +08:00
|
|
|
|
s[key] = val;
|
2017-07-17 11:01:05 +08:00
|
|
|
|
this.setState(s)
|
|
|
|
|
}
|
|
|
|
|
|
2017-07-17 16:24:00 +08:00
|
|
|
|
getUserInfo = (id) => {
|
2017-07-18 15:35:32 +08:00
|
|
|
|
var _this = this;
|
2017-08-11 10:25:19 +08:00
|
|
|
|
axios.get('/api/user/find?id=' + id).then((res) => {
|
2017-07-18 15:35:32 +08:00
|
|
|
|
_this.setState({
|
|
|
|
|
userinfo: res.data.data,
|
|
|
|
|
_userinfo: res.data.data
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
updateUserinfo = (name) =>{
|
|
|
|
|
var state = this.state;
|
|
|
|
|
let value = this.state._userinfo[name];
|
|
|
|
|
let params = {uid: state.userinfo.uid}
|
|
|
|
|
params[name] = value;
|
2017-07-27 19:08:40 +08:00
|
|
|
|
|
2017-08-11 10:25:19 +08:00
|
|
|
|
axios.post('/api/user/update', params).then( (res)=>{
|
2017-07-18 15:35:32 +08:00
|
|
|
|
let data = res.data;
|
|
|
|
|
if(data.errcode === 0){
|
|
|
|
|
let userinfo = this.state.userinfo;
|
|
|
|
|
userinfo[name] = value;
|
|
|
|
|
this.setState({
|
|
|
|
|
userinfo: userinfo
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
this.handleEdit(name + 'Edit', false)
|
2017-07-18 19:47:38 +08:00
|
|
|
|
message.success('更新用户信息成功');
|
2017-07-18 15:35:32 +08:00
|
|
|
|
}else{
|
2017-07-18 19:47:38 +08:00
|
|
|
|
message.error(data.errmsg)
|
2017-07-18 15:35:32 +08:00
|
|
|
|
}
|
2017-07-27 19:08:40 +08:00
|
|
|
|
|
2017-07-18 15:35:32 +08:00
|
|
|
|
}, (err) => {
|
2017-07-18 19:47:38 +08:00
|
|
|
|
message.error(err.message)
|
2017-07-18 15:35:32 +08:00
|
|
|
|
} )
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
changeUserinfo = (e) =>{
|
|
|
|
|
let dom = e.target;
|
|
|
|
|
let name = dom.getAttribute("name");
|
|
|
|
|
let value = dom.value;
|
|
|
|
|
let userinfo = this.state._userinfo;
|
|
|
|
|
userinfo[name] = value;
|
|
|
|
|
this.setState({
|
|
|
|
|
_userinfo: userinfo
|
2017-07-17 16:24:00 +08:00
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2017-07-18 15:35:32 +08:00
|
|
|
|
changeRole = (val) =>{
|
|
|
|
|
let userinfo = this.state.userinfo;
|
|
|
|
|
userinfo.role = val;
|
|
|
|
|
this.setState({
|
|
|
|
|
_userinfo: userinfo
|
|
|
|
|
})
|
|
|
|
|
this.updateUserinfo('role');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
updatePassword = () =>{
|
|
|
|
|
let old_password = document.getElementById('old_password').value;
|
|
|
|
|
let password = document.getElementById('password').value;
|
|
|
|
|
let verify_pass = document.getElementById('verify_pass').value;
|
|
|
|
|
if(password != verify_pass){
|
2017-07-18 19:47:38 +08:00
|
|
|
|
return message.error('两次输入的密码不一样');
|
2017-07-18 15:35:32 +08:00
|
|
|
|
}
|
|
|
|
|
let params = {
|
|
|
|
|
uid: this.state.userinfo.uid,
|
|
|
|
|
password: password,
|
|
|
|
|
old_password: old_password
|
|
|
|
|
}
|
2017-07-27 19:08:40 +08:00
|
|
|
|
|
|
|
|
|
|
2017-08-11 10:25:19 +08:00
|
|
|
|
axios.post('/api/user/change_password', params).then( (res)=>{
|
2017-07-18 15:35:32 +08:00
|
|
|
|
let data = res.data;
|
|
|
|
|
if(data.errcode === 0){
|
|
|
|
|
this.handleEdit('secureEdit', false)
|
2017-07-18 19:47:38 +08:00
|
|
|
|
message.success('修改密码成功');
|
2017-08-25 11:18:29 +08:00
|
|
|
|
location.reload()
|
2017-07-18 15:35:32 +08:00
|
|
|
|
}else{
|
2017-07-18 19:47:38 +08:00
|
|
|
|
message.error(data.errmsg)
|
2017-07-18 15:35:32 +08:00
|
|
|
|
}
|
2017-07-27 19:08:40 +08:00
|
|
|
|
|
2017-07-18 15:35:32 +08:00
|
|
|
|
}, (err) => {
|
2017-07-18 19:47:38 +08:00
|
|
|
|
message.error(err.message)
|
2017-07-18 15:35:32 +08:00
|
|
|
|
} )
|
2017-07-27 19:08:40 +08:00
|
|
|
|
|
2017-07-18 15:35:32 +08:00
|
|
|
|
}
|
|
|
|
|
|
2017-07-17 11:01:05 +08:00
|
|
|
|
render() {
|
|
|
|
|
let ButtonGroup = Button.Group;
|
2017-07-18 15:35:32 +08:00
|
|
|
|
let userNameEditHtml, emailEditHtml, secureEditHtml, roleEditHtml;
|
2017-07-17 11:01:05 +08:00
|
|
|
|
const Option = Select.Option;
|
2017-07-18 15:35:32 +08:00
|
|
|
|
let userinfo = this.state.userinfo;
|
|
|
|
|
let _userinfo = this.state._userinfo;
|
2017-08-11 12:19:31 +08:00
|
|
|
|
let roles = { admin: '管理员', member: '会员' };
|
|
|
|
|
let userType = "";
|
|
|
|
|
if(this.props.userType === "third"){
|
|
|
|
|
userType = false;
|
|
|
|
|
}else if(this.props.userType === "site"){
|
|
|
|
|
userType = true;
|
|
|
|
|
}else{
|
|
|
|
|
userType = false;
|
|
|
|
|
}
|
2017-07-18 15:35:32 +08:00
|
|
|
|
if (this.state.usernameEdit === false) {
|
2017-08-17 16:55:52 +08:00
|
|
|
|
let btn = "";
|
|
|
|
|
if(userType){
|
|
|
|
|
if(userinfo.uid === this.props.curUid){//本人
|
|
|
|
|
btn = <Button icon="edit" onClick={() => { this.handleEdit('usernameEdit', true) }}>修改</Button>;
|
|
|
|
|
}else{
|
|
|
|
|
if(this.props.curRole === "admin"){
|
|
|
|
|
btn = <Button icon="edit" onClick={() => { this.handleEdit('usernameEdit', true) }}>修改</Button>;
|
|
|
|
|
}else{
|
|
|
|
|
btn = "";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}else{
|
|
|
|
|
// if(userinfo.uid === this.props.curUid){//本人
|
|
|
|
|
// btn = <Button icon="edit" onClick={() => { this.handleEdit('usernameEdit', true) }}>修改</Button>;
|
|
|
|
|
// }else{
|
|
|
|
|
btn = "";
|
|
|
|
|
// }
|
|
|
|
|
}
|
2017-07-17 11:01:05 +08:00
|
|
|
|
userNameEditHtml = <div >
|
2017-07-18 15:35:32 +08:00
|
|
|
|
<span className="text">{userinfo.username}</span>
|
2017-07-26 16:37:51 +08:00
|
|
|
|
{/*<span className="text-button" onClick={() => { this.handleEdit('usernameEdit', true) }}><Icon type="edit" />修改</span>*/}
|
2017-08-17 16:55:52 +08:00
|
|
|
|
{
|
|
|
|
|
btn
|
|
|
|
|
}
|
2017-07-17 11:01:05 +08:00
|
|
|
|
</div>
|
2017-07-18 15:35:32 +08:00
|
|
|
|
} else {
|
2017-07-17 11:01:05 +08:00
|
|
|
|
userNameEditHtml = <div>
|
2017-07-18 15:35:32 +08:00
|
|
|
|
<Input value={_userinfo.username} name="username" onChange={this.changeUserinfo} placeholder="用户名" />
|
2017-07-17 11:01:05 +08:00
|
|
|
|
<ButtonGroup className="edit-buttons" >
|
2017-07-27 19:08:40 +08:00
|
|
|
|
<Button className="edit-button" onClick={() => { this.handleEdit('usernameEdit', false) }} >取消</Button>
|
|
|
|
|
<Button className="edit-button" onClick={ () => { this.updateUserinfo('username')} } type="primary">确定</Button>
|
2017-07-17 11:01:05 +08:00
|
|
|
|
</ButtonGroup>
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
|
2017-07-18 15:35:32 +08:00
|
|
|
|
if (this.state.emailEdit === false) {
|
2017-08-17 16:55:52 +08:00
|
|
|
|
let btn = "";
|
|
|
|
|
if(userType){
|
|
|
|
|
if(userinfo.uid === this.props.curUid){//本人
|
|
|
|
|
btn = <Button icon="edit" onClick={() => { this.handleEdit('emailEdit', true) }}>修改</Button>
|
2017-08-17 20:08:10 +08:00
|
|
|
|
if(userinfo.role === 'admin'){
|
|
|
|
|
btn = "";
|
|
|
|
|
}
|
2017-08-17 16:55:52 +08:00
|
|
|
|
}else{
|
|
|
|
|
if(this.props.curRole === "admin"){
|
|
|
|
|
btn = <Button icon="edit" onClick={() => { this.handleEdit('emailEdit', true) }}>修改</Button>
|
|
|
|
|
}else{
|
|
|
|
|
btn = "";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}else{
|
|
|
|
|
if(userinfo.uid === this.props.curUid){//本人
|
|
|
|
|
// btn = <Button icon="edit" onClick={() => { this.handleEdit('emailEdit', true) }}>修改</Button>
|
|
|
|
|
}else{
|
|
|
|
|
btn = "";
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-07-17 11:01:05 +08:00
|
|
|
|
emailEditHtml = <div >
|
2017-07-18 15:35:32 +08:00
|
|
|
|
<span className="text">{userinfo.email}</span>
|
2017-07-26 16:37:51 +08:00
|
|
|
|
{/*<span className="text-button" onClick={() => { this.handleEdit('emailEdit', true) }} ><Icon type="edit" />修改</span>*/}
|
2017-08-17 16:55:52 +08:00
|
|
|
|
{btn}
|
2017-07-17 11:01:05 +08:00
|
|
|
|
</div>
|
2017-07-18 15:35:32 +08:00
|
|
|
|
} else {
|
2017-07-17 11:01:05 +08:00
|
|
|
|
emailEditHtml = <div>
|
2017-07-18 15:35:32 +08:00
|
|
|
|
<Input placeholder="Email" value={_userinfo.email} name="email" onChange={this.changeUserinfo} />
|
2017-07-17 11:01:05 +08:00
|
|
|
|
<ButtonGroup className="edit-buttons" >
|
2017-07-27 19:08:40 +08:00
|
|
|
|
<Button className="edit-button" onClick={() => { this.handleEdit('emailEdit', false) }} >取消</Button>
|
|
|
|
|
<Button className="edit-button" type="primary" onClick={ () => { this.updateUserinfo('email')} }>确定</Button>
|
2017-07-17 11:01:05 +08:00
|
|
|
|
</ButtonGroup>
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
|
2017-07-18 15:35:32 +08:00
|
|
|
|
if (this.state.roleEdit === false) {
|
2017-08-17 16:55:52 +08:00
|
|
|
|
let btn = "";
|
2017-07-17 11:01:05 +08:00
|
|
|
|
roleEditHtml = <div>
|
2017-07-18 15:35:32 +08:00
|
|
|
|
<span className="text">{roles[userinfo.role]}</span>
|
2017-08-17 16:55:52 +08:00
|
|
|
|
{btn}
|
2017-07-17 11:01:05 +08:00
|
|
|
|
</div>
|
2017-07-18 15:35:32 +08:00
|
|
|
|
} else {
|
|
|
|
|
roleEditHtml = <Select defaultValue={_userinfo.role} onChange={ this.changeRole} style={{ width: 150 }} >
|
2017-07-17 11:01:05 +08:00
|
|
|
|
<Option value="admin">管理员</Option>
|
|
|
|
|
<Option value="member">会员</Option>
|
|
|
|
|
</Select>
|
2017-07-18 15:35:32 +08:00
|
|
|
|
}
|
2017-07-17 11:01:05 +08:00
|
|
|
|
|
2017-07-18 15:35:32 +08:00
|
|
|
|
if (this.state.secureEdit === false) {
|
2017-08-17 16:55:52 +08:00
|
|
|
|
let btn = "";
|
2017-08-17 20:08:10 +08:00
|
|
|
|
if(userType){
|
2017-08-17 16:55:52 +08:00
|
|
|
|
btn = <Button icon="edit" onClick={() => { this.handleEdit('secureEdit', true) }}>修改</Button>
|
|
|
|
|
}
|
|
|
|
|
secureEditHtml = btn;
|
2017-07-18 15:35:32 +08:00
|
|
|
|
} else {
|
2017-07-17 11:01:05 +08:00
|
|
|
|
secureEditHtml = <div>
|
2017-08-17 20:08:10 +08:00
|
|
|
|
<Input style={{display: this.props.curRole === 'admin'&& userinfo.role!='admin' ? 'none': ''}} placeholder="旧的密码" type="password" name="old_password" id="old_password" />
|
2017-07-18 15:35:32 +08:00
|
|
|
|
<Input placeholder="新的密码" type="password" name="password" id="password" />
|
|
|
|
|
<Input placeholder="确认密码" type="password" name="verify_pass" id="verify_pass" />
|
2017-07-17 11:01:05 +08:00
|
|
|
|
<ButtonGroup className="edit-buttons" >
|
2017-07-27 19:08:40 +08:00
|
|
|
|
<Button className="edit-button" onClick={() => { this.handleEdit('secureEdit', false) }}>取消</Button>
|
|
|
|
|
<Button className="edit-button" onClick={this.updatePassword} type="primary">确定</Button>
|
2017-07-17 11:01:05 +08:00
|
|
|
|
</ButtonGroup>
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
return <div className="user-profile">
|
2017-08-24 11:00:10 +08:00
|
|
|
|
<div className="user-item-body">
|
2017-08-24 15:39:22 +08:00
|
|
|
|
{userinfo.uid === this.props.curUid?<h3>个人设置</h3>:<h3>{userinfo.username} 资料设置</h3>}
|
|
|
|
|
|
|
|
|
|
<Row className="avatarCon" type="flex" justify="start">
|
|
|
|
|
<Col span={24}>{userinfo.uid === this.props.curUid?<AvatarUpload uid={userinfo.uid}>点击上传头像</AvatarUpload>:<div className = "avatarImg"><img src = {`/api/user/avatar?uid=${userinfo.uid}`} /></div>}</Col>
|
|
|
|
|
</Row>
|
2017-08-24 11:00:10 +08:00
|
|
|
|
<Row className="user-item" type="flex" justify="start">
|
|
|
|
|
<div className="maoboli"></div>
|
|
|
|
|
<Col span={4}>用户id</Col>
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
{userinfo.uid}
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row className="user-item" type="flex" justify="start">
|
|
|
|
|
<div className="maoboli"></div>
|
|
|
|
|
<Col span={4}>用户名</Col>
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
{userNameEditHtml}
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row className="user-item" type="flex" justify="start">
|
|
|
|
|
<div className="maoboli"></div>
|
|
|
|
|
<Col span={4}>Email</Col>
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
{emailEditHtml}
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row className="user-item" style={{display: this.props.curRole === 'admin'? '': 'none'}} type="flex" justify="start">
|
|
|
|
|
<div className="maoboli"></div>
|
|
|
|
|
<Col span={4}>角色</Col>
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
{roleEditHtml}
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row className="user-item" type="flex" justify="start">
|
|
|
|
|
<div className="maoboli"></div>
|
|
|
|
|
<Col span={4}>创建账号时间</Col>
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
{formatTime(userinfo.add_time)}
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row className="user-item" type="flex" justify="start">
|
|
|
|
|
<div className="maoboli"></div>
|
|
|
|
|
<Col span={4}>更新账号时间</Col>
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
{formatTime(userinfo.up_time)}
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
|
|
{(userType)?<Row className="user-item" type="flex" justify="start">
|
|
|
|
|
<div className="maoboli"></div>
|
|
|
|
|
<Col span={4}>密码</Col>
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
{secureEditHtml}
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>:""}
|
|
|
|
|
</div>
|
2017-07-17 11:01:05 +08:00
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2017-08-10 21:20:23 +08:00
|
|
|
|
|
|
|
|
|
|
2017-08-11 17:49:47 +08:00
|
|
|
|
class AvatarUpload extends Component {
|
2017-08-10 21:20:23 +08:00
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
this.state = {
|
2017-08-11 12:19:31 +08:00
|
|
|
|
imageUrl: ""
|
2017-08-10 21:20:23 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
static propTypes = {
|
|
|
|
|
uid: PropTypes.number
|
|
|
|
|
}
|
|
|
|
|
uploadAvatar(basecode){
|
2017-08-11 12:19:31 +08:00
|
|
|
|
axios.post("/api/user/upload_avatar",{basecode: basecode}).then(()=>{
|
|
|
|
|
this.setState({ imageUrl: basecode });
|
2017-08-10 21:20:23 +08:00
|
|
|
|
}).catch((e)=>{
|
|
|
|
|
console.log(e);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
handleChange(info){
|
|
|
|
|
if (info.file.status === 'done') {
|
|
|
|
|
// Get this url from response in real world.
|
|
|
|
|
getBase64(info.file.originFileObj, basecode=>{this.uploadAvatar(basecode)});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
render() {
|
2017-08-11 12:19:31 +08:00
|
|
|
|
let imageUrl = this.state.imageUrl?this.state.imageUrl:`/api/user/avatar?uid=${this.props.uid}`;
|
2017-08-11 20:21:56 +08:00
|
|
|
|
// console.log(this.props.uid);
|
|
|
|
|
|
2017-08-10 21:20:23 +08:00
|
|
|
|
return <div className="avatar-box">
|
2017-08-24 15:39:22 +08:00
|
|
|
|
<Tooltip placement="right" title={<div>点击头像更换 (只支持jpg、png格式且大小不超过200kb的图片)</div>}>
|
2017-08-24 13:55:08 +08:00
|
|
|
|
<div>
|
|
|
|
|
<Upload
|
|
|
|
|
className="avatar-uploader"
|
|
|
|
|
name="basecode"
|
|
|
|
|
showUploadList={false}
|
|
|
|
|
action="/api/user/upload_avatar"
|
|
|
|
|
beforeUpload={beforeUpload}
|
|
|
|
|
onChange={this.handleChange.bind(this)} >
|
|
|
|
|
{/*<Avatar size="large" src={imageUrl} />*/}
|
|
|
|
|
<img className = "avatar" src = {imageUrl} />
|
|
|
|
|
</Upload>
|
|
|
|
|
</div>
|
|
|
|
|
</Tooltip>
|
|
|
|
|
<span className="avatarChange"></span>
|
2017-08-10 21:20:23 +08:00
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function beforeUpload(file) {
|
|
|
|
|
const isJPG = file.type === 'image/jpeg';
|
|
|
|
|
const isPNG = file.type === 'image/png';
|
|
|
|
|
if (!isJPG && !isPNG) {
|
|
|
|
|
message.error('图片的格式只能为 jpg、png!');
|
|
|
|
|
}
|
2017-08-11 12:19:31 +08:00
|
|
|
|
const isLt2M = file.size / 1024 / 1024 < 0.2;
|
2017-08-10 21:20:23 +08:00
|
|
|
|
if (!isLt2M) {
|
|
|
|
|
message.error('图片必须小于 200kb!');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (isPNG||isJPG) && isLt2M;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getBase64(img, callback) {
|
|
|
|
|
const reader = new FileReader();
|
|
|
|
|
reader.addEventListener('load', () => callback(reader.result));
|
|
|
|
|
reader.readAsDataURL(img);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2017-07-17 11:01:05 +08:00
|
|
|
|
export default Profile
|