save

package.json

@@ -51,6 +51,7 @@
     "react-app-polyfill": "^0.2.0",
     "react-dev-utils": "^7.0.0",
     "react-dom": "^16.7.0",
+    "react-sticky": "^6.0.3",
     "resolve": "1.8.1",
     "sass-loader": "7.1.0",
     "style-loader": "0.23.0",

src/App.css

@@ -9,9 +9,9 @@
   background-color: white;
 }
 
-.spin {
-  position: relative;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%,-50%);
-}
+/*.spin {*/
+  /*position: relative;*/
+  /*top: 50%;*/
+  /*left: 50%;*/
+  /*transform: translate(-50%,-50%);*/
+/*}*/

src/gql.js

@@ -42,7 +42,110 @@ const servicebyprops = `
     }
 `;
 
+const orderbyprops = `
+    query orderbyprops($orderStatus: String, $user_id: ID) {
+      orderbyprops: order_by_props(orderStatus: $orderStatus user_id: $user_id) {
+        payStatus
+        remark
+        payCount
+        updatedAt
+        payTime
+        createdAt
+        orderStatus
+        id
+        user_id {
+          id
+          openid
+          admin
+          username
+          password
+          telephone
+          email
+          createdAt
+          updatedAt
+        }
+        service_id {
+          id
+          description
+          price
+          startTime
+          lastTime
+          createdAt
+          updatedAt
+          server_id {
+              id
+              name
+              description
+              img
+              createdAt
+              updatedAt
+           }
+        }
+        customerNumber
+      }
+    }
+`;
+
+const userbyid = `
+    query userbyid($id: ID) {
+      userbyid: user_by_id(id: $id) {
+        id
+        openid
+        admin
+        username
+        password
+        telephone
+        email
+        createdAt
+        updatedAt
+      }
+    }
+`;
+
+const updateuser = `
+    mutation updateuser($id: ID, $username: String, $telephone: String, $updatedAt: String) {
+      updateuser: update_user(id: $id username: $username  telephone: $telephone updatedAt: $updatedAt) {
+        id
+        openid
+        admin
+        username
+        password
+        telephone
+        email
+        createdAt
+        updatedAt
+      }
+    }
+
+`;
+
+const updateorderAndupdaterepertory = `
+    mutation updateorderAndupdaterepertory ($order_id: ID, $repertory_id: ID, $updatedAt: String, $orderStatus: String, $count: Int) {
+      updateorder: update_order(id: $order_id updatedAt: $updatedAt orderStatus: $orderStatus) {
+        payStatus
+        remark
+        payCount
+        updatedAt
+        payTime
+        createdAt
+        orderStatus
+        id
+        customerNumber
+      }
+      
+      updaterepertory: update_repertory(id: $repertory_id count: $count updatedAt: $updatedAt) {
+        id
+        count
+        updatedAt
+      }
+    }
+`;
+
 export {
     serverbyprops,
-    servicebyprops
+    servicebyprops,
+    orderbyprops,
+    userbyid,
+    updateuser,
+    updateorderAndupdaterepertory
 }

src/page/display/Server.js

@@ -13,7 +13,7 @@ class Server extends Component {
     render() {
         let {tip, servers} = this.props;
         return (
-            <div>
+            <div >
                 <WingBlank>
                     <Carousel
                         autoplay={true}

src/page/display/index.css

@@ -5,6 +5,3 @@
   background-size:100% 100%
 }
 
-.spin {
-
-}

src/page/home/Cancelled.js

@@ -0,0 +1,91 @@
+import React, { Component } from 'react';
+import {orderbyprops} from "../../gql";
+import {Spin} from 'antd';
+import gql from "graphql-tag";
+import {Query} from "react-apollo";
+import {Card, WhiteSpace, Button} from 'antd-mobile';
+import moment from 'moment';
+import 'moment/locale/zh-cn'
+moment.locale('zh-cn');
+
+class Cancelled extends Component {
+    render() {
+        let {userID} = this.props;
+        return (
+            <Query query={gql(orderbyprops)} variables={{user_id: userID, orderStatus: 'cancelled'}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin className={'spin'}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+
+                        let orders = data.orderbyprops;
+                        let tip = '';
+                        if (orders.length === 0) {
+                            orders = [];
+                            tip = '还没有取消的订单'
+                        }
+
+                        console.log(orders);
+
+                        return (
+                            <CancelledRender
+                                orders={orders}
+                                tip={tip}
+                            />
+                        )
+                    }
+                }
+            </Query>
+        );
+    }
+}
+
+export default Cancelled;
+
+class CancelledRender extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    }
+
+    render() {
+        let {orders, tip} = this.props;
+        return (
+            <div>
+                {
+                    tip ?
+                        <div>{tip}</div>
+                        :
+                        ''
+                }
+
+                {
+                    orders.map((order)=> {
+                        return (
+                            <div key={order.id}>
+                                <WhiteSpace size="lg"/>
+                                <Card full>
+                                    <Card.Body>
+                                        <div className={'card'}>
+                                            <div>预约: {order.service_id.server_id.name} - {order.service_id.price}元</div>
+                                            <div>留言: {order.remark}</div>
+                                            <div>预约时间: {moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                            <div>取消时间: {moment(Number(order.updatedAt)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                            <Button type='warning' onClick={()=>{}}>删除</Button>
+                                        </div>
+                                    </Card.Body>
+                                </Card>
+                            </div>
+                        )
+                    })
+                }
+            </div>
+        )
+    }
+}

src/page/home/My.js

@@ -1,10 +1,47 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
+import {Tabs, WhiteSpace} from 'antd-mobile';
+import {StickyContainer, Sticky} from 'react-sticky';
+import Ordered from './Ordered';
+import Cancelled from './Cancelled';
+import User from './User';
+
+function renderTabBar(props) {
+    return (<Sticky>
+        {({style}) => <div style={{...style, zIndex: 1}}><Tabs.DefaultTabBar {...props} /></div>}
+    </Sticky>);
+}
+
+const tabs = [
+    {title: '已预约'},
+    {title: '已取消'},
+    {title: '个人信息'},
+];
 
 class My extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            userID: 'handsome'
+        }
+    }
+
     render() {
         return (
             <div>
-                My
+                <div>
+                    <WhiteSpace/>
+                    <StickyContainer>
+                        <Tabs tabs={tabs}
+                              initalPage={'t2'}
+                              renderTabBar={renderTabBar}
+                        >
+                            <Ordered userID={this.state.userID}/>
+                            <Cancelled userID={this.state.userID}/>
+                            <User userID={this.state.userID}/>
+                        </Tabs>
+                    </StickyContainer>
+                    <WhiteSpace/>
+                </div>
             </div>
         );
     }

src/page/home/Ordered.js

@@ -0,0 +1,126 @@
+import React, {Component} from 'react';
+import {orderbyprops, updateuser, updateorderAndupdaterepertory} from "../../gql";
+import {Spin} from 'antd';
+import gql from "graphql-tag";
+import {Query, Mutation} from "react-apollo";
+import {Card, WhiteSpace, Button} from 'antd-mobile';
+import moment from 'moment';
+import 'moment/locale/zh-cn'
+
+moment.locale('zh-cn');
+
+class Ordered extends Component {
+    render() {
+        let {userID} = this.props;
+        return (
+            <Query query={gql(orderbyprops)} variables={{user_id: userID, orderStatus: 'success'}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin className={'spin'}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+
+                        let orders = data.orderbyprops;
+                        let tip = '';
+                        if (orders.length === 0) {
+                            orders = [];
+                            tip = '还没有订单'
+                        }
+
+                        console.log(orders);
+
+                        return (
+                            <OrderedRender
+                                orders={orders}
+                                tip={tip}
+                            />
+                        )
+                    }
+                }
+            </Query>
+        );
+    }
+}
+
+export default Ordered;
+
+class OrderedRender extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {}
+    }
+
+    render() {
+        let {orders, tip} = this.props;
+        return (
+            <div>
+                {
+                    tip ?
+                        <div>{tip}</div>
+                        :
+                        ''
+                }
+
+                {
+                    orders.map((order) => {
+                        return (
+                            <div key={order.id}>
+                                <WhiteSpace size="lg"/>
+                                <Card full>
+                                    <Card.Body>
+                                        <div className={'card'}>
+                                            <div>预约: {order.service_id.server_id.name} - {order.service_id.price}元</div>
+                                            <div>人数: {order.customerNumber}</div>
+                                            <div>留言: {order.remark}</div>
+                                            <div>时间: {moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                            <CancelButton/>
+                                        </div>
+                                    </Card.Body>
+                                </Card>
+                            </div>
+                        )
+                    })
+                }
+            </div>
+        )
+    }
+}
+
+class CancelButton extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {}
+    }
+
+    render() {
+        return (
+            <Mutation mutation={gql(updateorderAndupdaterepertory)}
+            >
+                {(updateorderAndupdaterepertory, {loading, error}) => {
+                    if (loading)
+                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+                    if (error)
+                        return 'error';
+                    // 未完待续
+                    return (
+                        <Button type='warning' onClick={() => {
+                            updateorderAndupdaterepertory({
+                                variable: {
+                                    order_id: '',
+                                    repertory_id: '',
+                                    updatedAt: new Date().getTime(),
+                                    orderStatus: 'cancelled',
+                                    count: 1
+                                }
+                            })
+                        }}>取消</Button>
+                    )
+                }}
+            </Mutation>
+
+        )
+    }
+}

src/page/home/User.js

@@ -1,13 +1,149 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
+import {userbyid, updateuser} from "../../gql";
+import {Spin} from 'antd';
+import gql from "graphql-tag";
+import {Query, Mutation} from "react-apollo";
+import {InputItem, Toast, List, Button} from 'antd-mobile';
 
 class User extends Component {
+    render() {
+        let {userID} = this.props;
+        return (
+            <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>
+                                        :
+                                        ''
+                                }
+                                <Message
+                                    user={user}
+                                />
+                            </div>
+                        )
+                    }
+                }
+            </Query>
+        );
+    }
+}
+
+export default User;
+
+class Message extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            hasError: false,
+            phone: props.user.telephone,
+            name: props.user.username
+        };
+    }
+
+    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,
+        });
+    };
+
+    nameChange = (name) => {
+        this.setState({
+            name,
+        });
+    };
+
     render() {
         return (
             <div>
-                User
+                <List renderHeader={() => '填写你的信息'}>
+                    <InputItem
+                        placeholder="请输入联系人姓名"
+                        value={this.state.name}
+                        onChange={this.nameChange}
+                    >姓名</InputItem>
+                    <InputItem
+                        type="phone"
+                        placeholder="请输入手机号码"
+                        error={this.state.hasError}
+                        onErrorClick={this.onErrorClick}
+                        onChange={this.onChange}
+                        value={this.state.phone}
+                    >手机号码</InputItem>
+                </List>
+                <SaveButton
+                    userID={this.props.userID}
+                    telephone={this.state.phone}
+                    name={this.state.name}
+                />
             </div>
         );
     }
 }
 
-export default User;
+class SaveButton extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    }
+
+    render() {
+        let {userID, telephone, name} = this.props;
+        return (
+            <Mutation mutation={gql(updateuser)}
+            >
+                {(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,
+                                    username:name,
+                                    updatedAt: new Date().getTime()
+                                }
+                            })
+                        }}>保存</Button>
+                    )
+                }}
+            </Mutation>
+        )
+    }
+}

src/page/home/index.css

@@ -0,0 +1,4 @@
+.demoTitle:before,
+.demoTitle:after {
+  border-bottom: none;
+}