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: '七号' },
|
]
|
const { Meta } = Card;
|
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" 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>
|
);
|
}
|
|
}
|
