From b80b75dfdf5da9ad110be2370f9e7d8cfe689e07 Mon Sep 17 00:00:00 2001
From: qitmac000249 <xilli.yu@Qunar.com>
Date: Fri, 11 Aug 2017 12:19:31 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E9=A1=B5=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/containers/User/Profile.js | 54 ++++++++++++++++++++-----------
 client/containers/User/User.js    | 37 ++++++++++++++-------
 client/containers/User/index.scss | 27 ++++++++++------
 3 files changed, 79 insertions(+), 39 deletions(-)

diff --git a/client/containers/User/Profile.js b/client/containers/User/Profile.js
index e6e04912..f755350c 100644
--- a/client/containers/User/Profile.js
+++ b/client/containers/User/Profile.js
@@ -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!');
   }
diff --git a/client/containers/User/User.js b/client/containers/User/User.js
index 62395d65..54ffdfd8 100755
--- a/client/containers/User/User.js
+++ b/client/containers/User/User.js
@@ -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} />
diff --git a/client/containers/User/index.scss b/client/containers/User/index.scss
index 4450acf8..247c7531 100644
--- a/client/containers/User/index.scss
+++ b/client/containers/User/index.scss
@@ -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;
+  }
 }