install redux

package-lock.json

@@ -13069,6 +13069,15 @@
         "minimatch": "3.0.4"
       }
     },
+    "redux": {
+      "version": "4.0.1",
+      "resolved": "http://registry.npm.taobao.org/redux/download/redux-4.0.1.tgz",
+      "integrity": "sha1-Q2yubMQPvkcnaJ18j65EgI8b/vU=",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "symbol-observable": "^1.2.0"
+      }
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "http://registry.npm.taobao.org/regenerate/download/regenerate-1.4.0.tgz",

package.json

@@ -57,6 +57,7 @@
     "react-intl": "^2.7.2",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
+    "redux": "^4.0.1",
     "resolve": "1.8.1",
     "sass-loader": "7.1.0",
     "style-loader": "0.23.0",

src/case/shopApp/src/components/HomePage/HomePage.css

@@ -1,4 +1,3 @@
-div.homeWrap{
-    margin-top: 60px;
-    
+.homeWrap{
+    margin-top: 45px;
 }

src/case/shopApp/src/components/HomePage/HomePage.jsx

@@ -7,6 +7,8 @@ import Cards from './Cards'
 import {graphqls} from '../../api/graphql_request'
 import {getProductByProps} from '../../api/graphql/product'
 
+import './HomePage.css'
+
 
 
 class HomePage extends Component{
@@ -41,7 +43,8 @@ class HomePage extends Component{
         this.setState({
           tabs:[{title: '所有果品'},...tabs],
           products:products,
-          select:'所有果品'
+          select:'所有果品',
+          detail:'false'
         })
         sessionStorage.setItem("products",JSON.stringify(products))
         })
@@ -64,13 +67,38 @@ class HomePage extends Component{
         } 
     }
 
+    toDetail(e){
+        this.setState({
+            detail:"true"
+        })
+
+
+    }
+
+    changeComponent(e){
+        if(e=='1'){
+            return(
+                <div>detail</div>
+            )
+        }else if(e=='2'){
+            return(
+                <div>order</div>
+            )
+        }else{
+            return(
+                <div>
+                    <Search getProductByName={this.getGoods.bind(this)}/>
+                    <TabBarTop tabs={this.state.tabs} tabChange={this.tabChange.bind(this)}/>
+                    <Cards products={this.state.products||[]}/>
+                </div>
+            )
+        }
+    }
 
     render(){
         return (
             <div className="homeWrap">
-                <Search getProductByName={this.getGoods.bind(this)}/>
-                <TabBarTop tabs={this.state.tabs} tabChange={this.tabChange.bind(this)}/>
-                <Cards products={this.state.products||[]}/>
+                {this.changeComponent("3")}
             </div>
         )
     }

src/components/app/App.jsx

@@ -302,6 +302,8 @@ class App extends Component {
                     })()}
 
                     <Create visible={visible} hideModal={this.hideModal}/>
+
+
                     <LocaleProvider locale={locale}>
                         <Layout style={{marginTop: '64px', zIndex: '0'}}
                                 key={locale ? locale.locale : 'en'/* Have to refresh for production environment */}>
@@ -318,6 +320,8 @@ class App extends Component {
                             </Switch>
                         </Layout>
                     </LocaleProvider>
+
+                    
                 </Layout>
             </Router>
         );