pan
5 years ago
parent
bff7c0dec8
commit
490163d943
@ -1,18 +1,187 @@ |
||||
import React from "react"; |
||||
import {Col, Container, Row} from "react-bootstrap"; |
||||
import {Button, Col, Container, Image, Row} from "react-bootstrap"; |
||||
import {MyHelpState} from "../entity"; |
||||
import moment from "moment"; |
||||
|
||||
const classList="border-info border d-flex justify-content-center align-items-center" |
||||
|
||||
/** |
||||
* 我的求助 |
||||
*/ |
||||
export class MyHelp extends React.Component<any, any>{ |
||||
export class MyHelp extends React.Component<any, { data:Array<MyHelpState> }>{ |
||||
|
||||
|
||||
constructor(props: Readonly<any>) { |
||||
super(props); |
||||
|
||||
this.state= { |
||||
data: [] |
||||
} |
||||
} |
||||
|
||||
componentDidMount() { |
||||
this.loadMyHelp() |
||||
} |
||||
|
||||
/** |
||||
* 完成活动 |
||||
* @param help |
||||
*/ |
||||
complete(help:MyHelpState){ |
||||
|
||||
} |
||||
|
||||
/** |
||||
* 参与活动 |
||||
* @param help |
||||
*/ |
||||
join(help:MyHelpState){ |
||||
|
||||
} |
||||
|
||||
/** |
||||
* 获取操作布局 |
||||
* @param help |
||||
*/ |
||||
getAction(help:MyHelpState){ |
||||
if(help.joinTime&&help.completeTime){ |
||||
return (<Row> |
||||
<Col className={classList}>已完成</Col> |
||||
<Col className={classList}/> |
||||
<Col className={classList}>{help.score}</Col> |
||||
</Row>) |
||||
}else if(help.joinTime){ |
||||
return (<Row> |
||||
<Col className={classList}>待完成</Col> |
||||
<Col className={classList+" p-3"}><Button className="w-100" onClick={()=>this.complete(help)} variant={"info"}>完成</Button></Col> |
||||
<Col className={classList}/> |
||||
</Row>) |
||||
}else{ |
||||
return ( |
||||
<Row> |
||||
<Col className={classList}>待参与</Col> |
||||
<Col className={classList+" p-3"}><Button className="w-100" onClick={()=>this.join(help)} variant={"info"}>参与</Button></Col> |
||||
<Col className={classList}/> |
||||
</Row> |
||||
) |
||||
} |
||||
} |
||||
|
||||
loadMyHelp(){ |
||||
this.setState({ |
||||
data:[{ |
||||
//活动标题
|
||||
title:"活动标题", |
||||
//活动内容
|
||||
content:"活动内容", |
||||
//活动背景图
|
||||
activeImg: "logo512.png", |
||||
//求助时间
|
||||
seekHelpTime:new Date().getTime(), |
||||
//活动开始时间
|
||||
activeStartTime:new Date().getTime(), |
||||
//活动结束时间
|
||||
activeEndTime:new Date().getTime(), |
||||
//报名时间
|
||||
applyTime:new Date().getTime(), |
||||
//参与时间
|
||||
joinTime:new Date().getTime(), |
||||
//完成时间
|
||||
completeTime:new Date().getTime(), |
||||
//活动评价分
|
||||
score: Math.ceil(Math.random()*10), |
||||
}, |
||||
{ |
||||
//活动标题
|
||||
title:"活动标题", |
||||
//活动内容
|
||||
content:"活动内容", |
||||
//活动背景图
|
||||
activeImg: "logo512.png", |
||||
//求助时间
|
||||
seekHelpTime:new Date().getTime(), |
||||
//活动开始时间
|
||||
activeStartTime:new Date().getTime(), |
||||
//活动结束时间
|
||||
activeEndTime:new Date().getTime(), |
||||
//报名时间
|
||||
applyTime:new Date().getTime(), |
||||
//参与时间
|
||||
joinTime:null, |
||||
//完成时间
|
||||
completeTime:new Date().getTime(), |
||||
//活动评价分
|
||||
score: Math.ceil(Math.random()*10), |
||||
},{ |
||||
//活动标题
|
||||
title:"活动标题", |
||||
//活动内容
|
||||
content:"活动内容", |
||||
//活动背景图
|
||||
activeImg: "logo512.png", |
||||
//求助时间
|
||||
seekHelpTime:new Date().getTime(), |
||||
//活动开始时间
|
||||
activeStartTime:new Date().getTime(), |
||||
//活动结束时间
|
||||
activeEndTime:new Date().getTime(), |
||||
//报名时间
|
||||
applyTime:new Date().getTime(), |
||||
//参与时间
|
||||
joinTime:new Date().getTime(), |
||||
//完成时间
|
||||
completeTime:null, |
||||
//活动评价分
|
||||
score: Math.ceil(Math.random()*10), |
||||
}] |
||||
}) |
||||
} |
||||
|
||||
render() { |
||||
return ( |
||||
<div className="overflow-auto seek-help-height"> |
||||
{this.state.data.map((help:MyHelpState,index:number)=> |
||||
<div key={"list"+index} className="mt-3 mb-3 border-info border"> |
||||
<Container> |
||||
<Row> |
||||
<Col>我的求助</Col> |
||||
<Col xs={4}> |
||||
<Image src={help.activeImg} className="activeImage"/> |
||||
</Col> |
||||
<Col> |
||||
<h5>{help.title}</h5> |
||||
<h6>{help.content}</h6> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
{["求助时间","活动开始时间","活动结束时间"].map((text:string,index:number)=> |
||||
<Col className={classList} key={"col"+index}>{text}</Col> |
||||
)} |
||||
</Row> |
||||
<Row> |
||||
{[help.seekHelpTime,help.activeStartTime,help.activeEndTime].map((time:number,index:number)=> |
||||
<Col className="border-info border" key={"col"+index}>{moment(time).format("YYYY-MM-DD HH:mm:ss")}</Col> |
||||
)} |
||||
</Row> |
||||
<Row> |
||||
{["报名时间","参与时间","完成时间"].map((text:string,index:number)=> |
||||
<Col className={classList} key={"col"+index}>{text}</Col> |
||||
)} |
||||
</Row> |
||||
<Row> |
||||
{[help.applyTime,help.joinTime,help.completeTime].map((time,index:number)=> |
||||
<Col className="border-info border" key={"col"+index}>{time?moment(time).format("YYYY-MM-DD HH:mm:ss"):""}</Col> |
||||
)} |
||||
</Row> |
||||
<Row> |
||||
{["参与状态","操作","活动评分"].map((text:string,index:number)=> |
||||
<Col className={classList} key={"col"+index}>{text}</Col> |
||||
)} |
||||
</Row> |
||||
{this.getAction(help)} |
||||
</Container> |
||||
</div> |
||||
)} |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue