Merge remote-tracking branch 'origin/master'

src/case/ShopApp/src/components/OrderPage/OrderCard.jsx

@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
+
+export default class OrderCard extends Component {
+  render() {
+      console.log(this.props)
+    const product =this.props.state.product
+    const num=this.props.state.num
+    
+    return (
+        <WingBlank size="lg">
+            <WhiteSpace size="lg" />
+                <Card>
+                    <Card.Header
+                        title={product.name}
+                        extra={<span>￥ {product.price} x {num}</span>}
+                    />
+                    <Card.Body>
+                        <div><img src={product.img} alt="img" width="100" height="100"></img></div>
+                    </Card.Body>
+                    <Card.Footer content={<span>总计 {num} 件商品</span>} extra={<div>合计:￥ {num*product.price}</div>} />
+                </Card>
+            <WhiteSpace size="lg" />
+      </WingBlank>
+    )
+  }
+}

src/case/ShopApp/src/components/OrderPage/OrederPage.css

@@ -0,0 +1,48 @@
+*{
+    font-size: 12px;
+}
+.addressWrap{
+    font-size: 10px;
+    display: flex;
+    padding: 5px 2px;
+    border-bottom: 1px solid #ccc;
+}
+
+.addressWrap span{
+    padding: 8px;
+}
+.addressWrap span:nth-child(1){
+    flex-basis: 16px;
+    background: url("https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/positioning.svg") no-repeat center center;
+}
+
+.addressWrap span:nth-child(2){
+    flex-grow: 1;
+}
+.addressWrap span:nth-child(3){
+    flex-basis: 16px;
+    background: url("https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/right.svg") no-repeat center center;
+}
+.payResult{
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+    overflow: hidden;
+    
+}
+
+.payResult div:nth-child(1){
+    flex-basis: 200px;
+    padding: 15px 0px;
+    text-align: center;
+    background: #f7eb91;
+}
+.payResult div:nth-child(2){
+    flex-grow: 1;
+    background: red;
+    color:#fff;
+    padding: 15px 0px;
+    text-align: center;
+}

src/case/ShopApp/src/components/OrderPage/OrederPage.jsx

@@ -1,19 +1,25 @@
 import React from 'react'
+import { Icon, Grid } from 'antd-mobile';
 import {PageContext} from '../../context/context'
+import OrderCard from './OrderCard'
 
 import {graphqls} from '../../api/graphql_request'
 import {getProductById} from '../../api/graphql/product'
 import {getAddressByProps} from '../../api/graphql/address'
 
+import './OrederPage.css'
+
 class OrderPage extends React.Component{
     constructor(props){
         super(props)
+        //console.log('props1111',this.props)
         this.state={
+            num:props.num,
             address:{},
             product:{}
         }
     }
-
+    //获取默认地址
     getAddress(){
         let user_id=sessionStorage.getItem('openid')
         console.log('user_id',user_id)
@@ -24,7 +30,7 @@ class OrderPage extends React.Component{
         })
     }
 
-    componentWillMount(){
+    componentDidMount(){
         this.getAddress()
         this.props.product.then((e)=>{
             //console.log(e.productbyid)
@@ -35,13 +41,25 @@ class OrderPage extends React.Component{
     }
     
     render(){
-        console.log('props',this.props)
+        const address=this.state.address
+        const product=this.state.product
+        const num =this.state.num
         return(
             <div className="orderWrap">
-                {this.state.address.address}
+                <div className="addressWrap">
+                <span></span>
+                <span>{address.username+address.telephone+address.province+address.city+address.area+address.address}</span>
+                <span></span>
+                </div>
+                <OrderCard state={{...this.state}}/>
+                <div className="payResult">
+                    <div>共计{num}件商品;合计 ￥ {num*product.price}</div>
+                    <div>立即支付</div>
+                </div>
             </div>
             )
     }
 }
 
-export default OrderPage
+export default OrderPage
+

src/components/app/App.jsx

@@ -22,12 +22,6 @@ import {SHOW_ALL_SCHEMA} from "../gql";
 import axios from 'axios';
 import {getCookie} from "../cookie";
 
-//案例入口
-import ShopApp from '../../case/ShopApp/src/App'
-import OrderApp from '../../case/OrderApp/src/App'
-import BillApp from '../../case/BillApp/src/App'
-
-
 axios.defaults.withCredentials = true;
 
 const {SubMenu} = Menu;
@@ -297,13 +291,13 @@ class App extends Component {
                                             <Menu.Item key="account">
                                                 <Icon type="setting" theme="twoTone" />
                                                 <span>Account center</span>
-                                                <Link to="/login/"/>
+                                                <Link to="/login/account"/>
                                             </Menu.Item>
 
                                             <Menu.Item key="cloud-settings">
                                                 <Icon type="cloud" theme="twoTone" />
                                                 <span>Cloud settings</span>
-                                                <Link to="/login/"/>
+                                                <Link to="/login/cloud"/>
                                             </Menu.Item>
                                         </Menu>
                                     </Sider>
@@ -335,6 +329,7 @@ class App extends Component {
                                 <Route path="/graphql-service/my-create/:case" component={UserCreate}/>
                                 <Route path="/wechat-service/:sidebar/:case" component={WechatService}/>
                                 <Route path="/quant-service/:sidebar/:case" component={QuantService}/>
+                                <Route path="/login/:setting" component={Login}/>
                                 <Route path="/login" component={Login}/>
                                 <Redirect path="*" to="/"/>
                             </Switch>

src/components/common/deploy/tencent/NotificationCard.js

@@ -8,9 +8,9 @@ class NotificationCard extends Component {
         return (
             <div>
                 <div className='kind'>
-                    <p><b>Ding Talk</b></p>
+                    <p style={{marginBottom: 10}}><b>Ding Talk</b></p>
                     <div className='item'>
-                        <p>
+                        <p style={{marginBottom: 10}}>
                             <span className='item-title'>
                                 <span>Web hook  </span>
                                 <Tooltip placement="top" title='hahahha'>
@@ -19,7 +19,7 @@ class NotificationCard extends Component {
                             </span>
                             <Input style={{width: 400}}/>
                         </p>
-                        <p>
+                        <p style={{marginBottom: 10}}>
                             <span className='item-title'>
                                 <span>Notification Name  </span>
                                 <Tooltip placement="top" title='heheheheh'>

src/components/login/AccountConfig.js

@@ -0,0 +1,31 @@
+import React, {Component} from 'react';
+import {Button} from 'antd';
+
+
+
+class AccountConfig extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        };
+
+    }
+
+
+    render() {
+        return (
+            <div>
+                <Button type={'primary'} onClick={()=>{
+                    this.props.history.push({
+                        pathname: '/login',
+                    })
+                }}>back</Button>
+            </div>
+        )
+    }
+}
+
+export default AccountConfig;
+
+

src/components/login/Config.js → src/components/login/CloudConfig.js

@@ -3,12 +3,13 @@ import {Button, Input, Spin, Icon} from 'antd';
 
 import {SHOW_CLOUD, ADD_CLOUD, UPDATE_CLOUD} from "../gql";
 import {request} from 'graphql-request'
+import {getCookie} from '../cookie';
 
 const idGen = (kind) => {
     return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
 };
 
-class Config extends Component {
+class CloudConfig extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -24,8 +25,9 @@ class Config extends Component {
             awsCLoudID: '',
             awsID: '',
             awsKey: '',
+            userID: getCookie('user_id')
         };
-        request('http://123.206.193.98:3000/graphql', SHOW_CLOUD, {user_id: props.userID}).then(
+        request('http://123.206.193.98:3000/graphql', SHOW_CLOUD, {user_id: this.state.userID}).then(
             data => {
                 let tencent = data.cloud_by_props.find(cloud => cloud.cloudName === 'tencent');
                 let aliyun = data.cloud_by_props.find(cloud => cloud.cloudName === 'aliyun');
@@ -60,7 +62,7 @@ class Config extends Component {
             if (id === '') {
                 let varObj = {
                     id: idGen('cloud'),
-                    user_id: this.props.userID,
+                    user_id: this.state.userID,
                     appId: '',
                     cloudName,
                     secretId,
@@ -129,6 +131,13 @@ class Config extends Component {
         return (
             this.state.show ?
                 <div>
+                    <div>
+                        <Button type={'primary'} onClick={()=>{
+                            this.props.history.push({
+                                pathname: '/login',
+                            })
+                        }}>back</Button>
+                    </div>
                     <div>
                         <span className='cloud-name'>Tencent: </span>
                         <div style={{marginBottom: 15}}>
@@ -211,6 +220,6 @@ class Config extends Component {
     }
 }
 
-export default Config;
+export default CloudConfig;
 
 

src/components/login/Login.js

@@ -1,316 +1,36 @@
 import React, {Component} from 'react';
+import LoginInput from './LoginInput';
+import CloudConfig from "./CloudConfig";
+import AccountConfig from "./AccountConfig";
 
-import {Layout, Input, Button, Spin} from 'antd';
-import Config from './Config'
-import {ADD_USER, GET_USER, SEARCH_USER} from "../gql";
-import {Mutation} from "react-apollo";
-import axios from 'axios';
-import {request} from 'graphql-request'
-import gql from "graphql-tag";
-// todo: _.debounce 的引入
-import _ from 'lodash';
-
-import {setCookie} from "../cookie";
-
-axios.defaults.withCredentials = true;
-
-const {Content} = Layout;
-const idGen = (kind) => {
-    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
-};
 
 class Login extends Component {
     constructor() {
         super();
         this.state = {
-            userID: '',
-            hasLogin: false,
-            hasRegister: false,
-            nickname: 'its a default nickname',
-            avatar: '',
-            register_username: '',
-            register_password: '',
-            register_nickname: '',
-            login_username: '',
-            login_password: '',
-            login_url: 'http://123.206.193.98:8999/login',
-            register_url: 'http://123.206.193.98:8999/resetpassword',
-            getID_url: 'http://123.206.193.98:8999/getuserid',
-            loginStatus: '',
-            loginOnce: true,
-            usernameTip: false
+            userID: ''
         }
     }
 
-
-    login = () => {
-        let _this = this;
-        // todo: should be post
-        // axios.get(`${this.state.login_url}?user-name=${this.state.login_username}&password=${this.state.login_password}`)
-
-        axios.post(this.state.login_url,
-            {
-                'user-name': this.state.login_username,
-                password: this.state.login_password
-            })
-            .then((res) => {
-            console.log('login result',res);
-                _this.setState({
-                    userID: res.data,
-                    loginStatus: 'logined',
-                    loginOnce: false
-                });
-                setCookie("user_id",res.data);
-
-                request('http://123.206.193.98:3000/graphql', GET_USER, {id: res.data}).then(data => {
-                        this.setState({
-                            avatar: data.user_by_id.avatar,
-                            nickname: data.user_by_id.nickname
-                        })
-                    }
-                )
-
-            })
-            .catch((err) => {
-                _this.setState({
-                    loginStatus: 'failed',
-                    loginOnce: false
-                });
-            });
+    getUserId = (id) => {
+        this.setState({
+            userID: id
+        })
     };
 
-    register = () => {
-        return (
-            <Mutation mutation={gql(ADD_USER)}>
-                {(create_user, {loading, error}) => {
-                    if (error)
-                        return 'error';
-                    if (loading)
-                        return <Spin style={{marginLeft: 3}}/>;
-
-                    return (
-                        <div>
-                            <span style={{marginRight: 20}}><b>register:</b></span>
-                            <div style={{marginTop: 10}}>
-                                <span>username: </span>
-                                <Input
-                                    placeholder=""
-                                    onChange={(e) => {
-                                        // antd 获取不到 target，百度来的下面这句代码
-                                        e.persist();
-                                        this.setState({register_username: e.target.value});
-
-                                    }}
-                                    style={{width: 200}}
-                                />
-                                {
-                                    this.state.usernameTip ?
-                                        <span><b>username has been used!</b></span>
-                                        :
-                                        ''
-                                }
-                            </div>
-                            <div style={{marginTop: 10}}>
-                                <span>password: </span>
-                                <Input
-                                    placeholder=""
-                                    onChange={(e) => {
-                                        // antd 获取不到 target，百度来的下面这句代码
-                                        e.persist();
-                                        this.setState({register_password: e.target.value});
-                                    }}
-                                    style={{width: 200}}
-                                />
-                            </div>
-                            <div style={{marginTop: 10}}>
-                                <span>nickname: </span>
-                                <Input
-                                    placeholder=""
-                                    onChange={(e) => {
-                                        // antd 获取不到 target，百度来的下面这句代码
-                                        e.persist();
-                                        this.setState({register_nickname: e.target.value});
-                                    }}
-                                    style={{width: 200}}
-                                />
-                            </div>
-                            <Button type='primary' onClick={() => {
-                                request('http://123.206.193.98:3000/graphql', SEARCH_USER, {username: this.state.register_username}).then(data => {
-                                    if (data.user_by_props.length === 0) {
-                                        let id = idGen('user');
-                                        let _this = this;
-                                        create_user({
-                                            variables: {
-                                                id,
-                                                email: '',
-                                                updatedAt: '',
-                                                password: '',
-                                                telephone: '',
-                                                nickname: this.state.register_nickname,
-                                                username: this.state.register_username,
-                                                createdAt: new Date().getTime(),
-                                                openid: '',
-                                                avatar: ''
-                                            }
-                                        });
-                                        axios.post(this.state.register_url,
-                                            {
-                                                'user-id': id,
-                                                password: this.state.register_password,
-                                                token:'WXgraphql4Io'
-                                            })
-                                            .then(function (response) {
-                                                if (response.status === 200)
-                                                    _this.setState({
-                                                        hasRegister: true
-                                                    })
-                                            })
-                                            .catch(function (error) {
-                                                console.log(error);
-                                            });
-                                    } else {
-                                        this.setState({
-                                            usernameTip: true
-                                        });
-                                        setTimeout(() => {
-                                            this.setState({
-                                                usernameTip: false
-                                            });
-                                        }, 1500)
-                                    }
-                                });
-
-                            }}>ok</Button>
-                        </div>
-                    );
-                }}
-            </Mutation>
-
-        )
-    };
-
-    componentWillMount() {
-        let _this = this;
-        axios.get(this.state.getID_url)
-            .then((res) => {
-                if (res.data !== '') {
-                    setCookie("user_id",res.data);
-                    _this.setState({
-                            userID: res.data,
-                            hasLogin: true,
-                            loginOnce: false,
-                            loginStatus: 'logined'
-                        }, () => {
-                            request('http://123.206.193.98:3000/graphql', GET_USER, {id: res.data}).then(data => {
-                                    this.setState({
-                                        avatar: data.user_by_id.avatar,
-                                        nickname: data.user_by_id.nickname
-                                    })
-                                }
-                            )
-                        }
-                    )
-                }
-            })
-            .catch((err) => {
-                console.log(err);
-            });
-    }
 
     render() {
         return (
             <div>
-                <Layout style={{padding: '24px', zIndex: '0'}}>
-                    <Content style={{padding: '24px', minHeight: 280, background: '#fff'}}>
-                        {
-                            <div>
-                                <div className='login'>
-                                    {
-                                        this.state.hasLogin ?
-                                            this.state.loginOnce ?
-                                                this.login()
-                                                :
-                                                ''
-                                            :
-                                            <div>
-                                                <span style={{marginRight: 20}}><b>login:</b></span>
-                                                <div style={{marginTop: 10}}>
-                                                    <span>username: </span>
-                                                    <Input
-                                                        placeholder=""
-                                                        onChange={(e) => {
-                                                            // antd 获取不到 target，百度来的下面这句代码
-                                                            e.persist();
-                                                            this.setState({login_username: e.target.value});
-                                                        }}
-                                                        style={{width: 200}}
-                                                    />
-                                                </div>
-                                                <div style={{marginTop: 10}}>
-                                                    <span>password: </span>
-                                                    <Input
-                                                        placeholder=""
-                                                        onChange={(e) => {
-                                                            e.persist();
-                                                            this.setState({login_password: e.target.value});
-                                                        }}
-                                                        style={{width: 200}}
-                                                    />
-                                                </div>
-                                                <Button type='primary' onClick={() => {
-                                                    this.setState({
-                                                        hasLogin: true
-                                                    })
-                                                }}>ok</Button>
-                                            </div>
-                                    }
-                                    {
-                                        this.state.loginStatus === 'logined' ?
-                                            <div>
-                                                <span
-                                                    style={{marginRight: '10px'}}>welcome, {this.state.nickname}</span>
-                                                <Button onClick={() => {
-                                                    this.setState({
-                                                        hasLogin: false,
-                                                        loginStatus: '',
-                                                        loginOnce: true
-                                                    });
-                                                    // cookie.remove('ring-session')
-                                                }}>exit</Button>
-                                                <Config userID={this.state.userID}/>
-                                            </div>
-                                            :
-                                            this.state.loginStatus === 'failed' ?
-                                                <div>
-                                                    <span style={{marginRight: '10px'}}>login failed</span>
-                                                    <Button onClick={() => {
-                                                        this.setState({
-                                                            hasLogin: false,
-                                                            loginStatus: '',
-                                                            loginOnce: true
-                                                        })
-                                                    }}>relogin</Button>
-                                                </div>
-                                                :
-                                                ''
-                                    }
-                                </div>
-                                <div className='register' style={{marginTop: 20}}>
-                                    {
-                                        this.state.hasRegister ?
-                                            <div>ok, login please</div>
-                                            :
-                                            this.state.loginStatus === 'logined' ?
-                                                ''
-                                                :
-                                                this.register()
-                                    }
-                                </div>
-
-                            </div>
-                        }
-                    </Content>
-                </Layout>
+                {
+                    this.props.match.params.setting ?
+                        this.props.match.params.setting === 'account'?
+                            <AccountConfig history={this.props.history}/>
+                            :
+                            <CloudConfig userID={this.state.userID} history={this.props.history}/>
+                        :
+                        <LoginInput history={this.props.history} getUserId={this.getUserId}/>
+                }
             </div>
         )
     }

src/components/login/LoginInput.js

@@ -0,0 +1,322 @@
+import React, {Component} from 'react';
+
+import {Layout, Input, Button, Spin} from 'antd';
+import {ADD_USER, GET_USER, SEARCH_USER} from "../gql";
+import {Mutation} from "react-apollo";
+import axios from 'axios';
+import {request} from 'graphql-request'
+import gql from "graphql-tag";
+// todo: _.debounce 的引入
+import _ from 'lodash';
+
+import {setCookie} from "../cookie";
+
+axios.defaults.withCredentials = true;
+
+const {Content} = Layout;
+const idGen = (kind) => {
+    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
+};
+
+class LoginInput extends Component {
+    constructor() {
+        super();
+        this.state = {
+            userID: '',
+            hasLogin: false,
+            hasRegister: false,
+            nickname: 'its a default nickname',
+            avatar: '',
+            register_username: '',
+            register_password: '',
+            register_nickname: '',
+            login_username: '',
+            login_password: '',
+            login_url: 'http://123.206.193.98:8999/login',
+            register_url: 'http://123.206.193.98:8999/resetpassword',
+            getID_url: 'http://123.206.193.98:8999/getuserid',
+            loginStatus: '',
+            loginOnce: true,
+            usernameTip: false
+        }
+    }
+
+
+    login = () => {
+        let _this = this;
+
+        axios.post(this.state.login_url, {
+            'user-name': this.state.login_username,
+            password: this.state.login_password
+        })
+            .then((res) => {
+                _this.setState({
+                    userID: res.data,
+                    loginStatus: 'logined',
+                    loginOnce: false
+                });
+                setCookie("user_id", res.data);
+                _this.props.getUserId(res.data);
+                request('http://123.206.193.98:3000/graphql', GET_USER, {id: res.data}).then(data => {
+                        this.setState({
+                            avatar: data.user_by_id.avatar,
+                            nickname: data.user_by_id.nickname
+                        })
+                    }
+                )
+            })
+            .catch((err) => {
+                _this.setState({
+                    loginStatus: 'failed',
+                    loginOnce: false
+                });
+            });
+    };
+
+    register = () => {
+        return (
+            <Mutation mutation={gql(ADD_USER)}>
+                {(create_user, {loading, error}) => {
+                    if (error)
+                        return 'error';
+                    if (loading)
+                        return <Spin style={{marginLeft: 3}}/>;
+
+                    return (
+                        <div>
+                            <span style={{marginRight: 20}}><b>register:</b></span>
+                            <div style={{marginTop: 10}}>
+                                <span>username: </span>
+                                <Input
+                                    placeholder=""
+                                    onChange={(e) => {
+                                        // antd 获取不到 target，百度来的下面这句代码
+                                        e.persist();
+                                        this.setState({register_username: e.target.value});
+
+                                    }}
+                                    style={{width: 200}}
+                                />
+                                {
+                                    this.state.usernameTip ?
+                                        <span><b>username has been used!</b></span>
+                                        :
+                                        ''
+                                }
+                            </div>
+                            <div style={{marginTop: 10}}>
+                                <span>password: </span>
+                                <Input
+                                    placeholder=""
+                                    onChange={(e) => {
+                                        e.persist();
+                                        this.setState({register_password: e.target.value});
+                                    }}
+                                    style={{width: 200}}
+                                />
+                            </div>
+                            <div style={{marginTop: 10}}>
+                                <span>nickname: </span>
+                                <Input
+                                    placeholder=""
+                                    onChange={(e) => {
+                                        e.persist();
+                                        this.setState({register_nickname: e.target.value});
+                                    }}
+                                    style={{width: 200}}
+                                />
+                            </div>
+                            <Button type='primary' onClick={() => {
+                                request('http://123.206.193.98:3000/graphql', SEARCH_USER, {username: this.state.register_username}).then(data => {
+                                    if (data.user_by_props.length === 0) {
+                                        let id = idGen('user');
+                                        let _this = this;
+                                        create_user({
+                                            variables: {
+                                                id,
+                                                email: '',
+                                                updatedAt: '',
+                                                password: '',
+                                                telephone: '',
+                                                nickname: this.state.register_nickname,
+                                                username: this.state.register_username,
+                                                createdAt: new Date().getTime(),
+                                                openid: '',
+                                                avatar: ''
+                                            }
+                                        });
+                                        axios.post(this.state.register_url,
+                                            {
+                                                'user-id': id,
+                                                password: this.state.register_password,
+                                                token: 'WXgraphql4Io'
+                                            })
+                                            .then(function (response) {
+                                                if (response.status === 200)
+                                                    _this.setState({
+                                                        hasRegister: true
+                                                    })
+                                            })
+                                            .catch(function (error) {
+                                                console.log(error);
+                                            });
+                                    } else {
+                                        this.setState({
+                                            usernameTip: true
+                                        });
+                                        setTimeout(() => {
+                                            this.setState({
+                                                usernameTip: false
+                                            });
+                                        }, 1500)
+                                    }
+                                });
+
+                            }}>ok</Button>
+                        </div>
+                    );
+                }}
+            </Mutation>
+
+        )
+    };
+
+    componentWillMount() {
+        let _this = this;
+        axios.get(this.state.getID_url)
+            .then((res) => {
+                if (res.data !== '') {
+                    setCookie("user_id", res.data);
+                    _this.setState({
+                            userID: res.data,
+                            hasLogin: true,
+                            loginOnce: false,
+                            loginStatus: 'logined'
+                        }, () => {
+                            request('http://123.206.193.98:3000/graphql', GET_USER, {id: res.data}).then(data => {
+                                    this.setState({
+                                        avatar: data.user_by_id.avatar,
+                                        nickname: data.user_by_id.nickname
+                                    })
+                                }
+                            )
+                        }
+                    )
+                }
+            })
+            .catch((err) => {
+                console.log(err);
+            });
+    }
+
+    render() {
+        return (
+            <div>
+                <Layout style={{padding: '24px', zIndex: '0'}}>
+                    <Content style={{padding: '24px', minHeight: 280, background: '#fff'}}>
+                        {
+                            <div>
+                                <div className='login'>
+                                    {
+                                        this.state.hasLogin ?
+                                            this.state.loginOnce ?
+                                                this.login()
+                                                :
+                                                ''
+                                            :
+                                            <div>
+                                                <span style={{marginRight: 20}}><b>login:</b></span>
+                                                <div style={{marginTop: 10}}>
+                                                    <span>username: </span>
+                                                    <Input
+                                                        placeholder=""
+                                                        onChange={(e) => {
+                                                            e.persist();
+                                                            this.setState({login_username: e.target.value});
+                                                        }}
+                                                        style={{width: 200}}
+                                                    />
+                                                </div>
+                                                <div style={{marginTop: 10}}>
+                                                    <span>password: </span>
+                                                    <Input
+                                                        placeholder=""
+                                                        onChange={(e) => {
+                                                            e.persist();
+                                                            this.setState({login_password: e.target.value});
+                                                        }}
+                                                        style={{width: 200}}
+                                                    />
+                                                </div>
+                                                <Button type='primary' onClick={() => {
+                                                    this.setState({
+                                                        hasLogin: true
+                                                    })
+                                                }}>ok</Button>
+                                            </div>
+                                    }
+                                    {
+                                        this.state.loginStatus === 'logined' ?
+                                            <div>
+                                                <span
+                                                    style={{marginRight: '10px'}}>welcome, {this.state.nickname}</span>
+                                                <Button onClick={() => {
+                                                    this.setState({
+                                                        hasLogin: false,
+                                                        loginStatus: '',
+                                                        loginOnce: true
+                                                    });
+                                                    // cookie.remove('ring-session')
+                                                }}>exit</Button>
+                                                <div style={{marginTop: 20}}>
+                                                    <Button type="primary" style={{marginRight: 10}} onClick={() => {
+                                                        this.props.history.push({
+                                                            pathname: '/login/account',
+                                                        })
+                                                    }}>user setting</Button>
+                                                    <Button type="primary" onClick={() => {
+                                                        this.props.history.push({
+                                                            pathname: '/login/cloud',
+                                                        })
+                                                    }}>cloud setting</Button>
+                                                </div>
+                                            </div>
+                                            :
+                                            this.state.loginStatus === 'failed' ?
+                                                <div>
+                                                    <span style={{marginRight: '10px'}}>login failed</span>
+                                                    <Button onClick={() => {
+                                                        this.setState({
+                                                            hasLogin: false,
+                                                            loginStatus: '',
+                                                            loginOnce: true
+                                                        })
+                                                    }}>relogin</Button>
+                                                </div>
+                                                :
+                                                ''
+                                    }
+                                </div>
+                                <div className='register' style={{marginTop: 20}}>
+                                    {
+                                        this.state.hasRegister ?
+                                            <div>ok, login please</div>
+                                            :
+                                            this.state.loginStatus === 'logined' ?
+                                                ''
+                                                :
+                                                this.register()
+                                    }
+                                </div>
+
+                            </div>
+                        }
+                    </Content>
+                </Layout>
+            </div>
+        )
+    }
+}
+
+export default LoginInput;
+