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

import React from 'react';
import { TabBar } from 'antd-mobile';
//import {PageContext} from '../context'





class TabBarBottom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'bill',
      hidden: false,
      fullScreen: true,
    };
    this.handleChange=this.handleChange.bind(this)
  }
  
  //要保留，勿动
  renderContent(page){}

  handleChange(page){
    this.props.changePage(page)
  }

  render() {
    //这里渲染一次
    return (
      <div style={this.state.fullScreen ? { position: 'absolute', height: '100%', width: '100%', bottom: 0 } : { height: 400 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="账单"
            key="bill"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/bill.svg) center center /  21px 21px no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/bill_s.svg) center center /  21px 21px no-repeat' }}
            />
            }
            selected={this.state.selectedTab === 'bill'}
         
            onPress={() => {
              this.setState({
                selectedTab: 'bill',
              });
              this.handleChange('bill')
            }}
            data-seed="logId"
          >
            {this.renderContent('bill')}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/assets.svg) center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/assets_s.svg) center center /  21px 21px no-repeat' }}
              />
            }
            title="总资产"
            key="assets"
          
            selected={this.state.selectedTab === 'assets'}
            onPress={() => {
              this.setState({
                selectedTab: 'assets',
              });
              this.handleChange('assets')
            }}
            data-seed="logId1"
          >
            {this.renderContent('assets')}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/user.svg) center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/user_s.svg) center center /  21px 21px no-repeat' }}
              />
            }
            title="我的"
            key="my"
  
            selected={this.state.selectedTab === 'my'}
            onPress={() => {
              this.setState({
                selectedTab: 'my',
              });
              this.handleChange('my')
            }}
          >
            {this.renderContent('my')}
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}


export default TabBarBottom
// export default props => (
//   <PageContext.Consumer>
//     {(obj)=> <TabBarBottom {...props} {...obj}/>}
//   </PageContext.Consumer>
// );