修改昵称

src/pages/my/all/index.js

@@ -1,8 +1,12 @@
 import React, {Component} from 'react'
 import './index.css'
-import {Grid} from 'antd-mobile'
+import {Grid, ActivityIndicator} from 'antd-mobile'
 import {withRouter} from 'react-router-dom'
 import Logo from '../../../components/logo'
+import {getCookie} from "../../../utils/cookie"
+import {user_by_id} from "../../../utils/gql"
+import {Query} from "react-apollo"
+import gql from "graphql-tag"
 
 const orderIcon = [
     {
@@ -88,12 +92,38 @@ class All extends Component {
     }
 
     render() {
+        let user_id = getCookie('user_id')
         return (
             <div className='my-wrap all'>
-                <div className='avatar-area'>
-                    <div className='avatar'/>
-                    <div className='nickname'>昵称</div>
-                </div>
+                <Query query={gql(user_by_id)} variables={{user_id}}>
+                    {
+                        ({loading, error, data}) => {
+                            if (loading) {
+                                return (
+                                    <div className="loading-center">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                )
+                            }
+                            if (error) {
+                                return 'error!'
+                            }
+                            data = data.userbyid
+                            return (
+                                <div className='avatar-area' onClick={()=>{
+                                    this.props.history.push({
+                                        pathname: `/my/profile`,
+                                        state: {}
+                                    })
+                                }}>
+                                    <div className='avatar'/>
+                                    <div className='nickname'>{data.username}</div>
+                                </div>
+                            )
+                        }
+                    }
+                </Query>
+
                 <div className='my-card order-card'>
                     <div className='card-title'>
                         电商订单
@@ -179,7 +209,6 @@ class All extends Component {
                         />
                     </div>
                 </div>
-
                 <Logo/>
             </div>
         )

src/pages/my/index.js

@@ -5,6 +5,7 @@ import Order from './order'
 import Tools from './tools'
 import Member from './member'
 import Manage from './manage'
+import Profile from './profile'
 import {Switch, Route} from 'react-router-dom'
 
 const My = () => (
@@ -16,6 +17,7 @@ const My = () => (
             <Route path="/my/tools" component={Tools}/>
             <Route path="/my/member" component={Member}/>
             <Route path="/my/manage" component={Manage}/>
+            <Route path="/my/profile" component={Profile}/>
         </Switch>
     </div>
 )

src/pages/my/profile/index.js

@@ -0,0 +1,70 @@
+import React, {Component} from 'react'
+import './index.css'
+import {NavBar, Icon, InputItem, List, Button, ActivityIndicator} from 'antd-mobile'
+import {withRouter} from 'react-router-dom'
+import {Mutation} from "react-apollo"
+import {update_user, user_by_id} from "../../../utils/gql"
+import gql from "graphql-tag"
+import {getCookie} from "../../../utils/cookie"
+
+class Profile extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            username: ''
+        }
+    }
+
+    render() {
+        let {username} = this.state
+        let user_id = getCookie('user_id')
+        return (
+            <div>
+                <div className='profile-navbar-wrap'>
+                    <NavBar
+                        className='profile-navbar'
+                        mode="light"
+                        icon={<Icon type="left"/>}
+                        onLeftClick={() => {
+                            this.props.history.push({
+                                pathname: '/my'
+                            })
+                        }}
+                    >我的信息</NavBar>
+                </div>
+
+                <Mutation
+                    mutation={gql(update_user)}
+                    refetchQueries={[{query: gql(user_by_id), variables: {user_id}}]}
+                >
+                    {(update_user, {loading, error}) => {
+                        if (loading) {
+                            return (
+                                <div className="loading-center">
+                                    <ActivityIndicator text="Loading..." size="large"/>
+                                </div>
+                            )
+                        }
+                        if (error) {
+                            return 'error!'
+                        }
+                        return (
+                            <div>
+                                <List renderHeader={() => '修改个人信息'} className="my-list">
+                                    <InputItem onChange={(e) => {
+                                        this.setState({username: e})
+                                    }} value={username} placeholder="请输入昵称">昵称</InputItem>
+                                </List>
+                                <Button onClick={() => {
+                                    update_user({variables: {id: user_id, username}})
+                                }}>确认</Button>
+                            </div>
+                        )
+                    }}
+                </Mutation>
+            </div>
+        )
+    }
+}
+
+export default withRouter(Profile)

src/utils/gql.js

@@ -24,6 +24,49 @@ const find_user_by_openid = `
     }
 `
 
+const user_by_id = `
+    query userbyid($id: ID) {
+        userbyid: user_by_id(id: $id) {
+            email
+            updatedAt
+            password
+            telephone
+            username
+            createdAt
+            openid
+            id
+            userData_id {
+                id
+                nickname
+                avatar
+                isVip
+                vipCode
+                userPoint
+                createdAt
+                updatedAt
+            }
+        }
+    }
+`
+
+const update_user = `
+    mutation updateuser($email: String, $updatedAt: String, $where: user_filter, $password: String, $telephone: String, $username: String, $createdAt: String, $openid: String, $id: ID, $userData_id: ID) {
+        updateuser: update_user(email: $email updatedAt: $updatedAt where: $where password: $password telephone: $telephone username: $username createdAt: $createdAt openid: $openid id: $id userData_id: $userData_id) {
+            result
+            user {
+                email
+                updatedAt
+                password
+                telephone
+                username
+                createdAt
+                openid
+                id
+            }
+        }
+    }
+`
+
 const category_by_props = `
     query categorybyprops($sort_by: category_sort_by, $limit: Int, $status: String) {
         categorybyprops: category_by_props(sort_by: $sort_by limit: $limit status: $status) {
@@ -850,6 +893,8 @@ const delete_product_by_id = `
 export {
     create_user,
     find_user_by_openid,
+    user_by_id,
+    update_user,
     category_by_props,
     update_category,
     delete_category,