debug

src/Components/List/index.jsx

+import React from 'react';
+import './index.less'
+
+const Index = (props) => {
+    return (
+        <div className="auto-list-card">
+            {props.title && (
+                <div className="auto-list-item auto-list-item-title">{props.title}</div>
+            )}
+            {props.listData.map((item, index) => (
+                <div key={index} className={`auto-list-item ${item.line ? 'auto-list-item-line-feed' : 'auto-list-item-line'}`}>
+                    <div className="auto-list-title">
+                        {item.title}：
+                    </div>
+                    <div className="auto-list-content">
+                        {item.content}
+                    </div>
+                </div>
+            ))}
+
+        </div>
+    );
+};
+
+export default Index;

src/Components/List/index.less

+.auto-list-card{
+  width: 100%;
+}
+.auto-list-item-line{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.auto-list-item-line-feed{
+  display: flex;
+  flex-direction: column;
+}
+.auto-list-item{
+  padding: 5px 15px;
+  min-height: 43px;
+  background: #ffffff;
+  margin-bottom: 1px;
+}
+.auto-list-card > .auto-list-item:first-child{
+  border-radius: 6px 6px 0 0;
+}
+.auto-list-card > .auto-list-item:last-child{
+  border-radius: 0 0 6px 6px;
+}
+.auto-list-item-title{
+  display: flex;
+  align-items: center;
+  font-size: 17px;
+  font-weight: bold;
+}
+.auto-list-title{
+  padding: 10px 0;
+  font-size: 14px;
+  min-width: 100px;
+}
+.auto-list-content{
+  padding: 10px 20px;
+  font-size: 14px;
+  line-height: 22px;
+}

src/Components/StepCard/index.jsx

+import React from 'react';
+
+const Index = () => {
+    return (
+        <div>
+            flow
+        </div>
+    );
+};
+
+export default Index;

src/Components/TodoCard/index.jsx

 import React from 'react';
-import Steps from '../Steps'
 import './index.less'
 
-const Index = () => {
+const Index = (props) => {
     return (
-        <div className="todo-card">
+        <div className="todo-card" onClick={props.onCLick}>
             <div className="todo-title pos-aline">
                 <div className="pos-aline">
                     <div className="todo-tag pos-aline">
-                        <img style={{width: 12, height: 12, marginRight: 4}} src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591252471425&di=85236ae603ca74553adaca6e8c161a39&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb912bf96dc19b3b23530ae2259b60eb6cf70083f6680b-H9l0ri_fw658"/>
+                        <img
+                            alt=""
+                            className="todo-tag-png"
+                            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591252471425&di=85236ae603ca74553adaca6e8c161a39&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb912bf96dc19b3b23530ae2259b60eb6cf70083f6680b-H9l0ri_fw658"
+                        />
                         收文管理
                     </div>
                     <p>《2020年上级党委文件7号》</p>
                 </div>
-                <span>img</span>
+                <span>
+                    <img
+                        alt=""
+                        className="todo-read-png"
+                        src={props.data && props.data.read ? '/img/read.png' : '/img/unread.png'}
+                    />
+                </span>
             </div>
-            <div style={{marginTop: 27}}>
+            <div className="todo-content">
                 <p>当前状态：排版套头</p>
-                <p style={{marginTop: 15}}>更新时间：2020-05-26  17:51</p>
+                <p style={{marginTop: 15}}>发送人员：杜莹莹</p>
+            </div>
+            <div className="todo-footer">
+               <div>
+                   <p>更新时间：2020-05-26  17:51</p>
+                   <p style={{marginTop: 15}}>停滞时间：24h</p>
+               </div>
+                <img
+                    alt=""
+                    className="todo-footer-img"
+                    src={props.data && props.data.read ? '/img/serious.png' : '/img/urgency.png'}
+                />
             </div>
         </div>
     );

src/Components/TodoCard/index.less

 .todo-card{
-  padding: 10px 15px;
-  background:rgba(255,255,255,1);
-  border:0 solid rgba(38, 104, 255, 0.2);
-  border-radius:6px;
+
 }
 .todo-title{
+  padding: 10px 15px;
+  background:rgba(255,255,255,1);
+  border-radius:6px 6px 0 0;
   justify-content: space-between;
+  margin-bottom: 1px;
 }
 .todo-tag{
   line-height: 18px;
@@ -16,8 +17,33 @@
   color: #ffffff;
   border-radius:3px;
 }
-
+.todo-tag-png{
+  width: 12px;
+  height: 12px;
+  margin-right: 3px;
+}
+.todo-read-png{
+  width: 18px;
+  height: 18px;
+}
 .pos-aline{
   display: flex;
   align-items: center;
 }
+
+.todo-content{
+  padding: 15px 15px;
+  background:rgba(255,255,255,1);
+  margin-bottom: 1px;
+}
+.todo-footer{
+  display: flex;
+  justify-content: space-between;
+  padding: 15px 15px;
+  background:rgba(255,255,255,1);
+  border-radius: 0 0 6px 6px;
+}
+.todo-footer-img{
+  width: 40px;
+  height: 40px;
+}

src/Components/TopNotice/index.jsx

@@ -17,7 +17,7 @@ const Index = () => {
             <div className="search-tab">
                 <Tabs
                     tabs={tabs}
-                    initialPage={1}
+                    initialPage={'1'}
                     onChange={(tab, index) => { console.log('onChange', index, tab); }}
                 />
             </div>

src/Components/TopSearch/index.jsx

 import React from 'react';
-import {SearchBar, Icon} from 'antd-mobile'
+import {Icon} from 'antd-mobile'
 import './index.less'
 
 
 const Index = (props) => {
-    const topSearch = (val) => {
-        const input = document.getElementsByClassName("top-single-search").value;
-        console.log(val)
-        // props.onSearch(val)
+    const topSearch = () => {
+        const input = document.getElementsByClassName("top-single-search");
+        props.onSearch(input[0].value)
     }
     return (
         <div className="search-box">
             <Icon type="search" size="xs" className="search-svg"/>
-            {/*<SearchBar/>*/}
             <input onChange={topSearch} className="top-single-search" placeholder="请输入关键字搜索" />
         </div>
     );

src/Components/TopTabs/index.jsx

 import React from 'react';
-import {Tabs, Icon} from 'antd-mobile'
+import {Tabs} from 'antd-mobile'
 import './index.less'
 
 const tabs = [
-    { title: '基本信息', sub: '1' },
-    { title: '详情附件', sub: '2' },
-    { title: '流转意见', sub: '3' },
-    { title: '流程信息', sub: '4' },
+    { title: '基本信息', sub: 'basic' },
+    { title: '详情附件', sub: 'adjunct' },
+    { title: '流程信息', sub: 'flow' },
+    { title: '流转意见', sub: 'option' },
 ]
 
-const Index = () => {
+const Index = (props) => {
     return (
         <div>
             <Tabs
                 tabs={tabs}
-                initialPage={1}
-                onChange={(tab, index) => { console.log('onChange', index, tab); }}
+                initialPage={"basic"}
+                onChange={(tab, index) => props.onClick(tab.sub)}
             />
         </div>
     );

src/Components/WorkCard/CardItem.jsx

@@ -7,17 +7,40 @@ class CardItem extends Component {
     }
     componentWillReceiveProps(nextProps, nextContext) {
         if (this.props.addStatus !== nextProps.addStatus) {
-            this.setState({ addStatus: this.props.addStatus });
+            this.setState({ addStatus: nextProps.addStatus });
         }
+    };
+
+    contentCLick = () => {
+        const {data, addCommon} = this.props;
+        const {addStatus} = this.state
+        !addStatus && !data.iconAdd && console.log(data.text);
+        data.iconAdd && addCommon()
+    };
+    iconClick = () => {
+        const { iconAction} = this.props;
+        iconAction()
     }
 
     render() {
-        const {data, addCommon} = this.props;
+        const {data, type} = this.props;
+        const {addStatus} = this.state
         return (
-            <div className="card-content" onClick={() => data.iconAdd ? addCommon() : null }>
+            <div className="card-content" onClick={this.contentCLick}>
                 {data.text && (
-                    <div>
+                    <div className="card-content-box">
                         <div className="card-content-img">
+                            {
+                                addStatus && !data.iconAdd && (
+                                    <img
+                                        src={type === 'edit' ? '/img/common-d.png' : '/img/common-a.png'}
+                                        className="card-content-img-icon"
+                                        alt=""
+                                        onClick={this.iconClick}
+                                    />
+                                )
+                            }
+
                             <img src={data.icon} className="card-content-img-svg" alt="" />
                         </div>
                         <div className="card-content-title">

src/Components/WorkCard/index.jsx

 import React, {Component} from 'react';
-import {Grid} from 'antd-mobile'
 import './index.less'
 import CardItem from './CardItem'
 
 class Index extends Component {
     render() {
-        const {title, type, addStatus, addCommon} = this.props
+        const {title, type, addStatus, addCommon, data, iconAction} = this.props;
         const emptyIcon = type === 'edit' ? {
-            text: '添加常用', icon: '', iconAdd: true
+            text: addStatus ? '完成添加' :'添加常用', icon: addStatus ? '/img/finish-work.png' : '/img/add-work.png', iconAdd: true
         } : {};
 
-
-        //测试数据
-        const data = Array.from(new Array(7)).map((_val, i) => ({
-            icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
-            text: `name${i}`,
-        }));
         const empty = data.length % 3;
         empty === 0 && data.push(emptyIcon, {}, {});
         empty === 1 && data.push(emptyIcon, {});
@@ -29,10 +22,12 @@ class Index extends Component {
                 <div className="work-card-body">
                     {data.map((item, index) => (
                         <CardItem
+                            type={type}
                             key={index}
                             data={item}
                             addStatus={addStatus}
                             addCommon={addCommon}
+                            iconAction={iconAction}
                         />
                     ))}
 

src/Components/WorkCard/index.less

@@ -16,8 +16,8 @@
 }
 
 .card-content{
-  width: 114px;
-  height: 114px;
+  width: 33.1%;
+  height: 115px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -26,6 +26,11 @@
   margin-bottom: 1px;
   //border: 1px solid rgba(38, 104, 255, 0.1);
 }
+.card-content-box{
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
 .work-card-body > .card-content:nth-child(3n + 2){
   margin-left: 1px;
 }
@@ -39,7 +44,7 @@
   border-radius: 0 0 0 6px;
 }
 .card-content:active{
-  background: yellow;
+  background: rgba(248, 248, 248, 1);
 }
 
 .card-content-img{
@@ -51,5 +56,13 @@
   width: 35px;
   height: 35px;
 }
+.card-content-img-icon{
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  margin-top: -15px;
+  margin-left: 20px;
+}
 .card-content-title{
+  text-align: center;
 }

src/Pages/Backlog/Backlog.jsx

@@ -3,17 +3,19 @@ import {WhiteSpace} from 'antd-mobile'
 import TodoCard from '../../components/TodoCard'
 import TopSearch from '../../components/TopSearch'
 
-const Backlog = () => {
+const Backlog = (props) => {
+    const checkLog = () => {
+        props.history.push(`/blank/example/1`)
+    }
     return (
         <div>
             <WhiteSpace/>
             <TopSearch/>
-            <WhiteSpace/>
             {
-                [{},{},{},{},{},{}].map(item => (
-                    <div>
+                [{},{},{},{},{},{}].map((item, index) => (
+                    <div key={index}>
                         <WhiteSpace/>
-                        <TodoCard/>
+                        <TodoCard data={item} onCLick={checkLog}/>
                     </div>
 
                 ))

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 {WhiteSpace} from 'antd-mobile'
+import List from '../../components/List'
+
+
+const Basic = () => {
+    const listData = [
+        {title: '单位(科室)', content: '文电科'},
+        {title: '人数', content: '3'},
+        {title: '人员', content: <div></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} 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'
+
+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)
+    };
+
+    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">
+                        {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;
+}

src/Pages/Work/Work.jsx

@@ -13,10 +13,26 @@ class Work extends Component {
         this.setState({addStatus: !addStatus})
     };
     workSearch = (val) => {
-        console.log(val.target)
+        console.log(val)
+    };
+    itemAdd = () => {
+        console.log('add')
+    }
+    itemSlice = () => {
+        console.log('slice')
     }
     render() {
-        const {addStatus} = this.props
+        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/>
@@ -27,12 +43,16 @@ class Work extends Component {
                     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>
         );

src/layout/BlankLayout.jsx

 import React from 'react';
 import {WingBlank} from 'antd-mobile'
-import Footer from './Footer'
 import {withRouter} from 'react-router-dom'
 
 const BlankLayout = (props) => {
     return (
-        <div >
         <div>
-                <div style={{position: 'fixed', top: 0, left: 0, right: 0, bottom: 50, overflow: 'auto', paddingBottom: 10}}>
-                    <WingBlank>
             {props.children}
-                    </WingBlank>
-                </div>
-                <Footer {...props}/>
-            </div>
-            <Footer {...props}/>
         </div>
     );
 };

src/layout/CommonLayout.jsx

@@ -2,11 +2,12 @@ import React from 'react';
 import {WingBlank} from 'antd-mobile'
 import Footer from './Footer'
 import {withRouter} from 'react-router-dom'
+import './index.less'
 
 const CommonLayout = (props) => {
     return (
         <div>
-            <div style={{position: 'fixed', top: 0, left: 0, right: 0, bottom: 50, overflow: 'auto', paddingBottom: 10}}>
+            <div className="common-layout-content">
                 <WingBlank>
                     {props.children}
                 </WingBlank>

src/layout/Footer.jsx

 import React, {Component} from 'react';
 import {TabBar} from 'antd-mobile'
+import './index.less'
 
 class Footer extends Component {
     state={
@@ -16,33 +17,26 @@ class Footer extends Component {
 
     render() {
         const tabItem = [
-            {title: '待办', key: 'backlog', icon: '', selectedIcon: '', badge: '', onPress: '/bord/backlog'},
-            {title: '工作', key: 'work', icon: '', selectedIcon: '', badge: '', onPress: '/bord/work'},
-            {title: '通讯录', key: 'communicate', icon: '', selectedIcon: '', badge: '', onPress: '/bord/communicate'},
-            {title: '通知', key: 'notice', icon: '', selectedIcon: '', badge: '', onPress: '/bord/notice'}
+            {title: '待办', key: 'backlog', icon: '/img/footer-backlog.png', selectedIcon: '/img/footer-backlog-s.png', badge: '', onPress: '/bord/backlog'},
+            {title: '工作', key: 'work', icon: '/img/footer-work.png', selectedIcon: '/img/footer-work-s.png', badge: '', onPress: '/bord/work'},
+            {title: '通讯录', key: 'communicate', icon: '/img/footer-communicate.png', selectedIcon: '/img/footer-communicate-s.png', badge: '', onPress: '/bord/communicate'},
+            {title: '通知', key: 'notice', icon: '/img/footer-notice.png', selectedIcon: '/img/footer-notice-s.png', badge: '', onPress: '/bord/notice'}
         ];
 
         return (
             <div style={{ position: 'fixed', width: '100%', bottom: 0 }}>
                 <TabBar
                     unselectedTintColor="#949494"
-                    tintColor="#33A3F4"
+                    tintColor="#2E67EA"
                     barTintColor="white"
                 >
+
                     {tabItem.map(item => (
                         <TabBar.Item
                             key={item.key}
                             title={item.title}
-                            icon={<div style={{
-                                width: '22px',
-                                height: '22px',
-                                background: `url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  22px 22px no-repeat`
-                            }}/>}
-                            selectedIcon={<div style={{
-                                width: '22px',
-                                height: '22px',
-                                background: `url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  22px 22px no-repeat`
-                            }}/>}
+                            icon={<img alt="" className="footer-tab-icon" src={item.icon}/>}
+                            selectedIcon={ <img alt="" className="footer-tab-icon" src={item.selectedIcon}/>}
                             badge={item.badge || null}
                             onPress={() => this.tabClick(item.key, item.onPress)}
                             selected={this.state.current === item.key}

src/layout/index.less

+.common-layout-content{
+  position: fixed;
+  top: 0;left: 0;right: 0;bottom: 50px;
+  overflow: auto;
+  padding-bottom: 10px
+}
+
+.footer-tab-icon{
+  width: 18px;
+  height: 18px;
+  margin-bottom: 4px;
+}

src/router.js

@@ -8,6 +8,8 @@ import Work from './Pages/Work/Work'
 import Notice from './Pages/Notice/Notice'
 import Communicate from './Pages/Communicate/Communicate'
 
+import Process from './Pages/EventProcessing/Process'
+
 import NoFound from './Pages/NoFound'
 
 
@@ -26,7 +28,7 @@ const ReactRouter = () => {
                 }/>
                 <Route path="/blank" component={() =>
                     <BlankLayout>
-
+                        <Route path="/blank/:name/:id" component={Process}/>
                     </BlankLayout>
                 }/>
                 <Route component={NoFound}/>