Merge branch 'master' of http://gogs.ioobot.com:6680/xy/online

src/case/ShopApp/src/App.css

@@ -39,6 +39,13 @@ p.p1,p.p2,p.p3{
     background: #ffffff;
     /*border: 2px solid red;*/
     height: 100%;
+    overflow: auto
+}
+
+
+.indexPage{
+    position: relative;
+    z-index: 4;
 }
 
 

src/case/ShopApp/src/App.js

@@ -1,6 +1,9 @@
 import React, { Component } from 'react';
 import './App.css';
 // import 'antd-mobile/dist/antd-mobile.css';
+import HomePage from './components/HomePage/HomePage'
+import ShopCar from './components/ShopCarPage/shopCar'
+import UserPage from './components/UserPage/userPage'
 import {PageContext,NumContext} from './context/context'
 import NavBars from './components/App/NavBar'
 import TabBarBottom from './components/App/TabBarBottom'
@@ -8,37 +11,63 @@ import ProductDetail from './components/ProductDetailPage/ProductDetail'
 import OrderPage from './components/OrderPage/OrederPage'
 
 import {graphqls} from './api/graphql_request'
-import {getProductById} from './api/graphql/product'
+import {getProductById,getProductByProps} from './api/graphql/product'
+import axious from './api/axious_request'
+axious()
 
 class ShopApp extends Component {
   //showComponent
   constructor(props){
     super(props)
     this.state={
-      page:'',
+      page:'index',
       product_id:'',
       num:1
     }
+    this.changePage=this.changePage.bind(this)
   }
 
   componentWillMount(){
     sessionStorage.setItem("openid","ovtkn4zONC3IzhpykQ7cSLZ85YFg")
+    this.getGoods()
+  }
+
+  getGoods(variables={}){
+    return graphqls(getProductByProps,variables).then((data)=>{
+    console.log("data",data)
+    let products=data.productbyprops||[]
+    sessionStorage.setItem("products",JSON.stringify(products))
+    })
   }
 
   setNum(num){
+    console.log('num',num)
     this.setState({num})
   }
 
   getProductByIds(){
     return graphqls(getProductById,{id:this.state.product_id}).then(e=>e)
   }
-  
+
+
+  changePage(page,product_id){
+    console.log("onAppPage",page)
+    
+    if(product_id){
+      this.setState({page,product_id})
+    }else{
+      this.setState({page})
+      console.log('state.page',this.state.page)
+    }
+  }
+
+
   renderPage(page=""){
     const setNum=this.setNum.bind(this)
     if(page==='detail'){
       return(
         <div className="pageWrap">
-          <ProductDetail product_id={this.state.product_id} setNum={setNum}/>
+          <ProductDetail product_id={this.state.product_id} setNum={setNum} />
         </div>
         )
     }else if(page==='order'){
@@ -46,17 +75,44 @@ class ShopApp extends Component {
         <div className="pageWrap">
         <OrderPage product={this.getProductByIds()} num={this.state.num}/>
         </div>)
-    }else{
-      return(<div><TabBarBottom/></div>)
+    }else if(page==='index'){
+      console.log('index 渲染了')
+      return(
+        <div>
+          <div className="pageWrap indexPage">
+            <HomePage changePage={this.changePage}/>
+          </div>
+          <TabBarBottom changePage={this.changePage}/>
+        </div>
+        )
     }
-  }
+    else if(page==='shopCar'){
+      console.log('shopCar 渲染了')
+      return(
+        <div>
+          <div className="pageWrap">
+            <ShopCar />
+          </div>
+          <TabBarBottom changePage={this.changePage}/>
+        </div>
+        )
+    }else if(page==='user'){
+      console.log('user 渲染了')
+      return(
+        <div>
+          <div className="pageWrap">
+          <UserPage />
+          </div>
+          <TabBarBottom changePage={this.changePage}/>
+        </div>
+        )
+    }else{
 
-  changePage(page='',product_id=this.state.product_id){
-    this.setState({page,product_id})
+    }
   }
 
   render() {
-    const changePage=this.changePage.bind(this)
+    const changePage=this.changePage
     return (
       <PageContext.Provider value={changePage}>
           <div className="AppWrap">

src/case/ShopApp/src/api/axious_request.js

@@ -0,0 +1,7 @@
+const axios = require('axios');
+
+const axious=()=>{
+    console.log("axios",axios)
+}
+
+export default axious

src/case/ShopApp/src/components/App/NavBar.jsx

@@ -14,7 +14,7 @@ export default class NavBars extends Component{
                             <NavBar
                             mode="dark"
                             icon={<Icon type="left" />}
-                            onLeftClick={() => changePage('','')}
+                            onLeftClick={() => changePage('index','')}
                             rightContent={[
                                 <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                                 <Icon key="1" type="ellipsis" />,

src/case/ShopApp/src/components/App/TabBarBottom.jsx

@@ -3,13 +3,6 @@ import { TabBar } from 'antd-mobile';
 import './TabBarBottom.css'
 
 
-import HomePage from '../HomePage/HomePage'
-import ShopCar from '../ShopCarPage/shopCar'
-import UserPage from '../UserPage/userPage'
-
-
-
-
 class TabBarBottom extends Component {
   constructor(props) {
     super(props);
@@ -18,35 +11,15 @@ class TabBarBottom extends Component {
       hidden: false,
       fullScreen: true,
     };
+    this.handleChnage=this.handleChnage.bind(this)
   }
-  
-
   renderContent(page) { 
-    if(page==='index'){
-      //console.log(page)
-      return (
-        <div className="pageWrap">
-         <HomePage changePage={this.props.changePage}/>
-        </div>
-      );
-    }
-    if(page==='shopCar'){
-      //console.log(page)
-      return (
-        <div className="pageWrap">
-         <ShopCar />
-        </div>
-      );
-    }
-    if(page==='user'){
-      //console.log(page)
-      return (
-        <div className="pageWrap">
-        <UserPage />
-        </div>
-      );
-    }
-    
+    // if(page==='index'){this.props.changePage('index')}
+    // if(page==='shopCar'){this.props.changePage('shopCar')}
+    // if(page==='user'){this.props.changePage('user')}
+  }
+  handleChnage(page){
+    this.props.changePage(page)
   }
   render() {
     //这里渲染一次
@@ -79,11 +52,13 @@ class TabBarBottom extends Component {
               this.setState({
                 selectedTab: 'index',
               });
+              this.handleChnage('index')
             }}
             data-seed="logId"
           >
             {this.renderContent('index')}
           </TabBar.Item>
+
           <TabBar.Item
             icon={
               <div style={{
@@ -107,11 +82,13 @@ class TabBarBottom extends Component {
               this.setState({
                 selectedTab: 'shopCar',
               });
+              this.handleChnage('shopCar')
             }}
             data-seed="logId1"
           >
             {this.renderContent('shopCar')}
           </TabBar.Item>
+
           <TabBar.Item
             icon={
               <div style={{
@@ -128,13 +105,14 @@ class TabBarBottom extends Component {
               />
             }
             title="用户中心"
-            key="ser"
+            key="user"
   
             selected={this.state.selectedTab === 'user'}
             onPress={() => {
               this.setState({
                 selectedTab: 'user',
               });
+              this.handleChnage('user')
             }}
           >
             {this.renderContent('user')}

src/case/ShopApp/src/components/HomePage/HomePage.css

@@ -0,0 +1,9 @@
+.productList{
+    position: relative;
+    z-index: 3;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: scroll;
+    white-space: nowrap;
+    height: 450px;
+}
+

src/case/ShopApp/src/components/HomePage/HomePage.jsx

@@ -28,19 +28,14 @@ class HomePage extends Component{
     //获取所有商品
     getGoods(variables={}){
         return graphqls(getProductByProps,variables).then((data)=>{
-        console.log("data",data)
         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}
         })
-      
         this.setState({
           tabs:[{title: '所有果品'},...tabs],
           products:products,
@@ -67,7 +62,7 @@ class HomePage extends Component{
           })
         } 
     }
-
+    
     toDetail(e){
         this.setState({
             detail:"true"
@@ -87,7 +82,9 @@ class HomePage extends Component{
                 <div>
                     <Search getProductByName={this.getGoods.bind(this)}/>
                     <TabBarTop tabs={this.state.tabs} tabChange={this.tabChange.bind(this)}/>
-                    <Cards products={this.state.products||[]} changePage={this.props.changePage}/>
+                    <div className="productList">
+                        <Cards products={this.state.products||[]} changePage={this.props.changePage}/>
+                    </div>
                 </div>
             )
         }

src/case/ShopApp/src/components/HomePage/Search.jsx

@@ -18,6 +18,7 @@ class Search extends Component {
   };
   clear = () => {
     this.setState({ value: '' });
+    console.log('cancel')
   };
   handleClick = () => {
     this.manualFocusInst.focus();
@@ -31,7 +32,7 @@ class Search extends Component {
         onClear={value => console.log(value, 'onClear')}
         onFocus={() => console.log('onFocus')}
         onBlur={() => console.log('onBlur')}
-        onCancel={() => {this.props.getProductByName({}) ;this.clear()}}
+        onCancel={() => {this.props.getProductByName({}) ;this.clear();console.log('onconcel')}}
         showCancelButton
         onChange={this.onChange}
       />

src/case/ShopApp/src/components/ProductDetailPage/Card.jsx

@@ -14,7 +14,7 @@ export default class Card extends Component{
 
 
     componentWillReceiveProps(props){
-        console.log('5',props)
+        console.log('cardProps',props)
         this.setState({
             product:props.product
         })

src/case/ShopApp/src/components/ProductDetailPage/ProductDetail.jsx

@@ -33,7 +33,7 @@ export default class ProductDetail extends Component{
         return(
             <div>
                <Card product={this.state.product}/>
-               <UserAction product={this.state.product} setNum={this.props.setNum}/>
+               <UserAction product={this.state.product} setNum={this.props.setNum} />
             </div>
         )
     }

src/case/ShopApp/src/components/ProductDetailPage/UserAction.jsx

@@ -1,4 +1,5 @@
 import React,{Component} from 'react'
+import {PageContext} from '../../context/context'
 
 import './UserAction.css' 
 
@@ -28,7 +29,7 @@ class UserAction extends Component{
             return(
                 <div className="actionWrap">
                     <button className="service">客服</button>
-                    <button className="toCar">购物车</button>
+                    <button className="toCar" onClick={()=>this.props.changePage('shopCap')}>购物车</button>
                     <button className="addCar" onClick={this.triggerActionSheet}>加入购物车</button>
                     <button className="toPay" onClick={this.triggerActionSheet}>立即购买</button>
                 </div>
@@ -42,4 +43,9 @@ class UserAction extends Component{
 }
 
 
-export default UserAction
+export default  props=> (
+    <PageContext.Consumer>
+      {changePage => <UserAction {...props} changePage={changePage} />}
+    </PageContext.Consumer>
+  );
+

src/components/app/App.jsx

@@ -68,6 +68,15 @@ class App extends Component {
         });
     };
 
+    switchMenuTab = (menuName, e) => {
+        this.setState({
+            [menuName]: e.key,
+        });
+        if(e.key === "graphql-service"){
+            this.setState({sideBar: "ecommerce"});
+        }
+    };
+
     switchSidebar = (value) => {
         this.setState({
             sideBar:value,
@@ -121,7 +130,7 @@ class App extends Component {
             <Router>
                 <Layout style={{minHeight: '100vh'}}>
                     <Header className="header" style={{position: 'fixed', zIndex: 1, width: '100%'}}>
-                        <Link to="/"   onClick={() => this.switchMenuLevel('menuLevel1', "graphql-service")}>
+                        <Link to="/"   onClick={() => this.setState({menuLevel1:"graphql-service",sideBar:"ecommerce"})}>
                             <div className="logo-wrapper">
                                 <div className='logo'/>
                             </div>
@@ -132,7 +141,7 @@ class App extends Component {
                             // defaultSelectedKeys={['graphql-service']}
                             selectedKeys={[this.state.menuLevel1]}
                             style={{lineHeight: '64px'}}
-                            onClick={(e) => this.switchMenu('menuLevel1', e)}
+                            onClick={(e) => this.switchMenuTab('menuLevel1', e)}
                         >
                             <Menu.Item key="graphql-service">
                                 <Link to="/graphql-service/trial-case/index"><FormattedMessage id="Graphql Service"/></Link>

src/components/cloudFunction/CloudFunction.jsx

@@ -1,58 +0,0 @@
-import React, {Component} from 'react';
-
-import {Layout, Menu  } from 'antd';
-
-import Deploy from '../common/deploy/Deploy';
-import Api from "./api/Api";
-
-const { Content } = Layout;
-
-class CloudFunction extends Component {
-    constructor() {
-        super();
-        this.state = {
-            menuLevel2: "deploy",
-        }
-    }
-
-    switchMenu = (menuName, e) => {
-        // console.log('menuName', menuName, 'e', e);
-        this.setState({
-            [menuName]: e.key,
-        });
-    };
-
-    render() {
-        return (
-            <div>
-                <Menu
-                    mode="horizontal"
-                    defaultSelectedKeys={['deploy']}
-                    style={{padding: '0 24px', position: 'fixed', width: '100%', zIndex: '1'}}
-                    onClick={(e) => this.switchMenu('menuLevel2', e)}
-                    selectedKeys={[this.state.menuLevel2]}
-                >
-                    <Menu.Item key="deploy">deploy</Menu.Item>
-                    <Menu.Item key="api">API</Menu.Item>
-                </Menu>
-
-                <Layout style={{ padding: '24px', zIndex: '0'}}>
-                    <Content style={{ padding: '24px', minHeight: 280, background: '#fff',marginTop: '48px'  }}>
-                        {(() => {
-                            switch (this.state.menuLevel2) {
-                                case 'deploy':
-                                    return <Deploy />;
-                                case 'api':
-                                    return <Api />;
-                                default:
-                                    return <Deploy />
-                            }
-                        })()}
-                    </Content>
-                </Layout>
-            </div>
-        )
-    }
-}
-
-export default CloudFunction;

src/components/cloudFunction/api/Api.jsx

@@ -1,23 +0,0 @@
-import React, {Component} from 'react';
-
-import {  Pagination } from 'antd';
-
-export default class Api extends Component {
-    constructor() {
-        super();
-        this.state = {
-            locale: null,
-        };
-    }
-
-    render() {
-        return (
-            <div className="locale-components">
-                <div className="example">
-                    antd ui 组件中英切换
-                    <Pagination defaultCurrent={1} total={50} showSizeChanger />
-                </div>
-            </div>
-        );
-    }
-}

src/components/common/schema/Table.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 
-import {Layout, Select, Input, Icon, Button, notification, Spin} from 'antd';
+import {Layout, Select, Input, Icon, Button, notification, Spin, Modal} from 'antd';
 import {UPDATE_SCHEMA, SHOW_SCHEMA, SHOW_TABLE} from "../../gql";
 import gql from "graphql-tag";
 
@@ -9,6 +9,7 @@ import {getCookie} from "../../cookie";
 
 const Option = Select.Option;
 const {Content} = Layout;
+const confirm = Modal.confirm;
 
 class Table extends Component {
     constructor(props) {
@@ -261,8 +262,40 @@ class UpdateTableButton extends Component {
 
     }
 
+    showConfirm = (schemaName,schemaID) => {
+        let _this = this;
+
+        if(this.props.add !== 'add') {
+            this.props.history.push({
+                pathname: `/graphql-service/my-create/${schemaName}`,
+                state:{
+                    schemaName,
+                    schemaID
+                }
+            });
+        }else{
+            confirm({
+                title: '添加成功',
+                content: '继续添加数据表？',
+                onOk() {
+                    console.log('继续添加');
+                },
+                onCancel() {
+                    _this.props.history.push({
+                        pathname: `/graphql-service/my-create/${schemaName}`,
+                        state:{
+                            schemaName,
+                            schemaID
+                        }
+                    });
+                }
+            });
+        }
+    };
+
     render() {
         let schemaID = this.props.schemaID;
+        let schemaName = this.props.schemaName;
         let userID = this.props.userID;
 
         let varobj = {
@@ -289,6 +322,7 @@ class UpdateTableButton extends Component {
                         return (
                             <Mutation
                                 mutation={gql(UPDATE_SCHEMA)}
+                                onCompleted={()=>this.showConfirm(schemaName,schemaID)}
                                 refetchQueries={[{query: gql(SHOW_TABLE), variables: {schema_id: schemaID}}]}
                             >
 
@@ -349,16 +383,16 @@ class UpdateTableButton extends Component {
                                                         schemaData: JSON.stringify(schemaCols)
                                                     }
                                                 });
-                                                this.props.showTablePagination(this.props.page, this.props.pageSize, schemaCols)
-                                                if(this.props.add !== 'add') {
-                                                    this.props.history.push({
-                                                        pathname: `/graphql-service/my-create/${this.props.schemaName}`,
-                                                        state:{
-                                                            schemaName:this.props.schemaName,
-                                                            schemaID:this.props.schemaID
-                                                        }
-                                                    });
-                                                }
+                                                this.props.showTablePagination(this.props.page, this.props.pageSize, schemaCols);
+                                                // if(this.props.add !== 'add') {
+                                                //     this.props.history.push({
+                                                //         pathname: `/graphql-service/my-create/${this.props.schemaName}`,
+                                                //         state:{
+                                                //             schemaName:this.props.schemaName,
+                                                //             schemaID:this.props.schemaID
+                                                //         }
+                                                //     });
+                                                // }
                                             }}>
                                                 save
                                             </Button>

src/components/monitorNotify/MonitorNotify.jsx

@@ -1,62 +0,0 @@
-import React, {Component} from 'react';
-
-import {Layout, Menu} from 'antd';
-import CaseNotification from "../common/caseNotification/CaseNotification";
-import Notification from "./notification/Notification";
-import GraphqlTrigger from "./graphqlTrigger/GraphqlTrigger";
-import StockSignal from "./stockSignal/StockSignal";
-
-const { Content } = Layout;
-
-class MonitorNotify extends Component {
-    constructor() {
-        super();
-        this.state = {
-            menuLevel2: "notification",
-        }
-    }
-
-    switchMenu = (menuName, e) => {
-        // console.log('menuName', menuName, 'e', e);
-        this.setState({
-            [menuName]: e.key,
-        });
-    };
-
-    render() {
-        return (
-            <div>
-                <Menu
-                    mode="horizontal"
-                    defaultSelectedKeys={['notification']}
-                    style={{padding: '0 24px', position: 'fixed', width: '100%', zIndex: '1'}}
-                    onClick={(e) => this.switchMenu('menuLevel2', e)}
-                    selectedKeys={[this.state.menuLevel2]}
-                >
-                    <Menu.Item key="notification">notification</Menu.Item>
-                    <Menu.Item key="graphql-trigger">graphql trigger</Menu.Item>
-                    <Menu.Item key="stock-signal">stock signal</Menu.Item>
-                </Menu>
-
-                <Layout style={{ padding: '24px', zIndex: '0'}}>
-                    <Content style={{ padding: '24px', minHeight: 280, background: '#fff',marginTop: '48px'  }}>
-                        {(() => {
-                            switch (this.state.menuLevel2) {
-                                case 'notification':
-                                    return <Notification />;
-                                case 'graphql-trigger':
-                                    return <GraphqlTrigger />;
-                                case 'stock-signal':
-                                    return <StockSignal />;
-                                default:
-                                    return <Notification />
-                            }
-                        })()}
-                    </Content>
-                </Layout>
-            </div>
-        )
-    }
-}
-
-export default MonitorNotify;

src/components/monitorNotify/graphqlTrigger/GraphqlTrigger.jsx

@@ -1,15 +0,0 @@
-import React, {Component} from 'react';
-
-class GraphqlTrigger extends Component {
-
-
-    render() {
-        return (
-            <div>
-                Graphql Trigger
-            </div>
-        )
-    }
-}
-
-export default GraphqlTrigger;

src/components/monitorNotify/notification/Notification.jsx

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

src/components/monitorNotify/stockSignal/StockSignal.jsx

@@ -1,14 +0,0 @@
-import React, {Component} from 'react';
-
-class StockSignal extends Component {
-
-    render() {
-        return (
-            <div>
-                Stock Signal
-            </div>
-        )
-    }
-}
-
-export default StockSignal;