重构billApp结构

src/case/BillApp/src/App.css

@@ -1,6 +1,4 @@
-
-
-
-
-
-
+.billApp .pageWrap{
+    position: relative;
+    z-index: 2
+}

src/case/BillApp/src/App.js

@@ -1,23 +1,93 @@
 import React, { Component } from 'react';
 import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
+import {PageContext} from './components/context'
+import config from './api/url_config'
+
+
 
 import NavBars from './components/App/NavBar'
 import TabBarBottom from './components/App/TabBarBottom'
+import HomePage from './components/Bill/Bill'
+import Assets from './components/Assets/Assets'
+import My from './components/My/My'
+
 
 import './App.css';
 
+window.sessionStorage.setItem('opeind',config.APPID)
+
 class BillApp extends Component{
-  render(){
-      return(
-        <div className="AppWrap">
-          <div className="phone6s">
-            <div className="App">
-              <NavBars />
-              <TabBarBottom />
+  constructor(){
+    super()
+    //初始化状态
+    this.state={
+      page:"bill",
+      navBarText:'账单'
+    }
+
+    this.changePage=this.changePage.bind(this)
+    this.setNavBarText=this.setNavBarText.bind(this)
+  }
+
+  //更改页面
+  changePage(page){
+    this.setState({page})
+  }
+
+  setNavBarText(text){
+    this.setState({navBarText:text})
+  }
+
+  renderBottom(){
+    let page=this.state.page
+    if(page==='bill'||page==='assets'||page==='my'){
+      return(<TabBarBottom changePage={this.changePage}/>)
+    }
+  }
+
+  //根据状态渲染页面
+  renderPage(page){
+    switch(page){
+      case ('bill'):
+        return(
+          <div className="pageWrap">
+            <HomePage />
+          </div>
+          )
+      case('assets'):
+          return(
+            <div className="pageWrap">
+              <Assets />
+            </div>
+          )
+     case('my'):
+          return(
+            <div className="pageWrap">
+              <My />
             </div>
+          )
+      default:
+          return(
+            <div>页面加载失败,请刷新页面</div>
+          )
+    }
+  }
+  
+  render(){
+    const changePage=this.changePage
+    return(
+      <div className="AppWrap">
+        <div className="phone6s">
+          <div className="App billApp">
+            <PageContext.Provider value={changePage}>
+              <NavBars navBarText={this.state.navBarText}/>
+              {this.renderPage(this.state.page)}
+              {this.renderBottom()}
+            </PageContext.Provider>
           </div>
         </div>
-      )
+      </div>
+    )
   }
 }
 export default BillApp;

src/case/BillApp/src/api/url_config.js

@@ -1,6 +1,6 @@
 var config={
     APPID:"wxc4831335ae194243",
-    HTTP_DATA_URL:'http://localhost:3001/graphql',
+    HTTP_DATA_URL:'http://bills.ioobot.cn/graphql',
     HTTP_PAY_URL:'https://xcx.ioobot.com/payinfo'
 }
 export default config

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

@@ -18,7 +18,7 @@ export default class NavBars extends Component{
                     <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                     <Icon key="1" type="ellipsis" />,
                 ]}
-                ><span style={{fontSize:'14px'}}>记账小程序</span>
+                ><span style={{fontSize:'14px'}}>{this.props.navBarText}</span>
                 </NavBar>
             </div>
         )

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import { TabBar } from 'antd-mobile';
+//import {PageContext} from '../context'
 
 
-import HomePage from '../HomePage/HomePage'
-
 
 
 
@@ -15,36 +14,16 @@ class TabBarBottom extends React.Component {
       hidden: false,
       fullScreen: true,
     };
+    this.handleChange=this.handleChange.bind(this)
   }
   
+  //要保留，勿动
+  renderContent(page){}
 
-  renderContent(page) { 
-    if(page==='bill'){
-      //console.log(page)
-      return (
-        <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
-         <HomePage/>
-        </div>
-      );
-    }
-    if(page==='assets'){
-      //console.log(page)
-      return (
-        <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
-        2222222
-        </div>
-      );
-    }
-    if(page==='my'){
-      //console.log(page)
-      return (
-        <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
-       333333
-        </div>
-      );
-    }
-    
+  handleChange(page){
+    this.props.changePage(page)
   }
+
   render() {
     //这里渲染一次
     return (
@@ -76,6 +55,7 @@ class TabBarBottom extends React.Component {
               this.setState({
                 selectedTab: 'bill',
               });
+              this.handleChange('bill')
             }}
             data-seed="logId"
           >
@@ -104,6 +84,7 @@ class TabBarBottom extends React.Component {
               this.setState({
                 selectedTab: 'assets',
               });
+              this.handleChange('assets')
             }}
             data-seed="logId1"
           >
@@ -132,6 +113,7 @@ class TabBarBottom extends React.Component {
               this.setState({
                 selectedTab: 'my',
               });
+              this.handleChange('my')
             }}
           >
             {this.renderContent('my')}
@@ -143,4 +125,9 @@ class TabBarBottom extends React.Component {
 }
 
 
-export default TabBarBottom
+export default TabBarBottom
+// export default props => (
+//   <PageContext.Consumer>
+//     {(obj)=> <TabBarBottom {...props} {...obj}/>}
+//   </PageContext.Consumer>
+// );

src/case/BillApp/src/components/Assets/Assets.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class Assets extends Component {
+  render() {
+    return (
+      <div>
+        资产
+      </div>
+    )
+  }
+}

src/case/BillApp/src/components/HomePage/HomePage.jsx → src/case/BillApp/src/components/Bill/Bill.jsx

@@ -9,9 +9,9 @@ import {getBill} from '../../api/graphql/bills'
 
 
 
-import './HomePage.css'
+import './Bill.css'
 
-class HomePage  extends Component{
+class Bill  extends Component{
     constructor(props){
         super(props)
         const month =new Date().getMonth()+1
@@ -38,7 +38,6 @@ class HomePage  extends Component{
     render(){
         return(
             <div>
-                <div className="title">{'微记账本'}</div>
                 <div className="dateWrap"><span className="month"> {this.state.month} </span> / {this.state.year}</div>
                <Lists />
                <div className="buttonWrap">
@@ -50,4 +49,4 @@ class HomePage  extends Component{
     }
 }
 
-export default HomePage
+export default Bill

src/case/BillApp/src/components/My/My.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class My extends Component {
+  render() {
+    return (
+      <div>
+        My
+      </div>
+    )
+  }
+}

src/case/BillApp/src/components/context.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export const PageContext=React.createContext()
+export const NumContext=React.createContext()
+

src/case/OrderApp/src/api/url_config.js

@@ -1,6 +1,6 @@
 var config={
     APPID:"wxc4831335ae194243",
-    HTTP_DATA_URL:'http://localhost:3001/graphql',
+    HTTP_DATA_URL:'http://order.ioobot.cn/graphql',
     HTTP_PAY_URL:'https://xcx.ioobot.com/payinfo'
 }
 export default config