更换

src/app/graphqlService/component/application/Application.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import ShopApp from '../../../../case/ShopApp/src/App'
 import BillApp from '../../../../case/BillApp/src/App'
-import OrderApp from '../../../../case/OrderApp/src/App'
+import OrderApp from '../../../../case/OrderApp/src/index'
 class Application extends Component {
 
     render() {

src/case/OrderApp/src-bak/App.css

@@ -1,39 +0,0 @@
-
-
-.orderApp .pageWrap{
-    position: relative;
-    z-index: 2;
-    height: 100%;
-    margin-top: 0;
-    padding-top: 45px;
-}
-.scrollPage{
-    height: 440px;
-    overflow-y: hidden;
-    overflow:scroll;
-    margin-top: 1px;
-}
-
-.orderApp div.am-tabs-default-bar-tab{
-    font-size: 10px;
-}
-
-
-.orderApp  .navBars{
-    position: absolute;
-    width: 100%;
-    top: 0;
-    left: 0;
-    z-index:2;
-}
-
-.orderApp  .listText{
-    font-size: 14px;
-}
-
-
-
-
-
-
-

src/case/OrderApp/src-bak/App.js

@@ -1,138 +0,0 @@
-import React, { Component } from 'react';
-import {PageContext} from './components/context'
-
-import './App.css';
-import {graphqls} from './api/graphql_request'
-import {getStoreByProps} from './api/graphql/store'
-import {getSlidesByProps} from './api/graphql/slides'
-
-import TabBarBottom from './components/App/TabBarBottom'
-import HomePage from './components/HomePage/HomePage'
-import UserPage from './components/UserPage/userPage'
-import StoreDetailPage from './components/StoreDetailPage/StoreDetailPage'
-import AllStorePage from './components/AllStorePage/AllStorePage'
-
-
-class OrderApp extends Component {
-
-  constructor(props){
-    super(props)
-    this.state={
-      page:'home',
-      store:[],
-      slide:[],
-      currentStore:{}
-    }
-    this.changePage=this.changePage.bind(this)
-    this.setCurrentStore=this.setCurrentStore.bind(this)
-  }
-
-  componentDidMount(){
-    this.getStores()
-    this.getSlides()
-  }
-
-  changePage(page){
-    this.setState({page})
-  }
-  //
-  setCurrentStore(store){
-    console.log(store)
-    this.setState({currentStore:store})
-  }
-
-  getStores(){
-    //获取所有商家
-    return graphqls(getStoreByProps,{}).then((e)=>{
-      console.log(e.storebyprops)
-      this.setState({
-        store:e.storebyprops
-      })
-    })
-  }
-
-  getSlides(){
-    return graphqls(getSlidesByProps,{}).then((e)=>{
-
-      this.setState({ slide:e.slidsbyprops })
-    })
-  }
-
-
-  //根据状态渲染页面
-  renderPage(page){
-    switch(page){
-      case ('home'):
-        //console.log('++++1+++++',this.state.store)
-        return(
-          <div className="pageWrap">
-            <div className="scrollPage">
-              <HomePage changePage={this.changePage} store={this.state.store} slide={this.state.slide} setCurrentStore={this.setCurrentStore}/>
-            </div>
-          </div>
-          )
-
-      case ('user'):
-        return(
-          <div className="pageWrap">
-            <div className="scrollPage">
-              <UserPage changePage={this.changePage} />
-            </div>
-          </div>
-        )
-
-      case ('detail'):
-        return(
-          <div className="pageWrap">
-            <div className="scrollPage">
-              <StoreDetailPage changePage={this.changePage} store={this.state.currentStore}/>
-            </div>
-          </div>
-        )
-
-      case ('all'):
-        return(
-          <div className="pageWrap">
-            <div className="scrollPage">
-              <AllStorePage changePage={this.changePage} store={this.state.currentStore}/>
-            </div>
-          </div>
-        )
-
-
-        
- 
-      default:
-          return(
-            <div>页面加载失败,请刷新页面</div>
-          )
-    }
-  }
-
-  renderBottom(){
-    let page=this.state.page
-    if(page==='home'||page==='user'){
-      return(<TabBarBottom changePage={this.changePage}/>)
-    }
-  }
-
-  render() {
-    const changePage=this.changePage
-    return (
-      <div className="AppWrap">
-        <div className="phone6s">
-          <div className="App">
-          <div className="App orderApp">
-            <PageContext.Provider value={changePage}>
-              {this.renderPage(this.state.page)}
-              {this.renderBottom()}
-            </PageContext.Provider>
-        </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default OrderApp;

src/case/OrderApp/src-bak/api/graphql/slides.js

@@ -1,19 +0,0 @@
-export const getSlidesByProps=`query slidsbyprops($admin_id: ID, $img: String, $name: String, $createdAt: String, $updatedAt: String) {
-    slidsbyprops: slids_by_props(admin_id: $admin_id img: $img name: $name createdAt: $createdAt updatedAt: $updatedAt) {
-        id
-        admin_id {
-            id
-            openid
-            username
-            password
-            telephone
-            email
-            createdAt
-            updatedAt
-        }
-        img
-        name
-        createdAt
-        updatedAt
-    }
-}`

src/case/OrderApp/src-bak/api/graphql/store.js

@@ -1,24 +0,0 @@
-export const getStoreByProps=`query storebyprops($address: String, $updatedAt: String, $telephone: String, $name: String, $describle: String, $createdAt: String, $admin_id: ID, $class: String, $recommended: String, $img: String) {
-    storebyprops: store_by_props(address: $address updatedAt: $updatedAt telephone: $telephone name: $name describle: $describle createdAt: $createdAt admin_id: $admin_id class: $class recommended: $recommended img: $img) {
-        address
-        updatedAt
-        telephone
-        name
-        describle
-        createdAt
-        admin_id {
-            id
-            openid
-            username
-            password
-            telephone
-            email
-            createdAt
-            updatedAt
-        }
-        id
-        class
-        recommended
-        img
-    }
-}`

src/case/OrderApp/src-bak/api/graphql_request.js

@@ -1,12 +0,0 @@
-import { request } from 'graphql-request'
-import URL from './url_config'
-
-
-export const graphqls=(query,variables)=>{
-   
-    //console.log(URL.HTTP_DATA_URL)
-    const http_request=URL.HTTP_DATA_URL
-      
-    return request(http_request, query,variables={}).then(data =>data)
-}
-

src/case/OrderApp/src-bak/api/url_config.js

@@ -1,8 +0,0 @@
-var config={
-    APPID:"wxc4831335ae194243",
-    HTTP_DATA_URL:'http://order.ioobot.cn/graphql',
-    HTTP_PAY_URL:'https://xcx.ioobot.com/payinfo'
-}
-export default config
-
-

src/case/OrderApp/src-bak/components/AllStorePage/AllStorePage.jsx

@@ -1,14 +0,0 @@
-import React, { Component } from 'react'
-
-import NavBars from '../common/NavBar'
-
-export default class AllStorePage extends Component {
-  render() {
-    return (
-      <div>
-        <NavBars navBarText="所有店铺" changePage={this.props.changePage} page="home"/>
-        <div style={{width:"100%",height:"200px",display:"flex",justifyContent:"center",alignItems:"center"}}>待后续开发,敬请期待</div>
-      </div>
-    )
-  }
-}

src/case/OrderApp/src-bak/components/App/TabBarBottom.css

@@ -1,8 +0,0 @@
-.subTitle{
-    box-sizing: border-box;
-    text-align: center;
-    padding: 10px;
-    font-size: 17px;
-    color: #fff;
-    background:url("https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/black_line.png") repeat
-}

src/case/OrderApp/src-bak/components/App/TabBarBottom.jsx

@@ -1,104 +0,0 @@
-import React ,{Component} from 'react';
-import { TabBar } from 'antd-mobile';
-
-
-
-import './TabBarBottom.css'
-
-class TabBarBottom extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedTab: 'index',
-      hidden: false,
-      fullScreen: true
-    };
-
-    this.handleChange=this.handleChange.bind(this)
-
-  }
-
-
-  //要保留，勿动
-  renderContent(page){}
-
-  handleChange(page){
-    this.props.changePage(page)
-  }
-
-  render() {
-    //这里渲染一次
-    const handleChange=this.handleChange
-    return (
-      <div style={this.state.fullScreen ? { position: 'absolute', height: '100%', width: '100%', bottom: 0 } : { height: 400 }} className="TabBarBottom">
-        <TabBar
-          unselectedTintColor="#949494"
-          tintColor="#33A3F4"
-          barTintColor="white"
-          hidden={this.state.hidden}
-        >
-          <TabBar.Item
-            title="首页"
-            key="Life"
-            icon={<div style={{
-              width: '22px',
-              height: '22px',
-              background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/home.svg) center center /  21px 21px no-repeat' }}
-            />
-            }
-            selectedIcon={<div style={{
-              width: '22px',
-              height: '22px',
-              background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/home_s.svg) center center /  21px 21px no-repeat' }}
-            />
-            }
-            selected={this.state.selectedTab === 'index'}
-         
-            onPress={() => {
-              handleChange('home')
-              this.setState({
-                selectedTab: 'index',
-              });
-            }}
-            data-seed="logId"
-          >
-            {this.renderContent('index')}
-          </TabBar.Item>
-
-          <TabBar.Item
-            icon={
-              <div style={{
-                width: '22px',
-                height: '22px',
-                background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/user.svg) center center /  21px 21px no-repeat' }}
-              />
-            }
-            selectedIcon={
-              <div style={{
-                width: '22px',
-                height: '22px',
-                background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/user_s.svg) center center /  21px 21px no-repeat' }}
-              />
-            }
-            title="我的"
-            key="user"
-  
-            selected={this.state.selectedTab === 'user'}
-            onPress={() => {
-              handleChange('user')
-              this.setState({
-                selectedTab: 'user',
-              });
-            }}
-          >
-            {this.renderContent('user')}
-          </TabBar.Item>
-
-        </TabBar>
-      </div>
-    );
-  }
-}
-
-
-export default TabBarBottom

src/case/OrderApp/src-bak/components/HomePage/HomePage.jsx

@@ -1,42 +0,0 @@
-import React ,{Component} from 'react';
-
-import NavBars from '../common/NavBar'
-import Slide from '../common/Slide'
-import Cards from '../common/Cards'
-import Lists from '../common/List'
-
-
-export default class HomePage extends Component{
-    constructor(props){
-        super(props)
-        this.state={
-            store:[]
-        }
-        //console.log('+++222+++',this.props.store)
-    }
-
-    render(){
-        const store =this.props.store
-
-        return (
-            <div>
-                <NavBars navBarText="店铺" changePage={this.props.changePage} page="home"/>
-                <Slide slide={this.props.slide}/>
-                <Lists text="推荐商家" extra="更多" callback={()=>{this.props.changePage('all')}}/>
-                <div className="cardlist">
-                    {
-                        store.map((item,index)=>{
-                            if(item.recommended==='1'){
-                                return (
-                                    <Cards key={index} item={item} changePage={this.props.changePage} setCurrentStore={this.props.setCurrentStore}/>
-                                    )
-                            }else{
-                                return ''
-                            }
-                        })
-                    }
-                </div>
-            </div>
-        )
-    }
-}

src/case/OrderApp/src-bak/components/HomePage/Search.jsx

@@ -1,37 +0,0 @@
-import React, { Component } from 'react';
-import { SearchBar } from 'antd-mobile';
-
-class Search extends Component {
-    state = {
-        value: '输入要搜索的商品',
-      };
-      componentDidMount() {
-        //this.autoFocusInst.focus();
-      }
-      onChange= (value) => {
-        this.setState({ value });
-      };
-      clear = () => {
-        this.setState({ value: '' });
-      };
-      handleClick = () => {
-        this.manualFocusInst.focus();
-      }
-      render() {
-        return (<div>
-          <SearchBar
-            value={this.state.value}
-            placeholder="Search"
-            onSubmit={value => console.log(value, 'onSubmit')}
-            onClear={value => console.log(value, 'onClear')}
-            onFocus={() => console.log('onFocus')}
-            onBlur={() => console.log('onBlur')}
-            onCancel={() => console.log('onCancel')}
-            showCancelButton
-            onChange={this.onChange}
-          />
-        </div>);
-      }
-}
-
-export default Search

src/case/OrderApp/src-bak/components/HomePage/TabBarTop.jsx

@@ -1,91 +0,0 @@
-import React, { Component } from 'react';
-
-import { Tabs, WhiteSpace } from 'antd-mobile';
-import Cards from './Cards'
-
-import {graphqls} from '../../api/graphql_request'
-import {getProductByProps} from '../../api/graphql/product'
-
-
-const query=getProductByProps
-let variables={}
-
-//获取所有商品
-function getGoods(){
-  return graphqls(query,variables).then((data)=>{
-    //console.log("data",data.productbyprops)
-    let products=data.productbyprops
-
-    let arr=products.map((item)=>{
-      return item.category
-    })
-
-    arr = Array.from(new Set(arr))
-
-    let tabs=arr.map((item)=>{
-      return {title:item}
-    })
-
-    return {tabs,products}
-  })
-}
-
-
-class TabBarTop extends Component {
-    constructor(props){
-      super(props)
-      this.state={
-        tabs:[],
-        product_s:[],
-        products:[],
-        select:'所有果品'
-      }
-    }
-
-
-    componentDidMount () {
-      //console.log('tets')
-      getGoods().then((data)=>{
-        this.setState({
-          tabs:[{title: '所有果品'},...data.tabs],
-          products:data.products,
-          select:'所有果品'
-        })
-        sessionStorage.setItem("products",JSON.stringify(data.products))
-      })
-    }
-    tabChange(e){
-
-      let category=e.title,
-          products = JSON.parse(sessionStorage.getItem("products"));
-      if(category==='所有果品'){
-        this.setState({
-          products:products
-        })
-      }else{
-        let arr =products.filter((item)=>{
-          return item.category===category
-        })
-  
-        this.setState({
-          products:arr
-        })
-      } 
-    }
-    
-    render() {
-      //console.log('this.state.products',this.state.products)
-      return (
-        <div>
-          <WhiteSpace />
-            <Tabs onChange={this.tabChange.bind(this)} tabs={this.state.tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={4} />}>
-            </Tabs>
-          <WhiteSpace />
-          <Cards products={this.state.products ?this.state.products:[]}/>
-        </div>
-      );
-    }
-  }
-
-  export default TabBarTop
-

src/case/OrderApp/src-bak/components/StoreDetailPage/StoreDetailPage.jsx

@@ -1,14 +0,0 @@
-import React, { Component } from 'react'
-
-import NavBars from '../common/NavBar'
-
-export default class StoreDetailPage extends Component {
-  render() {
-    return (
-      <div>
-        <NavBars navBarText="店铺详情" changePage={this.props.changePage} page="home"/>
-        <div style={{width:"100%",height:"200px",display:"flex",justifyContent:"center",alignItems:"center"}}>待后续开发,敬请期待</div>
-      </div>
-    )
-  }
-}

src/case/OrderApp/src-bak/components/UserPage/userPage.jsx

@@ -1,41 +0,0 @@
-import React, { Component } from 'react';
-
-import NavBars from '../common/NavBar'
-import Head from '../common/Head'
-import Lists from '../common/List'
-
-import {successToast} from '../common/Toast'
-
-
-class UserPage extends Component{
-    constructor(props){
-        super(props)
-        this.state={
-
-        }
-        
-        this.toOrder=this.toOrder.bind(this)
-    }
-
-    toOrder(){
-        console.log('toOrder')
-    }
-
-    render(){
-        return(
-            <div>
-                <NavBars navBarText="我的"/>
-                <Head />
-                <div className="lists" style={{marginTop:"20px",border:"1px solid transparent"}}>
-                    <Lists text="我的预约" icon="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/order.svg" callback={()=>{successToast('敬请期待',1)}}/>
-                    <div style={{height:"30px"}}></div>
-                    <Lists text="我的客服"  callback={()=>{successToast('敬请期待',1)}}/>
-                    <div style={{height:"10px"}}></div>
-                    <Lists text="意见反馈"  callback={()=>{successToast('敬请期待',1)}}/>
-                </div>
-            </div>
-        )
-    }
-}
-
-export default UserPage

src/case/OrderApp/src-bak/components/common/Alert.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import { Modal, Button, WhiteSpace, WingBlank, Toast } from 'antd-mobile';
-
-const alert = Modal.alert;
-
-export const dialog =(type,message)=>{
-    return new Promise((resolve,reject)=>{
-        alert(type, message, [
-            { text: '取消', onPress: () => {reject.call(null,0)}},
-            { text: '确认', onPress: () => {resolve.call(null,1)} },
-          ])
-    })
-}
-
-

src/case/OrderApp/src-bak/components/common/Button.jsx

@@ -1,22 +0,0 @@
-import React, { Component } from 'react';
-import { Button, WhiteSpace, WingBlank } from 'antd-mobile';
-// import { genPercentAdd } from 'antd/lib/upload/utils';
-
-export default class Buttons extends Component{
-    constructor(props){
-        super(props)
-        this.state={
-            buttonStyle:{
-                background:"green",
-                margin:'0 10px'
-            }
-        }
-    }
-    render(){
-        return (
-            <WingBlank>
-                <Button type="primary" style={this.state.buttonStyle} onClick={()=>this.props.changePage(this.props.toPage)}>{this.props.buttonText}</Button><WhiteSpace />
-            </WingBlank>
-        )
-    }
-}

src/case/OrderApp/src-bak/components/common/Cards.css

@@ -1,55 +0,0 @@
-div.Card{
-    font-size:15px;
-}
-
-div.imgWrap{
-    flex-basis:100px;
-}
-.hot{
-    color:red;
-    font-size: 12px;
-}
-.title{
-    font-size: 15px;
-}
-p{
-    padding: 0;
-    margin: 0;
-}
-
-
-.rightsidebar{
-    padding-left: 4px;
-}
-.rightsidebar .p1,.rightsidebar .p2{
-    font-size: 14px;
-    text-align: left;
-}
-
-
-.p3{
-    text-align: left;
-    margin-top: 60px;
-}
-.sidebar{
-    padding-left:10px;
-    font-size: 14px;
-    flex-grow: 1;
-}
-.bodyWrap{
-    display: flex;
-    overflow: hidden;
-}
-
-.rightsidebar{
-    flex-basis:100px;
-}
-
-div.am-tab-bar-item{
-    height: auto;
-    background-color: #ccc;
-}
-
-div.am-card{
-   
-}

src/case/OrderApp/src-bak/components/common/Cards.jsx

@@ -1,73 +0,0 @@
-import React, { Component } from 'react';
-import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
-//import { Item } from 'antd-mobile/lib/tab-bar';
-import './Cards.css'
-
-class Cards extends Component{
-    constructor(props){
-        console.log('111',props)
-        super(props)
-        this.state={
-            product_id:''
-        }
-    }
-    /*
-    
-    address: "合肥蜀山那长江路545号"
-    admin_id: null
-    class: "美甲"
-    createdAt: "2018/3/12"
-    describle: "只属于你一个人的浪漫"
-    id: "12312"
-    img: "https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/recommend_img_02.png"
-    name: "一个人美容"
-    recommended: "1"
-    telephone: "18355093647"
-    updatedAt: "String"
-    */ 
-    
-    render(){
-        const item =this.props.item
-        const changePage=this.props.changePage
-        const setCurrentStore=this.props.setCurrentStore
-        return(
-            <WingBlank size="lg" className="Card">
-                {/*<Link to={"/detail?product_id="+item.id}>*/}
-                    <Card onClick={(e)=>{
-                        changePage('detail')
-                        setCurrentStore(item)
-                    }}>
-                        <Card.Header
-                            title={<span className="title">{item.name}</span>}
-                            extra={<span className="hot">热门</span>} 
-                        />
-                        <Card.Body>
-                            <div className="bodyWrap">
-                                <div className="imgWrap">
-                                    <img src={item.img} alt="xxx" height="100px" width="100px"/>
-                                </div>
-                                <div className="sidebar">
-                                    <p style={{fontSize:"10px"}}>{item.class}</p>
-                                    <p style={{fontSize:"10px"}}>{item.describle}</p>
-                                    <p style={{fontSize:"10px"}}>{item.address}</p>
-                                    <button style={{border:"none",padding:"5px 11px",background:"green",borderRadius:"3px",color:"#fff",fontSize:"10px",marginTop:"16px"}}>了解更多</button>
-                                </div>
-                            </div>
-                        </Card.Body>
-                        <Card.Footer content="" extra={<div></div>} />
-                    </Card>
-                {/*</Link>*/}
-            <WhiteSpace size="lg" />
-        </WingBlank>
-        )
-    }
-}
-export default Cards
-
-
-
-
-
-
-
-

src/case/OrderApp/src-bak/components/common/Head.css

@@ -1,15 +0,0 @@
-.head{
-    height: 100px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-.head .avatar{
-    border-radius: 50%;
-}
-
-.nickName{
-    font-weight: bold;
-}

src/case/OrderApp/src-bak/components/common/Head.jsx

@@ -1,14 +0,0 @@
-import React, { Component } from 'react'
-import './Head.css'
-
-export default class Head extends Component {
-  render() {
-    return (
-      <div className="head">
-        <img className="avatar" src={this.props.icon||'https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/user_s.svg'} alt="head" width="50px" height="50px"/>
-        <div className="nickName">{this.props.name||'旺仔小馒头'}</div>
-      </div>
-    )
-  }
-}
-

src/case/OrderApp/src-bak/components/common/List.jsx

@@ -1,33 +0,0 @@
-import React, { Component } from 'react'
-import { List } from 'antd-mobile';
-const Item = List.Item;
-
-export default class Lists extends Component {
-  render() {
-    return (
-        <List >
-            {
-                this.props.icon ?
-                <Item
-                extra={this.props.extra}
-                thumb={this.props.icon}
-                arrow="horizontal"
-                onClick={() => {this.props.callback()}}
-                ><span className="listText">{this.props.text}</span></Item>
-                :
-                <Item
-                extra={this.props.extra}
-                arrow="horizontal"
-                onClick={() => {this.props.callback()}}
-                ><span className="listText">{this.props.text}</span></Item>
-            }
-        </List>
-    )
-  }
-}
-
-
-
-
-
-

src/case/OrderApp/src-bak/components/common/NavBar.jsx

@@ -1,36 +0,0 @@
-import React, { Component } from 'react';
-import { NavBar, Icon } from 'antd-mobile';
-
-import {PageContext} from '../context'
-
-
-
-export default class NavBars extends Component{
-    render(){
-        let page=this.props.page||'home'
-        console.log(page)
-        return(
-            <div className="navBars">
-                <NavBar
-                mode="dark"
-                icon={ <Icon type="left" /> }
-                onLeftClick={() => this.props.changePage(page)}
-                rightContent={[
-                    <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
-                    <Icon key="1" type="ellipsis" />,
-                ]}
-                ><span style={{fontSize:'14px'}}>{this.props.navBarText}</span>
-                </NavBar>
-            </div>
-        )
-    }
-}
-
-
-
-
-
-
-
-
-

src/case/OrderApp/src-bak/components/common/Slide.css

@@ -1,7 +0,0 @@
-div.am-wingblank ,div.am-wingblank.am-wingblank-lg {
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-

src/case/OrderApp/src-bak/components/common/Slide.jsx

@@ -1,51 +0,0 @@
-import React, { Component } from 'react';
-import { Carousel, WingBlank } from 'antd-mobile';
-
-
-import './Slide.css'
-
-class Slide extends React.Component {
-    constructor(props){
-      super(props)
-      this.state = {
-        imgHeight: 176
-      }
-    }
-
-    render() {
-      return (
-        <WingBlank>
-          <Carousel
-            autoplay={true}
-            infinite
-            slideWidth={1}
-            beforeChange={(from, to) => {}}
-            afterChange={index => {}}
-          >
-            {this.props.slide.map(item => (
-              <a
-                key={item.toString()}
-                href="http://www.alipay.com"
-                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
-              >
-                <img
-                  src={item.img}
-                  alt=""
-                  style={{ width: '100%', verticalAlign: 'top' }}
-                  onLoad={() => {
-                    // fire window resize event to change height
-                    window.dispatchEvent(new Event('resize'));
-                    this.setState({ imgHeight: 'auto' });
-                  }}
-                />
-              </a>
-            ))}
-          </Carousel>
-        </WingBlank>
-      );
-    }
-  }
-
-
-  export default Slide
-  

src/case/OrderApp/src-bak/components/common/Status.jsx

@@ -1,6 +0,0 @@
-import React from 'react'
-import { ActivityIndicator } from 'antd-mobile';
-
-export const Loading=(text,show)=>{
-    return(<ActivityIndicator toast text={text} animating={show}/>)
-}

src/case/OrderApp/src-bak/components/common/Toast.jsx

@@ -1,11 +0,0 @@
-//封装Toast
-import React, { Component } from 'react'
-import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';
-
-
-export const successToast=(message,time)=> {
-  Toast.success(message, time);
-}
-export const failToast=(message,time)=> {
-  Toast.fail(message, time);
-}

src/case/OrderApp/src-bak/components/context.js

@@ -1,5 +0,0 @@
-import React from 'react'
-
-export const PageContext=React.createContext()
-export const NumContext=React.createContext()
-

src/case/OrderApp/src-bak/images/user.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543305670471" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4005" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.47776 959.86688c-247.40864 0-448.6656-201.25184-448.6656-448.6656 0-247.36256 201.25696-448.6656 448.6656-448.6656 247.41376 0 448.61952 201.30304 448.61952 448.6656 0 247.41376-201.20576 448.6656-448.6144 448.6656z m0-851.072c-221.92128 0-402.40128 180.5312-402.40128 402.4064s180.48 402.4064 402.40128 402.4064c221.8752 0 402.36032-180.5312 402.36032-402.4064s-180.48512-402.4064-402.36032-402.4064z m0 484.64384c-99.64544 0-180.73088-81.08032-180.73088-180.73088s81.08544-180.736 180.736-180.736c99.64544 0 180.72576 81.08544 180.72576 180.736 0 99.65056-81.08032 180.73088-180.73088 180.73088z m0-315.19744c-74.15808 0-134.46656 60.30848-134.46656 134.46656s60.3136 134.47168 134.46656 134.47168c74.1632 0 134.47168-60.3136 134.47168-134.47168s-60.3136-134.46656-134.47168-134.46656z m225.29024 487.64928a23.168 23.168 0 0 1-22.03136-16.15872c-28.29824-88.76032-109.9776-148.41856-203.25888-148.41856-87.7056 0-167.7312 54.99392-199.18848 136.832a23.02976 23.02976 0 0 1-29.85472 13.29152 23.0912 23.0912 0 0 1-13.30176-29.8496c38.23616-99.59936 135.6288-166.53312 242.35008-166.53312 113.44384 0 212.89472 72.6528 247.31648 180.6336a23.12704 23.12704 0 0 1-15.0016 29.10208 24.8064 24.8064 0 0 1-7.02976 1.09568z" p-id="4006" fill="#707070"></path></svg>

src/case/OrderApp/src-bak/images/user_select.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543305670471" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4005" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.47776 959.86688c-247.40864 0-448.6656-201.25184-448.6656-448.6656 0-247.36256 201.25696-448.6656 448.6656-448.6656 247.41376 0 448.61952 201.30304 448.61952 448.6656 0 247.41376-201.20576 448.6656-448.6144 448.6656z m0-851.072c-221.92128 0-402.40128 180.5312-402.40128 402.4064s180.48 402.4064 402.40128 402.4064c221.8752 0 402.36032-180.5312 402.36032-402.4064s-180.48512-402.4064-402.36032-402.4064z m0 484.64384c-99.64544 0-180.73088-81.08032-180.73088-180.73088s81.08544-180.736 180.736-180.736c99.64544 0 180.72576 81.08544 180.72576 180.736 0 99.65056-81.08032 180.73088-180.73088 180.73088z m0-315.19744c-74.15808 0-134.46656 60.30848-134.46656 134.46656s60.3136 134.47168 134.46656 134.47168c74.1632 0 134.47168-60.3136 134.47168-134.47168s-60.3136-134.46656-134.47168-134.46656z m225.29024 487.64928a23.168 23.168 0 0 1-22.03136-16.15872c-28.29824-88.76032-109.9776-148.41856-203.25888-148.41856-87.7056 0-167.7312 54.99392-199.18848 136.832a23.02976 23.02976 0 0 1-29.85472 13.29152 23.0912 23.0912 0 0 1-13.30176-29.8496c38.23616-99.59936 135.6288-166.53312 242.35008-166.53312 113.44384 0 212.89472 72.6528 247.31648 180.6336a23.12704 23.12704 0 0 1-15.0016 29.10208 24.8064 24.8064 0 0 1-7.02976 1.09568z" p-id="4006" fill="#1296db"></path></svg>

src/case/OrderApp/src/App.css

@@ -0,0 +1,17 @@
+#tab-bar.demo {
+  display: flex;
+  flex-direction: column;
+}
+#tab-bar .demoName {
+  height: 40px;
+}
+#tab-bar .demo-preview-item .am-tab-bar {
+  background-color: white;
+}
+
+/*.spin {*/
+  /*position: relative;*/
+  /*top: 50%;*/
+  /*left: 50%;*/
+  /*transform: translate(-50%,-50%);*/
+/*}*/

src/case/OrderApp/src/App.js

@@ -1,19 +1,80 @@
 import React, {Component} from 'react';
-import './index.css';
+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) {
         super(props);
-        this.state = {}
+        this.state = {
+            selectedTab: 'appointment',
+            fullScreen: true,
+            userID: 'handsome'
+        };
     }
 
     render() {
+        let {userID} = this.state;
         return (
-            <div className="limit">
-                1
+            <div className="App">
+                <div style={{height: '100%', width: '100%', top: 0}}>
+                    <TabBar
+                        unselectedTintColor="#949494"
+                        tintColor="#328cee"
+                        barTintColor="white"
+                    >
+                        <TabBar.Item
+                            title="预约"
+                            key="appointment"
+                            icon={<Icon type="fire"/>}
+                            selectedIcon={<Icon type="fire" style={{color: '#328cee'}}/>}
+                            selected={this.state.selectedTab === 'appointment'}
+                            onPress={() => {
+                                this.setState({
+                                    selectedTab: 'appointment',
+                                });
+                            }}
+                            data-seed="logId"
+                        >
+                            <Display userID={userID}/>
+                        </TabBar.Item>
+                        <TabBar.Item
+                            icon={<Icon type="home"/>}
+                            selectedIcon={<Icon type="home" style={{color: '#328cee'}}/>}
+                            title="我的"
+                            key="my"
+                            selected={this.state.selectedTab === 'my'}
+                            onPress={() => {
+                                this.setState({
+                                    selectedTab: 'my',
+                                });
+                            }}
+                        >
+                            <My userID={userID}/>
+                        </TabBar.Item>
+                        <TabBar.Item
+                            icon={<Icon type="setting"/>}
+                            selectedIcon={<Icon type="setting" style={{color: '#328cee'}}/>}
+                            title="管理"
+                            key="manage"
+                            selected={this.state.selectedTab === 'manage'}
+                            onPress={() => {
+                                this.setState({
+                                    selectedTab: 'manage',
+                                });
+                            }}
+                        >
+                            <Manage userID={userID}/>
+                        </TabBar.Item>
+                    </TabBar>
+                </div>
             </div>
-        )
+        );
     }
 }
 
 export default App;
+

src/case/OrderApp/src/components/App/App.css

@@ -1,39 +0,0 @@
-
-
-.orderApp .pageWrap{
-    position: relative;
-    z-index: 2;
-    height: 100%;
-    margin-top: 0;
-    padding-top: 45px;
-}
-.scrollPage{
-    height: 440px;
-    overflow-y: hidden;
-    overflow:scroll;
-    margin-top: 1px;
-}
-
-.orderApp div.am-tabs-default-bar-tab{
-    font-size: 10px;
-}
-
-
-.orderApp  .navBars{
-    position: absolute;
-    width: 100%;
-    top: 0;
-    left: 0;
-    z-index:2;
-}
-
-.orderApp  .listText{
-    font-size: 14px;
-}
-
-
-
-
-
-
-

src/case/OrderApp/src/config.js

@@ -0,0 +1,10 @@
+// 这个 fc 的数据结构错了，库存的地方应该是 service_id
+// const graphqlFC = 'http://service-dan6exu1-1254337200.ap-shanghai.apigateway.myqcloud.com/test/graphql';
+
+// const graphqlFC = 'http://localhost:3123/graphql';
+
+// const graphqlFC = 'http://123.206.193.98:3123/graphql';
+const graphqlFC = 'http://appointment.ioobot.cn/graphql';
+
+
+export {graphqlFC}

src/case/OrderApp/src/func.js

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

src/case/OrderApp/src/gql.js

@@ -0,0 +1,415 @@
+// 注意是否使用 gql
+// apollo client 需要使用 gql
+// graphql-request 不需要使用 gql
+// import gql from "graphql-tag";
+
+const serverbyprops = `
+    query serverbyprops($name: String, $description: String, $img: String, $createdAt: String, $updatedAt: String) {
+      serverbyprops: server_by_props(name: $name description: $description img: $img createdAt: $createdAt updatedAt: $updatedAt) {
+        id
+        name
+        description
+        img
+        createdAt
+        updatedAt
+      }
+    }
+`;
+
+const servicebyprops = `
+    query servicebyprops($server_id: ID) {
+      servicebyprops: service_by_props(server_id: $server_id) {
+        id
+        server_id {
+          id
+          name
+          description
+          img
+          createdAt
+          updatedAt
+        }
+        repertory_id {
+          id
+          count
+          createdAt
+          updatedAt
+        }
+        description
+        price
+        startTime
+        lastTime
+      }
+    }
+`;
+
+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
+        contactTelephone
+        contactName
+        user_id {
+          id
+          openid
+          admin
+          username
+          nickname
+          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 userbyid = `
+    query userbyid($id: ID) {
+      userbyid: user_by_id(id: $id) {
+        id
+        openid
+        admin
+        username
+        nickname
+        password
+        telephone
+        email
+        createdAt
+        updatedAt
+      }
+    }
+`;
+
+const updateuser = `
+    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
+        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
+      }
+    }
+`;
+
+const createorderAndupdaterepertory = `
+    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
+            updatedAt
+            payTime
+            createdAt
+            updatedAt
+            orderStatus
+            id
+            customerNumber
+            contactTelephone
+            contactName
+          }
+      
+          updaterepertory: update_repertory(id: $repertory_id count: $count updatedAt: $updatedAt) {
+            id
+            count
+            updatedAt
+          }
+    }
+`;
+
+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) {
+        id
+        count
+        createdAt
+        updatedAt
+      }
+    }
+`;
+
+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
+        contactTelephone
+        contactName
+        user_id {
+          id
+          openid
+          admin
+          username
+          nickname
+          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
+      }
+    }
+`;
+
+const servicebyid = `
+    query servicebyid($id: ID) {
+      servicebyid: service_by_id(id: $id) {
+        id
+        server_id {
+          id
+          name
+          description
+          img
+          createdAt
+          updatedAt
+        }
+        repertory_id {
+          id
+          count
+          createdAt
+          updatedAt
+        }
+        description
+        price
+        startTime
+        lastTime
+        createdAt
+        updatedAt
+      }
+    }
+`;
+
+const updateserviceAndupdaterepertory = `
+    mutation createserviceAndcreaterepertory($service_id: ID, $server_id: ID, $repertory_id: ID!, $count: Int, $description: String, $price: Float, $startTime: String, $lastTime: String, $updatedAt: String) {
+      updateservice: update_service(id: $service_id server_id: $server_id repertory_id: $repertory_id description: $description price: $price startTime: $startTime lastTime: $lastTime updatedAt: $updatedAt) {
+        id
+        description
+        price
+        startTime
+        lastTime
+        createdAt
+        updatedAt
+      }
+      
+      updaterepertory: update_repertory(id: $repertory_id service_id: $service_id count: $count updatedAt: $updatedAt) {
+        id
+        count
+        createdAt
+        updatedAt
+      }
+    }
+`;
+
+const createserviceAndcreaterepertory = `
+    mutation createserviceAndcreaterepertory($service_id: ID!, $server_id: ID, $repertory_id: ID!, $count: Int, $description: String, $price: Float, $startTime: String, $lastTime: String, $createdAt: String, $updatedAt: String) {
+      createservice: create_service(id: $service_id server_id: $server_id repertory_id: $repertory_id description: $description price: $price startTime: $startTime lastTime: $lastTime createdAt: $createdAt updatedAt: $updatedAt) {
+        id
+        description
+        price
+        startTime
+        lastTime
+        createdAt
+        updatedAt
+      }
+      
+      createrepertory: create_repertory(id: $repertory_id service_id: $service_id count: $count createdAt: $createdAt updatedAt: $updatedAt) {
+        id
+        count
+        createdAt
+        updatedAt
+      }
+    }
+`;
+
+const deleteserviceAnddeleterepertory = `
+    mutation deleteserviceAnddeleterepertory($repertory_id: ID!, $service_id: ID!) {
+      deleterepertory: delete_repertory(id: $repertory_id)
+      
+      deleteservice: delete_service(id: $service_id)
+    }
+`;
+
+export {
+    servicebyid,
+    serverbyprops,
+    servicebyprops,
+    orderbyprops,
+    adminorderbyprops,
+    userbyid,
+    updateuser,
+    repertorybyid,
+    updateorderAndupdaterepertory,
+    createorderAndupdaterepertory,
+    deleteorder,
+    updateorder,
+    createserver,
+    updateserviceAndupdaterepertory,
+    createserviceAndcreaterepertory,
+    deleteserviceAnddeleterepertory,
+    createorderAndupdaterepertoryAndupdateuser
+}

src/case/OrderApp/src/graphqlALL.txt

@@ -0,0 +1,447 @@
+query userbyid($id: ID) {
+  userbyid: user_by_id(id: $id) {
+    email
+    updatedAt
+    admin
+    password
+    telephone
+    nickname
+    username
+    createdAt
+    openid
+    id
+  }
+}
+
+query serverbyprops($name: String, $description: String, $img: String, $createdAt: String, $updatedAt: String) {
+  serverbyprops: server_by_props(name: $name description: $description img: $img createdAt: $createdAt updatedAt: $updatedAt) {
+    id
+    name
+    description
+    img
+    createdAt
+    updatedAt
+  }
+}
+
+query servicebyid($id: ID) {
+  servicebyid: service_by_id(id: $id) {
+    id
+    server_id {
+      id
+      name
+      description
+      img
+      createdAt
+      updatedAt
+    }
+    repertory_id {
+      id
+      count
+      createdAt
+      updatedAt
+    }
+    description
+    price
+    startTime
+    lastTime
+    createdAt
+    updatedAt
+  }
+}
+
+query repertorybyid($id: ID) {
+  repertorybyid: repertory_by_id(id: $id) {
+    id
+    service_id {
+      id
+      description
+      price
+      startTime
+      lastTime
+      createdAt
+      updatedAt
+    }
+    count
+    createdAt
+    updatedAt
+  }
+}
+
+query orderbyid($id: ID) {
+  orderbyid: order_by_id(id: $id) {
+    payStatus
+    contactName
+    remark
+    payCount
+    updatedAt
+    payTime
+    contactTelephone
+    createdAt
+    orderStatus
+    id
+    user_id {
+      email
+      updatedAt
+      admin
+      password
+      telephone
+      nickname
+      username
+      createdAt
+      openid
+      id
+    }
+    service_id {
+      id
+      description
+      price
+      startTime
+      lastTime
+      createdAt
+      updatedAt
+    }
+    customerNumber
+  }
+}
+
+query repertorybyprops($service_id: ID, $count: Int, $createdAt: String, $updatedAt: String) {
+  repertorybyprops: repertory_by_props(service_id: $service_id count: $count createdAt: $createdAt updatedAt: $updatedAt) {
+    id
+    service_id {
+      id
+      description
+      price
+      startTime
+      lastTime
+      createdAt
+      updatedAt
+    }
+    count
+    createdAt
+    updatedAt
+  }
+}
+
+query servicebyprops($server_id: ID, $repertory_id: ID, $description: String, $price: Float, $startTime: String, $lastTime: String, $createdAt: String, $updatedAt: String) {
+  servicebyprops: service_by_props(server_id: $server_id repertory_id: $repertory_id description: $description price: $price startTime: $startTime lastTime: $lastTime createdAt: $createdAt updatedAt: $updatedAt) {
+    id
+    server_id {
+      id
+      name
+      description
+      img
+      createdAt
+      updatedAt
+    }
+    repertory_id {
+      id
+      count
+      createdAt
+      updatedAt
+    }
+    description
+    price
+    startTime
+    lastTime
+    createdAt
+    updatedAt
+  }
+}
+
+query serverbyid($id: ID) {
+  serverbyid: server_by_id(id: $id) {
+    id
+    name
+    description
+    img
+    createdAt
+    updatedAt
+  }
+}
+
+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
+    password
+    telephone
+    nickname
+    username
+    createdAt
+    openid
+    id
+  }
+}
+
+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 {
+      email
+      updatedAt
+      admin
+      password
+      telephone
+      nickname
+      username
+      createdAt
+      openid
+      id
+    }
+    service_id {
+      id
+      description
+      price
+      startTime
+      lastTime
+      createdAt
+      updatedAt
+    }
+    customerNumber
+  }
+}
+
+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
+    password
+    telephone
+    nickname
+    username
+    createdAt
+    openid
+    id
+  }
+}
+
+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
+    password
+    telephone
+    nickname
+    username
+    createdAt
+    openid
+    id
+  }
+}
+
+mutation updateservice($id: ID, $server_id: ID, $repertory_id: ID, $description: String, $price: Float, $startTime: String, $lastTime: String, $createdAt: String, $updatedAt: String) {
+  updateservice: update_service(id: $id server_id: $server_id repertory_id: $repertory_id description: $description price: $price startTime: $startTime lastTime: $lastTime createdAt: $createdAt updatedAt: $updatedAt) {
+    id
+    server_id {
+      id
+      name
+      description
+      img
+      createdAt
+      updatedAt
+    }
+    repertory_id {
+      id
+      count
+      createdAt
+      updatedAt
+    }
+    description
+    price
+    startTime
+    lastTime
+    createdAt
+    updatedAt
+  }
+}
+
+mutation createservice($id: ID!, $server_id: ID, $repertory_id: ID, $description: String, $price: Float, $startTime: String, $lastTime: String, $createdAt: String, $updatedAt: String) {
+  createservice: create_service(id: $id server_id: $server_id repertory_id: $repertory_id description: $description price: $price startTime: $startTime lastTime: $lastTime createdAt: $createdAt updatedAt: $updatedAt) {
+    id
+    server_id {
+      id
+      name
+      description
+      img
+      createdAt
+      updatedAt
+    }
+    repertory_id {
+      id
+      count
+      createdAt
+      updatedAt
+    }
+    description
+    price
+    startTime
+    lastTime
+    createdAt
+    updatedAt
+  }
+}
+
+mutation updateserver($id: ID, $name: String, $description: String, $img: String, $createdAt: String, $updatedAt: String) {
+  updateserver: update_server(id: $id name: $name description: $description img: $img createdAt: $createdAt updatedAt: $updatedAt) {
+    id
+    name
+    description
+    img
+    createdAt
+    updatedAt
+  }
+}
+
+mutation createrepertory($id: ID!, $service_id: ID, $count: Int, $createdAt: String, $updatedAt: String) {
+  createrepertory: create_repertory(id: $id service_id: $service_id count: $count createdAt: $createdAt updatedAt: $updatedAt) {
+    id
+    service_id {
+      id
+      description
+      price
+      startTime
+      lastTime
+      createdAt
+      updatedAt
+    }
+    count
+    createdAt
+    updatedAt
+  }
+}
+
+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($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, $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 {
+      email
+      updatedAt
+      admin
+      password
+      telephone
+      nickname
+      username
+      createdAt
+      openid
+      id
+    }
+    service_id {
+      id
+      description
+      price
+      startTime
+      lastTime
+      createdAt
+      updatedAt
+    }
+    customerNumber
+  }
+}
+
+mutation deleterepertory($id: ID, $service_id: ID, $count: Int, $createdAt: String, $updatedAt: String) {
+  deleterepertory: delete_repertory(id: $id service_id: $service_id count: $count createdAt: $createdAt updatedAt: $updatedAt)
+}
+
+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 {
+      email
+      updatedAt
+      admin
+      password
+      telephone
+      nickname
+      username
+      createdAt
+      openid
+      id
+    }
+    service_id {
+      id
+      description
+      price
+      startTime
+      lastTime
+      createdAt
+      updatedAt
+    }
+    customerNumber
+  }
+}
+
+mutation deleteserver($id: ID, $name: String, $description: String, $img: String, $createdAt: String, $updatedAt: String) {
+  deleteserver: delete_server(id: $id name: $name description: $description img: $img createdAt: $createdAt updatedAt: $updatedAt)
+}
+
+mutation deleteservice($id: ID, $server_id: ID, $repertory_id: ID, $description: String, $price: Float, $startTime: String, $lastTime: String, $createdAt: String, $updatedAt: String) {
+  deleteservice: delete_service(id: $id server_id: $server_id repertory_id: $repertory_id description: $description price: $price startTime: $startTime lastTime: $lastTime createdAt: $createdAt updatedAt: $updatedAt)
+}
+
+mutation updaterepertory($id: ID, $service_id: ID, $count: Int, $createdAt: String, $updatedAt: String) {
+  updaterepertory: update_repertory(id: $id service_id: $service_id count: $count createdAt: $createdAt updatedAt: $updatedAt) {
+    id
+    service_id {
+      id
+      description
+      price
+      startTime
+      lastTime
+      createdAt
+      updatedAt
+    }
+    count
+    createdAt
+    updatedAt
+  }
+}
+
+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
+  }
+}

src/case/OrderApp/src/index.css

@@ -1,5 +1,5 @@
-.limit {
-  width: 400px;
-  height: 600px;
-  overflow: scroll;
+.app {
+    height: 500px;
+    width: 300px;
+
 }

src/case/OrderApp/src/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+import ApolloClient from "apollo-boost";
+import {ApolloProvider} from "react-apollo";
+
+import {graphqlFC} from "./config";
+
+const client = new ApolloClient({
+    uri: graphqlFC
+});
+
+function OrderApp() {
+    return (
+        <div>
+            <ApolloProvider client={client}>
+                <App/>
+            </ApolloProvider>
+        </div>
+    )
+}
+
+export default OrderApp;
+

src/case/OrderApp/src/page/component/CalendarPick.js

@@ -0,0 +1,80 @@
+import React, {Component} from 'react';
+import {Calendar} from 'antd-mobile';
+import './index.css';
+
+const extra = {
+    '2017/07/15': {info: 'Disable', disable: true},
+};
+
+const now = new Date();
+extra[+new Date(now.getFullYear(), now.getMonth(), now.getDate() + 5)] = {info: 'Disable', disable: true};
+extra[+new Date(now.getFullYear(), now.getMonth(), now.getDate() + 6)] = {info: 'Disable', disable: true};
+extra[+new Date(now.getFullYear(), now.getMonth(), now.getDate() + 7)] = {info: 'Disable', disable: true};
+extra[+new Date(now.getFullYear(), now.getMonth(), now.getDate() + 8)] = {info: 'Disable', disable: true};
+
+Object.keys(extra).forEach((key) => {
+    const info = extra[key];
+    const date = new Date(key);
+    if (!Number.isNaN(+date) && !extra[+date]) {
+        extra[+date] = info;
+    }
+});
+
+class CalendarPick extends Component {
+    originbodyScrollY = document.getElementsByTagName('body')[0].style.overflowY;
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            show: props.show,
+        };
+    }
+
+
+    onSelectHasDisableDate = (dates) => {
+        console.warn('onSelectHasDisableDate', dates);
+    };
+
+    onConfirm = (startTime, endTime) => {
+        document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
+        this.setState({
+            show: false,
+            startTime,
+            endTime,
+        });
+    };
+
+    onCancel = () => {
+        document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
+        this.setState({
+            show: false,
+            startTime: undefined,
+            endTime: undefined,
+        });
+    };
+
+    getDateExtra = date => extra[+date];
+
+    render() {
+        return (
+            <div className={'picker'}>
+                <Calendar
+                    type={'one'}
+                    pickTime={true}
+                    visible={this.state.show}
+                    onCancel={this.onCancel}
+                    onConfirm={this.onConfirm}
+                    onSelectHasDisableDate={this.onSelectHasDisableDate}
+                    getDateExtra={this.getDateExtra}
+                    defaultDate={now}
+                    minDate={new Date(+now - 5184000000)}
+                    maxDate={new Date(+now + 31536000000)}
+                    style={{height: 200}}
+                />
+            </div>
+
+        );
+    }
+}
+
+export default CalendarPick;

src/case/OrderApp/src/page/component/index.css

@@ -0,0 +1,6 @@
+.am-list-item .am-list-line .am-list-content {
+  display: flex;
+}
+.calendar-list .right {
+  float: right;
+}

src/case/OrderApp/src/page/display/Display.js

@@ -0,0 +1,118 @@
+import React, {Component} from 'react';
+import {serverbyprops, servicebyprops} from "../../gql";
+import {ActivityIndicator} from 'antd-mobile';
+import gql from "graphql-tag";
+import {Query} from "react-apollo";
+import Server from './Server';
+import Service from './Service';
+import './index.css'
+
+class Display extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            display: 'server',
+            serverID: ''
+        }
+    }
+
+    pageSwitchToService = (serverID) => {
+        return () => {
+            this.setState({
+                serverID,
+                display: 'service'
+            })
+
+        }
+    };
+
+    pageSwitchToServer = () => {
+        this.setState({
+            display: 'server',
+            serverID: ''
+        })
+    };
+
+
+    render() {
+        let {userID} = this.props;
+        return (
+            <div>
+                {
+                    this.state.display === 'server' ?
+                        <Query query={gql(serverbyprops)} variables={{}}>
+                            {
+                                ({loading, error, data}) => {
+                                    if (loading) {
+                                        return (
+                                            <div className="loading">
+                                                <div className="align">
+                                                    <ActivityIndicator text="Loading..." size="large"/>
+                                                </div>
+                                            </div>
+                                        )
+                                    }
+                                    if (error) {
+                                        return 'error!';
+                                    }
+
+                                    let servers = data.serverbyprops;
+                                    let tip = '';
+                                    if (servers.length === 0) {
+                                        servers = [];
+                                        tip = '还没有服务'
+                                    }
+
+                                    return (
+                                        <Server
+                                            servers={servers}
+                                            tip={tip}
+                                            pageSwitchToService={this.pageSwitchToService}
+                                        />
+                                    )
+                                }
+                            }
+                        </Query>
+                        :
+                        <Query query={gql(servicebyprops)} variables={{server_id: this.state.serverID}}>
+                            {
+                                ({loading, error, data}) => {
+                                    if (loading) {
+                                        return (
+                                            <div className="loading">
+                                                <div className="align">
+                                                    <ActivityIndicator text="Loading..." size="large"/>
+                                                </div>
+                                            </div>
+                                        )
+                                    }
+                                    if (error) {
+                                        return 'error!';
+                                    }
+
+                                    let services = data.servicebyprops;
+                                    let tip = '';
+                                    if (services.length === 0) {
+                                        services = [];
+                                        tip = '本人休息'
+                                    }
+
+                                    return (
+                                        <Service
+                                            services={services}
+                                            tip={tip}
+                                            pageSwitchToServer={this.pageSwitchToServer}
+                                            userID={userID}
+                                        />
+                                    )
+                                }
+                            }
+                        </Query>
+                }
+            </div>
+
+        );
+    }
+}
+
+export default Display;

src/case/OrderApp/src/page/display/Ordering.js

@@ -0,0 +1,434 @@
+import React, {Component} from 'react';
+import {
+    createorderAndupdaterepertory,
+    orderbyprops,
+    repertorybyid,
+    updateuser,
+    userbyid,
+    createorderAndupdaterepertoryAndupdateuser
+} from "../../gql";
+import gql from "graphql-tag";
+import {Query, Mutation} from "react-apollo";
+import {InputItem, Toast, List, Button, Stepper, Icon, NavBar, Switch, ActivityIndicator} 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 (
+                                    <div className="loading">
+                                        <div className="align">
+                                            <ActivityIndicator text="Loading..." size="large"/>
+                                        </div>
+                                    </div>
+                                )
+                            }
+                            if (error) {
+                                return 'error!';
+                            }
+
+                            let user = data.userbyid;
+                            let tip = '';
+                            if (user === null) {
+                                tip = '还没登录，出现了错误'
+                            }
+
+                            return (
+                                <div>
+                                    {
+                                        tip ?
+                                            <div className={'center'}>{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}
+                            remark={remark}
+                            people={people}
+                            donotShowOrdering={donotShowOrdering}
+                        />
+                        :
+                        <SaveAndOrderButton
+                            userID={userID}
+                            repertoryID={repertoryID}
+                            serviceID={serviceID}
+                            telephone={phone}
+                            name={name}
+                            remark={remark}
+                            people={people}
+                            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, remark, people} = this.props;
+        return (
+            <Query query={gql(repertorybyid)} variables={{id: repertoryID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return (
+                                <div className="loading">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            )
+                        }
+                        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 (
+                                                <div className="loading">
+                                                    <div className="align">
+                                                        <ActivityIndicator text="Loading..." size="large"/>
+                                                    </div>
+                                                </div>
+                                            );
+                                        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 (
+                                                <div className="loading">
+                                                    <div className="align">
+                                                        <ActivityIndicator text="Loading..." size="large"/>
+                                                    </div>
+                                                </div>
+                                            );
+                                        if (error)
+                                            return 'error';
+                                        let varObj = {
+                                            user_id: userID,
+                                            service_id: serviceID,
+                                            repertory_id: repertoryID,
+                                            order_id: idGen('order'),
+                                            payStatus: '',
+                                            remark,
+                                            payCount: '',
+                                            payTime: '',
+                                            customerNumber: people,
+                                            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, remark, people} = this.props;
+        return (
+            <Query query={gql(repertorybyid)} variables={{id: repertoryID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return (
+                                <div className="loading">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            )
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+                        let count = data.repertorybyid.count;
+                        if (count <= 0) {
+                            return (
+                                <div className={'center'}>名额已满</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 (
+                                                <div className="loading">
+                                                    <div className="align">
+                                                        <ActivityIndicator text="Loading..." size="large"/>
+                                                    </div>
+                                                </div>
+                                            );
+                                        if (error)
+                                            return 'error';
+                                        let varObj = {
+                                            user_id: userID,
+                                            service_id: serviceID,
+                                            repertory_id: repertoryID,
+                                            order_id: idGen('order'),
+                                            payStatus: '',
+                                            remark,
+                                            payCount: '',
+                                            payTime: '',
+                                            customerNumber: people,
+                                            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();
+                                            }} style={{margin: '5px 10px'}}>预约</Button>
+                                        )
+                                    }}
+                                </Mutation>
+                            )
+                        }
+
+                    }
+                }
+            </Query>
+        )
+    }
+}

src/case/OrderApp/src/page/display/Server.js

@@ -0,0 +1,88 @@
+import React, {Component} from 'react';
+import {Card, WhiteSpace, Button, Carousel, WingBlank, Flex} from 'antd-mobile';
+
+class Server extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
+            imgHeight: 176,
+        }
+    }
+
+    render() {
+        let {tip, servers} = this.props;
+        return (
+            <div>
+                <WingBlank>
+                    <Carousel
+                        autoplay={true}
+                        infinite
+                    >
+                        {this.state.data.map(val => (
+                            <a
+                                key={val}
+                                href="http://www.alipay.com"
+                                style={{display: 'inline-block', width: '100%', height: this.state.imgHeight}}
+                            >
+                                <img
+                                    src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
+                                    alt=""
+                                    style={{width: '100%', verticalAlign: 'top'}}
+                                    onLoad={() => {
+                                        window.dispatchEvent(new Event('resize'));
+                                        this.setState({imgHeight: 'auto'});
+                                    }}
+                                />
+                            </a>
+                        ))}
+                    </Carousel>
+                </WingBlank>
+
+
+                {
+                    tip ?
+                        <div className={'center'}>{tip}</div>
+                        :
+                        ''
+                }
+
+                {
+                    servers.map((server) => {
+                        return (
+                            <div key={server.id}>
+                                <WingBlank size="lg">
+                                    <WhiteSpace size="lg"/>
+                                    <Card className={'card'}>
+                                        <Card.Body>
+                                            <div>
+                                                <Flex>
+                                                    <Flex.Item>
+                                                        <div className={'avatar'}
+                                                             style={{backgroundImage: `url(${server.img})`}}>1
+                                                        </div>
+                                                    </Flex.Item>
+                                                    <Flex.Item>
+                                                        <div className={'server-name'}>{server.name}</div>
+                                                        <div className={'server-description'}>{server.description}</div>
+                                                    </Flex.Item>
+                                                    <Flex.Item>
+                                                        <Button type='ghost' size='small'
+                                                                onClick={this.props.pageSwitchToService(server.id)}>选我</Button>
+                                                    </Flex.Item>
+                                                </Flex>
+                                            </div>
+                                        </Card.Body>
+                                    </Card>
+                                </WingBlank>
+                            </div>
+                        )
+                    })
+                }
+
+            </div>
+        );
+    }
+}
+
+export default Server;

src/case/OrderApp/src/page/display/Service.js

@@ -0,0 +1,120 @@
+import React, {Component} from 'react';
+import {NavBar, Icon, WhiteSpace, Card, Button, WingBlank} from 'antd-mobile';
+import CalendarPick from '../component/CalendarPick';
+import moment from 'moment';
+import 'moment/locale/zh-cn'
+import Ordering from './Ordering';
+import { Row, Col } from 'antd';
+
+moment.locale('zh-cn');
+
+class Service extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            pick: false,
+            ordering: false,
+            serviceID: '',
+            repertoryID: ''
+        }
+    }
+
+    donotShowOrdering = () => {
+        this.setState({
+            ordering: false
+        })
+    };
+
+    render() {
+        let {pageSwitchToServer, tip, services, userID} = this.props;
+        let {serviceID, repertoryID} = this.state;
+        return (
+            <div>
+                {
+                    this.state.ordering ?
+                        ''
+                        :
+                        <NavBar
+                            mode="light"
+                            icon={<Icon type="left"/>}
+                            onLeftClick={pageSwitchToServer}
+                            // rightContent={[
+                            //     <Icon key="1" type="search" onClick={() => {
+                            //         this.setState({pick: true})
+                            //     }}/>,
+                            // ]}
+                        >服务详情</NavBar>
+                }
+
+                <div>
+
+                    {
+                        this.state.pick ?
+                            <CalendarPick show={true}/>
+                            :
+                            this.state.ordering ?
+                                <Ordering
+                                    donotShowOrdering={this.donotShowOrdering}
+                                    serviceID={serviceID}
+                                    repertoryID={repertoryID}
+                                    userID={userID}
+                                />
+                                :
+                                <div>
+
+                                    {
+                                        tip ?
+                                            <div className={'center'}>{tip}</div>
+                                            :
+                                            ''
+                                    }
+
+                                    {
+                                        services.map(service => {
+                                            return (
+                                                <div key={service.id}>
+                                                    <WingBlank size="lg">
+                                                        <WhiteSpace size="lg"/>
+                                                        <Card full className={'card'}>
+                                                            <Card.Body>
+                                                                <div>
+                                                                    <Row>
+                                                                        <Col span={15}>
+                                                                            <div className={'service-description'}>{service.description}</div>
+                                                                            <div className={'service-time'}>开始: {moment(Number(service.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                                                            {/*<div className={'service-time'}>工作时长: {moment.duration(Number(service.lastTime), "milliseconds").humanize()}</div>*/}
+                                                                            <div className={'service-time'}>工作时长: {Math.floor(Number(service.lastTime)/3600000)}小时 {Math.floor((Number(service.lastTime)%3600000)/60000)} 分钟</div>
+                                                                        </Col>
+                                                                        <Col span={5}>
+                                                                            <div className={'service-price'}>{service.price}</div>
+                                                                            <div className={'service-count'}>剩余 {service.repertory_id.count}</div>
+                                                                        </Col>
+                                                                        <Col span={4}>
+                                                                            <Button inline size="small" type='primary' onClick={() => {
+                                                                                this.setState({
+                                                                                    ordering: true,
+                                                                                    serviceID: service.id,
+                                                                                    repertoryID: service.repertory_id.id
+                                                                                })
+                                                                            }}>预约</Button>
+                                                                        </Col>
+                                                                    </Row>
+                                                                </div>
+                                                            </Card.Body>
+                                                        </Card>
+                                                    </WingBlank>
+                                                </div>
+                                            )
+                                        })
+                                    }
+                                </div>
+                    }
+                </div>
+            </div>
+
+        );
+    }
+}
+
+
+export default Service;

src/case/OrderApp/src/page/display/index.css

@@ -0,0 +1,65 @@
+.avatar {
+  width: 70px;
+  height: 70px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  border-radius: 50%;
+  border: 3px solid #eee;
+  overflow: hidden
+}
+
+.server-name, .service-description, .order-name {
+  color: black;
+  font-size: larger;
+  font-weight: bold;
+}
+
+.server-description {
+  color: #999999;
+  font-size: smaller;
+}
+
+.card {
+  border: none;
+  border-radius: 4px;
+  box-shadow: 1px 2px 1px 0 #eee;
+}
+
+.service-price, .order-price {
+  color: indianred;
+  font-size: large;
+  font-weight: bold;
+}
+
+.service-price:before, .order-price:before {
+  content: "￥";
+  color: indianred;
+  font-size: small;
+}
+
+.service-time, .order-time {
+  color: dimgrey;
+  font-size: small;
+  font-weight: lighter;
+}
+
+.loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.center-fix {
+  display: -webkit-flex;
+  -webkit-justify-content: center;
+  -webkit-align-items: center;
+  margin-top: 20px;
+}

src/case/OrderApp/src/page/home/Cancelled.js

@@ -0,0 +1,196 @@
+import React, {Component} from 'react';
+import {orderbyprops, updateorder} from "../../gql";
+// import {deleteorder} from "../../gql";
+import gql from "graphql-tag";
+import {Query, Mutation} from "react-apollo";
+import {Card, WhiteSpace, Button, ActivityIndicator, WingBlank} from 'antd-mobile';
+import moment from 'moment';
+import 'moment/locale/zh-cn'
+import {Row, Col} from 'antd';
+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 (
+                                <div className="loading">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            )
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+
+                        let orders = data.orderbyprops;
+                        let tip = '';
+                        if (orders.length === 0) {
+                            orders = [];
+                            tip = '还没有取消的订单'
+                        }
+
+                        return (
+                            <CancelledRender
+                                orders={orders}
+                                tip={tip}
+                                userID={userID}
+                            />
+                        )
+                    }
+                }
+            </Query>
+        );
+    }
+}
+
+export default Cancelled;
+
+class CancelledRender extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {}
+    }
+
+    render() {
+        let {orders, tip, userID} = this.props;
+        return (
+            <div>
+                {
+                    tip ?
+                        <div className={'center-fix'}>{tip}</div>
+                        :
+                        ''
+                }
+
+                {
+                    orders.map((order) => {
+                        return (
+                            <div key={order.id}>
+                                <WingBlank size="lg">
+                                    <WhiteSpace size="lg"/>
+                                    <Card className={'card'}>
+                                        <Card.Body>
+
+                                            <div>
+                                                <Row>
+                                                    <Col span={14}>
+                                                        <div className={'order-name'}>{order.service_id.server_id.name}</div>
+                                                    </Col>
+                                                    <Col span={6}>
+                                                        <div className={'order-remark'}>留言: {order.remark?order.remark:'无'}</div>
+                                                    </Col>
+                                                    <Col span={4}>
+                                                        {/*<DeleteButton1*/}
+                                                        {/*orderID={order.id}*/}
+                                                        {/*userID={userID}*/}
+                                                        {/*/>*/}
+                                                        <DeleteButton2
+                                                            orderID={order.id}
+                                                            userID={userID}
+                                                        />
+                                                    </Col>
+                                                </Row>
+                                                <Row>
+                                                    <div className={'order-time'}>预约于: {moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                                    <div className={'order-time'}>取消于: {moment(Number(order.updatedAt)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                                </Row>
+                                            </div>
+
+                                        </Card.Body>
+                                    </Card>
+                                </WingBlank>
+                            </div>
+                        )
+                    })
+                }
+            </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 inline size={'small'} 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 (
+                            <div className="loading">
+                                <div className="align">
+                                    <ActivityIndicator text="Loading..." size="large"/>
+                                </div>
+                            </div>
+                        );
+                    if (error)
+                        return 'error';
+                    let varObj = {
+                        id: orderID,
+                        user_id: userID,
+                        orderStatus: 'deleted',
+                        updatedAt: new Date().getTime()
+                    };
+                    return (
+                        <Button type='warning' inline size={'small'} onClick={() => {
+                            updateorder({variables: varObj})
+                        }}>删除</Button>
+                    )
+                }}
+            </Mutation>
+
+        )
+    }
+}

src/case/OrderApp/src/page/home/My.js

@@ -0,0 +1,50 @@
+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 = {
+        }
+    }
+
+    render() {
+        let {userID} = this.props;
+        return (
+            <div>
+                <div>
+                    <WhiteSpace/>
+                    <StickyContainer>
+                        <Tabs tabs={tabs}
+                              initalPage={'t2'}
+                              renderTabBar={renderTabBar}
+                        >
+                            <Ordered userID={userID}/>
+                            <Cancelled userID={userID}/>
+                            <User userID={userID}/>
+                        </Tabs>
+                    </StickyContainer>
+                    <WhiteSpace/>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default My;

src/case/OrderApp/src/page/home/Ordered.js

@@ -0,0 +1,180 @@
+import React, {Component} from 'react';
+import {orderbyprops, repertorybyid, updateorderAndupdaterepertory} from "../../gql";
+import gql from "graphql-tag";
+import {Query, Mutation} from "react-apollo";
+import {Card, WhiteSpace, Button, ActivityIndicator, WingBlank} from 'antd-mobile';
+import {Row, Col} from 'antd';
+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 (
+                                <div className="loading">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            )
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+
+                        let orders = data.orderbyprops;
+                        let tip = '';
+                        if (orders.length === 0) {
+                            orders = [];
+                            tip = '还没有订单'
+                        }
+
+                        return (
+                            <OrderedRender
+                                orders={orders}
+                                tip={tip}
+                                userID={userID}
+                            />
+                        )
+                    }
+                }
+            </Query>
+        );
+    }
+}
+
+export default Ordered;
+
+class OrderedRender extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {}
+    }
+
+    render() {
+        let {orders, tip, userID} = this.props;
+        return (
+            <div>
+                {
+                    tip ?
+                        <div className={'center-fix'}>{tip}</div>
+                        :
+                        ''
+                }
+
+                {
+                    orders.map((order) => {
+                        return (
+                            <div key={order.id}>
+                                <WingBlank size="lg">
+                                    <WhiteSpace size="lg"/>
+                                    <Card className={'card'}>
+                                        <Card.Body>
+                                            <div>
+                                                <Row>
+                                                    <Col span={14}>
+                                                        <div className={'order-name'}>{order.service_id.server_id.name}</div>
+                                                        <div className={'order-price'}>{order.service_id.price}</div>
+                                                        <div className={'order-time'}>{moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                                    </Col>
+                                                    <Col span={6}>
+                                                        <div className={'order-people'}>{order.customerNumber}人</div>
+                                                        <div className={'order-remark'}>留言: {order.remark?order.remark:'无'}</div>
+                                                    </Col>
+                                                    <Col span={4}>
+                                                        <CancelButton
+                                                            repertoryID={order.service_id.repertory_id.id}
+                                                            orderID={order.id}
+                                                            userID={userID}
+                                                        />
+                                                    </Col>
+                                                </Row>
+                                            </div>
+                                        </Card.Body>
+                                    </Card>
+                                </WingBlank>
+                            </div>
+                        )
+                    })
+                }
+            </div>
+        )
+    }
+}
+
+class CancelButton extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {}
+    }
+
+    render() {
+        let {repertoryID, orderID, userID} = this.props;
+        return (
+            <Query query={gql(repertorybyid)} variables={{id: repertoryID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return (
+                                <div className="loading">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            )
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+                        let count = data.repertorybyid.count;
+                        return (
+                            <Mutation
+                                mutation={gql(updateorderAndupdaterepertory)}
+                                refetchQueries={[
+                                    {query: gql(orderbyprops), variables: {user_id: userID, orderStatus: 'success'}},
+                                    {query: gql(orderbyprops), variables: {user_id: userID, orderStatus: 'cancelled'}},
+                                    {query: gql(orderbyprops), variables: {orderStatus: 'success'}},
+                                    {query: gql(orderbyprops), variables: {orderStatus: 'cancelled'}},
+                                    {query: gql(orderbyprops), variables: {}}
+                                ]}
+                            >
+                                {(updateBothTwo, {loading, error}) => {
+                                    if (loading)
+                                        return (
+                                            <div className="loading">
+                                                <div className="align">
+                                                    <ActivityIndicator text="Loading..." size="large"/>
+                                                </div>
+                                            </div>
+                                        );
+                                    if (error)
+                                        return 'error';
+                                    let varObj = {
+                                        order_id: orderID,
+                                        repertory_id: repertoryID,
+                                        updatedAt: new Date().getTime(),
+                                        orderStatus: 'cancelled',
+                                        count: count + 1
+                                    };
+                                    return (
+                                        <Button type='warning' inline size={'small'} onClick={() => {
+                                            updateBothTwo({variables: varObj})
+                                        }}>取消</Button>
+                                    )
+                                }}
+                            </Mutation>
+                        )
+                    }
+                }
+            </Query>
+
+        )
+    }
+}

src/case/OrderApp/src/page/home/User.js

@@ -0,0 +1,160 @@
+import React, {Component} from 'react';
+import {userbyid, updateuser} from "../../gql";
+import gql from "graphql-tag";
+import {Query, Mutation} from "react-apollo";
+import {InputItem, Toast, List, Button, ActivityIndicator} 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 (
+                                <div className="loading">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            )
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+
+                        let user = data.userbyid;
+                        let tip = '';
+                        if (user === null) {
+                            tip = '还没登录，出现了错误'
+                        }
+
+                        return (
+                            <div>
+                                {
+                                    tip ?
+                                        <div className={'center'}>{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.nickname
+        };
+    }
+
+    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>
+                <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>
+        );
+    }
+}
+
+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 (
+                            <div className="loading">
+                                <div className="align">
+                                    <ActivityIndicator text="Loading..." size="large"/>
+                                </div>
+                            </div>
+                        );
+                    if (error)
+                        return 'error';
+                    return (
+                        <Button type={'primary'} style={{margin: '5px 10px'}} onClick={()=>{
+                            updateuser({
+                                variables: {
+                                    id: userID,
+                                    telephone,
+                                    nickname:name,
+                                    updatedAt: new Date().getTime()
+                                }
+                            })
+                        }}>保存</Button>
+                    )
+                }}
+            </Mutation>
+        )
+    }
+}

src/case/OrderApp/src/page/home/index.css

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

src/case/OrderApp/src/page/manage/AllOrder.js

@@ -0,0 +1,178 @@
+import React, {Component} from 'react';
+import './index.css';
+import {createForm} from 'rc-form';
+import {NoticeBar, Picker} from 'antd-mobile';
+import gql from "graphql-tag";
+import {Query} from "react-apollo";
+import {adminorderbyprops} from "../../gql";
+import {Card, WhiteSpace, ActivityIndicator, WingBlank} from 'antd-mobile';
+import moment from 'moment';
+import 'moment/locale/zh-cn'
+import {Row, Col} from 'antd';
+
+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 (
+                                <div className="loading">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            )
+                        }
+                        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 className={'center'}>{tip}</div>
+                        :
+                        ''
+                }
+
+                {
+                    orders.map((order) => {
+                        return (
+                            <div key={order.id}>
+                                <WingBlank size="lg">
+                                    <WhiteSpace size="lg"/>
+                                    <Card className={'card'}>
+                                        <Card.Body>
+                                            <div>
+                                                <Row>
+                                                    <Col span={20}>
+                                                        <div className={'order-name'}>{order.service_id.server_id.name}</div>
+                                                    </Col>
+                                                    <Col span={4}>
+                                                        <div className={'order-price'}>{order.service_id.price}</div>
+                                                    </Col>
+                                                </Row>
+                                                    <div>人数: {order.customerNumber}</div>
+                                                    <div className={'order-remark'}>留言: {order.remark ? order.remark : '无'}</div>
+                                                    <div>预约人: {order.contactName}</div>
+                                                    <div>联系方式: {order.contactTelephone}</div>
+                                                    <div>预约账号: {order.user_id.username}</div>
+                                                    <div className={'order-time'}>预约时间: {moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                                    <div className={'order-time'}>下单时间: {moment(Number(order.createdAt)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                            </div>
+                                        </Card.Body>
+                                    </Card>
+                                </WingBlank>
+                            </div>
+                        )
+                    })
+                }
+            </div>
+        )
+    }
+}
+
+
+export default createForm()(AllOrder);

src/case/OrderApp/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);
+        this.state = {
+
+        }
+    }
+
+    render() {
+        let {userID} = this.props;
+        return (
+            <div>
+                <div>
+                    <WhiteSpace/>
+                    <StickyContainer>
+                        <Tabs tabs={tabs}
+                              initalPage={'t2'}
+                              renderTabBar={renderTabBar}
+                        >
+                            <AllOrder userID={userID}/>
+                            <Release userID={userID}/>
+                        </Tabs>
+                    </StickyContainer>
+                    <WhiteSpace/>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Manage;

src/case/OrderApp/src/page/manage/Release.js

@@ -0,0 +1,628 @@
+import React, {Component} from 'react';
+import './index.css';
+import {NoticeBar, List, InputItem, ImagePicker, Button, Stepper, DatePicker, ActivityIndicator} from 'antd-mobile';
+import {Query, Mutation} from "react-apollo";
+import gql from "graphql-tag";
+import {
+    servicebyid,
+    serverbyprops,
+    servicebyprops,
+    createserver,
+    updateserviceAndupdaterepertory,
+    createserviceAndcreaterepertory,
+    deleteserviceAnddeleterepertory
+} from "../../gql";
+import {idGen} from "../../func";
+
+const Item = List.Item;
+const nowTimeStamp = Date.now();
+const now = new Date(nowTimeStamp);
+
+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 (
+                                    <div className="loading">
+                                        <div className="align">
+                                            <ActivityIndicator text="Loading..." size="large"/>
+                                        </div>
+                                    </div>
+                                );
+                            }
+                            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: ''
+        }
+    }
+
+    componentWillReceiveProps() {
+        this.setState({
+            serviceID: ''
+        });
+    }
+
+    donotShowDetail = () => {
+        this.setState({
+            serviceID: ''
+        });
+    };
+
+    render() {
+        let {serverID} = this.props;
+        return (
+            <Query query={gql(servicebyprops)} variables={{server_id: serverID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return (
+                                <div className="center-fix">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            );
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+                        return (
+                            <div>
+                                <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>
+
+                                {
+                                    this.state.serviceID ?
+                                        <ServiceDetail
+                                            serviceID={this.state.serviceID}
+                                            serverID={serverID}
+                                            donotShowDetail={this.donotShowDetail}
+                                        />
+                                        :
+                                        ''
+                                }
+                            </div>
+
+
+                        )
+                    }
+                }
+            </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>
+                    <SubmitServerButton
+                        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 SubmitServerButton 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 (
+                            <div className="loading">
+                                <div className="align">
+                                    <ActivityIndicator text="Loading..." size="large"/>
+                                </div>
+                            </div>
+                        );
+                    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>
+        )
+    }
+}
+
+class ServiceDetail extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {}
+    }
+
+
+    render() {
+        let {serviceID, serverID, donotShowDetail} = this.props;
+        return (
+            <Query query={gql(servicebyid)} variables={{id: serviceID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return (
+                                <div className="center-fix">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            );
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+                        let service = data.servicebyid;
+
+                        let description = '',
+                            startTime = '',
+                            lastTime = '',
+                            price = '',
+                            repertory = 1,
+                            repertoryID = '';
+
+                        if (service !== null) {
+                            description = service.description;
+                            startTime = service.startTime;
+                            lastTime = service.lastTime;
+                            price = service.price;
+                            repertory = service.repertory_id.count;
+                            repertoryID = service.repertory_id.id;
+                        }
+
+                        return (
+                            <ServiceDetailRender
+                                serverID={serverID}
+                                serviceID={serviceID}
+                                description={description}
+                                startTime={startTime}
+                                lastTime={lastTime}
+                                price={price}
+                                repertory={repertory}
+                                repertoryID={repertoryID}
+                                donotShowDetail={donotShowDetail}
+                            />
+                        )
+                    }
+                }
+            </Query>
+        )
+    }
+}
+
+class ServiceDetailRender extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            serverID: props.serverID,
+            serviceID: props.serviceID,
+            repertoryID: props.repertoryID,
+            description: props.description,
+            lastTime: props.lastTime,
+            startTime: props.startTime,
+            price: props.price,
+            repertory: props.repertory,
+            showCalendar: false,
+            date: props.startTime ? new Date(Number(props.startTime)) : now,
+            endDate: props.startTime ? new Date(Number(props.startTime) + Number(props.lastTime)) : now,
+        }
+    }
+
+    componentWillReceiveProps(next) {
+        this.setState({
+            serverID: next.serverID,
+            serviceID: next.serviceID,
+            repertoryID: next.repertoryID,
+            description: next.description,
+            lastTime: next.lastTime,
+            startTime: next.startTime,
+            price: next.price,
+            repertory: next.repertory
+        })
+    }
+
+    onReset = () => {
+        this.setState({
+            startTime: '',
+            lastTime: '',
+            description: '',
+            price: '',
+            repertory: 1
+        })
+    };
+
+    render() {
+        let {serverID, serviceID, repertoryID, description, price, repertory, date, endDate} = this.state;
+        let {donotShowDetail} = this.props;
+        return (
+            <div>
+                <List renderHeader={() => '请输入服务项信息'}>
+                    <InputItem onChange={(e) => {
+                        this.setState({description: e})
+                    }} value={description} placeholder="请输入服务类型">服务类型</InputItem>
+                    <InputItem onChange={(e) => {
+                        this.setState({price: e})
+                    }} value={price} placeholder="请输入价格">价格</InputItem>
+                    <Item
+                        wrap
+                        extra={
+                            <Stepper
+                                style={{width: '100%', minWidth: '100px'}}
+                                showNumber
+                                min={0}
+                                value={repertory}
+                                onChange={(e) => {
+                                    this.setState({repertory: e})
+                                }}
+                            />}
+                    >
+                        库存
+                    </Item>
+                    <DatePicker
+                        value={this.state.date}
+                        onChange={date => this.setState({date})}
+                    >
+                        <List.Item arrow="horizontal">选择开放时间</List.Item>
+                    </DatePicker>
+                    <DatePicker
+                        value={this.state.endDate}
+                        onChange={endDate => this.setState({endDate})}
+                    >
+                        <List.Item arrow="horizontal">选择结束时间</List.Item>
+                    </DatePicker>
+                    <Item>
+                        {
+                            serviceID === 'add' ?
+                                <SubmitServiceCreateButton
+                                    serverID={serverID}
+                                    count={repertory}
+                                    description={description}
+                                    price={price}
+                                    startTime={date.getTime()}
+                                    lastTime={endDate.getTime() - date.getTime()}
+                                />
+                                :
+                                <SubmitServiceUpdateButton
+                                    serverID={serverID}
+                                    serviceID={serviceID}
+                                    repertoryID={repertoryID}
+                                    count={repertory}
+                                    description={description}
+                                    price={price}
+                                    startTime={date.getTime()}
+                                    lastTime={endDate.getTime() - date.getTime()}
+                                />
+                        }
+                        <Button size="small" inline style={{marginLeft: '2.5px'}} onClick={this.onReset}>重置</Button>
+                        {
+                            serviceID === 'add' ?
+                                ''
+                                :
+                                <SubmitServiceDeleteButton
+                                    serverID={serverID}
+                                    serviceID={serviceID}
+                                    repertoryID={repertoryID}
+                                    donotShowDetail={donotShowDetail}
+                                />
+                        }
+                    </Item>
+                </List>
+            </div>
+
+        )
+    }
+}
+
+class SubmitServiceUpdateButton extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {}
+    }
+
+    render() {
+        let {serverID, serviceID, description, startTime, lastTime, price, count, repertoryID} = this.props;
+        return (
+            <Mutation
+                mutation={gql(updateserviceAndupdaterepertory)}
+                refetchQueries={[
+                    {query: gql(servicebyprops), variables: {server_id: serverID}}
+                ]}
+            >
+                {(updateBothTwo, {loading, error}) => {
+                    if (loading)
+                        return (
+                            <div className="loading">
+                                <div className="align">
+                                    <ActivityIndicator text="Loading..." size="large"/>
+                                </div>
+                            </div>
+                        );
+                    if (error)
+                        return 'error';
+                    let varObj = {
+                        server_id: serverID,
+                        service_id: serviceID,
+                        repertory_id: repertoryID,
+                        description,
+                        startTime,
+                        lastTime,
+                        price,
+                        count,
+                        updatedAt: new Date().getTime()
+                    };
+                    return (
+                        <Button type="primary" size="small" inline onClick={() => {
+                            updateBothTwo({variables: varObj})
+                        }}>修改</Button>
+                    )
+                }}
+            </Mutation>
+        )
+    }
+}
+
+class SubmitServiceCreateButton extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {}
+    }
+
+    render() {
+        let {serverID, description, startTime, lastTime, price, count} = this.props;
+        return (
+            <Mutation
+                mutation={gql(createserviceAndcreaterepertory)}
+                refetchQueries={[
+                    {query: gql(servicebyprops), variables: {server_id: serverID}}
+                ]}
+            >
+                {(createBothTwo, {loading, error}) => {
+                    if (loading)
+                        return (
+                            <div className="loading">
+                                <div className="align">
+                                    <ActivityIndicator text="Loading..." size="large"/>
+                                </div>
+                            </div>
+                        );
+                    if (error)
+                        return 'error';
+                    let varObj = {
+                        server_id: serverID,
+                        service_id: idGen('service'),
+                        repertory_id: idGen('repertory'),
+                        description,
+                        startTime,
+                        lastTime,
+                        price,
+                        count,
+                        createdAt: new Date().getTime(),
+                        updatedAt: ''
+                    };
+                    return (
+                        <Button type="primary" size="small" inline onClick={() => {
+                            createBothTwo({variables: varObj})
+                        }}>创建</Button>
+                    )
+                }}
+            </Mutation>
+        )
+    }
+}
+
+class SubmitServiceDeleteButton extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    }
+
+    render() {
+        let {serverID, serviceID, repertoryID, donotShowDetail} = this.props;
+        return (
+            <Mutation
+                mutation={gql(deleteserviceAnddeleterepertory)}
+                refetchQueries={[
+                    {query: gql(servicebyprops), variables: {server_id: serverID}}
+                ]}
+            >
+                {(deleteBothTwo, {loading, error}) => {
+                    if (loading)
+                        return (
+                            <div className="loading">
+                                <div className="align">
+                                    <ActivityIndicator text="Loading..." size="large"/>
+                                </div>
+                            </div>
+                        );
+                    if (error)
+                        return 'error';
+                    let varObj = {
+                        service_id: serviceID,
+                        repertory_id: repertoryID
+                    };
+                    return (
+                        <Button size="small" type="warning" inline style={{marginLeft: '10px'}} onClick={()=>{
+                            deleteBothTwo({variables: varObj});
+                            donotShowDetail();
+                        }}>删除</Button>
+                    )
+                }}
+            </Mutation>
+
+        )
+    }
+}
+
+export default Release;
+

src/case/ShopApp/src/api/url_config.js

@@ -1,6 +1,6 @@
 var config={
     USER_ID:"ovtkn4zONC3IzhpykQ7cSLZ85YFg",
-    HTTP_DATA_URL:'http://123.207.170.36:5000/graphql',  //  电商fc  http://ec.ioobot.cn/graphql
+    HTTP_DATA_URL:'http://ecommerce.ioobot.cn/graphql',  //  电商fc  http://ec.ioobot.cn/graphql
     HTTP_PAY_URL:'https://xcx.ioobot.com/payinfo'
 }