Merge remote-tracking branch 'origin/master'

src/case/ShopApp/src/App.js

@@ -1,10 +1,11 @@
 import React, { Component } from 'react';
 import './App.css';
 // import 'antd-mobile/dist/antd-mobile.css';
-
+import {PageContext} from './context/context'
 import NavBars from './components/App/NavBar'
 import TabBarBottom from './components/App/TabBarBottom'
 import ProductDetail from './components/ProductDetailPage/ProductDetail'
+import OrderPage from './components/OrderPage/OrederPage'
 
 class ShopApp extends Component {
   //showComponent
@@ -12,30 +13,42 @@ class ShopApp extends Component {
     super(props)
     this.state={
       page:'',
-      product_id:''
+      product_id:'',
+      num:1
     }
   }
+
+  setNum(num=1){
+    this.setState({num})
+  }
+  
   renderPage(page=""){
     if(page==='detail'){
       return(<div className="pageWrap"><ProductDetail product_id={this.state.product_id}/></div>)
+    }else if(page==='order'){
+      return(<div className="pageWrap"><OrderPage product_id={this.state.product_id}/></div>)
     }else{
-      return(<div><TabBarBottom changePage={this.changePage.bind(this)}/></div>)
+      return(<div><TabBarBottom/></div>)
     }
   }
 
-  changePage(page='',product_id){
+  changePage(page='',product_id=this.state.product_id){
     this.setState({page,product_id})
   }
+
   render() {
+    const changePage=this.changePage.bind(this)
     return (
-      <div className="AppWrap">
-        <div className="phone6s">
-          <div className="App">
-            <NavBars changePage={this.changePage.bind(this)}/>
-            {this.renderPage(this.state.page)}
+      <PageContext.Provider value={changePage}>
+        <div className="AppWrap">
+          <div className="phone6s">
+            <div className="App">
+              <NavBars />
+              {this.renderPage(this.state.page)}
+            </div>
           </div>
         </div>
-      </div>
+      </PageContext.Provider>
     );
   }
 }

src/case/ShopApp/src/api/graphql_request.js

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

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

@@ -2,25 +2,29 @@ import React, { Component } from 'react';
 import { NavBar, Icon } from 'antd-mobile';
 
 import './NavBar.css'
+import {PageContext} from '../../context/context'
 
 export default class NavBars extends Component{
-    goBack(){
-        this.props.changePage('','')
-    }
     render(){
         return(
-            <div className="navBars">
-                <NavBar
-                mode="dark"
-                icon={<Icon type="left" />}
-                onLeftClick={() => this.goBack()}
-                rightContent={[
-                    <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
-                    <Icon key="1" type="ellipsis" />,
-                ]}
-                ><span style={{fontSize:'14px'}}>电商小程序</span>
-                </NavBar>
-            </div>
+            <PageContext.Consumer>
+                {(changePage)=>{
+                    return (
+                        <div className="navBars">
+                            <NavBar
+                            mode="dark"
+                            icon={<Icon type="left" />}
+                            onLeftClick={() => changePage('','')}
+                            rightContent={[
+                                <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
+                                <Icon key="1" type="ellipsis" />,
+                            ]}
+                            ><span style={{fontSize:'14px'}}>电商小程序</span>
+                            </NavBar>
+                        </div>
+                    )
+                }}
+            </PageContext.Consumer>
         )
     }
 }

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

@@ -3,6 +3,9 @@ import { Link } from 'react-router-dom'
 import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
 //import { Item } from 'antd-mobile/lib/tab-bar';
 import './Cards.css'
+import {PageContext} from '../../context/context'
+
+
 
 
 
@@ -11,48 +14,51 @@ class Cards extends Component{
     constructor(props){
         //console.log('111',props)
         super(props)
-        this.stae={
+        this.state={
             product_id:''
         }
     }
-    //点击后跳转到商品详情页面
-    onClickChange(id){
-        console.log('product_id',id)
-        this.props.changePage('detail',id)
-    }
     
     render(){
-        //console.log(this.props.products)
+        //console.log('cardProps',this.props.products)
+        
         const Cardss=this.props.products.map((item,index)=>{
             //console.log(item)
             return (
-                <WingBlank size="lg" key={index} className="Card">
-                    <WhiteSpace size="lg" />
-                        {/*<Link to={"/detail?product_id="+item.id}>*/}
-                            <Card onClick={(e)=>{this.onClickChange(item.id)}}>
-                                <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 className="p1">{item.intro}</p>
-                                        </div>
-                                        <div className="rightsidebar">
-                                            <p className="p2">{item.price}/斤</p>
-                                            <p className="p3">库存:{item.stock}</p>
-                                        </div>
-                                    </div>
-                                </Card.Body>
-                                <Card.Footer content="" extra={<div></div>} />
-                            </Card>
-                        {/*</Link>*/}
-                    <WhiteSpace size="lg" />
-                </WingBlank>
+                <PageContext.Consumer key={index} >
+                    {(changePage)=>{
+                        return(
+                            <WingBlank size="lg" className="Card">
+                            <WhiteSpace size="lg" />
+                                {/*<Link to={"/detail?product_id="+item.id}>*/}
+                                    <Card onClick={(e)=>{changePage('detail',item.id)}}>
+                                        <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 className="p1">{item.intro}</p>
+                                                </div>
+                                                <div className="rightsidebar">
+                                                    <p className="p2">{item.price}/斤</p>
+                                                    <p className="p3">库存:{item.stock}</p>
+                                                </div>
+                                            </div>
+                                        </Card.Body>
+                                        <Card.Footer content="" extra={<div></div>} />
+                                    </Card>
+                                {/*</Link>*/}
+                            <WhiteSpace size="lg" />
+                        </WingBlank>
+                        )
+                    }}
+                </PageContext.Consumer>
+               
             )
         })
 

src/case/ShopApp/src/components/OrderPage/OrederPage.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Context from '../../context/context'
+
+class OrderPage extends React.Component{
+    render(){
+        console.log('props',this.props)
+        return(<div>orderpage</div>)
+    }
+}
+
+export default OrderPage

src/case/ShopApp/src/components/ProductDetailPage/ActionSheet.css

@@ -0,0 +1,48 @@
+.mask{
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.3)
+}
+
+.row{
+    padding: 10px 5px;
+}
+
+.sheetWrap{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 200px;
+    width: 100%;
+    background: #fff;
+    z-index: 1;
+}
+
+.numWrap span{
+    padding: 1px 14px;
+    background: rgba(200, 200, 200, 0.3);
+    border-radius:3px;
+    border: 1px solid rgba(200, 200, 200, 0.5)
+}
+
+.buttonWraps button{
+    position: absolute;
+    bottom: 0;
+    width: 50%;
+    border: none;
+    padding: 17px 0;
+    color: #fff;
+}
+
+.buttonWraps button:nth-child(1){
+    background: #f18e47;
+    left: 0;
+}
+
+.buttonWraps button:nth-child(2){
+    background: red;
+    right: 0;
+}

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

@@ -0,0 +1,70 @@
+import React from 'react'
+import './ActionSheet.css'
+
+import {PageContext} from '../../context/context'
+import { ActionSheet, WingBlank, WhiteSpace, Button, Toast } from 'antd-mobile';
+import { List, Stepper } from 'antd-mobile';
+
+
+
+
+class ActionSheets extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      val:1
+    };
+  }
+ 
+  add(){
+      let val=this.state.val
+      if(val===100000){
+
+      }else{
+        this.setState({
+            val:this.state.val+1
+        })
+      }
+      
+  }
+
+  minius(){
+    let val=this.state.val
+    if(val===0){
+
+    }else{
+      this.setState({
+          val:this.state.val-1
+      })
+    }
+  }
+
+  render() {
+    return (
+        <div className="actionSheet">
+            <div className="mask" onClick={this.props.triggerActionSheet}></div>
+            <div className="sheetWrap">
+                <div className="row">价格:{this.props.product.price}</div>
+                <div className="row">库存:{this.props.product.stock}</div>
+                <div className="numWrap row">
+                    购买数量:<span onClick={this.add.bind(this)}>+</span><span>{this.state.val}</span><span onClick={this.minius.bind(this)}>-</span>
+                </div>
+                <PageContext.Consumer>
+                    {(changePage)=>{
+                        return(
+                            <div className="buttonWraps">
+                                <button>加入购物车</button>
+                                <button onClick={()=>changePage('order')}>立即购买</button>
+                            </div>
+                        )
+                    }}
+                </PageContext.Consumer>
+
+            </div>
+        </div>
+    )
+  }
+}
+
+
+export default ActionSheets

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

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import Card from './Card'
 
+import UserAction from './UserAction'
+
 import {graphqls} from '../../api/graphql_request'
 import {getProductById} from '../../api/graphql/product'
 
@@ -30,6 +32,7 @@ export default class ProductDetail extends Component{
         return(
             <div>
                <Card product={this.state.product}/>
+               <UserAction product={this.state.product}/>
             </div>
         )
     }

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

@@ -0,0 +1,32 @@
+.actionWrap{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+}
+
+.actionWrap button{
+    padding: 16px 0px;
+    flex-grow: 1;
+    border: none;
+    
+}
+
+.actionWrap .service,.actionWrap  .toCar{
+    flex-basis: 40px;
+    background: #ffffff;
+    font-size: 6px;
+    border-left: 1px solid rgba(200, 200, 200, 0.5);
+}
+
+.addCar{
+    background: #f18e47;
+    color: #fff;
+}
+
+.toPay{
+    background: red;
+    color: #fff;
+}

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

@@ -0,0 +1,45 @@
+import React,{Component} from 'react'
+
+import './UserAction.css' 
+
+import ActionSheets from './ActionSheet'
+
+
+class UserAction extends Component{
+    constructor(){
+        super()
+        this.state={
+            actionSheet:false
+        }
+        this.triggerActionSheet=this.triggerActionSheet.bind(this)
+    }
+
+    triggerActionSheet(){
+        this.setState({
+            actionSheet:!this.state.actionSheet
+        })
+    }
+
+    renderPage(){
+        let actionSheet=this.state.actionSheet
+        if(actionSheet){
+            return(<div><ActionSheets triggerActionSheet={this.triggerActionSheet} product={this.props.product} /></div>)
+        }else{
+            return(
+                <div className="actionWrap">
+                    <button className="service">客服</button>
+                    <button className="toCar">购物车</button>
+                    <button className="addCar" onClick={this.triggerActionSheet}>加入购物车</button>
+                    <button className="toPay" onClick={this.triggerActionSheet}>立即购买</button>
+                </div>
+            )
+        }
+    }
+
+    render(){
+        return(<div>{this.renderPage()}</div>)
+    }
+}
+
+
+export default UserAction

src/case/ShopApp/src/components/ShopCarPage/shopCar.jsx

@@ -4,7 +4,7 @@ class ShopCar extends Component{
     constructor(props){
         super(props)
         this.state={
-
+            
         }
     }
 

src/case/ShopApp/src/context/context.js

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

src/components/app/App.jsx

@@ -358,9 +358,9 @@ class GraphqlSidebar extends Component {
                         // console.log('user schema data',data);
                         if (loading) return <Spin style={{marginLeft: 3}}/>;
                         if (error) return 'error!';
-                        localStorage.setItem('ecommerce', data.caseSchema[2].schemaData);
-                        localStorage.setItem('subscribe', data.caseSchema[0].schemaData);
-                        localStorage.setItem('bills', data.caseSchema[1].schemaData);
+                        localStorage.setItem('ecommerce', data.caseSchema.find(obj=>obj.schemaName==='ecommerce').schemaData);
+                        localStorage.setItem('subscribe', data.caseSchema.find(obj=>obj.schemaName==='subscribe').schemaData);
+                        localStorage.setItem('bills', data.caseSchema.find(obj=>obj.schemaName==='bills').schemaData);
                         return (
                             <Menu
                                 theme="dark"

src/components/common/schema/Schema.jsx

@@ -108,10 +108,11 @@ class Schema extends Component {
             return new Promise((resolve, reject) => {
                 request('http://123.206.193.98:3000/graphql', SEARCH_SCHEMA, {id: referenceID}).then(
                     data => {
+                        console.log(data);
                         if (data.schema_by_id !== null) {
-                            localStorage.setItem('ecommerce', data.caseSchema[2].schemaData);
-                            localStorage.setItem('subscribe', data.caseSchema[0].schemaData);
-                            localStorage.setItem('bills', data.caseSchema[1].schemaData);
+                            localStorage.setItem('ecommerce', data.caseSchema.find(obj=>obj.schemaName==='ecommerce').schemaData);
+                            localStorage.setItem('subscribe', data.caseSchema.find(obj=>obj.schemaName==='subscribe').schemaData);
+                            localStorage.setItem('bills', data.caseSchema.find(obj=>obj.schemaName==='bills').schemaData);
                             resolve(data.schema_by_id.schemaData);
                         }
                     }
@@ -332,6 +333,7 @@ class Schema extends Component {
                                                                     <DeleteSchemaButton
                                                                         userID={userID}
                                                                         schemaName={this.state.schemaName}
+                                                                        history={this.props.history}
                                                                     />
                                                                 </div>
                                                         }
@@ -357,6 +359,7 @@ class Schema extends Component {
                                         this.state.currentTable === 'add' ?
                                             <Table
                                                 currentTable={''}
+                                                schemaData={data}
                                                 columns={[]}
                                                 remark=''
                                                 schemaID={this.state.schemaID}
@@ -364,6 +367,11 @@ class Schema extends Component {
                                                 userID={userID}
                                                 goBack={this.goBack}
                                                 trialcase={trialcase}
+                                                fetchData={this.fetchData}
+                                                showTablePagination={this.showTablePagination}
+                                                page={this.state.page}
+                                                pageSize={this.state.pageSize}
+                                                history={this.props.history}
                                             /> :
                                             <Table
                                                 currentTable={this.state.currentTable}
@@ -379,6 +387,7 @@ class Schema extends Component {
                                                 showTablePagination={this.showTablePagination}
                                                 page={this.state.page}
                                                 pageSize={this.state.pageSize}
+                                                history={this.props.history}
                                             />
                                 }
 
@@ -461,12 +470,16 @@ class DeleteSchemaButton extends Component {
         }
     }
 
-    showConfirm = (delete_schema, schemaName) => {
+    showConfirm = (delete_schema, schemaName, userID) => {
+        let _this = this;
         confirm({
             title: 'Do you want to delete this schema?',
             content: 'It cannot be found back!',
             onOk() {
-                delete_schema({variables: {schemaName}});
+                delete_schema({variables: {schemaName, user_id: userID}});
+                _this.props.history.push({
+                    pathname: '/graphql-service',
+                });
             },
             onCancel() {
             },

src/components/common/schema/Table.js

@@ -224,6 +224,8 @@ class Table extends Component {
                                         showTablePagination={this.props.showTablePagination}
                                         page={this.props.page}
                                         pageSize={this.props.pageSize}
+                                        history={this.props.history}
+                                        schemaName={schemaName}
                                     />
                                 </div>
                         }
@@ -273,7 +275,7 @@ class UpdateTableButton extends Component {
                         return (
                             <Mutation
                                 mutation={gql(UPDATE_SCHEMA)}
-                                refetchQueries={[{query: gql(SHOW_TABLE), variables: {schema_id: this.props.schemaID}}]}
+                                refetchQueries={[{query: gql(SHOW_TABLE), variables: {schema_id: schemaID}}]}
                             >
 
                                 {(update_schema, {loading, error}) => {
@@ -302,11 +304,18 @@ class UpdateTableButton extends Component {
                                         cols
                                     };
 
-                                    const index = this.state.originTableName === '' ? -2 : this.props.schemaData.findIndex(obj => obj.name === this.state.originTableName)
+                                    const index = this.state.originTableName === '' ? -2 : this.props.schemaData.findIndex(obj => obj.name === this.state.originTableName);
                                     if (index === -2) {
-                                        schemaCols.push(newTable);
+                                        if(referenceID !== '' && schemaCols.length === 0) {
+                                            this.props.fetchData(referenceID).then(value => {
+                                                schemaCols = JSON.parse(value);
+                                                schemaCols.push(newTable);
+                                            });
+                                        } else {
+                                            schemaCols.push(newTable);
+                                        }
+
                                     } else if (index === -1) {
-                                        console.log('进行了一次删除操作 或 未知错误，数据库信息不匹配');
                                         // 先取数据，然后替换，然后填充
                                         this.props.fetchData(referenceID).then(value => {
                                             schemaCols = JSON.parse(value);
@@ -314,6 +323,7 @@ class UpdateTableButton extends Component {
                                             schemaCols.splice(index, 1, newTable);
                                         });
                                     } else {
+
                                         schemaCols.splice(index, 1, newTable);
                                     }
 
@@ -327,6 +337,13 @@ class UpdateTableButton extends Component {
                                                     }
                                                 });
                                                 this.props.showTablePagination(this.props.page, this.props.pageSize, schemaCols)
+                                                this.props.history.push({
+                                                    pathname: `/graphql-service/my-create/${this.props.schemaName}`,
+                                                    state:{
+                                                        schemaName:this.props.schemaName,
+                                                        schemaID:this.props.schemaID
+                                                    }
+                                                });
                                             }}>
                                                 save
                                             </Button>