login

src/app/App.jsx

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Layout, Menu, Button, Spin, Icon, LocaleProvider} from 'antd';
+import {Layout, Menu, Button, Spin, Icon, LocaleProvider, Dropdown} from 'antd';
 import {BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
 import {Query} from "react-apollo";
 import gql from "graphql-tag";
@@ -20,7 +20,7 @@ import './index.css'
 import Create from "./graphqlService/component/schema/Create";
 import WxCreate from "./wechatService/wxCreate/WxCreate";
 
-import {SHOW_ALL_SCHEMA, SHOW_CASE_SCHEMA, SHOW_PROJECT, CASE_AND_PROJECT} from "../gql";
+import {SHOW_ALL_SCHEMA, SHOW_CASE_SCHEMA, SHOW_PROJECT, CASE_AND_PROJECT, GET_USER} from "../gql";
 import axios from 'axios';
 import {getCookie, setCookie} from "../cookie";
 
@@ -42,7 +42,8 @@ class App extends Component {
             locale: props.language === "中文" ? zhCN : undefined,
             languageButton: props.language === "中文" ? "English" : "中文",
             visible: false,
-            wxVisible: false
+            wxVisible: false,
+            userID: ''
         };
     }
 
@@ -62,11 +63,18 @@ class App extends Component {
                 .then((res) => {
                     if (res.data !== '') {
                         setCookie("user_id", res.data);
+                        this.setState({
+                            userID: res.data
+                        })
                     }
                 })
                 .catch(function (err) {
                     console.log(err);
                 });
+        } else {
+            this.setState({
+                userID
+            })
         }
     }
 
@@ -180,15 +188,22 @@ class App extends Component {
                             </Menu.Item>
                         </Menu>
 
-                        <Link to="/login">
-                            <Button className='login-button' type='primary'
-                                    onClick={() => this.switchMenuLevel('menuLevel1', 'user')}>
-                                <FormattedMessage id="Login"/></Button>
-                        </Link>
+                        {
+                            this.state.userID === '' ?
+                                <Link to="/login">
+                                    <Button className='login-button' type='primary'
+                                            onClick={() => this.switchMenuLevel('menuLevel1', 'user')}>
+                                        <FormattedMessage id="Login"/></Button>
+                                </Link>
+                                :
+                                <User
+                                    userID={this.state.userID}
+                                    languageButton={this.state.languageButton}
+                                    changeLocale={this.changeLocale}
+                                    switchMenuLevel={this.switchMenuLevel}
+                                />
+                        }
 
-                        <div className="change-locale">
-                            <Button size="small" onClick={(e) => this.changeLocale(e)}>{languageButton}</Button>
-                        </div>
                     </Header>
 
 
@@ -580,4 +595,61 @@ class WxConfigSiderbar extends Component {
             </Query>
         )
     }
+}
+
+class User extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            show: false
+        }
+    }
+
+    render() {
+        return (
+            <Query query={gql(GET_USER)} variables={{id: this.props.userID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin style={{marginLeft: 3}}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+                        let user = data.user_by_id;
+                        if (user !== null) {
+                            const menu = (
+                                <Menu className={'user-detail'}>
+                                    <Menu.Item className={'user-info'}>
+                                        <p className={'user-info-nickname'}>{user.nickname}</p>
+                                        <p className={'user-info-email'}>{user.email}</p>
+                                    </Menu.Item>
+                                    <Menu.Item>
+                                        <a href='https://www.ioobot.com' onClick={(e) => {
+                                            e.preventDefault();
+                                            this.props.changeLocale(e)
+                                        }}>{this.props.languageButton}</a>
+                                    </Menu.Item>
+                                    <Menu.Item>
+                                        <Link to="/login">
+                                            <div onClick={() => this.props.switchMenuLevel('menuLevel1', 'user')}><FormattedMessage id="Account center"/></div>
+                                        </Link>
+                                    </Menu.Item>
+                                </Menu>
+                            );
+                            return (
+                                <div className='login-nickname' onClick={()=>{}}>
+                                    <Dropdown overlay={menu} placement="bottomRight" trigger={['click']}>
+                                        <div>
+                                            {user.nickname} <Icon type="down" />
+                                        </div>
+                                    </Dropdown>
+                                </div>
+                            )
+                        }
+                    }
+                }
+            </Query>
+        )
+    }
 }

src/app/index.css

@@ -18,11 +18,13 @@
     float: right;
 }
 
-.login-button {
+.login-nickname {
     position: absolute;
-    top: 15px;
-    right: 100px;
+    top: 0;
+    right: 20px;
     float: right;
+    font-size: 20px;
+    color: white;
 }
 
 .layout-content {
@@ -34,4 +36,38 @@
 
 .layout-content-deploy {
     padding: 0;
-}
+}
+
+.user-detail{
+    width: 200px;
+    height: 350px;
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 4px 8px 0 #c5d9e8;
+}
+
+.user-info {
+    background-color: #fff !important;
+    padding: 28px 16px 12px !important;
+    font-size: 14px;
+    height: 86px!important;
+    color: #3f536e;
+}
+
+.user-info-nickname {
+    color: #3f536e;
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 700;
+    margin-bottom: 5px;
+}
+
+.user-info-email {
+    color: #8dabc4;
+    font-size: 15px;
+    min-height: 30px;
+    line-height: 15px;
+    word-break: break-all;
+    white-space: normal;
+}
+

src/language/en_US.js

@@ -147,6 +147,10 @@ const en_US = {
     'spbill_create_ip': 'spbill_create ip',
     'notify_url': 'notify url',
 
+    'e-commerce': 'e-commerce',
+    'appointment template': 'appointment template',
+    'account template': 'account template',
+
     'previous-step': 'previous',
     "next-step":"next",
 };