重构页面结构，提升productList组件到App

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,7 +11,7 @@ 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()
 
@@ -17,30 +20,54 @@ class ShopApp extends Component {
   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'){
@@ -48,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/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>
+  );
+