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

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()
+