panqihua
/
help_user
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

增加我的留言页面

Browse Source 
志愿者布局调整
master
pan 5 years ago
parent daf7211187
commit 8284bfa0fe
6 changed files with 409 additions and 6 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      src/entity.ts
  2. 39
      src/index.css
  3. 2
      src/my/MyFriend.tsx
  4. 2
      src/my/MyHelp.tsx
  5. 169
      src/my/MyLeaveWord.tsx
  6. 197
      src/sub/Volunteer.tsx

6
src/entity.ts
Unescape View File

@ -61,6 +61,11 @@ export interface BaseHelp {
activeImg:string;
}
//活动详情
export interface ActiveDetail extends BaseHelp{
}
//我的帮助信息
export interface MyHelpState extends BaseHelp{
//求助时间
@ -208,3 +213,4 @@ export interface Chat {
//发送时间
time:number;
}

39
src/index.css
Unescape View File

@ -39,6 +39,43 @@
height: 100px;
}
.leave-word-headImg{
width:100px;
height: 100px;
}
/**
* 文本省略
*/
.text-ellipsis{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
/**
* 留言正文内容
*/
.leave-word-height{
-webkit-line-clamp:2;
height: 50px;
}
/**
* 名字
*/
.user-name{
width: 100px;
}
/**
* 留言
*/
.leave-word-parent-height{
height: 140px;
}
/**
发送信息框
*/
@ -76,7 +113,7 @@
* 我的留言高度
*/
.my-leave-world-height{
height: 400px;
height: 450px;
}
/**

2
src/my/MyFriend.tsx
Unescape View File

@ -13,7 +13,7 @@ function UserPart(props:Readonly<any>) {
return (
<Col xs={4}>
<Image roundedCircle={true} src={props.headImg} className="chat-headImg"/>
<span className="d-block text-center" style={{width:"100px"}}>{props.name}</span>
<span className="d-block text-center user-name">{props.name}</span>
</Col>
)
}

2
src/my/MyHelp.tsx
Unescape View File

@ -139,7 +139,7 @@ export class MyHelp extends React.Component<any, { data:Array<MyHelpState> }>{
render() {
return (
<div className="overflow-auto seek-help-height">
<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>

169
src/my/MyLeaveWord.tsx
Unescape View File

@ -1,10 +1,175 @@
import React from "react";
import {Button, Col, Container, Image, Row} from "react-bootstrap";
import {ActiveDetail, User} from "../entity";
enum LeaveWordType {
recommend,
apply,
join,
complete,
friend
}
interface Type1{
active:ActiveDetail;
user:User;
type:LeaveWordType;
}
interface Type2 {
user:User;
type:LeaveWordType;
}
/**
* 我的留言
*/
export class MyLeaveWord extends React.Component<any, any>{
export class MyLeaveWord extends React.Component<any, {
data:Array<Type1|Type2>;
}>{
constructor(props: Readonly<any>) {
super(props);
this.state={data:[]}
}
componentDidMount() {
this.loadLeaveWord()
}
/**
* 加载留言
*/
loadLeaveWord(){
this.setState({
data:[
{
user:{
headImg:"logo512.png",
userId:"admin",
name:"张三",
age:Math.ceil(Math.random()*100)+1,
mobile:1234567879,
email:"admin@qq.com",
address:"上海高新区",
info:"个人简介",
},
active:{
title:"活动标题1",
content:"活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动",
activeImg:"logo512.png"
},
type:LeaveWordType.recommend
},
{
user:{
headImg:"logo512.png",
userId:"admin",
name:"张三",
age:Math.ceil(Math.random()*100)+1,
mobile:1234567879,
email:"admin@qq.com",
address:"上海高新区",
info:"个人简介",
},
active:{
title:"活动标题1",
content:"活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动",
activeImg:"logo512.png"
},
type:LeaveWordType.apply
},
{
user:{
headImg:"logo512.png",
userId:"admin",
name:"张三",
age:Math.ceil(Math.random()*100)+1,
mobile:1234567879,
email:"admin@qq.com",
address:"上海高新区",
info:"个人简介",
},
type:LeaveWordType.friend
}
]
})
}
/**
* 解析留言类型
* @param type
*/
getType(type:LeaveWordType){
switch (type) {
case LeaveWordType.recommend:return "推荐提示"
case LeaveWordType.apply:return "报名提示"
case LeaveWordType.join:return "参加提示"
case LeaveWordType.complete:return "完成提示"
case LeaveWordType.friend:return "好友验证"
}
}
/**
* 解析留言
* @param data
*/
getData(data:Type1|Type2){
let body
if("active" in data ){
body=<Col>
<div>
<h5 className="text-center">{data.active.title}</h5>
</div>
<div>
<p className="text-ellipsis leave-word-height">{data.active.content}</p>
</div>
<div className="text-center">
<Button variant={"primary"}>查看活动详情</Button>
</div>
</Col>
}else{
body=
<Col>
<div className="invisible">
<h5>~</h5>
</div>
<div>
<p className="text-ellipsis leave-word-height">{data.user.info}</p>
</div>
<div className="text-center">
<Button variant={"primary"} className="mr-2">同意</Button>
<Button variant={"danger"}>拒绝</Button>
</div>
</Col>
}
return (
<Container className="mt-3 pt-2 pb-2 border-info border rounded-pill">
<Row>
<Col>
<h3 className="text-center">{this.getType(data.type)}</h3>
</Col>
</Row>
<Row>
<Col xs={3}>
<Image src={data.user.headImg} className="leave-word-headImg"/>
<span className="d-block text-center user-name">{data.user.name}</span>
</Col>
{body}
</Row>
</Container>
)
}
render() {
return (<h1>我的留言！！！！！</h1>);
return (
<div className="overflow-auto my-leave-world-height">
{this.state.data.map(data =>this.getData(data))}
</div>
);
}
}

197
src/sub/Volunteer.tsx
Unescape View File

@ -113,6 +113,201 @@ export class Volunteer extends React.Component<any, any>{
//服务地点
address:"广州"
}
],[
{
//个人描述
desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
//姓名
name:"张三",
//性别
sex:"男",
//年龄
age:17,
//联系电话
phone:15920722180,
//邮箱
mail:"admin@qq.com",
//服务地点
address:"广州"
},
{
//个人描述
desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
//姓名
name:"张三",
//性别
sex:"男",
//年龄
age:17,
//联系电话
phone:15920722180,
//邮箱
mail:"admin@qq.com",
//服务地点
address:"广州"
},
{
//个人描述
desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
//姓名
name:"张三",
//性别
sex:"男",
//年龄
age:17,
//联系电话
phone:15920722180,
//邮箱
mail:"admin@qq.com",
//服务地点
address:"广州"
},
{
//个人描述
desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
//姓名
name:"张三",
//性别
sex:"男",
//年龄
age:17,
//联系电话
phone:15920722180,
//邮箱
mail:"admin@qq.com",
//服务地点
address:"广州"
}
],[
{
//个人描述
desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
//姓名
name:"张三",
//性别
sex:"男",
//年龄
age:17,
//联系电话
phone:15920722180,
//邮箱
mail:"admin@qq.com",
//服务地点
address:"广州"
},
{
//个人描述
desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
//姓名
name:"张三",
//性别
sex:"男",
//年龄
age:17,
//联系电话
phone:15920722180,
//邮箱
mail:"admin@qq.com",
//服务地点
address:"广州"
},
{
//个人描述
desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
//姓名
name:"张三",
//性别
sex:"男",
//年龄
age:17,
//联系电话
phone:15920722180,
//邮箱
mail:"admin@qq.com",
//服务地点
address:"广州"
},
{
//个人描述
desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
//姓名
name:"张三",
//性别
sex:"男",
//年龄
age:17,
//联系电话
phone:15920722180,
//邮箱
mail:"admin@qq.com",
//服务地点
address:"广州"
}
],[
{
//个人描述
desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
//姓名
name:"张三",
//性别
sex:"男",
//年龄
age:17,
//联系电话
phone:15920722180,
//邮箱
mail:"admin@qq.com",
//服务地点
address:"广州"
},
{
//个人描述
desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
//姓名
name:"张三",
//性别
sex:"男",
//年龄
age:17,
//联系电话
phone:15920722180,
//邮箱
mail:"admin@qq.com",
//服务地点
address:"广州"
},
{
//个人描述
desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
//姓名
name:"张三",
//性别
sex:"男",
//年龄
age:17,
//联系电话
phone:15920722180,
//邮箱
mail:"admin@qq.com",
//服务地点
address:"广州"
},
{
//个人描述
desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
//姓名
name:"张三",
//性别
sex:"男",
//年龄
age:17,
//联系电话
phone:15920722180,
//邮箱
mail:"admin@qq.com",
//服务地点
address:"广州"
}
]]
})
}
@ -137,7 +332,7 @@ export class Volunteer extends React.Component<any, any>{
<Button className="col-1 mt-3 mb-3" variant="info" onClick={()=>console.info(this.state.form)}>搜索</Button>
<Page onClick={(page:number)=>this.loadVolunteerList(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>
{/*<Page onClick={(page:number)=>this.loadVolunteerList(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>*/}
{this.state.volunteerList.map((volunteers:Array<VolunteerProps>, index:number)=>

Write Preview
Loading…
Cancel
Save