ok

src/App.js

@@ -12,10 +12,12 @@ class App extends Component {
         this.state = {
             selectedTab: 'appointment',
             fullScreen: true,
+            userID: 'handsome'
         };
     }
 
     render() {
+        let {userID} = this.state;
         return (
             <div className="App">
                 <div style={{position: 'fixed', height: '100%', width: '100%', top: 0}}>
@@ -37,7 +39,7 @@ class App extends Component {
                             }}
                             data-seed="logId"
                         >
-                            <Display/>
+                            <Display userID={userID}/>
                         </TabBar.Item>
                         <TabBar.Item
                             icon={<Icon type="home" />}
@@ -51,7 +53,7 @@ class App extends Component {
                                 });
                             }}
                         >
-                            <My/>
+                            <My userID={userID}/>
                         </TabBar.Item>
                         <TabBar.Item
                             icon={<Icon type="setting" />}
@@ -65,7 +67,7 @@ class App extends Component {
                                 });
                             }}
                         >
-                            <Manage/>
+                            <Manage userID={userID}/>
                         </TabBar.Item>
                     </TabBar>
                 </div>

src/gql.js

@@ -53,11 +53,14 @@ const orderbyprops = `
         createdAt
         orderStatus
         id
+        contactTelephone
+        contactName
         user_id {
           id
           openid
           admin
           username
+          nickname
           password
           telephone
           email
@@ -99,6 +102,7 @@ const userbyid = `
         openid
         admin
         username
+        nickname
         password
         telephone
         email
@@ -109,12 +113,13 @@ const userbyid = `
 `;
 
 const updateuser = `
-    mutation updateuser($id: ID, $username: String, $telephone: String, $updatedAt: String) {
-      updateuser: update_user(id: $id username: $username  telephone: $telephone updatedAt: $updatedAt) {
+    mutation updateuser($id: ID, $nickname: String, $telephone: String, $updatedAt: String) {
+      updateuser: update_user(id: $id nickname: $nickname  telephone: $telephone updatedAt: $updatedAt) {
         id
         openid
         admin
         username
+        nickname
         password
         telephone
         email
@@ -148,8 +153,8 @@ const updateorderAndupdaterepertory = `
 `;
 
 const createorderAndupdaterepertory = `
-    mutation updateorderAndupdaterepertory ($order_id: ID!, $payStatus: String, $remark: String, $payCount: String, $payTime: String, $createdAt: String, $orderStatus: String, $user_id: ID, $service_id: ID, $customerNumber: Int, $repertory_id: ID, $updatedAt: String, $count: Int) {
-        createorder: create_order(id: $order_id payStatus: $payStatus remark: $remark payCount: $payCount createdAt: $createdAt updatedAt: $updatedAt payTime: $payTime createdAt: $createdAt orderStatus: $orderStatus user_id: $user_id service_id: $service_id customerNumber: $customerNumber) {
+    mutation updateorderAndupdaterepertory ($order_id: ID!, $contactTelephone: String, $contactName: String, $payStatus: String, $remark: String, $payCount: String, $payTime: String, $createdAt: String, $orderStatus: String, $user_id: ID, $service_id: ID, $customerNumber: Int, $repertory_id: ID, $updatedAt: String, $count: Int) {
+        createorder: create_order(id: $order_id contactTelephone: $contactTelephone contactName: $contactName payStatus: $payStatus remark: $remark payCount: $payCount createdAt: $createdAt updatedAt: $updatedAt payTime: $payTime createdAt: $createdAt orderStatus: $orderStatus user_id: $user_id service_id: $service_id customerNumber: $customerNumber) {
             payStatus
             remark
             payCount
@@ -160,6 +165,8 @@ const createorderAndupdaterepertory = `
             orderStatus
             id
             customerNumber
+            contactTelephone
+            contactName
           }
       
           updaterepertory: update_repertory(id: $repertory_id count: $count updatedAt: $updatedAt) {
@@ -170,6 +177,46 @@ const createorderAndupdaterepertory = `
     }
 `;
 
+const createorderAndupdaterepertoryAndupdateuser = `
+    mutation createorderAndupdaterepertoryAndupdateuser ($order_id: ID!, $user_id: ID!, $nickname: String, $telephone: String, $contactTelephone: String, $contactName: String, $payStatus: String, $remark: String, $payCount: String, $payTime: String, $createdAt: String, $orderStatus: String, $user_id: ID, $service_id: ID, $customerNumber: Int, $repertory_id: ID, $updatedAt: String, $count: Int) {
+        createorder: create_order(id: $order_id contactTelephone: $contactTelephone contactName: $contactName payStatus: $payStatus remark: $remark payCount: $payCount createdAt: $createdAt updatedAt: $updatedAt payTime: $payTime createdAt: $createdAt orderStatus: $orderStatus user_id: $user_id service_id: $service_id customerNumber: $customerNumber) {
+            payStatus
+            remark
+            payCount
+            updatedAt
+            payTime
+            createdAt
+            updatedAt
+            orderStatus
+            id
+            customerNumber
+            contactTelephone
+            contactName
+          }
+      
+          updaterepertory: update_repertory(id: $repertory_id count: $count updatedAt: $updatedAt) {
+            id
+            count
+            updatedAt
+          }
+          
+          
+        updateuser: update_user(id: $user_id nickname: $contactName  telephone: $contactTelephone updatedAt: $updatedAt) {
+            id
+            openid
+            admin
+            username
+            nickname
+            password
+            telephone
+            email
+            createdAt
+            updatedAt
+        }
+        
+    }
+`;
+
 const repertorybyid = `
     query repertorybyid($id: ID) {
       repertorybyid: repertory_by_id(id: $id) {
@@ -214,11 +261,14 @@ const adminorderbyprops = `
         createdAt
         orderStatus
         id
+        contactTelephone
+        contactName
         user_id {
           id
           openid
           admin
           username
+          nickname
           password
           telephone
           email
@@ -349,6 +399,7 @@ export {
     serverbyprops,
     servicebyprops,
     orderbyprops,
+    adminorderbyprops,
     userbyid,
     updateuser,
     repertorybyid,
@@ -356,9 +407,9 @@ export {
     createorderAndupdaterepertory,
     deleteorder,
     updateorder,
-    adminorderbyprops,
     createserver,
     updateserviceAndupdaterepertory,
     createserviceAndcreaterepertory,
-    deleteserviceAnddeleterepertory
+    deleteserviceAnddeleterepertory,
+    createorderAndupdaterepertoryAndupdateuser
 }

src/graphqlALL.txt

@@ -1,14 +1,15 @@
 query userbyid($id: ID) {
   userbyid: user_by_id(id: $id) {
-    id
-    openid
+    email
+    updatedAt
     admin
-    username
     password
     telephone
-    email
+    nickname
+    username
     createdAt
-    updatedAt
+    openid
+    id
   }
 }
 
@@ -70,23 +71,26 @@ query repertorybyid($id: ID) {
 query orderbyid($id: ID) {
   orderbyid: order_by_id(id: $id) {
     payStatus
+    contactName
     remark
     payCount
     updatedAt
     payTime
+    contactTelephone
     createdAt
     orderStatus
     id
     user_id {
-      id
-      openid
+      email
+      updatedAt
       admin
-      username
       password
       telephone
-      email
+      nickname
+      username
       createdAt
-      updatedAt
+      openid
+      id
     }
     service_id {
       id
@@ -132,7 +136,6 @@ query servicebyprops($server_id: ID, $repertory_id: ID, $description: String, $p
     }
     repertory_id {
       id
-
       count
       createdAt
       updatedAt
@@ -157,45 +160,47 @@ query serverbyid($id: ID) {
   }
 }
 
-query userbyprops($openid: String, $admin: String, $username: String, $password: String, $telephone: String, $email: String, $createdAt: String, $updatedAt: String) {
-  userbyprops: user_by_props(openid: $openid admin: $admin username: $username password: $password telephone: $telephone email: $email createdAt: $createdAt updatedAt: $updatedAt) {
-    id
-    openid
+query userbyprops($email: String, $updatedAt: String, $admin: String, $password: String, $telephone: String, $nickname: String, $username: String, $createdAt: String, $openid: String) {
+  userbyprops: user_by_props(email: $email updatedAt: $updatedAt admin: $admin password: $password telephone: $telephone nickname: $nickname username: $username createdAt: $createdAt openid: $openid) {
+    email
+    updatedAt
     admin
-    username
     password
     telephone
-    email
+    nickname
+    username
     createdAt
-    updatedAt
+    openid
+    id
   }
 }
 
-query orderbyprops($payStatus: String, $remark: String, $payCount: String, $updatedAt: String, $payTime: String, $createdAt: String, $orderStatus: String, $user_id: ID, $service_id: ID, $customerNumber: Int) {
-  orderbyprops: order_by_props(payStatus: $payStatus remark: $remark payCount: $payCount updatedAt: $updatedAt payTime: $payTime createdAt: $createdAt orderStatus: $orderStatus user_id: $user_id service_id: $service_id customerNumber: $customerNumber) {
+query orderbyprops($payStatus: String, $contactName: String, $remark: String, $payCount: String, $updatedAt: String, $payTime: String, $contactTelephone: String, $createdAt: String, $orderStatus: String, $user_id: ID, $service_id: ID, $customerNumber: Int) {
+  orderbyprops: order_by_props(payStatus: $payStatus contactName: $contactName remark: $remark payCount: $payCount updatedAt: $updatedAt payTime: $payTime contactTelephone: $contactTelephone createdAt: $createdAt orderStatus: $orderStatus user_id: $user_id service_id: $service_id customerNumber: $customerNumber) {
     payStatus
+    contactName
     remark
     payCount
     updatedAt
     payTime
+    contactTelephone
     createdAt
     orderStatus
     id
     user_id {
-      id
-      openid
+      email
+      updatedAt
       admin
-      username
       password
       telephone
-      email
+      nickname
+      username
       createdAt
-      updatedAt
+      openid
+      id
     }
     service_id {
       id
-
-
       description
       price
       startTime
@@ -207,31 +212,33 @@ query orderbyprops($payStatus: String, $remark: String, $payCount: String, $upda
   }
 }
 
-mutation createuser($id: ID!, $openid: String, $admin: String, $username: String, $password: String, $telephone: String, $email: String, $createdAt: String, $updatedAt: String) {
-  createuser: create_user(id: $id openid: $openid admin: $admin username: $username password: $password telephone: $telephone email: $email createdAt: $createdAt updatedAt: $updatedAt) {
-    id
-    openid
+mutation createuser($email: String, $updatedAt: String, $admin: String, $password: String, $telephone: String, $nickname: String, $username: String, $createdAt: String, $openid: String, $id: ID!) {
+  createuser: create_user(email: $email updatedAt: $updatedAt admin: $admin password: $password telephone: $telephone nickname: $nickname username: $username createdAt: $createdAt openid: $openid id: $id) {
+    email
+    updatedAt
     admin
-    username
     password
     telephone
-    email
+    nickname
+    username
     createdAt
-    updatedAt
+    openid
+    id
   }
 }
 
-mutation updateuser($id: ID, $openid: String, $admin: String, $username: String, $password: String, $telephone: String, $email: String, $createdAt: String, $updatedAt: String) {
-  updateuser: update_user(id: $id openid: $openid admin: $admin username: $username password: $password telephone: $telephone email: $email createdAt: $createdAt updatedAt: $updatedAt) {
-    id
-    openid
+mutation updateuser($email: String, $updatedAt: String, $admin: String, $password: String, $telephone: String, $nickname: String, $username: String, $createdAt: String, $openid: String, $id: ID) {
+  updateuser: update_user(email: $email updatedAt: $updatedAt admin: $admin password: $password telephone: $telephone nickname: $nickname username: $username createdAt: $createdAt openid: $openid id: $id) {
+    email
+    updatedAt
     admin
-    username
     password
     telephone
-    email
+    nickname
+    username
     createdAt
-    updatedAt
+    openid
+    id
   }
 }
 
@@ -248,7 +255,6 @@ mutation updateservice($id: ID, $server_id: ID, $repertory_id: ID, $description:
     }
     repertory_id {
       id
-
       count
       createdAt
       updatedAt
@@ -275,7 +281,6 @@ mutation createservice($id: ID!, $server_id: ID, $repertory_id: ID, $description
     }
     repertory_id {
       id
-
       count
       createdAt
       updatedAt
@@ -305,8 +310,6 @@ mutation createrepertory($id: ID!, $service_id: ID, $count: Int, $createdAt: Str
     id
     service_id {
       id
-
-
       description
       price
       startTime
@@ -320,34 +323,37 @@ mutation createrepertory($id: ID!, $service_id: ID, $count: Int, $createdAt: Str
   }
 }
 
-mutation deleteorder($payStatus: String, $remark: String, $payCount: String, $updatedAt: String, $payTime: String, $createdAt: String, $orderStatus: String, $id: ID, $user_id: ID, $service_id: ID, $customerNumber: Int) {
-  deleteorder: delete_order(payStatus: $payStatus remark: $remark payCount: $payCount updatedAt: $updatedAt payTime: $payTime createdAt: $createdAt orderStatus: $orderStatus id: $id user_id: $user_id service_id: $service_id customerNumber: $customerNumber)
+mutation deleteorder($payStatus: String, $contactName: String, $remark: String, $payCount: String, $updatedAt: String, $payTime: String, $contactTelephone: String, $createdAt: String, $orderStatus: String, $id: ID, $user_id: ID, $service_id: ID, $customerNumber: Int) {
+  deleteorder: delete_order(payStatus: $payStatus contactName: $contactName remark: $remark payCount: $payCount updatedAt: $updatedAt payTime: $payTime contactTelephone: $contactTelephone createdAt: $createdAt orderStatus: $orderStatus id: $id user_id: $user_id service_id: $service_id customerNumber: $customerNumber)
 }
 
-mutation deleteuser($id: ID, $openid: String, $admin: String, $username: String, $password: String, $telephone: String, $email: String, $createdAt: String, $updatedAt: String) {
-  deleteuser: delete_user(id: $id openid: $openid admin: $admin username: $username password: $password telephone: $telephone email: $email createdAt: $createdAt updatedAt: $updatedAt)
+mutation deleteuser($email: String, $updatedAt: String, $admin: String, $password: String, $telephone: String, $nickname: String, $username: String, $createdAt: String, $openid: String, $id: ID) {
+  deleteuser: delete_user(email: $email updatedAt: $updatedAt admin: $admin password: $password telephone: $telephone nickname: $nickname username: $username createdAt: $createdAt openid: $openid id: $id)
 }
 
-mutation createorder($payStatus: String, $remark: String, $payCount: String, $updatedAt: String, $payTime: String, $createdAt: String, $orderStatus: String, $id: ID!, $user_id: ID, $service_id: ID, $customerNumber: Int) {
-  createorder: create_order(payStatus: $payStatus remark: $remark payCount: $payCount updatedAt: $updatedAt payTime: $payTime createdAt: $createdAt orderStatus: $orderStatus id: $id user_id: $user_id service_id: $service_id customerNumber: $customerNumber) {
+mutation createorder($payStatus: String, $contactName: String, $remark: String, $payCount: String, $updatedAt: String, $payTime: String, $contactTelephone: String, $createdAt: String, $orderStatus: String, $id: ID!, $user_id: ID, $service_id: ID, $customerNumber: Int) {
+  createorder: create_order(payStatus: $payStatus contactName: $contactName remark: $remark payCount: $payCount updatedAt: $updatedAt payTime: $payTime contactTelephone: $contactTelephone createdAt: $createdAt orderStatus: $orderStatus id: $id user_id: $user_id service_id: $service_id customerNumber: $customerNumber) {
     payStatus
+    contactName
     remark
     payCount
     updatedAt
     payTime
+    contactTelephone
     createdAt
     orderStatus
     id
     user_id {
-      id
-      openid
+      email
+      updatedAt
       admin
-      username
       password
       telephone
-      email
+      nickname
+      username
       createdAt
-      updatedAt
+      openid
+      id
     }
     service_id {
       id
@@ -366,26 +372,29 @@ mutation deleterepertory($id: ID, $service_id: ID, $count: Int, $createdAt: Stri
   deleterepertory: delete_repertory(id: $id service_id: $service_id count: $count createdAt: $createdAt updatedAt: $updatedAt)
 }
 
-mutation updateorder($payStatus: String, $remark: String, $payCount: String, $updatedAt: String, $payTime: String, $createdAt: String, $orderStatus: String, $id: ID, $user_id: ID, $service_id: ID, $customerNumber: Int) {
-  updateorder: update_order(payStatus: $payStatus remark: $remark payCount: $payCount updatedAt: $updatedAt payTime: $payTime createdAt: $createdAt orderStatus: $orderStatus id: $id user_id: $user_id service_id: $service_id customerNumber: $customerNumber) {
+mutation updateorder($payStatus: String, $contactName: String, $remark: String, $payCount: String, $updatedAt: String, $payTime: String, $contactTelephone: String, $createdAt: String, $orderStatus: String, $id: ID, $user_id: ID, $service_id: ID, $customerNumber: Int) {
+  updateorder: update_order(payStatus: $payStatus contactName: $contactName remark: $remark payCount: $payCount updatedAt: $updatedAt payTime: $payTime contactTelephone: $contactTelephone createdAt: $createdAt orderStatus: $orderStatus id: $id user_id: $user_id service_id: $service_id customerNumber: $customerNumber) {
     payStatus
+    contactName
     remark
     payCount
     updatedAt
     payTime
+    contactTelephone
     createdAt
     orderStatus
     id
     user_id {
-      id
-      openid
+      email
+      updatedAt
       admin
-      username
       password
       telephone
-      email
+      nickname
+      username
       createdAt
-      updatedAt
+      openid
+      id
     }
     service_id {
       id

src/page/display/Display.js

@@ -35,6 +35,7 @@ class Display extends Component {
 
 
     render() {
+        let {userID} = this.props;
         return (
             <div>
                 {
@@ -89,6 +90,7 @@ class Display extends Component {
                                             services={services}
                                             tip={tip}
                                             pageSwitchToServer={this.pageSwitchToServer}
+                                            userID={userID}
                                         />
                                     )
                                 }

src/page/display/Ordering.js

@@ -0,0 +1,395 @@
+import React, {Component} from 'react';
+import {
+    createorderAndupdaterepertory,
+    orderbyprops,
+    repertorybyid,
+    updateuser,
+    userbyid,
+    createorderAndupdaterepertoryAndupdateuser
+} from "../../gql";
+import {Spin} from 'antd';
+import gql from "graphql-tag";
+import {Query, Mutation} from "react-apollo";
+import {InputItem, Toast, List, Button, Stepper, Icon, NavBar, Switch} from 'antd-mobile';
+import {idGen} from "../../func";
+import {createForm} from 'rc-form';
+
+const Item = List.Item;
+
+class Ordering extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {}
+    }
+
+    render() {
+        let {repertoryID, serviceID, donotShowOrdering, userID} = this.props;
+        return (
+            <div>
+                <NavBar
+                    mode="light"
+                    icon={<Icon type="left"/>}
+                    onLeftClick={donotShowOrdering}
+                >服务项详情</NavBar>
+                <Query query={gql(userbyid)} variables={{id: userID}}>
+                    {
+                        ({loading, error, data}) => {
+                            if (loading) {
+                                return <Spin className={'spin'}/>
+                            }
+                            if (error) {
+                                return 'error!';
+                            }
+
+                            let user = data.userbyid;
+                            let tip = '';
+                            if (user === null) {
+                                tip = '还没登录，出现了错误'
+                            }
+
+                            return (
+                                <div>
+                                    {
+                                        tip ?
+                                            <div>{tip}</div>
+                                            :
+                                            ''
+                                    }
+                                    <MessageWrapper
+                                        user={user}
+                                        userID={user.id}
+                                        repertoryID={repertoryID}
+                                        serviceID={serviceID}
+                                        donotShowOrdering={donotShowOrdering}
+                                    />
+                                </div>
+                            )
+                        }
+                    }
+                </Query>
+            </div>
+
+        )
+    }
+}
+
+export default Ordering;
+
+
+class Message extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            hasError: false,
+            defaultPhone: props.user.telephone,
+            defaultName: props.user.nickname,
+            name: '',
+            phone: '',
+            tempName: '',
+            tempPhone: '',
+            remark: '',
+            people: 1
+        };
+    }
+
+    onErrorClick = () => {
+        if (this.state.hasError) {
+            Toast.info('请输入11位手机号码');
+        }
+    };
+
+    onChange = (phone) => {
+        if (phone.replace(/\s/g, '').length < 11) {
+            this.setState({
+                hasError: true,
+            });
+        } else {
+            this.setState({
+                hasError: false,
+            });
+        }
+        this.setState({
+            phone,
+        });
+    };
+
+    somethingChange = (something) => {
+        return (value) => {
+            this.setState({
+                [something]: value
+            });
+        };
+    };
+
+
+    render() {
+        let {defaultName, defaultPhone, hasError, name, phone, people, remark, tempName, tempPhone} = this.state;
+        let {repertoryID, serviceID, userID, donotShowOrdering} = this.props;
+        const {getFieldProps} = this.props.form;
+        return (
+            <form>
+                <List renderHeader={() => '填写你的信息'}>
+                    <InputItem
+                        placeholder="请输入联系人姓名"
+                        value={name}
+                        onChange={this.somethingChange('name')}
+                    >姓名</InputItem>
+                    <InputItem
+                        type="phone"
+                        placeholder="请输入手机号码"
+                        error={hasError}
+                        onErrorClick={this.onErrorClick}
+                        onChange={this.onChange}
+                        value={phone}
+                    >手机号码</InputItem>
+
+                    {
+                        defaultName && defaultPhone ?
+                            <Item extra={
+                                <Switch {...getFieldProps('1', {initialValue: false, valuePropName: 'checked'})}
+                                        onClick={(checked) => {
+                                            if (checked) {
+                                                this.setState({
+                                                    tempName: name,
+                                                    tempPhone: phone,
+                                                    name: defaultName,
+                                                    phone: defaultPhone,
+                                                });
+                                            } else {
+                                                this.setState({
+                                                    tempName: '',
+                                                    tempPhone: '',
+                                                    name: tempName,
+                                                    phone: tempPhone,
+                                                })
+                                            }
+                                        }}
+                                />}
+                            >为自己预约?</Item>
+                            :
+                            ''
+                    }
+
+                    <Item
+                        wrap
+                        extra={
+                            <Stepper
+                                style={{width: '100%', minWidth: '100px'}}
+                                showNumber
+                                min={1}
+                                value={people}
+                                onChange={this.somethingChange('people')}
+                            />}
+                    >
+                        人数
+                    </Item>
+                    <InputItem
+                        placeholder="留言给店家"
+                        value={remark}
+                        onChange={this.somethingChange('remark')}
+                    >留言</InputItem>
+                </List>
+
+                {
+                    defaultName && defaultPhone ?
+                        <OrderButton
+                            userID={userID}
+                            repertoryID={repertoryID}
+                            serviceID={serviceID}
+                            telephone={phone}
+                            name={name}
+                            donotShowOrdering={donotShowOrdering}
+                        />
+                        :
+                        <SaveAndOrderButton
+                            userID={userID}
+                            repertoryID={repertoryID}
+                            serviceID={serviceID}
+                            telephone={phone}
+                            name={name}
+                            donotShowOrdering={donotShowOrdering}
+                        />
+                }
+            </form>
+        );
+    }
+}
+
+const MessageWrapper = createForm()(Message);
+
+class SaveAndOrderButton extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {}
+    }
+
+    render() {
+        let {repertoryID, serviceID, userID, telephone, name, donotShowOrdering} = this.props;
+        return (
+            <Query query={gql(repertorybyid)} variables={{id: repertoryID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin className={'spin'}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+                        let count = data.repertorybyid.count;
+                        if (count <= 0) {
+                            return (
+                                <Mutation
+                                    mutation={gql(updateuser)}
+                                    refetchQueries={[{query: gql(userbyid), variables: {id: userID}}]}
+                                >
+                                    {(updateuser, {loading, error}) => {
+                                        if (loading)
+                                            return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+                                        if (error)
+                                            return 'error';
+                                        return (
+                                            <Button type={'primary'} onClick={() => {
+                                                updateuser({
+                                                    variables: {
+                                                        id: userID,
+                                                        telephone,
+                                                        nickname: name,
+                                                        updatedAt: new Date().getTime()
+                                                    }
+                                                });
+                                                donotShowOrdering();
+                                            }}>名额已满，点击保存联系人</Button>
+                                        )
+                                    }}
+                                </Mutation>
+                            )
+                        } else {
+                            return (
+                                <Mutation
+                                    mutation={gql(createorderAndupdaterepertoryAndupdateuser)}
+                                    refetchQueries={[
+                                        {
+                                            query: gql(orderbyprops),
+                                            variables: {user_id: userID, orderStatus: 'success'}
+                                        },
+                                        {query: gql(orderbyprops), variables: {orderStatus: 'success'}},
+                                        {query: gql(orderbyprops), variables: {}},
+                                        {query: gql(userbyid), variables: {id: userID}}
+                                    ]}
+                                >
+                                    {(iwantu, {loading, error}) => {
+                                        if (loading)
+                                            return <Spin/>;
+                                        if (error)
+                                            return 'error';
+                                        let varObj = {
+                                            user_id: userID,
+                                            service_id: serviceID,
+                                            repertory_id: repertoryID,
+                                            order_id: idGen('order'),
+                                            payStatus: '',
+                                            remark: '',
+                                            payCount: '',
+                                            payTime: '',
+                                            customerNumber: 1,
+                                            orderStatus: 'success',
+                                            createdAt: new Date().getTime(),
+                                            updatedAt: new Date().getTime(),
+                                            count: count - 1,
+                                            contactTelephone: telephone,
+                                            contactName: name
+                                        };
+                                        return (
+                                            <Button type='primary' onClick={() => {
+                                                iwantu({variables: varObj});
+                                                donotShowOrdering();
+                                            }}>预约</Button>
+                                        )
+                                    }}
+                                </Mutation>
+                            )
+                        }
+
+                    }
+                }
+            </Query>
+
+        )
+    }
+}
+
+class OrderButton extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {}
+    }
+
+    render() {
+        let {repertoryID, serviceID, userID, telephone, name, donotShowOrdering} = this.props;
+        return (
+            <Query query={gql(repertorybyid)} variables={{id: repertoryID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin className={'spin'}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+                        let count = data.repertorybyid.count;
+                        if (count <= 0) {
+                            return (
+                                <div>名额已满</div>
+                            )
+                        } else {
+                            return (
+                                <Mutation
+                                    mutation={gql(createorderAndupdaterepertory)}
+                                    refetchQueries={[
+                                        {
+                                            query: gql(orderbyprops),
+                                            variables: {user_id: userID, orderStatus: 'success'}
+                                        },
+                                        {query: gql(orderbyprops), variables: {orderStatus: 'success'}},
+                                        {query: gql(orderbyprops), variables: {}}
+                                    ]}
+                                >
+                                    {(iwantu, {loading, error}) => {
+                                        if (loading)
+                                            return <Spin/>;
+                                        if (error)
+                                            return 'error';
+                                        let varObj = {
+                                            user_id: userID,
+                                            service_id: serviceID,
+                                            repertory_id: repertoryID,
+                                            order_id: idGen('order'),
+                                            payStatus: '',
+                                            remark: '',
+                                            payCount: '',
+                                            payTime: '',
+                                            customerNumber: 1,
+                                            orderStatus: 'success',
+                                            createdAt: new Date().getTime(),
+                                            updatedAt: new Date().getTime(),
+                                            count: count - 1,
+                                            contactTelephone: telephone,
+                                            contactName: name
+                                        };
+                                        return (
+                                            <Button type='primary' onClick={() => {
+                                                iwantu({variables: varObj});
+                                                donotShowOrdering();
+                                            }}>预约</Button>
+                                        )
+                                    }}
+                                </Mutation>
+                            )
+                        }
+
+                    }
+                }
+            </Query>
+        )
+    }
+}

src/page/display/Service.js

@@ -3,153 +3,102 @@ import {NavBar, Icon, WhiteSpace, Card, Button} from 'antd-mobile';
 import CalendarPick from '../component/CalendarPick';
 import moment from 'moment';
 import 'moment/locale/zh-cn'
-import {repertorybyid, createorderAndupdaterepertory, orderbyprops} from "../../gql";
-import {Spin} from 'antd';
-import gql from "graphql-tag";
-import {idGen} from "../../func";
-import {Query, Mutation} from "react-apollo";
+import Ordering from './Ordering';
 moment.locale('zh-cn');
 
 class Service extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            pick: false
+            pick: false,
+            ordering: false,
+            serviceID: '',
+            repertoryID: ''
         }
     }
 
+    donotShowOrdering = () => {
+        this.setState({
+            ordering: false
+        })
+    };
+
     render() {
-        let {pageSwitchToServer, tip, services} = this.props;
+        let {pageSwitchToServer, tip, services, userID} = this.props;
+        let {serviceID, repertoryID} = this.state;
         return (
             <div>
-                <NavBar
-                    mode="light"
-                    icon={<Icon type="left"/>}
-                    onLeftClick={pageSwitchToServer}
-                    rightContent={[
-                        <Icon key="1" type="search" onClick={() => {
-                            this.setState({pick: true})
-                        }}/>,
-                    ]}
-                >服务详情</NavBar>
+                {
+                    this.state.ordering?
+                        ''
+                        :
+                        <NavBar
+                            mode="light"
+                            icon={<Icon type="left"/>}
+                            onLeftClick={pageSwitchToServer}
+                            rightContent={[
+                                <Icon key="1" type="search" onClick={() => {
+                                    this.setState({pick: true})
+                                }}/>,
+                            ]}
+                        >服务详情</NavBar>
+                }
 
                 {
                     this.state.pick ?
                         <CalendarPick show={true}/>
                         :
-                        <div>
+                        this.state.ordering?
+                            <Ordering
+                                donotShowOrdering={this.donotShowOrdering}
+                                serviceID={serviceID}
+                                repertoryID={repertoryID}
+                                userID={userID}
+                            />
+                            :
+                            <div>
+
+                                {
+                                    tip ?
+                                        <div>{tip}</div>
+                                        :
+                                        ''
+                                }
 
-                            {
-                                tip ?
-                                    <div>{tip}</div>
-                                    :
-                                    ''
-                            }
+                                {
+                                    services.map(service => {
+                                        return (
+                                            <div key={service.id}>
+                                                <WhiteSpace size="lg"/>
+                                                <Card full>
+                                                    <Card.Body>
+                                                        <div className={'card'}>
+                                                            <div>{service.description}</div>
+                                                            <div>价格: {service.price}</div>
+                                                            <div>开始时间: {moment(Number(service.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                                            <div>工作时间: {moment.duration(Number(service.lastTime), "milliseconds").humanize()}</div>
+                                                            <div>剩余名额: {service.repertory_id.count}</div>
 
-                            {
-                                services.map(service => {
-                                    return (
-                                        <div key={service.id}>
-                                            <WhiteSpace size="lg"/>
-                                            <Card full>
-                                                <Card.Body>
-                                                    <div className={'card'}>
-                                                        <div>{service.description}</div>
-                                                        <div>价格: {service.price}</div>
-                                                        <div>开始时间: {moment(Number(service.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
-                                                        <div>工作时间: {moment.duration(Number(service.lastTime), "milliseconds").humanize()}</div>
-                                                        <div>剩余名额: {service.repertory_id.count}</div>
-                                                        <OrderButton
-                                                            repertoryID={service.repertory_id.id}
-                                                            serviceID={service.id}
-                                                        />
-                                                    </div>
-                                                </Card.Body>
-                                            </Card>
-                                        </div>
-                                    )
-                                })
-                            }
-                        </div>
+                                                            <Button type='primary' onClick={() => {
+                                                                this.setState({
+                                                                    ordering: true,
+                                                                    serviceID: service.id,
+                                                                    repertoryID: service.repertory_id.id
+                                                                })
+                                                            }}>预约</Button>
+                                                        </div>
+                                                    </Card.Body>
+                                                </Card>
+                                            </div>
+                                        )
+                                    })
+                                }
+                            </div>
                 }
             </div>
         );
     }
 }
 
-class OrderButton extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            // todo: userID
-            userID: 'handsome'
-        }
-    }
-
-    render() {
-        let {repertoryID, serviceID} = this.props;
-        let {userID} = this.state;
-        return (
-            <Query query={gql(repertorybyid)} variables={{id: repertoryID}}>
-                {
-                    ({loading, error, data}) => {
-                        if (loading) {
-                            return <Spin className={'spin'}/>
-                        }
-                        if (error) {
-                            return 'error!';
-                        }
-                        let count = data.repertorybyid.count;
-                        if(count <= 0) {
-                            return (
-                                <div>名额已满</div>
-                            )
-                        } else {
-                            return (
-                                <Mutation
-                                    mutation={gql(createorderAndupdaterepertory)}
-                                    refetchQueries={[
-                                        {query: gql(orderbyprops), variables: {user_id: userID, orderStatus: 'success'}},
-                                        {query: gql(orderbyprops), variables: {orderStatus: 'success'}},
-                                        {query: gql(orderbyprops), variables: {}}
-                                    ]}
-                                >
-                                    {(iwantu, {loading, error}) => {
-                                        if (loading)
-                                            return <Spin/>;
-                                        if (error)
-                                            return 'error';
-                                        let varObj = {
-                                            user_id: userID,
-                                            service_id: serviceID,
-                                            repertory_id: repertoryID,
-                                            order_id: idGen('order'),
-                                            payStatus: '',
-                                            remark: '',
-                                            payCount: '',
-                                            payTime: '',
-                                            customerNumber: 1,
-                                            orderStatus: 'success',
-                                            createdAt: new Date().getTime(),
-                                            updatedAt: new Date().getTime(),
-                                            count: count-1
-                                        };
-                                        return (
-                                            <Button type='primary' onClick={() => {
-                                                iwantu({variables: varObj})
-                                            }}>预约</Button>
-                                        )
-                                    }}
-                                </Mutation>
-                            )
-                        }
-
-                    }
-                }
-            </Query>
-
-        )
-    }
-}
 
 export default Service;

src/page/home/My.js

@@ -20,13 +20,12 @@ const tabs = [
 class My extends Component {
     constructor(props) {
         super(props);
-        //todo: userID
         this.state = {
-            userID: 'handsome'
         }
     }
 
     render() {
+        let {userID} = this.props;
         return (
             <div>
                 <div>
@@ -36,9 +35,9 @@ class My extends Component {
                               initalPage={'t2'}
                               renderTabBar={renderTabBar}
                         >
-                            <Ordered userID={this.state.userID}/>
-                            <Cancelled userID={this.state.userID}/>
-                            <User userID={this.state.userID}/>
+                            <Ordered userID={userID}/>
+                            <Cancelled userID={userID}/>
+                            <User userID={userID}/>
                         </Tabs>
                     </StickyContainer>
                     <WhiteSpace/>

src/page/home/User.js

@@ -53,7 +53,7 @@ class Message extends Component {
         this.state = {
             hasError: false,
             phone: props.user.telephone,
-            name: props.user.username
+            name: props.user.nickname
         };
     }
 
@@ -136,7 +136,7 @@ class SaveButton extends Component {
                                 variables: {
                                     id: userID,
                                     telephone,
-                                    username:name,
+                                    nickname:name,
                                     updatedAt: new Date().getTime()
                                 }
                             })

src/page/manage/AllOrder.js

@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import './index.css';
-import { createForm } from 'rc-form';
-import { NoticeBar,Picker } from 'antd-mobile';
+import {createForm} from 'rc-form';
+import {NoticeBar, Picker} from 'antd-mobile';
 import {Spin} from 'antd';
 import gql from "graphql-tag";
 import {Query} from "react-apollo";
@@ -9,6 +9,7 @@ import {adminorderbyprops} from "../../gql";
 import {Card, WhiteSpace} from 'antd-mobile';
 import moment from 'moment';
 import 'moment/locale/zh-cn'
+
 moment.locale('zh-cn');
 
 const data = [
@@ -33,11 +34,16 @@ const data = [
 const CustomChildren = props => (
     <div
         onClick={props.onClick}
-        style={{ backgroundColor: '#fff', paddingLeft: 15 }}
+        style={{backgroundColor: '#fff', paddingLeft: 15}}
     >
-        <div className="test" style={{ display: 'flex', height: '45px', lineHeight: '45px' }}>
-            <div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{props.children}</div>
-            <div style={{ textAlign: 'right', color: '#888', marginRight: 15 }}>{props.extra}</div>
+        <div className="test" style={{display: 'flex', height: '45px', lineHeight: '45px'}}>
+            <div style={{
+                flex: 1,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap'
+            }}>{props.children}</div>
+            <div style={{textAlign: 'right', color: '#888', marginRight: 15}}>{props.extra}</div>
         </div>
     </div>
 );
@@ -52,16 +58,16 @@ class AllOrder extends Component {
     }
 
     render() {
-        const { getFieldProps } = this.props.form;
+        const {getFieldProps} = this.props.form;
         return (
             <div>
-                <NoticeBar mode="closable" marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }}>
+                <NoticeBar mode="closable" marqueeProps={{loop: true, style: {padding: '0 7.5px'}}}>
                     只有管理员的微信才能看到此界面，此处作为样例全部展示
                 </NoticeBar>
                 <Picker data={data} cols={1} {...getFieldProps('district3')} className="forss"
                         value={this.state.sValue}
-                        onChange={v => this.setState({ sValue: v })}
-                        onOk={v => this.setState({ sValue: v })}
+                        onChange={v => this.setState({sValue: v})}
+                        onOk={v => this.setState({sValue: v})}
                 >
                     <CustomChildren>选择订单类型</CustomChildren>
                 </Picker>
@@ -78,7 +84,7 @@ class AdminShowOrders extends Component {
     render() {
         let {orderStatus} = this.props;
         return (
-            <Query query={gql(adminorderbyprops)} variables={orderStatus? {orderStatus}: {}}>
+            <Query query={gql(adminorderbyprops)} variables={orderStatus ? {orderStatus} : {}}>
                 {
                     ({loading, error, data}) => {
                         if (loading) {
@@ -135,10 +141,12 @@ class OrderedRender extends Component {
                                         <div className={'card'}>
                                             <div>预约: {order.service_id.server_id.name} - {order.service_id.price}元</div>
                                             <div>人数: {order.customerNumber}</div>
-                                            <div>留言: {order.remark}</div>
-                                            <div>预约人: {order.user_id.username}</div>
-                                            <div>联系方式: {order.user_id.telephone}</div>
-                                            <div>时间: {moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                            <div>留言: {order.remark ? order.remark : '无'}</div>
+                                            <div>预约人: {order.contactName}</div>
+                                            <div>联系方式: {order.contactTelephone}</div>
+                                            <div>预约账号: {order.user_id.username}</div>
+                                            <div>预约时间: {moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                            <div>下单时间: {moment(Number(order.createdAt)).format("YYYY-MM-DD HH:mm:ss")}</div>
                                         </div>
                                     </Card.Body>
                                 </Card>

src/page/manage/Manage.js

@@ -19,13 +19,13 @@ const tabs = [
 class Manage extends Component {
     constructor(props) {
         super(props);
-        //todo: userID
         this.state = {
-            userID: 'handsome'
+
         }
     }
 
     render() {
+        let {userID} = this.props;
         return (
             <div>
                 <div>
@@ -35,8 +35,8 @@ class Manage extends Component {
                               initalPage={'t2'}
                               renderTabBar={renderTabBar}
                         >
-                            <AllOrder userID={this.state.userID}/>
-                            <Release userID={this.state.userID}/>
+                            <AllOrder userID={userID}/>
+                            <Release userID={userID}/>
                         </Tabs>
                     </StickyContainer>
                     <WhiteSpace/>