Footer

20190226111443945/src/components/Footer/index.js

+/* eslint-disable react/destructuring-assignment */
+import React from 'react';
+import './index.less';
+import { Tab, TabBar, TabBarItem } from 'react-weui';
+
+import { browserHistory } from 'react-router';
+import UnTabBarlist from '../../../public/images/meeting.png';
+import TabBarlist from '../../../public/images/meeting2.png';
+import UnTabBarmeet from '../../../public/images/room.png';
+import TabBarmeet from '../../../public/images/room2.png';
+import UnTabBarordain from '../../../public/images/ordain.png';
+import TabBarordain from '../../../public/images/ordain2.png';
+import UnTabBarmy from '../../../public/images/my.png';
+import TabBarmy from '../../../public/images/my2.png';
+
+export default class Footer extends React.Component {
+  state={
+    // eslint-disable-next-line react/no-unused-state
+    tab: 0
+  }
+  
+  componentWillMount() {
+  }
+
+  componentDidMount() {
+  }
+
+  linktoHome = (e) => {
+    this.setState({ tab: 0 });
+    console.log(this.props);
+    // browserHistory.push(this.newMethod('/home'));
+
+  }
+
+  newMethod() {
+    return '/home';
+  }
+
+  render() {
+    return (
+      <div className="footer-container"> 
+        <Tab>
+          <TabBar>
+            <TabBarItem
+              // eslint-disable-next-line react/destructuring-assignment
+              active={this.state.tab === 0}
+              onClick={this.linktoHome}
+              icon={this.state.tab === 0 ? <img src={TabBarlist} alt="" /> : <img src={UnTabBarlist} alt="" />}
+              label="会议室"
+            />
+            {/* <TabBarItem active={this.state.tab === 1} onClick={e=>this.setState({ tab: 1 })}>
+              <Link to="/desc">
+                <TabBarIcon>
+                  <img src={TabBarmeet} alt="" />
+                </TabBarIcon>
+                <TabBarLabel>Tab2</TabBarLabel>
+              </Link>
+            </TabBarItem> */}
+            <TabBarItem
+              // eslint-disable-next-line react/destructuring-assignment
+              active={this.state.tab === 1}
+              onClick={e=>this.setState({ tab: 1 })}
+              icon={this.state.tab === 1 ? <img src={TabBarmeet} alt="" /> : <img src={UnTabBarmeet} alt="" />}
+              label="预定"
+            />
+            <TabBarItem
+              // eslint-disable-next-line react/destructuring-assignment
+              active={this.state.tab === 2}
+              onClick={e=>this.setState({ tab: 2 })}
+              icon={this.state.tab === 2 ? <img src={TabBarordain} alt="" /> : <img src={UnTabBarordain} alt="" />}
+              label="日程"
+            />
+            <TabBarItem
+              // eslint-disable-next-line react/destructuring-assignment
+              active={this.state.tab === 3}
+              onClick={e=>this.setState({ tab: 3 })}
+              icon={this.state.tab === 3 ? <img src={TabBarmy} alt="" /> : <img src={UnTabBarmy} alt="" />}
+              label="我的"
+            />
+          </TabBar>
+        </Tab>
+      </div>
+    );
+  }
+};

20190226111443945/src/components/Footer/index.less

+.footer-container{
+    background-color: #fff;
+    position: fixed;
+    z-index: 101;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
\ No newline at end of file

20190226111443945/src/components/Footer/package.json

+{
+  "name": "index",
+  "version": "1.0.0",
+  "private": true,
+  "main": "./index.js"
+}