增加 user 的修改

src/login/AccountConfig.js

@@ -2,21 +2,27 @@ import React, {Component} from 'react';
 import {Icon, Row, Col, Input, Button} from 'antd';
 import './index.css'
 import avatar from '../images/avatar.jpg';
+import classnames from 'classnames';
 
 class AccountConfig extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            enterNickname: false,
-            editNickname: false
+            overNickname: false,
+            editNickname: false,
+            overTel: false,
+            editTel: false,
+            overEmail: false,
+            editEmail: false
         };
 
     }
 
-    cancelEditNickname = () => {
-      this.setState({
-          editNickname: false
-      })
+    cancelEdit = (kind) => {
+        let key = `edit${kind[0].toUpperCase()}${kind.slice(1)}`;
+        this.setState({
+            [key]: false
+        })
     };
 
     render() {
@@ -34,20 +40,31 @@ class AccountConfig extends Component {
                         </div>
                         <Row>
                             <Col span={20} offset={4} className={'message-wrapper'}>
-                                <Row className={'message-top'}>
+                                <Row>
                                     <Col span={22}>
                                         {
-                                            this.state.editNickname?
-                                                <EditNickname cancelEditNickname={this.cancelEditNickname}/>
+                                            this.state.editNickname ?
+                                                <EditNickname kind={'nickname'} cancelEdit={this.cancelEdit}/>
                                                 :
-                                                <div className={'nickname'} onMouseOver={()=>{this.setState({enterNickname: true})}} onMouseLeave={()=>{this.setState({enterNickname: false})}}>
-                                                    xy
+                                                <div className={'nickname'} onMouseOver={() => {
+                                                    this.setState({overNickname: true})
+                                                }} onMouseLeave={() => {
+                                                    this.setState({overNickname: false})
+                                                }}>
+                                                    xxx
                                                     {
-                                                        this.state.enterNickname?
-                                                            <span style={{paddingLeft: '5px', paddingRight: '5px'}} onClick={()=>{this.setState({editNickname:true})}}>
-                                                            <Icon style={{fontSize: '18px'}} type="edit" theme="twoTone"/>
-                                                            <span className={'modify'}> modify</span>
-                                                        </span>
+                                                        this.state.overNickname ?
+                                                            <span style={{paddingLeft: '5px', paddingRight: '5px'}}
+                                                                  onClick={() => {
+                                                                      this.setState({
+                                                                          editNickname: true,
+                                                                          overNickname: false
+                                                                      })
+                                                                  }}>
+                                                                <Icon style={{fontSize: '18px'}} type="edit"
+                                                                      theme="twoTone"/>
+                                                                <span className={'modify'}> modify</span>
+                                                            </span>
                                                             :
                                                             ''
                                                     }
@@ -70,17 +87,72 @@ class AccountConfig extends Component {
                                         <span className={'message-title'}>tel</span>
                                     </Col>
                                     <Col span={19}>
-                                        <span className={'message-content'}>16655168985</span>
+                                        {
+                                            this.state.editTel ?
+                                                <Edit kind={'tel'} cancelEdit={this.cancelEdit}/>
+                                                :
+                                                <div className={'message-content'} onMouseOver={() => {
+                                                    this.setState({overTel: true})
+                                                }} onMouseLeave={() => {
+                                                    this.setState({overTel: false})
+                                                }}>
+                                                    110
+                                                    {
+                                                        this.state.overTel ?
+                                                            <span style={{paddingLeft: '5px', paddingRight: '5px'}}
+                                                                  onClick={() => {
+                                                                      this.setState({
+                                                                          editTel: true,
+                                                                          overTel: false
+                                                                      })
+                                                                  }}>
+                                                                <Icon style={{fontSize: '18px'}} type="edit"
+                                                                      theme="twoTone"/>
+                                                                <span className={'modify'}> modify</span>
+                                                            </span>
+                                                            :
+                                                            ''
+                                                    }
+                                                </div>
+                                        }
                                     </Col>
-
                                 </Row>
 
                                 <Row className={'message'}>
                                     <Col span={5}>
                                         <span className={'message-title'}>email</span>
                                     </Col>
+
                                     <Col span={19}>
-                                        <span className={'message-content'}>contact@szu.im</span>
+
+                                        {
+                                            this.state.editEmail ?
+                                                <Edit kind={'email'} cancelEdit={this.cancelEdit}/>
+                                                :
+                                                <div className={'message-content'} onMouseOver={() => {
+                                                    this.setState({overEmail: true})
+                                                }} onMouseLeave={() => {
+                                                    this.setState({overEmail: false})
+                                                }}>
+                                                    xxx@ioobot.com
+                                                    {
+                                                        this.state.overEmail ?
+                                                            <span style={{paddingLeft: '5px', paddingRight: '5px'}}
+                                                                  onClick={() => {
+                                                                      this.setState({
+                                                                          editEmail: true,
+                                                                          overEmail: false
+                                                                      })
+                                                                  }}>
+                                                                <Icon style={{fontSize: '18px'}} type="edit"
+                                                                      theme="twoTone"/>
+                                                                <span className={'modify'}> modify</span>
+                                                            </span>
+                                                            :
+                                                            ''
+                                                    }
+                                                </div>
+                                        }
                                     </Col>
                                 </Row>
                             </Col>
@@ -97,26 +169,40 @@ export default AccountConfig;
 class EditNickname extends Component {
     constructor(props) {
         super(props);
-        this.state = {
-
-        }
+        this.state = {}
     }
 
     render() {
         return (
-            <Row className={'message'}>
+            <Row className={'message-top'}>
                 <Col span={5}>
-                    <span className={'message-title'}>username</span>
+                    <span className={'message-title message-title-high'}>{this.props.kind}</span>
                 </Col>
                 <Col span={19}>
                     <span className={'message-content'}>
                         <Input/>
                         <Button type={'primary'}>save</Button>
-                        <Button onClick={this.props.cancelEditNickname}>cancel</Button>
+                        <Button onClick={() => this.props.cancelEdit(this.props.kind)}>cancel</Button>
                     </span>
                 </Col>
-
             </Row>
         )
     }
 }
+
+class Edit extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {}
+    }
+
+    render() {
+        return (
+            <span className={'message-content'}>
+                <Input/>
+                <Button type={'primary'}>save</Button>
+                <Button onClick={() => this.props.cancelEdit(this.props.kind)}>cancel</Button>
+            </span>
+        )
+    }
+}

src/login/index.css

@@ -33,6 +33,7 @@
   padding-right: 50px;
 }
 
+
 .modify {
   font-weight: normal;
   font-size: 16px;
@@ -85,18 +86,16 @@
   display: block;
 }
 
-.message-top {
-  width: 100%;
-  height: 36px;
-  margin: 0 0 16px 0;
-}
-
 .message {
   height: 96px;
   line-height: 96px;
   border-bottom: 1px solid #ebebeb;
 }
 
+.message-top {
+  border-bottom: 1px solid #ebebeb;
+}
+
 .message-title {
   display: inline-block;
   line-height: 36px;
@@ -104,7 +103,13 @@
   font-size: 16px;
 }
 
+.message-title-high {
+  line-height: 75px;
+}
+
 .message-content {
+  padding-top: 20px;
+  padding-bottom: 20px;
   display: inline-block;
   line-height: 36px;
   font-size: 16px;