debug

src/components/Adjunct/index.jsx

+import React, {PureComponent} from 'react';
+import {Icon, Popover} from 'antd-mobile'
+import './index.less'
+
+const Item = Popover.Item;
+
+class Index extends PureComponent {
+    state={
+        visible: false
+    };
+    visibleChange = (visible) => {
+        this.setState({visible})
+    };
+    onSelect = (val) => {
+        console.log(this.props.id);
+        this.visibleChange(false)
+    }
+    render() {
+        const {type} = this.props;
+        const {visible} = this.state
+
+        return (
+            <div className={`adjunct-card ${type ? 'adjunct-word' : 'adjunct-pdf'}`}>
+                <div className="adjunct-title">
+                    <img alt="" src={type ? '/img/test/test-2.png' : '/img/test/test.png'} className="adjunct-img"/>
+                    <div>
+                        <p className="adjunct-title-1">武汉考察注意政策</p>
+                        <p className="adjunct-title-2">科技创新委员会</p>
+                    </div>
+                </div>
+                <Popover
+                    mask
+                    visible={visible}
+                    overlay={[
+                        (<Item key="4" value="scan">下载</Item>),
+                    ]}
+                    onVisibleChange={this.visibleChange}
+                    onSelect={this.onSelect}
+                >
+                    <Icon type="ellipsis" className="adjunct-icon" size="xxs"/>
+                </Popover>
+
+
+            </div>
+        );
+    }
+}
+
+export default Index;

src/components/Adjunct/index.less

+.adjunct-card{
+  padding: 7px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 7px;
+  margin-bottom: 6px;
+}
+.adjunct-word{
+  background: rgba(234, 244, 255, 1);
+}
+.adjunct-pdf{
+  background: rgba(255, 243, 234, 1);
+}
+
+.adjunct-title{
+  display: flex;
+  justify-content: flex-start;
+}
+.adjunct-img{
+  width: 33px;
+  height: 38px;
+  margin-right: 9px;
+}
+.adjunct-icon{
+  transform: rotate(90deg);
+}
+.adjunct-title-1{
+  font-size:14px;
+}
+.adjunct-title-2{
+  font-size:11px;
+  color:rgba(152,152,152,1);
+}

src/index.css

@@ -11,6 +11,8 @@ body {
 html,
 body,
 #root {
+position: fixed;
+  top: 0; left: 0;right: 0; bottom: 0;
   width: 100%;
   height: 100%;
   margin: 0;

src/layout/BlankLayout.jsx

 import React from 'react';
-import {WingBlank} from 'antd-mobile'
 import {withRouter} from 'react-router-dom'
 
 const BlankLayout = (props) => {

src/layout/index.less

@@ -10,3 +10,7 @@
   height: 18px;
   margin-bottom: 4px;
 }
+
+.am-activity-indicator.am-activity-indicator-toast{
+  background: rgba(35,35,35, 0.5);
+}

src/pages/AddressList/AddressList.jsx

 import React, {Component} from 'react';
-import {List, WhiteSpace,Row,Col} from 'antd-mobile';
-import { BrowserRouter, Route, Link } from "react-router-dom";
-import '../Communicate/index.less';
+import './index.less';
 class AddressList extends Component {
     state = {
 

src/pages/Backlog/Backlog.jsx

-import React from 'react';
-import {WhiteSpace, WingBlank} from 'antd-mobile'
+import React, {Component} from 'react';
+import {WhiteSpace, WingBlank, ActivityIndicator} from 'antd-mobile'
 import TodoCard from '../../components/TodoCard'
 import TopSearch from '../../components/TopSearch'
 
-const Backlog = (props) => {
-    const checkLog = () => {
-        props.history.push(`/blank/example/1`)
+
+class Index extends Component {
+    state={
+        loading: false
+    }
+    checkLog = () => {
+        this.props.history.push(`/blank/example/1`)
     }
+    render() {
+        const {loading} = this.state
         return (
             <WingBlank>
+                <ActivityIndicator
+                    toast
+                    text="加载中..."
+                    animating={loading}
+                />
                 <WhiteSpace/>
                 <TopSearch onSearch={val => console.log(val)}/>
                 {
                     [{},{},{},{},{},{}].map((item, index) => (
                         <div key={index}>
                             <WhiteSpace/>
-                        <TodoCard data={item} onCLick={checkLog}/>
+                            <TodoCard data={item} onCLick={this.checkLog}/>
                         </div>
 
                     ))
@@ -23,6 +34,7 @@ const Backlog = (props) => {
 
             </WingBlank>
         );
-};
+    }
+}
 
-export default Backlog;
+export default Index;

src/pages/Communicate/Communicate.jsx

-import React, {Component} from 'react';
-import {List, WhiteSpace,Row,Col} from 'antd-mobile';
-import TopSearch from '../../components/TopSearch'
-import './index.less'
-const Item = List.Item;
-
-class Communicate extends Component {
-    
-    render() {
-        return (
-            <div>
-                <div className='breadBox'>
-                    <span className='currentLink'>科技创新委员会</span><span className='symbol'>&gt;</span><span>组织架构</span><span className='symbol'>&gt;</span><span>办公厅</span>
-                </div>
-                <div className='adMainBox'>
-                    <ul className='adListBox'>
-                            <li>
-                                <div className='itemBox'>
-                                    <h4 className='titleBar'>市委办公厅审核员</h4>
-                                    <div className='adContent'>
-                                        <div className='peopleList'>
-                                            <p className='subItem'>
-                                                <span className='cicrleHead mr-5'>
-                                                    <img src='/img/head.png' className='imgRes' />
-                                                </span>
-                                               王磊
-                                            </p>
-                                            <p className='subItem'>
-                                                <img className='smallIco mr-5' src='/img/tel.png' />13488876526
-                                            </p>
-                                        </div>
-                                        <div className='peopleList'>
-                                            <p className='subItem'>
-                                                <span className='cicrleHead mr-5 centerFont'>
-                                                   王
-                                                </span>
-                                               王磊
-                                            </p>
-                                            <p className='subItem'>
-                                                <img className='smallIco mr-5' src='/img/tel.png' />13488876526
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </li>
-                            <li>
-                                <div className='itemBox'>
-                                    <h4 className='titleBar'>市委办公厅审核员</h4>
-                                    <div className='adContent'>
-                                        <div className='peopleList'>
-                                            <p className='subItem'>
-                                                <span className='cicrleHead mr-5'>
-                                                    <img src='/img/head.png' className='imgRes' />
-                                                </span>
-                                               王磊
-                                            </p>
-                                            <p className='subItem'>
-                                                <img className='smallIco mr-5' src='/img/tel.png' />13488876526
-                                            </p>
-                                        </div>
-                                        <div className='peopleList'>
-                                            <p className='subItem'>
-                                                <span className='cicrleHead mr-5 centerFont'>
-                                                   王
-                                                </span>
-                                               王磊
-                                            </p>
-                                            <p className='subItem'>
-                                                <img className='smallIco mr-5' src='/img/tel.png' />13488876526
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                         </li>
-                    </ul>
-                </div>
-            </div>
-        );
-    }
-}
-
-export default Communicate;

src/pages/EventProcessing/Adjunct.jsx

 import React from 'react';
 import List from '../../components/List'
+import AdjunctList from '../../components/Adjunct'
 
 
+const da222 = Array.from(new Array(7)).map((_val, i) => ({
+    id: `name${i}`,
+    text: `name${i}`,
+}));
+
 const Adjunct = () => {
     const listData = [
         {title: '开始时间', content: '文电科'},
@@ -11,13 +17,14 @@ const Adjunct = () => {
         {title: '备注', line: true, content: '函数是也是对象，是一个属性的集合，所以函数下也有属性，也可以自定义属性。当我们创建一个函数时就默认会有一个prototype属性，这个属性是一个对象(属性的集合)。这个东西就是原型---通过调用构造函数而创建的那个对象实例的原型对象。prototype里也有个属性constructor,指向的是函数本身'},
         {title: '附件', line: true, content:
                 <div>
-                    <div style={{width: '100%', height: 44}}>111111</div>
-                    <div style={{width: '100%', height: 44}}>111111</div>
+                    {da222.map((item, index) => (
+                        <AdjunctList key={index} {...item}/>
+                    ))}
                 </div>
         },
     ]
     return (
-        <div id="event-adjunct">
+        <div>
             <List
                 listData={listData}
             />

src/pages/EventProcessing/Basic.jsx

@@ -23,7 +23,7 @@ const Basic = () => {
         {title: '事由', content: '考察'},
     ];
     return (
-        <div id="event-basic">
+        <div>
             <List
                 title={"6.1日,部门考察工作出差申请"}
                 listData={listData}

src/pages/EventProcessing/Flow.jsx

@@ -3,7 +3,7 @@ import StepCard from '../../components/StepCard'
 
 const Flow = () => {
     return (
-        <div id="event-flow">
+        <div>
            <StepCard/>
         </div>
     );

src/pages/EventProcessing/Option.jsx

-import React from 'react';
-import './index.less'
+import React, {Component} from 'react';
+import {Modal} from 'antd-mobile'
+import './index.less';
 
-const Option = (props) => {
-    const topSearch = () => {
+const operation = Modal.operation;
+
+
+class Option extends Component {
+    state = {
+
+    }
+    onChange = () => {
         const input = document.getElementsByClassName("option-text");
-        props.onChange(input[0].value)
+        this.props.onChange(input[0].value)
     }
+    render() {
         return (
-        <div id="event-option">
+            <div>
                 <div className="option-card">
                     <div className="option-title">
                         <div>流转意见：</div>
-                    <a className="option-fast">常用阅办意见<img alt="" src="/img/option-icon.png" className="option-icon"/></a>
+                        <a
+                            className="option-fast"
+                            onClick={() => operation([
+                                { text: '默认一', onPress: () => console.log('默认一被点击了') },
+                                { text: '默认二', onPress: () => console.log('默认二被点击了') },
+                            ])}
+                        >
+                            常用阅办意见<img alt="" src="/img/option-icon.png" className="option-icon"/>
+                        </a>
                     </div>
-                <textarea className="option-text" onChange={topSearch}/>
+                    <textarea className="option-text" onChange={this.onChange}/>
                 </div>
             </div>
         );
-};
+    }
+}
+
 
 export default Option;

src/pages/EventProcessing/Process.jsx

 import React, {Component} from 'react';
-import {WingBlank, WhiteSpace, ActionSheet} from 'antd-mobile'
+import {WingBlank, WhiteSpace, ActionSheet, ActivityIndicator} from 'antd-mobile'
 import './index.less'
 import TopTabs from '../../components/TopTabs'
 import Basic from './Basic'
@@ -25,7 +25,8 @@ class Process extends Component {
             current: 'basic',
             disabled: true,
             footStatus: false,
-            footButton: '处理'
+            footButton: '处理',
+            loading: false
         }
     };
     componentDidMount() {
@@ -48,17 +49,16 @@ class Process extends Component {
         const top = event.scrollTop;
         const scrollHeight = event.scrollHeight;
         const clientHeight = event.clientHeight
-
-        if (top >= 0 && top < adjunct - 9) {
+        if (top >= 0 && top < adjunct) {
             this.setState({current: 'basic'})
-        }else if (top >= adjunct && top < flow - 9) {
+        }else if (top >= adjunct && top < flow) {
             this.setState({current: 'adjunct'})
-        }else if (top >= flow && top < option - 9) {
+        }else if (top >= flow && top < option) {
             this.setState({current: 'flow'})
         }else if (top >= option) {
             this.setState({current: 'option'})
         }
-        if (top + clientHeight == scrollHeight) {
+        if (top + clientHeight === scrollHeight) {
             this.setState({current: 'option'})
         }
     };
@@ -67,11 +67,11 @@ class Process extends Component {
         name === 'option' && document.getElementsByClassName("option-text")[0].focus();
         name === 'option' && this.optionBlur()
         const top = document.getElementById(`event-${name}`).offsetTop;
-        document.getElementById("event").scrollTo(0,top - 9);
+        document.getElementById("event").scrollTo(0,top);
     };
     textClick = () => {
         const top = document.getElementById(`event-option`).offsetTop;
-        document.getElementById("event").scrollTo(0,top - 9)
+        document.getElementById("event").scrollTo(0,top)
         document.getElementsByClassName("option-text")[0].focus();
         this.optionBlur()
     }
@@ -93,19 +93,27 @@ class Process extends Component {
     }
 
     render() {
-        console.log(this.state.current);
-        const {footButton, disabled, footStatus, current} = this.state
+        const {footButton, disabled, footStatus, current, loading} = this.state
         return (
             <div>
+                <ActivityIndicator
+                    toast
+                    text="加载中..."
+                    animating={loading}
+                />
                 <TopTabs page={current} onClick={this.tabClick}/>
                 <div id="event">
                     <WingBlank>
+                        <div id="event-basic"/>
                         <WhiteSpace/>
                         <Basic/>
+                        <div id="event-adjunct"/>
                         <WhiteSpace/>
                         <Adjunct/>
+                        <div id="event-flow"/>
                         <WhiteSpace/>
                         <Flow/>
+                        <div id="event-option"/>
                         <WhiteSpace/>
                         <Option onChange={this.optionChange}/>
                     </WingBlank>

src/pages/EventProcessing/SubmitDetail.jsx

+import React, {Component} from 'react';
+
+class SubmitDetail extends Component {
+    render() {
+        return (
+            <div>
+                
+            </div>
+        );
+    }
+}
+
+export default SubmitDetail;

src/pages/Notice/Notice.jsx

-import React from 'react';
-import {WhiteSpace, WingBlank} from 'antd-mobile'
+import React, {Component} from 'react';
+import {ActivityIndicator, WhiteSpace, WingBlank} from 'antd-mobile'
 import TodoCard from '../../components/TodoCard'
 import TopNotice from '../../components/TopNotice'
 
-const Notice = () => {
+
+
+class Notice extends Component {
+    state={
+        loading: false
+    };
+    render() {
+        const {loading} = this.state;
         return (
             <WingBlank>
+                <ActivityIndicator
+                    toast
+                    text="加载中..."
+                    animating={loading}
+                />
                 <WhiteSpace/>
                 <TopNotice/>
                 <WhiteSpace/>
                 <TodoCard/>
             </WingBlank>
         );
-};
+    }
+}
 
 export default Notice;

src/pages/Work/Work.jsx

 import React, {Component} from 'react';
-import {WhiteSpace, WingBlank} from "antd-mobile";
+import {ActivityIndicator, WhiteSpace, WingBlank} from "antd-mobile";
 import TopSearch from '../../components/TopSearch'
 import WorkCard from '../../components/WorkCard'
 
 
 class Work extends Component {
     state = {
-        addStatus: false
+        addStatus: false,
+         loading: false
     };
     commonEdit = () => {
         const {addStatus} = this.state;
@@ -24,7 +25,7 @@ class Work extends Component {
         // index > -1 && arr.splice(index, 1);
     };
     render() {
-        const {addStatus} = this.state;
+        const {addStatus, loading} = this.state;
 
         //测试数据
         const data222 = Array.from(new Array(7)).map((_val, i) => ({
@@ -40,6 +41,11 @@ class Work extends Component {
 
         return (
             <WingBlank>
+                <ActivityIndicator
+                    toast
+                    text="加载中..."
+                    animating={loading}
+                />
                 <WhiteSpace/>
                 <TopSearch onSearch={this.workSearch}/>
                 <WhiteSpace/>

src/router.js

@@ -6,7 +6,6 @@ import CommonLayout from './layout/CommonLayout';
 import Backlog from './pages/Backlog/Backlog'
 import Work from './pages/Work/Work'
 import Notice from './pages/Notice/Notice'
-import Communicate from './pages/Communicate/Communicate';
 import AddressList from './pages/AddressList/AddressList';
 import Process from './pages/EventProcessing/Process'
 
@@ -24,7 +23,6 @@ const ReactRouter = () => {
                         <Route path="/bord/backlog" component={Backlog}/>
                         <Route path="/bord/work" component={Work}/>
                         <Route path="/bord/addressList" component={AddressList}/>
-                        <Route path="/bord/communicate" component={Communicate}/>
                         <Route path="/bord/notice" component={Notice}/>
                     </CommonLayout>
                 }/>