修复警告

src/case/ShopApp/src/App.css

@@ -35,5 +35,11 @@ p.p1,p.p2,p.p3{
     font-size: 13px;
 }
 
+.pageWrap{
+    margin-top: 45px;
+    background: #ffffff;
+    border: 2px solid red;
+}
+
 
 

src/case/ShopApp/src/App.js

@@ -4,20 +4,38 @@ import './App.css';
 
 import NavBars from './components/App/NavBar'
 import TabBarBottom from './components/App/TabBarBottom'
+import ProductDetail from './components/ProductDetailPage/ProductDetail'
 
 class ShopApp extends Component {
   //showComponent
+  constructor(props){
+    super(props)
+    this.state={
+      page:'',
+      product_id:''
+    }
+  }
+  renderPage(page=""){
+    if(page==='detail'){
+      return(<div className="pageWrap"><ProductDetail product_id={this.state.product_id}/></div>)
+    }else{
+      return(<div><TabBarBottom changePage={this.changePage.bind(this)}/></div>)
+    }
+  }
+
+  changePage(page='',product_id){
+    this.setState({page,product_id})
+  }
   render() {
     return (
       <div className="AppWrap">
         <div className="phone6s">
           <div className="App">
-            <NavBars />
-            <TabBarBottom />
+            <NavBars changePage={this.changePage.bind(this)}/>
+            {this.renderPage(this.state.page)}
           </div>
         </div>
       </div>
-     
     );
   }
 }

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

@@ -10,24 +10,3 @@ export const graphqls=(query,variables)=>{
     return request(http_request, query,variables).then(data =>data)
 }
 
-
-/* import {graphqls} from './api/graphql_request'
-
-let query=`query productbyprops($category: String, $updatedAt: String, $name: String, $createdAt: String, $status: String, $intro: String, $price: Float, $img: String, $stock: Int) {
-    productbyprops: product_by_props(category: $category updatedAt: $updatedAt name: $name createdAt: $createdAt status: $status intro: $intro price: $price img: $img stock: $stock) {
-        category
-        updatedAt
-        unit
-        name
-        createdAt
-        status
-        id
-        intro
-        price
-        img
-        stock
-    }
-}`,
-variables={}
-
-graphqls(query,variables).then(data=>console.log(data)) */

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

@@ -5,7 +5,7 @@ import './NavBar.css'
 
 export default class NavBars extends Component{
     goBack(){
-        console.log('back')
+        this.props.changePage('','')
     }
     render(){
         return(

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

@@ -1,4 +0,0 @@
-.pageWrap{
-    margin-top: 45px;
-    background: #ffffff;
-}

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

@@ -26,7 +26,7 @@ class TabBarBottom extends Component {
       //console.log(page)
       return (
         <div className="pageWrap">
-         <HomePage />
+         <HomePage changePage={this.props.changePage}/>
         </div>
       );
     }

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

@@ -16,8 +16,9 @@ class Cards extends Component{
         }
     }
     //点击后跳转到商品详情页面
-    onClickChange(e,id){
+    onClickChange(id){
         console.log('product_id',id)
+        this.props.changePage('detail',id)
     }
     
     render(){
@@ -28,7 +29,7 @@ class Cards extends Component{
                 <WingBlank size="lg" key={index} className="Card">
                     <WhiteSpace size="lg" />
                         {/*<Link to={"/detail?product_id="+item.id}>*/}
-                            <Card onClick={(e)=>{this.onClickChange(e,item.id)}}>
+                            <Card onClick={(e)=>{this.onClickChange(item.id)}}>
                                 <Card.Header
                                     title={<span className="title">{item.name}</span>}
                                     extra={<span className="hot">热门</span>} 

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

@@ -71,10 +71,7 @@ class HomePage extends Component{
         this.setState({
             detail:"true"
         })
-
-
     }
-
     changeComponent(e){
         if(e==='1'){
             return(
@@ -89,7 +86,7 @@ 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||[]}/>
+                    <Cards products={this.state.products||[]} changePage={this.props.changePage}/>
                 </div>
             )
         }

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

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+
+import {graphqls} from '../../api/graphql_request'
+import {getProductById} from '../../api/graphql/product'
+
+export default class ProductDetail extends Component{
+    constructor(props){
+        super(props)
+        this.state={
+            product:{}
+        }
+    }
+
+    getProduct(){
+        graphqls(getProductById,{id:this.props.product_id}).then((e)=>{
+            console.log('productId',e.product_by_id)
+            this.setState({
+                product:e.product_by_id
+            })
+        })
+    }
+
+    componentDidMount(){
+        this.getProduct()
+    }
+    render(){
+        return(
+            <div>
+                商品详情页
+            </div>
+        )
+    }
+}