You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
194 lines
7.2 KiB
194 lines
7.2 KiB
import React from "react";
|
|
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<{ undefined?:undefined }, { 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:[{
|
|
//活动Id
|
|
activityId:123,
|
|
//活动标题
|
|
title:"活动标题",
|
|
//活动内容
|
|
content:"活动内容",
|
|
//活动背景图
|
|
activityImg: "logo512.png",
|
|
//求助时间
|
|
seekHelpTime:new Date().getTime(),
|
|
//活动开始时间
|
|
activityStartTime:new Date().getTime(),
|
|
//活动结束时间
|
|
activityEndTime:new Date().getTime(),
|
|
//报名时间
|
|
applyTime:new Date().getTime(),
|
|
//参与时间
|
|
joinTime:new Date().getTime(),
|
|
//完成时间
|
|
completeTime:new Date().getTime(),
|
|
//活动评价分
|
|
score: Math.ceil(Math.random()*10),
|
|
},
|
|
{
|
|
//活动Id
|
|
activityId:123,
|
|
//活动标题
|
|
title:"活动标题",
|
|
//活动内容
|
|
content:"活动内容",
|
|
//活动背景图
|
|
activityImg: "logo512.png",
|
|
//求助时间
|
|
seekHelpTime:new Date().getTime(),
|
|
//活动开始时间
|
|
activityStartTime:new Date().getTime(),
|
|
//活动结束时间
|
|
activityEndTime:new Date().getTime(),
|
|
//报名时间
|
|
applyTime:new Date().getTime(),
|
|
//参与时间
|
|
joinTime:null,
|
|
//完成时间
|
|
completeTime:new Date().getTime(),
|
|
//活动评价分
|
|
score: Math.ceil(Math.random()*10),
|
|
},{
|
|
//活动Id
|
|
activityId:123,
|
|
//活动标题
|
|
title:"活动标题",
|
|
//活动内容
|
|
content:"活动内容",
|
|
//活动背景图
|
|
activityImg: "logo512.png",
|
|
//求助时间
|
|
seekHelpTime:new Date().getTime(),
|
|
//活动开始时间
|
|
activityStartTime:new Date().getTime(),
|
|
//活动结束时间
|
|
activityEndTime: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 my-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 xs={4}>
|
|
<Image src={help.activityImg} className="activityImage"/>
|
|
</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.activityStartTime,help.activityEndTime].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>
|
|
)
|
|
}
|
|
}
|
|
|