save

src/App.js

@@ -1,8 +1,10 @@
 import React, {Component} from 'react';
 import {TabBar} from 'antd-mobile';
+import {Icon} from 'antd';
 import './App.css';
 import My from './page/home/My';
 import Display from './page/display/Display';
+import Manage from "./page/manage/Manage";
 
 class App extends Component {
     constructor(props) {
@@ -19,26 +21,14 @@ class App extends Component {
                 <div style={{position: 'fixed', height: '100%', width: '100%', top: 0}}>
                     <TabBar
                         unselectedTintColor="#949494"
-                        tintColor="#33A3F4"
+                        tintColor="orange"
                         barTintColor="white"
                     >
                         <TabBar.Item
                             title="预约"
                             key="appointment"
-                            icon={<div style={{
-                                width: '22px',
-                                height: '22px',
-                                background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat'
-                            }}
-                            />
-                            }
-                            selectedIcon={<div style={{
-                                width: '22px',
-                                height: '22px',
-                                background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat'
-                            }}
-                            />
-                            }
+                            icon={<Icon type="fire" />}
+                            selectedIcon={<Icon type="fire" style={{color: 'orange'}}/>}
                             selected={this.state.selectedTab === 'appointment'}
                             onPress={() => {
                                 this.setState({
@@ -50,8 +40,8 @@ class App extends Component {
                             <Display/>
                         </TabBar.Item>
                         <TabBar.Item
-                            icon={{uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg'}}
-                            selectedIcon={{uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg'}}
+                            icon={<Icon type="home" />}
+                            selectedIcon={<Icon type="home" style={{color: 'orange'}}/>}
                             title="我的"
                             key="my"
                             selected={this.state.selectedTab === 'my'}
@@ -63,6 +53,20 @@ class App extends Component {
                         >
                             <My/>
                         </TabBar.Item>
+                        <TabBar.Item
+                            icon={<Icon type="setting" />}
+                            selectedIcon={<Icon type="setting" style={{color: 'orange'}}/>}
+                            title="管理"
+                            key="manage"
+                            selected={this.state.selectedTab === 'manage'}
+                            onPress={() => {
+                                this.setState({
+                                    selectedTab: 'manage',
+                                });
+                            }}
+                        >
+                            <Manage/>
+                        </TabBar.Item>
                     </TabBar>
                 </div>
             </div>

src/func.js

@@ -0,0 +1,5 @@
+const idGen = (kind) => {
+    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
+};
+
+export {idGen}

src/gql.js

@@ -148,7 +148,7 @@ 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) {
+    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) {
             payStatus
             remark
@@ -181,6 +181,92 @@ const repertorybyid = `
     }
 `;
 
+const deleteorder = `
+    mutation deleteorder($id: ID, $user_id: ID) {
+      deleteorder: delete_order(id: $id user_id: $user_id)
+    }
+`;
+
+const updateorder = `
+    mutation updateorder($updatedAt: String, $orderStatus: String, $id: ID, $user_id: ID) {
+      updateorder: update_order(updatedAt: $updatedAt orderStatus: $orderStatus id: $id user_id: $user_id ) {
+        payStatus
+        remark
+        payCount
+        updatedAt
+        payTime
+        createdAt
+        orderStatus
+        id
+        customerNumber
+      }
+    }
+`;
+
+const adminorderbyprops = `
+    query orderbyprops($orderStatus: String) {
+      orderbyprops: order_by_props(orderStatus: $orderStatus) {
+        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
+          repertory_id {
+              id
+              count
+              createdAt
+              updatedAt
+            }
+          server_id {
+              id
+              name
+              description
+              img
+              createdAt
+              updatedAt
+           }
+        }
+        customerNumber
+      }
+    }
+`;
+
+const createserver = `
+    mutation createserver($id: ID!, $name: String, $description: String, $img: String, $createdAt: String, $updatedAt: String) {
+      createserver: create_server(id: $id name: $name description: $description img: $img createdAt: $createdAt updatedAt: $updatedAt) {
+        id
+        name
+        description
+        img
+        createdAt
+        updatedAt
+      }
+    }
+`;
+
+
 export {
     serverbyprops,
     servicebyprops,
@@ -190,4 +276,8 @@ export {
     repertorybyid,
     updateorderAndupdaterepertory,
     createorderAndupdaterepertory,
+    deleteorder,
+    updateorder,
+    adminorderbyprops,
+    createserver,
 }

src/page/display/Service.js

@@ -3,9 +3,10 @@ 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} from "../../gql";
+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";
 moment.locale('zh-cn');
 
@@ -60,6 +61,7 @@ class Service extends Component {
                                                         <div>剩余名额: {service.repertory_id.count}</div>
                                                         <OrderButton
                                                             repertoryID={service.repertory_id.id}
+                                                            serviceID={service.id}
                                                         />
                                                     </div>
                                                 </Card.Body>
@@ -75,16 +77,18 @@ class Service extends Component {
     }
 }
 
-export default Service;
-
 class OrderButton extends Component {
     constructor(props) {
         super(props);
-        this.state = {}
+        this.state = {
+            // todo: userID
+            userID: 'handsome'
+        }
     }
 
     render() {
-        let {repertoryID} = this.props;
+        let {repertoryID, serviceID} = this.props;
+        let {userID} = this.state;
         return (
             <Query query={gql(repertorybyid)} variables={{id: repertoryID}}>
                 {
@@ -95,7 +99,6 @@ class OrderButton extends Component {
                         if (error) {
                             return 'error!';
                         }
-                        console.log(data);
                         let count = data.repertorybyid.count;
                         if(count <= 0) {
                             return (
@@ -103,22 +106,33 @@ class OrderButton extends Component {
                             )
                         } else {
                             return (
-                                <Mutation mutation={gql(createorderAndupdaterepertory)}>
-                                    {(createorderAndupdaterepertory, {loading, error}) => {
+                                <Mutation
+                                    mutation={gql(createorderAndupdaterepertory)}
+                                    refetchQueries={[{query: gql(orderbyprops), variables: {user_id: userID, orderStatus: 'success'}}]}
+                                >
+                                    {(iwantu, {loading, error}) => {
                                         if (loading)
                                             return <Spin/>;
                                         if (error)
                                             return 'error';
                                         let varObj = {
-                                            // order_id: orderID,
+                                            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(),
-                                            orderStatus: 'cancelled',
-                                            count: count+1
+                                            count: count-1
                                         };
                                         return (
                                             <Button type='primary' onClick={() => {
-                                                createorderAndupdaterepertory({variable: varObj})
+                                                iwantu({variables: varObj})
                                             }}>预约</Button>
                                         )
                                     }}
@@ -132,4 +146,6 @@ class OrderButton extends Component {
 
         )
     }
-}
+}
+
+export default Service;

src/page/home/Cancelled.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
-import {orderbyprops} from "../../gql";
+import {orderbyprops, updateorder} from "../../gql";
+// import {deleteorder} from "../../gql";
 import {Spin} from 'antd';
 import gql from "graphql-tag";
-import {Query} from "react-apollo";
+import {Query, Mutation} from "react-apollo";
 import {Card, WhiteSpace, Button} from 'antd-mobile';
 import moment from 'moment';
 import 'moment/locale/zh-cn'
@@ -29,12 +30,11 @@ class Cancelled extends Component {
                             tip = '还没有取消的订单'
                         }
 
-                        console.log(orders);
-
                         return (
                             <CancelledRender
                                 orders={orders}
                                 tip={tip}
+                                userID={userID}
                             />
                         )
                     }
@@ -55,7 +55,7 @@ class CancelledRender extends Component {
     }
 
     render() {
-        let {orders, tip} = this.props;
+        let {orders, tip, userID} = this.props;
         return (
             <div>
                 {
@@ -77,7 +77,14 @@ class CancelledRender extends Component {
                                             <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>
+                                            {/*<DeleteButton1*/}
+                                                {/*orderID={order.id}*/}
+                                                {/*userID={userID}*/}
+                                            {/*/>*/}
+                                            <DeleteButton2
+                                                orderID={order.id}
+                                                userID={userID}
+                                            />
                                         </div>
                                     </Card.Body>
                                 </Card>
@@ -88,4 +95,80 @@ class CancelledRender extends Component {
             </div>
         )
     }
+}
+
+// 用户直接删除数据库的按钮
+// class DeleteButton1 extends Component {
+//     constructor(props) {
+//         super(props);
+//         this.state = {
+//
+//         }
+//     }
+//
+//     render() {
+//         let {orderID, userID} = this.props;
+//         return (
+//             <Mutation
+//                 mutation={gql(deleteorder)}
+//                 refetchQueries={[{query: gql(orderbyprops), variables: {user_id: userID, orderStatus: 'cancelled'}}]}
+//             >
+//                 {(deleteorder, {loading, error}) => {
+//                     if (loading)
+//                         return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+//                     if (error)
+//                         return 'error';
+//                     let varObj = {
+//                         id: orderID,
+//                         user_id: userID
+//                     };
+//                     return (
+//                         <Button type='warning' onClick={()=>{
+//                             deleteorder({variables: varObj})
+//                         }}>删除</Button>
+//                     )
+//                 }}
+//             </Mutation>
+//
+//         )
+//     }
+// }
+
+// 用户无法直接删除数据库，只是改变订单状态的按钮
+class DeleteButton2 extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    }
+
+    render() {
+        let {orderID, userID} = this.props;
+        return (
+            <Mutation
+                mutation={gql(updateorder)}
+                refetchQueries={[{query: gql(orderbyprops), variables: {user_id: userID, orderStatus: 'cancelled'}}]}
+            >
+                {(updateorder, {loading, error}) => {
+                    if (loading)
+                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+                    if (error)
+                        return 'error';
+                    let varObj = {
+                        id: orderID,
+                        user_id: userID,
+                        orderStatus: 'deleted',
+                        updatedAt: new Date().getTime()
+                    };
+                    return (
+                        <Button type='warning' onClick={()=>{
+                            updateorder({variables: varObj})
+                        }}>删除</Button>
+                    )
+                }}
+            </Mutation>
+
+        )
+    }
 }

src/page/home/Manage.js

@@ -1,13 +0,0 @@
-import React, { Component } from 'react';
-
-class Manage extends Component {
-    render() {
-        return (
-            <div>
-                manage
-            </div>
-        );
-    }
-}
-
-export default Manage;

src/page/home/My.js

@@ -20,6 +20,7 @@ const tabs = [
 class My extends Component {
     constructor(props) {
         super(props);
+        //todo: userID
         this.state = {
             userID: 'handsome'
         }

src/page/home/Ordered.js

@@ -34,6 +34,7 @@ class Ordered extends Component {
                             <OrderedRender
                                 orders={orders}
                                 tip={tip}
+                                userID={userID}
                             />
                         )
                     }
@@ -52,7 +53,7 @@ class OrderedRender extends Component {
     }
 
     render() {
-        let {orders, tip} = this.props;
+        let {orders, tip, userID} = this.props;
         return (
             <div>
                 {
@@ -77,6 +78,7 @@ class OrderedRender extends Component {
                                             <CancelButton
                                                 repertoryID={order.service_id.repertory_id.id}
                                                 orderID={order.id}
+                                                userID={userID}
                                             />
                                         </div>
                                     </Card.Body>
@@ -97,7 +99,7 @@ class CancelButton extends Component {
     }
 
     render() {
-        let {repertoryID, orderID} = this.props;
+        let {repertoryID, orderID, userID} = this.props;
         return (
             <Query query={gql(repertorybyid)} variables={{id: repertoryID}}>
                 {
@@ -108,10 +110,12 @@ class CancelButton extends Component {
                         if (error) {
                             return 'error!';
                         }
-                        console.log(data);
                         let count = data.repertorybyid.count;
                         return (
-                            <Mutation mutation={gql(updateorderAndupdaterepertory)}>
+                            <Mutation
+                                mutation={gql(updateorderAndupdaterepertory)}
+                                refetchQueries={[{query: gql(orderbyprops), variables: {user_id: userID, orderStatus: 'success'}}, {query: gql(orderbyprops), variables: {user_id: userID, orderStatus: 'cancelled'}}]}
+                            >
                                 {(updateBothTwo, {loading, error}) => {
                                     if (loading)
                                         return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
@@ -124,10 +128,9 @@ class CancelButton extends Component {
                                         orderStatus: 'cancelled',
                                         count: count+1
                                     };
-                                    console.log(varObj);
                                     return (
                                         <Button type='warning' onClick={() => {
-                                            updateBothTwo({variable: varObj})
+                                            updateBothTwo({variables: varObj})
                                         }}>取消</Button>
                                     )
                                 }}

src/page/manage/AllOrder.js

@@ -0,0 +1,153 @@
+import React, { Component } from 'react';
+import './index.css';
+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";
+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 = [
+    {
+        "value": "success",
+        "label": "成功",
+    },
+    {
+        "value": "cancelled",
+        "label": "已取消",
+    },
+    {
+        "value": "deleted",
+        "label": "已删除",
+    },
+    {
+        "value": "",
+        "label": "全部",
+    }
+];
+
+const CustomChildren = props => (
+    <div
+        onClick={props.onClick}
+        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>
+    </div>
+);
+
+
+class AllOrder extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            sValue: ['success']
+        }
+    }
+
+    render() {
+        const { getFieldProps } = this.props.form;
+        return (
+            <div>
+                <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 })}
+                >
+                    <CustomChildren>选择订单类型</CustomChildren>
+                </Picker>
+                <AdminShowOrders
+                    orderStatus={this.state.sValue[0]}
+                />
+            </div>
+        )
+    }
+}
+
+
+class AdminShowOrders extends Component {
+    render() {
+        let {orderStatus} = this.props;
+        return (
+            <Query query={gql(adminorderbyprops)} variables={orderStatus? {orderStatus}: {}}>
+                {
+                    ({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 = '还没有订单'
+                        }
+
+                        return (
+                            <OrderedRender
+                                orders={orders}
+                                tip={tip}
+                            />
+                        )
+                    }
+                }
+            </Query>
+        )
+    }
+}
+
+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>
+                                        </div>
+                                    </Card.Body>
+                                </Card>
+                            </div>
+                        )
+                    })
+                }
+            </div>
+        )
+    }
+}
+
+
+export default createForm()(AllOrder);

src/page/manage/Manage.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import './index.css';
+import {Tabs, WhiteSpace} from 'antd-mobile';
+import {StickyContainer, Sticky} from 'react-sticky';
+import AllOrder from './AllOrder';
+import Release from './Release';
+
+function renderTabBar(props) {
+    return (<Sticky>
+        {({style}) => <div style={{...style, zIndex: 1}}><Tabs.DefaultTabBar {...props} /></div>}
+    </Sticky>);
+}
+
+const tabs = [
+    {title: '所有订单'},
+    {title: '发布服务'}
+];
+
+class Manage extends Component {
+    constructor(props) {
+        super(props);
+        //todo: userID
+        this.state = {
+            userID: 'handsome'
+        }
+    }
+
+    render() {
+        return (
+            <div>
+                <div>
+                    <WhiteSpace/>
+                    <StickyContainer>
+                        <Tabs tabs={tabs}
+                              initalPage={'t2'}
+                              renderTabBar={renderTabBar}
+                        >
+                            <AllOrder userID={this.state.userID}/>
+                            <Release userID={this.state.userID}/>
+                        </Tabs>
+                    </StickyContainer>
+                    <WhiteSpace/>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Manage;

src/page/manage/Release.js

@@ -0,0 +1,243 @@
+import React, {Component} from 'react';
+import './index.css';
+import {NoticeBar, List, InputItem, ImagePicker, Button} from 'antd-mobile';
+import {Query, Mutation} from "react-apollo";
+import {Spin} from 'antd';
+import gql from "graphql-tag";
+import {serverbyprops, servicebyprops, createserver} from "../../gql";
+import {idGen} from "../../func";
+
+const Item = List.Item;
+
+class Release extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            serverID: ''
+        }
+    }
+
+    render() {
+        return (
+            <div>
+                <NoticeBar mode="closable" marqueeProps={{loop: true, style: {padding: '0 7.5px'}}}>
+                    只有管理员的微信才能看到此界面，此处作为样例全部展示
+                </NoticeBar>
+                <Query query={gql(serverbyprops)} variables={{}}>
+                    {
+                        ({loading, error, data}) => {
+                            if (loading) {
+                                return <Spin className={'spin'}/>
+                            }
+                            if (error) {
+                                return 'error!';
+                            }
+
+                            return (
+                                <div>
+                                    <List renderHeader={() => '服务'} className="my-list">
+                                        {
+                                            data.serverbyprops.map(server =>
+                                                <Item
+                                                    key={server.id}
+                                                    arrow="horizontal"
+                                                    thumb={server.img}
+                                                    multipleLine
+                                                    onClick={() => {
+                                                        this.setState({
+                                                            serverID: server.id
+                                                        })
+                                                    }}
+                                                >
+                                                    {server.name}
+                                                </Item>
+                                            )
+                                        }
+                                        <Item
+                                            arrow="horizontal"
+                                            multipleLine
+                                            onClick={() => {
+                                                this.setState({
+                                                    serverID: 'add'
+                                                })
+                                            }}
+                                        >
+                                            {
+                                                data.serverbyprops.length === 0 ?
+                                                    '没有服务，点我添加' : '添加'
+                                            }
+                                        </Item>
+                                    </List>
+
+                                    {
+                                        this.state.serverID === 'add' ?
+                                            <AddServer/>
+                                            :
+                                            this.state.serverID ?
+                                                <ServiceList serverID={this.state.serverID}/>
+                                                :
+                                                ''
+                                    }
+                                </div>
+                            )
+                        }
+                    }
+                </Query>
+            </div>
+        );
+    }
+}
+
+class ServiceList extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            serviceID: ''
+        }
+    }
+
+    render() {
+        let {serverID} = this.props;
+        return (
+            <Query query={gql(servicebyprops)} variables={{server_id: serverID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin className={'spin'}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+                        return (
+                            <List renderHeader={() => 'TA的服务项'} className="my-list">
+                                {
+                                    data.servicebyprops.map(service =>
+                                        <Item
+                                            key={service.id}
+                                            arrow="horizontal"
+                                            multipleLine
+                                            onClick={() => {
+                                                this.setState({
+                                                    serviceID: service.id
+                                                })
+                                            }}
+                                        >
+                                            {service.description}
+                                        </Item>
+                                    )
+                                }
+
+                                <Item
+                                    arrow="horizontal"
+                                    multipleLine
+                                    onClick={() => {
+                                        this.setState({
+                                            serviceID: 'add'
+                                        })
+                                    }}
+                                >
+                                    {
+                                        data.servicebyprops.length === 0 ?
+                                            '没有服务项，点我添加' : '添加'
+                                    }
+                                </Item>
+
+
+                            </List>
+                        )
+                    }
+                }
+            </Query>
+        )
+    }
+}
+
+class AddServer extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            files: [],
+            name: '',
+            description: ''
+        }
+    }
+
+    onReset = () => {
+        this.setState({
+            files: [],
+            name: '',
+            description: ''
+        })
+    };
+
+    onChange = (files, type) => {
+        console.log(files, type);
+        this.setState({
+            files,
+        });
+    };
+
+    render() {
+        const {files, name, description} = this.state;
+        return (
+            <List renderHeader={() => '请输入服务信息'}>
+                <InputItem onChange={(e)=>{this.setState({name: e})}} value={name} placeholder="请输入名称">名称</InputItem>
+                <InputItem onChange={(e)=>{this.setState({description: e})}} value={description} placeholder="请输入简介">简介</InputItem>
+                <ImagePicker
+                    files={files}
+                    onChange={this.onChange}
+                    onImageClick={(index, fs) => console.log(index, fs)}
+                    selectable={files.length < 1}
+                    multiple={false}
+                />
+                <Item>
+                    <SubmitButton
+                        img={files[0]?files[0].url:''}
+                        name={name}
+                        description={description}
+                    />
+                    <Button size="small" inline style={{marginLeft: '2.5px'}} onClick={this.onReset}>重置</Button>
+                </Item>
+            </List>
+        );
+    }
+}
+
+class SubmitButton extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+        }
+    }
+
+    render() {
+        let {name, description, img} = this.props;
+        return (
+            <Mutation
+                mutation={gql(createserver)}
+                refetchQueries={[{query: gql(serverbyprops), variables: {}}]}
+            >
+                {(createserver, {loading, error}) => {
+                    if (loading)
+                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+                    if (error)
+                        return 'error';
+                    let varObj = {
+                        id: idGen('server'),
+                        name,
+                        description,
+                        img,
+                        createdAt: new Date().getTime(),
+                        updatedAt: ''
+                    };
+                    return (
+                        <Button type="primary" size="small" inline onClick={()=>{createserver({variables: varObj})}}>提交</Button>
+                    )
+                }}
+            </Mutation>
+        )
+    }
+}
+
+export default Release;
+

src/page/manage/index.css

@@ -0,0 +1,32 @@
+.picker-list .am-list-item .am-list-line .am-list-extra {
+  flex-basis: initial;
+}
+
+.test {
+  position: relative;
+  border-bottom: 0;
+}
+
+.test:after {
+  content: '';
+  position: absolute;
+  background-color: #ddd;
+  display: block;
+  z-index: 1;
+  top: auto;
+  right: auto;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1PX;
+  -webkit-transform-origin: 50% 100%;
+  -ms-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+  -webkit-transform: scaleY(0.5);
+  -ms-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}
+
+.my-list .spe .am-list-extra {
+  flex-basis: initial;
+}