xiufu

liuwh

2020-04-01 de0151aaae18282e885e5ae2d84653d1131a65a4

 SunshineIns/src/page/SignIn.jsx

@@ -1,31 +1,115 @@
import React from 'react';
import { Input, Button, DatePicker, Divider, message, Popconfirm, Select, Badge } from 'antd';
import { Icon, Button, DatePicker, Divider, Affix, Spin, Card, Row, Col } from 'antd';

import Fetch from '../fetch';
import sign from './../asset/image/sign.png';
import moment from 'moment';


const format = 'YYYY-MM-DD HH:mm';

const list = [
    { name: '一号' },
    { name: '二号' },
    { name: '三号' },
    { name: '四号' },
    { name: '五号' },
    { name: '六号' },
    { name: '七号' },
]
const { Meta } = Card;
export default class SignIn extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
           
            personList: [],
            activityName: '',
            code: '',
            loading: false,
        };
    }

    componentDidMount() {

        document.title = '签到上墙';
        // this.getData();
        setInterval(() => this.getData(), 5000)
    }

    componentWillMount() {
        this.getData()
    }

    getData = () => {
        
        // signinfo
        const { id } = this.props.match.params;
        // this.setState({ loading: true })
        Fetch.signinfo(id)
            .then(res => {
                console.log(res)
                this.setState({
                    code: res.data.code,
                    personList: res.data.personList,
                    activityName: res.data.activityName,
                    // loading: false,
                });
            })
    }
   

    render() {
        
        const { data, loading, resetKey } = this.state;

        const { code, loading, personList, activityName } = this.state;
        return (
            <div className="app-page">
              签到上墙
                <Spin spinning={loading}>
                    {/* <Affix style={{ position: 'absolute', top: 520, right: 20 }}>
                        <Card>
                            < img style={{ width: '150px', height: '150px' }} src={`data:image/png;base64,${code}`} alt=""></img>
                        </Card>
                    </Affix> */}
                    <Card style={{ margin: "8%" }}>
                        <div>
                            <Row type="flex" align="middle" style={{ borderBottom: '1px solid #D8D8D8' }}>
                                <Col span={20} style={{ color: '#3D444D', fontSize: 26, fontWeight: 'bold', lineHeight: '75px' }}>
                                    活动标题：{activityName}
                                </Col>
                                <Col>< img style={{ width: '150px', height: '150px' }} src={`data:image/png;base64,${code}`} alt=""></img></Col>
                            </Row>
                        </div>

                        <div style={{ display: 'flex', }}>
                            {
                                personList.length > 0 ? personList.map((item, index) => (
                                    <div style={{ border: '1px solid #eee', borderRadius: '4px', margin: '6px 0', padding: '6px 0' }} key={index}>
                                        <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column', width: '168px', height: '168px', justifyContent: 'center', alignItems: 'center', color: '#fff', textAlign: 'center', lineHeight: '150px' }} >
                                            <img src={item.imgUrl} style={{ width: '150px', height: '150px' }} />
                                            {
                                                item.signStatus !== 3 ?
                                                    <div style={{ width: '150px', height: '150px', backgroundColor: '#000', opacity: '0.2', position: 'absolute' }}>未签到</div> : ''
                                            }
                                            {
                                                item.signStatus == 3 ?
                                                    // <div style={{ width: '150px', height: '50px', color:'#000', position: 'absolute' }}>签到时间：{moment(item.updateTime).format(format)}</div> : ''
                                                    <div style={{ width: '150px', height: '150px', color: '#000', position: 'absolute', display: 'flex', justifyContent: 'flex-end' }}><Icon type="check-circle" style={{ fontSize: '32px' }} theme="twoTone" twoToneColor="#52c41a" /></div> : ''
                                            }
                                        </div>
                                        {
                                            item.signStatus == 3 ?
                                                <div style={{ padding: '0 12px', width: '168px' }}>
                                                    <div>签到人：{item.proposerName}</div>
                                                    <div>签到时间：{moment(item.updateTime).format(format)}</div>
                                                </div> : ''
                                        }
                                        {/* <Card hoverablestyle={{ width: 240 }} cover={<img alt='example' src={item.imgUrl} />}>
                                            <Meta title={item.proposerName} description={item.updatetime} />
                                        </Card> */}
                                    </div>

                                )) : <div style={{ height: '150px' }}>暂无人员签到</div>
                            }
                        </div>


                    </Card>
                </Spin>
            </div>
        );
    }