搜索，地区，导航栏

20190226111443945/src/App.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Route from 'react-router-dom/Route';
-import Router from 'react-router-dom/Router';
+import { Router } from 'react-router-dom';
 import createHistory from 'history/createHashHistory';
 const history = createHistory();
 // import { BrowserRouter } from 'react-router-dom';
@@ -64,45 +64,6 @@ export default class App extends React.Component {
           />
          
         </Router>
-        
-        {/* <Tab>
-          <TabBody>
-            <Article style={{ display: this.state.tab === 0 ? null : 'none' }}>
-              <h1>Page 1</h1>
-              <section>
-                <h2 className="title">Heading</h2>
-                <section>
-                  <h3>1.1 Title</h3>
-                  <p>Lorem ipsum dolor sit amet,</p>
-                </section>
-              </section>
-            </Article>
-            <Article style={{ display: this.state.tab === 1 ? null : 'none' }}>
-              <h1>Page 2</h1>
-              <section>
-                <h2 className="title">Heading</h2>
-                <section>
-                  <h3>1.2 Title</h3>
-                  <p>Lorem ipsum dolor sit amet,</p>
-                </section>
-              </section>
-            </Article>
-          </TabBody>
-          <TabBar>
-            <TabBarItem
-              active={this.state.tab === 0}
-              onClick={e=>this.setState({ tab: 0 })}
-              icon={<img src={TabBarlist} alt="" />}
-              label="Tab1"
-            />
-            <TabBarItem active={this.state.tab === 1} onClick={e=>this.setState({ tab: 1 })}>
-              <TabBarIcon>
-                <img src={TabBarroom} alt="" />
-              </TabBarIcon>
-              <TabBarLabel>Tab2</TabBarLabel>
-            </TabBarItem>
-          </TabBar>
-        </Tab> */}
 
       </div>
     );

20190226111443945/src/app.less

 /*全局css样式*/
 * {
+  // background: #F1F1F1;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;

20190226111443945/src/components/Footer/index.js

@@ -2,35 +2,35 @@
 import React from 'react';
 import './index.less';
 import { Tab, TabBar, TabBarItem } from 'react-weui';
-
-import { browserHistory } from 'react-router';
+// import { Link } from 'react-router-dom';
+// 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';
-
+// 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';
+import MyTabIcon from '../MyTabIcon';
 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);
+  linktoHome = (event) => {
+    // this.setState({ tab: 0 });
+    // console.log(this.props);
     // browserHistory.push(this.newMethod('/home'));
-
-  }
+    
+  };
 
   newMethod() {
     return '/home';
@@ -41,29 +41,46 @@ export default class Footer extends React.Component {
       <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
+            {/* <Link to="/meeting">
+              <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="会议室"
+              />
+            </Link> */}
+            <TabBarItem active={this.state.tab === 0} onClick={e=>this.setState({ tab: 0 })}>   
+                     
+              <MyTabIcon url="/home" imgUrl={this.state.tab === 0 ? TabBarlist : UnTabBarlist} label="会议室" />
+            
+            </TabBarItem>
+            <TabBarItem active={this.state.tab === 1} onClick={e=>this.setState({ tab: 1 })}>   
+                     
+              <MyTabIcon url="/meeting" imgUrl={this.state.tab === 1 ? TabBarlist : UnTabBarlist} label="预定" />
+            
+            </TabBarItem>
+           
+            <TabBarItem active={this.state.tab === 2} onClick={e=>this.setState({ tab: 2 })}>   
+                     
+              <MyTabIcon url="/schedule" imgUrl={this.state.tab === 2 ? TabBarlist : UnTabBarlist} label="日程" />
+            
+            </TabBarItem>
+            <TabBarItem active={this.state.tab === 3} onClick={e=>this.setState({ tab: 3 })}>   
+              
+              <MyTabIcon url="/my" imgUrl={this.state.tab === 3 ? TabBarlist : UnTabBarlist} label="我的" />
+            
+            </TabBarItem>
+            {/* <Link to="/meeting">
+              <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="预定"
+              />
+            </Link> */}
+            {/* <TabBarItem
               // eslint-disable-next-line react/destructuring-assignment
               active={this.state.tab === 2}
               onClick={e=>this.setState({ tab: 2 })}
@@ -76,7 +93,7 @@ export default class Footer extends React.Component {
               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/routes/Desc/index.js

+/* eslint-disable react/sort-comp */
 import React from 'react';
-import { Article } from '@wecode/react-weui';
+import { Link } from 'react-router-dom';
+import Footer from '../../components/Footer';
 import './index.less';
+import search1 from '../../../public/images/search1.png';
+import search2 from '../../../public/images/search2.png';
+import search3 from '../../../public/images/search3.png';
 
 export default class Desc extends React.Component {
+
   componentWillMount() {
-    window.HWH5.navTitle({ title: '框架说明' });
+    window.HWH5.navTitle({ title: '搜索会议室' });
   }
 
   componentDidMount() {}
 
+  handleClick=()=>{
+ 
+  }
+
   render() {
     return (
       <div>
-        <Article>
-          <h1>框架说明</h1>
-          <h2>一套 weui 设计语言和 React 实现：</h2>
-          <ul className="advantage">
-            <li> 符合官方交互语言和视觉风格。</li>
-            <li> 开箱即用的高质量 React 组件。</li>
-            <li> 本地开发自动检测JSAPI新版本并集成到开发环境。</li>
-            <li> 使用 eslint，按照规则给出报告的代码检测工具,避免低级错误和统一代码的风格。</li>
-            <li>
-              基于 npm + webpack + react + redux + less + jsapi + weui（mit license），
-              的快速开发本地化的框架。
-            </li>
-          </ul>
-        </Article>
+        <div className="search">
+          <img src={search1} alt="" />
+          <Link to="./pick"><img src={search2} alt="" /></Link>
+          <img src={search3} alt="" />
+        </div>
+        <Footer />
       </div>
     );
   }

20190226111443945/src/routes/Desc/index.less

-.advantage {
-  list-style: circle;
-  padding-left: 20px;
-
-  li {
-    margin-bottom: 10px;
-  }
+.search img{
+  width: 100%;
+  height: 100%;
 }

20190226111443945/src/routes/Meeting/index.js

 import React from 'react';
 import './index.less';
+import Footer from '../../components/Footer';
+import Ordainmeet from '../../../public/images/ordainmeet.png';
 
 export default class Meeting extends React.Component {
 
   componentWillMount() {
+    window.HWH5.navTitle({ title: '预定会议' });
   }
 
   componentDidMount() {
@@ -11,7 +14,12 @@ export default class Meeting extends React.Component {
 
   render() {
     return (
-      <div>Meeting</div>
+      <div>
+        <div className="Ordainmeet">
+          <img src={Ordainmeet} alt="" />
+        </div>
+        <Footer />
+      </div>
     );
   }
 };

20190226111443945/src/routes/Meeting/index.less

+.Ordainmeet img{
+    width: 100%;
+    height: auto;
+}
\ No newline at end of file

20190226111443945/src/routes/index.js

@@ -6,11 +6,17 @@
 import { AsyncComponent } from '@wecode/wlk-react-template-util';
 import Home from './Home';
 import Meeting from './Meeting';
+import Schedule from './Schedule';
+import My from './My';
+import Pick from './Pick';
 // webpackChunkName 可指定模块名称，访问路由按需加载
 const routes = [
   { path: '/', component: Home, exact: true },
   { path: '/home', component: Home, exact: true },
   { path: '/meeting', component: Meeting, exact: true },
+  { path: '/schedule', component: Schedule, exact: true },
+  { path: '/my', component: My, exact: true },
+  { path: '/pick', component: Pick, exact: true },
   { path: '/desc', component: AsyncComponent(() => import('./Desc')) }
 ];