| | |
|---|
| | | 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: '七号' }, |
|---|
| | | ] |
|---|
| | | export default class SignIn extends React.Component { |
|---|
| | | constructor(props) { |
|---|
| | | super(props); |
|---|
| | | this.state = { |
|---|
| | | data: [], |
|---|
| | | |
|---|
| | | personList: [], |
|---|
| | | activityName: '', |
|---|
| | | code: '', |
|---|
| | | loading: false, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | |
|---|
| | | componentDidMount() { |
|---|
| | | |
|---|
| | | document.title = '签到上墙'; |
|---|
| | | // this.getData(); |
|---|
| | | 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" 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> |
|---|
| | | ); |
|---|
| | | } |
|---|
