添加跳转，还需修改

package.json

@@ -52,6 +52,7 @@
     "react-app-polyfill": "^0.2.1",
     "react-dev-utils": "^7.0.3",
     "react-dom": "^16.8.3",
+    "react-router-dom": "^4.3.1",
     "resolve": "1.10.0",
     "sass-loader": "7.1.0",
     "style-loader": "0.23.1",

src/App.js

@@ -10,10 +10,36 @@ class App extends Component {
         super(props)
         this.state = {
             selectedTab: 'home',
-            tabHidden: false
+            tabHidden: false,
+            page:'detail'
         }
     }
 
+    componentWillMount(){
+        this.getHash();
+    }
+
+    componentWillReceiveProps(nextProps, nextContext) {
+        this.getHash();
+    }
+
+    getHash = () => {
+        let hash = window.location.hash || '#tab=home';
+        let tab = 'home',page = 'detail';
+        if(hash && hash.indexOf("&")>0){
+            let tabHash = hash.split("&")[0], pageHash = hash.split("&")[1];
+            tab = tabHash.substr(tabHash.indexOf("=")+1);
+            page = pageHash.substr(pageHash.indexOf("=")+1);
+        }
+        // console.log('tab',tab);
+        // console.log('page',page);
+
+        this.setState({
+            selectedTab: tab,
+            page
+        });
+    };
+
     changeTabBar = (tab, hidden) => {
         this.setState({
             selectedTab: tab,
@@ -22,7 +48,7 @@ class App extends Component {
     }
 
     render() {
-        let {selectedTab, tabHidden} = this.state
+        let {selectedTab, tabHidden, page} = this.state;
         return (
             <div style={{
                 position: 'fixed',
@@ -43,6 +69,7 @@ class App extends Component {
                         selectedIcon={<HomeSelectedIcon/>}
                         selected={selectedTab === 'home'}
                         onPress={() => {
+                            window.location.hash = 'tab=home';
                             this.changeTabBar('home')
                         }}
                     >
@@ -55,6 +82,7 @@ class App extends Component {
                         key="cart"
                         selected={selectedTab === 'cart'}
                         onPress={() => {
+                            window.location.hash = `tab=cart&page=${page}`;
                             this.changeTabBar('cart')
                         }}
                     >
@@ -67,6 +95,7 @@ class App extends Component {
                         key="my"
                         selected={selectedTab === 'my'}
                         onPress={() => {
+                            window.location.hash = 'tab=my';
                             this.changeTabBar('my')
                         }}
                     >

src/index.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
 import App from './App'
 
 import ApolloClient from "apollo-boost"
@@ -13,7 +14,11 @@ const client = new ApolloClient({
 
 ReactDOM.render(
     <ApolloProvider client={client}>
-        <App/>
+        <Router>
+            <Switch>
+                <Route exact path="/" component = { App }/>
+            </Switch>
+        </Router>
     </ApolloProvider>,
     document.getElementById('root')
 )

src/pages/cart/CartEdit.jsx

@@ -244,7 +244,7 @@ class CartEdit extends Component {
                                 <div className="jiesuan-total">
                                 </div>
                                 <button className="jiesuan-button" onClick={()=>{this.delete()}}>
-                                    <span>删除所选</span>
+                                    <span>删除({this.state.selectedCount})</span>
                                 </button>
                             </div>
                         </div>:''

src/pages/cart/CartItem.jsx

@@ -240,7 +240,7 @@ class CartItem extends Component {
                             disabled={!this.state.isSelectAll}
                             onClick={()=>{this.settleAccounts()}}
                         >
-                            <span>去结算({this.state.selectedCount})</span>
+                            <span>下单({this.state.selectedCount})</span>
                         </button>
                     </div>
                 </div>

src/pages/cart/empty/index.css

@@ -0,0 +1,22 @@
+.cart-empty {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+}
+
+.cart-empty div{
+    margin: 10px;
+}
+
+.empty-button {
+    width: 110px;
+    height: 100%;
+    color: #fff;
+    background-color: #f44;
+    border: 1px solid #f44;
+    font-size: 14px;
+    text-align: center;
+    padding: 5px;
+}

src/pages/cart/empty/index.js

@@ -0,0 +1,36 @@
+import React, {Component} from 'react';
+import {withRouter} from "react-router-dom";
+
+import cart_empty from '../../../images/cart_empty.jpg';
+import './index.css';
+
+class Empty extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {}
+    }
+
+    render() {
+        let contentHeight = window.innerHeight - 95;
+
+        return (
+            <div className="cart-empty" style={{height:contentHeight}} >
+                <div>
+                    <img src={cart_empty} alt="img" width={100}/>
+                </div>
+                <div>购物车空空如此</div>
+                <div>
+                    <button className="empty-button"
+                            onClick={()=>{
+                                this.props.history.push({
+                                    pathname: `/`
+                            })}}>
+                        去逛逛
+                    </button>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default withRouter(Empty);

src/pages/cart/index.js

@@ -5,24 +5,60 @@ import gql from "graphql-tag"
 
 import CartItem from "./CartItem";
 import CartEdit from "./CartEdit";
+import Empty from "./empty";
 import {cart_by_userid} from "../../utils/gql";
 
 class Cart extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            content:true
+            page:'detail'
         }
     }
 
-    changeCartPage =()=>{
+    componentWillMount(){
+        this.getHash();
+    }
+
+    componentWillReceiveProps(nextProps, nextContext) {
+        this.getHash();
+    }
+
+    getHash = () => {
+        // console.log('location',window.location.hash);
+        let hash = window.location.hash || '#tab=cart&page=detail';
+        let page = 'detail';
+        if(window.location.hash && hash.indexOf("&")>0){
+            let pageHash = hash.split("&")[1];
+            page = pageHash.substr(pageHash.indexOf("=")+1);
+        }
         this.setState({
-            content:!this.state.content
-        })
+            page
+        });
+    };
+
+    changeCartPage =()=>{
+        this.setState((preState)=>({
+            page:preState.page === 'detail'?'edit':'detail'
+        }));
+    };
+
+    renderPage = (data) => {
+        let {page} = this.state;
+
+        switch (page) {
+            case 'detail':
+                return <CartItem cartList={data.cartList}/>;
+            case 'edit':
+                return <CartEdit cartList={data.cartList}/>;
+            default:
+                return <div>test</div>
+        }
     };
 
     render() {
-        let {content} = this.state;
+        let {page} = this.state;
+
         return (
             <Query query={gql(cart_by_userid)} variables={{user_id: "obR_j5GbxDfGlOolvSeTdZUwfpKA"}}>
                 {
@@ -38,20 +74,22 @@ class Cart extends Component {
                             return 'error!'
                         }
                         console.log('cart data',data);
+
                         return (
                             <div>
                                 <NavBar
                                     mode="light"
                                     style={{borderBottom: '1px solid #ebedf0'}}
                                     rightContent={[
-                                        <span key={"1"} onClick={this.changeCartPage}>{content ? "编辑":"完成"}</span>
+                                        data.cartList.length ?
+                                            <span key={"1"} onClick={this.changeCartPage}>
+                                                {page === 'detail' ? "编辑":"完成"}
+                                            </span>:''
                                     ]}
                                 >购物袋
                                 </NavBar>
-                                {
-                                    content ?
-                                        <CartItem cartList={data.cartList}/>:<CartEdit cartList={data.cartList}/>
-
+                                {data.cartList.length ?
+                                        this.renderPage(data):<Empty/>
                                 }
                             </div>
                         )