From e29d2313a38c0278577e645b4bb110e677175e10 Mon Sep 17 00:00:00 2001
From: liuwh <liuwh@hugeinfo.com.cn>
Date: Sun, 23 Feb 2020 12:36:07 +0800
Subject: [PATCH] 提交
---
SunshineIns/src/page/SignIn.jsx | 82 ++++++++++++++++++++++++++++++++++++----
1 files changed, 73 insertions(+), 9 deletions(-)
diff --git a/SunshineIns/src/page/SignIn.jsx b/SunshineIns/src/page/SignIn.jsx
index 1e22ab1..539dd09 100644
--- a/SunshineIns/src/page/SignIn.jsx
+++ b/SunshineIns/src/page/SignIn.jsx
@@ -1,31 +1,95 @@
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>
);
}
--
Gitblit v1.8.0