Accueil Explorer Aide
S'inscrire Connexion
ioobot
/
ec-react
3
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

跳转

kulley il y a 6 ans
Parent
52172c4ef0
commit
dff2078576
9 fichiers modifiés avec 110 ajouts et 101 suppressions
Vue séparée Afficher les stats Diff
  1. 1 1
      public/index.html
  2. 8 4
      src/App.js
  3. 1 0
      src/app.css
  4. 23 7
      src/pages/home/kind/index.js
  5. 25 10
      src/pages/my/all/index.js
  6. 14 47
      src/pages/my/index.js
  7. 3 3
      src/pages/my/member/index.js
  8. 3 3
      src/pages/my/order/index.js
  9. 32 26
      src/pages/my/tools/index.js

+ 1 - 1
public/index.html
Voir le fichier 

@@ -26,7 +26,7 @@
 
   </head>
 
   <body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
-    <div id="root"></div>
 
+    <div id="root" style="height: 100%"></div>
 
     <!--
 
       This HTML file is a template.
 
       If you open it directly in the browser, you will see an empty page.

+ 8 - 4
src/App.js
Voir le fichier 

@@ -31,7 +31,7 @@ class App extends Component {
 
 
         // 如果不是首页的初始界面，就隐藏 tabbar
 
         // 如在 /home/detail 刷新
 
-        if(location.pathname.split('/').length>2) {
 
+        if (location.pathname.split('/').length > 2) {
 
             this.setState({
 
                 tabHidden: true
 
             })
 
@@ -65,17 +65,21 @@ class App extends Component {
 
     }
 
 
     isActiveFunc = (navKind) => (match, location) => {
 
-        return navKind === location.pathname.split('/')[1]
 
+        if (navKind === 'home' && location.pathname.split('/')[1] === '') {
 
+            return true
 
+        } else {
 
+            return navKind === location.pathname.split('/')[1]
 
+        }
 
     }
 
 
     render() {
 
         let {selectedTab, tabHidden} = this.state
 
         return (
 
-            <div>
 
+            <div style={{height: '100%'}}>
 
                 <div className={classnames('tabbar', {'tabbar-hidden': tabHidden})}>
 
                     <Row>
 
                         <Col span={8} className='tabbar-content'>
 
-                            <NavLink exact isActive={this.isActiveFunc('home')} activeClassName="active" to="/">
 
+                            <NavLink exact isActive={this.isActiveFunc('home')} activeClassName="active" to="/home">
 
                                 {
 
                                     selectedTab === 'home' ?
 
                                         <HomeSelectedIcon/>

+ 1 - 0
src/app.css
Voir le fichier 

@@ -7,6 +7,7 @@
 
     z-index: 1;
 
     border-top: 1px solid #F3F3F3;
 
     text-align: center;
 
+    transition: all ease 0.3s;
 
 }
 
 
 .tabbar-content {

+ 23 - 7
src/pages/home/kind/index.js
Voir le fichier 

@@ -12,11 +12,22 @@ const Search = Input.Search
 
 class Kind extends Component {
 
     constructor(props) {
 
         super(props)
 
-        this.state = {}
 
+        this.state = {
 
+            id: ''
 
+        }
 
+    }
 
+
 
+    componentWillMount() {
 
+        let {location} = this.props
 
+        if(location && location.state) {
 
+            this.setState({
 
+                id: location.state.id
 
+            })
 
+        }
 
     }
 
 
     render() {
 
-        let {id, changePageInHome} = this.props
 
+        let {id} = this.state
 
         return (
 
             <div className='kind-wrap'>
 
                 <div className='kind-navbar-wrap'>
 
@@ -53,13 +64,12 @@ class Kind extends Component {
 
                             return (
 
                                 <KindRender
 
                                     data={data.productbyprops}
 
-                                    changePageInHome={changePageInHome}
 
+                                    history={this.props.history}
 
                                 />
 
                             )
 
                         }
 
                     }
 
                 </Query>
 
-
 
             </div>
 
         )
 
     }
 
@@ -74,14 +84,20 @@ class KindRender extends Component {
 
     }
 
 
     render() {
 
-        let {data, changePageInHome} = this.props
 
+        let {data} = this.props
 
         return (
 
             <div className='kind-wrapper'>
 
                 <Grid data={data}
 
                       columnNum={2}
 
                       hasLine={false}
 
-                      onClick={(kind) => {
 
-                          changePageInHome('detail', {id: kind.id})
 
+                      onClick={(product) => {
 
+                          console.log(product)
 
+                          this.props.history.push({
 
+                              pathname: '/home/detail',
 
+                              state: {
 
+                                  id: product.id
 
+                              }
 
+                          })
 
                       }}
 
                       renderItem={dataItem => (
 
                           <div key={dataItem.id} className='kind-item'>

+ 25 - 10
src/pages/my/all/index.js
Voir le fichier 

@@ -1,6 +1,7 @@
 
 import React, {Component} from 'react'
 
 import './index.css'
 
 import {Grid} from 'antd-mobile'
 
+import {withRouter} from 'react-router-dom'
 
 
 const orderIcon = [
 
     {
 
@@ -64,13 +65,10 @@ const memberIcon = [
 
 class All extends Component {
 
     constructor(props) {
 
         super(props)
 
-        this.state = {
 
-
 
-        }
 
+        this.state = {}
 
     }
 
 
     render() {
 
-        let {changePageInMy, changeTabBar} = this.props;
 
         return (
 
             <div className='my-wrap all'>
 
                 <div className='avatar-area'>
 
@@ -86,7 +84,12 @@ class All extends Component {
 
                               columnNum={4}
 
                               hasLine={false}
 
                               onClick={(order) => {
 
-                                  changePageInMy('order', {id: order.id})
 
+                                  this.props.history.push({
 
+                                      pathname: '/my/order',
 
+                                      state: {
 
+                                          page: order.id
 
+                                      }
 
+                                  })
 
                               }}
 
                         />
 
                     </div>
 
@@ -101,10 +104,17 @@ class All extends Component {
 
                               columnNum={4}
 
                               hasLine={false}
 
                               onClick={(tools) => {
 
-                                  if(tools.id === 'cart') {
 
-                                      changeTabBar('cart')
 
+                                  if (tools.id === 'cart') {
 
+                                      this.props.history.push({
 
+                                          pathname: '/cart'
 
+                                      })
 
                                   } else {
 
-                                      changePageInMy('tools', {id: tools.id})
 
+                                      this.props.history.push({
 
+                                          pathname: '/my/tools',
 
+                                          state: {
 
+                                              page: tools.id
 
+                                          }
 
+                                      })
 
                                   }
 
                               }}
 
                         />
 
@@ -120,7 +130,12 @@ class All extends Component {
 
                               columnNum={4}
 
                               hasLine={false}
 
                               onClick={(member) => {
 
-                                  changePageInMy('member', {id: member.id})
 
+                                  this.props.history.push({
 
+                                      pathname: '/my/member',
 
+                                      state: {
 
+                                          page: member.id
 
+                                      }
 
+                                  })
 
                               }}
 
                         />
 
                     </div>
 
@@ -130,4 +145,4 @@ class All extends Component {
 
     }
 
 }
 
 
-export default All
 
+export default withRouter(All)

+ 14 - 47
src/pages/my/index.js
Voir le fichier 

@@ -1,54 +1,21 @@
 
-import React, {Component} from 'react'
 
+import React from 'react'
 
 import './index.css'
 
 import All from './all'
 
 import Order from './order'
 
 import Tools from './tools'
 
 import Member from './member'
 
+import {Switch, Route} from 'react-router-dom'
 
 
-class My extends Component {
 
-    constructor(props) {
 
-        super(props)
 
-        this.state = {
 
-            page: 'all',
 
-            param: {}
 
-        }
 
-    }
 
-
 
-    changePageInMy = (page, param, hidden) => {
 
-        this.props.changeTabBar('my', hidden !== undefined ? hidden : true)
 
-        this.setState({
 
-            page,
 
-            param: param ? param : {}
 
-        })
 
-    }
 
-
 
-    renderPage = () => {
 
-        let {page, param} = this.state
 
-        let {changeTabBar} = this.props
 
-        switch (page) {
 
-            case 'all':
 
-                return <All changePageInMy={this.changePageInMy} changeTabBar={changeTabBar} {...param}/>
 
-            case 'order':
 
-                return <Order changePageInMy={this.changePageInMy} {...param}/>
 
-            case 'tools':
 
-                return <Tools changePageInMy={this.changePageInMy} {...param}/>
 
-            case 'member':
 
-                return <Member changePageInMy={this.changePageInMy} {...param}/>
 
-            default:
 
-                return <div>这个页面不应该出现是</div>
 
-        }
 
-    }
 
-
 
-    render() {
 
-        return (
 
-            <div style={{height: '100%'}}>
 
-                {
 
-                    this.renderPage()
 
-                }
 
-            </div>
 
-        )
 
-    }
 
-}
 
-
 
-export default My
 
+const My = () => (
 
+    <div style={{height: '100%'}}>
 
+        <Switch>
 
+            <Route exact path="/my" component={All}/>
 
+            <Route exact path="/my/all" component={All}/>
 
+            <Route path="/my/order" component={Order}/>
 
+            <Route path="/my/tools" component={Tools}/>
 
+            <Route path="/my/member" component={Member}/>
 
+        </Switch>
 
+    </div>
 
+)
 
 
+export default My

+ 3 - 3
src/pages/my/member/index.js
Voir le fichier 

@@ -1,6 +1,7 @@
 
 import React, {Component} from 'react'
 
 import './index.css'
 
 import {NavBar, Icon} from 'antd-mobile'
 
+import {withRouter} from 'react-router-dom'
 
 
 class Member extends Component {
 
     constructor(props) {
 
@@ -9,7 +10,6 @@ class Member extends Component {
 
     }
 
 
     render() {
 
-        let {changePageInMy} = this.props
 
         return (
 
             <div className='member-wrap'>
 
                 <div className='member-navbar-wrap'>
 
@@ -17,7 +17,7 @@ class Member extends Component {
 
                         className='member-navbar'
 
                         mode="light"
 
                         icon={<Icon type="left"/>}
 
-                        onLeftClick={() => changePageInMy('all', {}, false)}
 
+                        onLeftClick={() => {this.props.history.push({pathname: '/my/all'})}}
 
                         rightContent={[
 
                             <Icon key="1" type="ellipsis"/>,
 
                         ]}
 
@@ -28,4 +28,4 @@ class Member extends Component {
 
     }
 
 }
 
 
-export default Member
 
+export default withRouter(Member)

+ 3 - 3
src/pages/my/order/index.js
Voir le fichier 

@@ -1,6 +1,7 @@
 
 import React, {Component} from 'react'
 
 import './index.css'
 
 import {NavBar, Icon} from 'antd-mobile'
 
+import {withRouter} from 'react-router-dom'
 
 
 class Order extends Component {
 
     constructor(props) {
 
@@ -9,7 +10,6 @@ class Order extends Component {
 
     }
 
 
     render() {
 
-        let {changePageInMy} = this.props
 
         return (
 
             <div className='order-wrap'>
 
                 <div className='order-navbar-wrap'>
 
@@ -17,7 +17,7 @@ class Order extends Component {
 
                         className='order-navbar'
 
                         mode="light"
 
                         icon={<Icon type="left"/>}
 
-                        onLeftClick={() => changePageInMy('all', {}, false)}
 
+                        onLeftClick={() => {this.props.history.push({pathname: '/my/all'})}}
 
                         rightContent={[
 
                             <Icon key="1" type="ellipsis"/>,
 
                         ]}
 
@@ -28,4 +28,4 @@ class Order extends Component {
 
     }
 
 }
 
 
-export default Order
 
+export default withRouter(Order)

+ 32 - 26
src/pages/my/tools/index.js
Voir le fichier 

@@ -3,6 +3,7 @@ import './index.css'
 
 import {NavBar, Icon} from 'antd-mobile'
 
 import Message from './message'
 
 import Address from './address'
 
+import {withRouter, Route, Switch} from 'react-router-dom'
 
 
 class Tools extends Component {
 
     constructor(props) {
 
@@ -12,31 +13,33 @@ class Tools extends Component {
 
         }
 
     }
 
 
-    renderPage = (id) => {
 
-        switch (id) {
 
-            case 'address':
 
-                return <Address />
 
-            case 'message':
 
-                return <Message />
 
-            default:
 
-                return <div>此页面后不该出现</div>
 
+    componentWillMount() {
 
+        let {location} = this.props
 
+        if (location && location.state) {
 
+            this.props.history.push({
 
+                pathname: '/my/tools/' + location.state.page,
 
+                state: {}
 
+            })
 
+            let navTitle = ''
 
+            switch (location.state.page) {
 
+                case 'address':
 
+                    navTitle = '地址管理'
 
+                    break
 
+                case 'message':
 
+                    navTitle = '系统通知'
 
+                    break
 
+                default:
 
+                    navTitle = '无效页面'
 
+                    break
 
+            }
 
+            this.setState({
 
+                navTitle
 
+            })
 
         }
 
     }
 
 
     render() {
 
-        let {changePageInMy, id} = this.props
 
-        let navTitle = ''
 
-        switch (id) {
 
-            case 'address':
 
-                navTitle = '地址管理'
 
-                break
 
-            case 'message':
 
-                navTitle = '系统通知'
 
-                break
 
-            default:
 
-                navTitle = '无效页面'
 
-                break
 
-        }
 
+        let {navTitle} = this.state
 
 
         return (
 
             <div className='tools-wrap'>
 
@@ -45,18 +48,21 @@ class Tools extends Component {
 
                         className='tools-navbar'
 
                         mode="light"
 
                         icon={<Icon type="left"/>}
 
-                        onLeftClick={() => changePageInMy('all', {}, false)}
 
+                        onLeftClick={() => {
 
+                            this.props.history.push({pathname: '/my/all'})
 
+                        }}
 
                         rightContent={[
 
                             <Icon key="1" type="ellipsis"/>,
 
                         ]}
 
                     >{navTitle}</NavBar>
 
                 </div>
 
-                {
 
-                    this.renderPage(id)
 
-                }
 
+                <Switch>
 
+                    <Route path="/my/tools/address" component={Address}/>
 
+                    <Route path="/my/tools/message" component={Message}/>
 
+                </Switch>
 
             </div>
 
         )
 
     }
 
 }
 
 
-export default Tools
 
+export default withRouter(Tools)