debug

src/layout/Footer.jsx

@@ -15,6 +15,7 @@ class Footer extends Component {
         this.props.history.push(path)
     }
 
+    
     render() {
         const tabItem = [
             {title: '待办', key: 'backlog', icon: '/img/footer-backlog.png', selectedIcon: '/img/footer-backlog-s.png', badge: '', onPress: '/bord/backlog'},

src/pages/Backlog/Backlog.jsx

+import React from 'react';
+import {WhiteSpace} from 'antd-mobile'
+import TodoCard from '../../components/TodoCard'
+import TopSearch from '../../components/TopSearch'
+
+const Backlog = (props) => {
+    const checkLog = () => {
+        props.history.push(`/blank/example/1`)
+    }
+    return (
+        <div>
+            <WhiteSpace/>
+            <TopSearch/>
+            {
+                [{},{},{},{},{},{}].map((item, index) => (
+                    <div key={index}>
+                        <WhiteSpace/>
+                        <TodoCard data={item} onCLick={checkLog}/>
+                    </div>
+
+                ))
+            }
+
+            {/*<Step direction="horizontal"/>*/}
+
+        </div>
+    );
+};
+
+export default Backlog;

src/pages/Communicate/Communicate.jsx

+import React, {Component} from 'react';
+import {List, WhiteSpace} from 'antd-mobile';
+import TopSearch from '../../components/TopSearch'
+
+const Item = List.Item;
+
+class Communicate extends Component {
+    render() {
+        return (
+            <div>
+                <WhiteSpace/>
+                <TopSearch/>
+                <WhiteSpace/>
+                <List>
+                    <Item>通讯录</Item>
+                    <Item arrow="horizontal" multipleLine onClick={() => {}}>Title</Item>
+                </List>
+            </div>
+        );
+    }
+}
+
+export default Communicate;

src/pages/EventProcessing/Adjunct.jsx

+import React from 'react';
+import List from '../../components/List'
+
+
+const Adjunct = () => {
+    const listData = [
+        {title: '开始时间', content: '文电科'},
+        {title: '结束时间', content: '3'},
+        {title: '天数', content: ''},
+        {title: '乘坐交通工具', content: '武汉'},
+        {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>
+                </div>
+        },
+    ]
+    return (
+        <div id="event-adjunct">
+            <List
+                listData={listData}
+            />
+
+        </div>
+    );
+};
+
+export default Adjunct;

src/pages/EventProcessing/Basic.jsx

+import React from 'react';
+import './index.less'
+import List from '../../components/List'
+
+const data = Array.from(new Array(12)).map((_val, i) => ({
+    icon: '/img/test/test.png',
+    text: `name${i}`,
+}));
+
+const Basic = () => {
+    const personImg = data.map((item, index) => (
+        <div key={index} className="basic-people-item">
+            <img className="work-people-img" alt="" src='/img/test/test.png'/>
+            <div>aaa</div>
+        </div>
+    ))
+
+    const listData = [
+        {title: '单位(科室)', content: '文电科'},
+        {title: '人数', content: '3'},
+        {title: '人员', content: <div className="basic-people-content">{personImg}</div>},
+        {title: '目的地', content: '武汉'},
+        {title: '事由', content: '考察'},
+    ];
+    return (
+        <div id="event-basic">
+            <List
+                title={"6.1日,部门考察工作出差申请"}
+                listData={listData}
+            />
+        </div>
+    );
+};
+
+export default Basic;

src/pages/EventProcessing/Flow.jsx

+import React from 'react';
+import StepCard from '../../components/StepCard'
+
+const Flow = () => {
+    return (
+        <div id="event-flow">
+           <StepCard/>
+        </div>
+    );
+};
+
+export default Flow;

src/pages/EventProcessing/Option.jsx

+import React from 'react';
+import './index.less'
+
+const Option = () => {
+    return (
+        <div id="event-option">
+            <div className="option-card">
+                <div className="option-title">
+                    <div>流转意见：</div>
+                    <a className="option-fast">常用阅办意见</a>
+                </div>
+                <textarea className="option-text"/>
+            </div>
+        </div>
+    );
+};
+
+export default Option;

src/pages/EventProcessing/Process.jsx

+import React, {Component} from 'react';
+import {WingBlank, WhiteSpace, ActionSheet} from 'antd-mobile'
+import './index.less'
+import TopTabs from '../../components/TopTabs'
+import Basic from './Basic'
+import Adjunct from './Adjunct'
+import Flow from './Flow';
+import Option from './Option';
+
+
+const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
+let wrapProps;
+if (isIPhone) {
+    wrapProps = {
+        onTouchStart: e => e.preventDefault(),
+    };
+}
+
+class Process extends Component {
+    constructor() {
+        super();
+        this.optionBlur = this.optionBlur.bind(this)
+        // this.handleScroll = this.handleScroll.bind(this)
+        this.state = {
+            footButton: '处理'
+        }
+    };
+    componentDidMount() {
+        console.log(document.getElementsByClassName("option-text")[0])
+        document.getElementsByClassName("option-text")[0].addEventListener('focus', this.optionBlur, true)
+        // window.addEventListener('scroll', this.handleScroll, true);
+    }
+    optionBlur = () => {
+        this.setState({footButton: '确认发送'})
+    }
+
+    componentWillUnmount() {
+        document.getElementsByClassName("option-text")[0].removeEventListener('focus', this.optionBlur, true)
+        // window.removeEventListener('scroll', this.handleScroll, true);
+    }
+    // handleScroll() {
+    //     const basic = document.getElementById("event-basic").offsetTop;
+    //     const adjunct = document.getElementById("event-adjunct").offsetTop;
+    //     const flow = document.getElementById("event-flow").offsetTop;
+    //     const option = document.getElementById("event-option").offsetTop;
+    //     const top = document.documentElement.scrollTop;
+    //
+    //     console.log(top)
+    //
+    //     // console.log(basic, adjunct, flow, option);
+    // };
+    tabClick = (name) => {
+        // console.log(document.getElementsByClassName("option-text"))
+        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)
+    };
+
+    showActionSheet = () => {
+        const BUTTONS = ['送部门领导审核', '送办公室分管主任审批', '办结', '取消'];
+        ActionSheet.showActionSheetWithOptions({
+                options: BUTTONS,
+                cancelButtonIndex: BUTTONS.length - 1,
+                maskClosable: true,
+                wrapProps,
+            },
+            (buttonIndex) => {
+                console.log(buttonIndex)
+            });
+    }
+
+    render() {
+        return (
+            <div>
+                <TopTabs onClick={this.tabClick}/>
+                <div id="event">
+                    <WingBlank>
+                        <WhiteSpace/>
+                        <Basic/>
+                        <WhiteSpace/>
+                        <Adjunct/>
+                        <WhiteSpace/>
+                        <Flow/>
+                        <WhiteSpace/>
+                        <Option/>
+                    </WingBlank>
+                </div>
+                <div className="event-footer">
+                    <div className="event-footer-button" onClick={this.showActionSheet}>
+                        {this.state.footButton}
+                    </div>
+
+                </div>
+
+            </div>
+        );
+    }
+}
+
+export default Process;

src/pages/EventProcessing/index.less

+#event{
+  position: fixed;
+  top: 44px;
+  left: 0;right: 0; bottom: 50px;
+  overflow: auto;
+  padding-bottom: 300px;
+}
+.event-footer{
+  height: 45px;
+  position: fixed;
+  bottom: 0; left: 0; right: 0
+}
+.event-footer-button{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  background: rgba(54, 147, 239, 1);
+  color: #ffffff;
+}
+.event-footer-button:active{
+  background: rgba(54, 147, 239, 0.8);
+}
+.option-card{
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  border-radius: 6px;
+  background: #ffffff;
+  padding: 17px 15px;
+  font-size: 14px;
+}
+.option-title{
+  display: flex;
+  justify-content: space-between;
+}
+.option-fast{
+  color: rgba(239, 154, 54, 1);
+}
+.option-text{
+  resize: none;
+  margin-top: 15px;
+  height: 137px;
+  border:1px solid rgba(0, 0, 0, 0.1);
+  border-radius:5px;
+  padding: 12px;
+}
+.am-action-sheet{
+  bottom: 10px;
+  left: 10px;
+  right: 10px;
+  border-radius: 7px;
+  width: auto;
+}
+.am-action-sheet-button-list .am-action-sheet-cancel-button-mask{
+  position: relative;
+}
+.am-action-sheet-button-list .am-action-sheet-cancel-button{
+  padding-top: 0;
+}
+
+.basic-people-content{
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.basic-people-item{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 6px;
+}
+.work-people-img{
+  width: 30px;
+  height: 30px;
+  margin-right: 3px;
+}

src/pages/NoFound.jsx

+import { Result } from 'antd-mobile';
+import React from 'react';
+
+const NoFound = () => (
+    <Result
+        title="404"
+    />
+);
+
+export default NoFound;

src/pages/Notice/Notice.jsx

+import React from 'react';
+import {WhiteSpace} from 'antd-mobile'
+import TodoCard from '../../components/TodoCard'
+import TopNotice from '../../components/TopNotice'
+
+const Notice = () => {
+    return (
+        <div>
+            <WhiteSpace/>
+            <TopNotice/>
+            <WhiteSpace/>
+            <TodoCard/>
+        </div>
+    );
+};
+
+export default Notice;

src/pages/Work/Work.jsx

+import React, {Component} from 'react';
+import {WhiteSpace} from "antd-mobile";
+
+import TopSearch from '../../components/TopSearch'
+import WorkCard from '../../components/WorkCard'
+
+class Work extends Component {
+    state = {
+        addStatus: false
+    };
+    commonEdit = () => {
+        const {addStatus} = this.state;
+        this.setState({addStatus: !addStatus})
+    };
+    workSearch = (val) => {
+        console.log(val)
+    };
+    itemAdd = () => {
+        console.log('add')
+    }
+    itemSlice = () => {
+        console.log('slice')
+    }
+    render() {
+        const {addStatus} = this.state;
+
+        //测试数据
+        const data = Array.from(new Array(7)).map((_val, i) => ({
+            icon: '/img/test/test.png',
+            text: `name${i}`,
+        }));
+        const data2 = Array.from(new Array(7)).map((_val, i) => ({
+            icon: '/img/test/test-1.png',
+            text: `name${i}`,
+        }));
+        return (
+            <div>
+                <WhiteSpace/>
+                <TopSearch onSearch={this.workSearch}/>
+                <WhiteSpace/>
+                <WorkCard
+                    type="edit"
+                    title="常用板块"
+                    addCommon={this.commonEdit}
+                    addStatus={addStatus}
+                    data={data}
+                    iconAction={this.itemSlice}
+                />
+                <WhiteSpace/>
+                <WorkCard
+                    title="事物管理"
+                    addCommon={this.commonEdit}
+                    addStatus={addStatus}
+                    data={data2}
+                    iconAction={this.itemAdd}
+                />
+            </div>
+        );
+    }
+}
+
+export default Work;
+