1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
| import React from 'react';
| 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: '七号' },
| ]
| export default class SignIn extends React.Component {
| constructor(props) {
| super(props);
| this.state = {
| personList: [],
| activityName: '',
| code: '',
| loading: false,
| };
| }
|
| componentDidMount() {
|
| document.title = '签到上墙';
| 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 { 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" justify="center" align="middle" style={{ borderBottom: '1px solid #D8D8D8' }}>
| <Col style={{ color: '#3D444D', fontSize: 26, fontWeight: 'bold', lineHeight: '75px' }}>
| {activityName}
| </Col>
| </Row>
| </div>
|
| <div style={{ display: 'flex' }}>
| {
| personList.length > 0 ? personList.map((item, index) => (
| <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column', width: '168px', height: '168px', justifyContent: 'center', alignItems: 'center',color:'#fff',textAlign:'center',lineHeight:'150px' }} key={index}>
| <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>
| )) : <span>暂无数据</span>
| }
| </div>
| </Card>
| </Spin>
| </div>
| );
| }
|
| }
|
|
