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.
203 lines
6.6 KiB
203 lines
6.6 KiB
import React from "react";
|
|
import {Dropdown, Nav, Navbar} from "react-bootstrap";
|
|
import {IndexMenu} from "./sub/IndexMenu";
|
|
import {Volunteer} from "./sub/Volunteer";
|
|
import {SendHelp} from "./sub/SendHelp";
|
|
import {MyFriend} from "./my/MyFriend";
|
|
import {MyDialog} from "./ui/MyDialog";
|
|
import {MyLeaveWord} from "./my/MyLeaveWord";
|
|
import {MyMessage} from "./my/MyMessage";
|
|
import {User, UserEdit, UserType} from "./entity";
|
|
import {Cookies} from "react-cookie";
|
|
import {user_cookie, user_type_cookie, welcome_cookie} from "./account/PropCookie";
|
|
|
|
/**
|
|
* 菜单标记
|
|
*/
|
|
enum Menu {
|
|
index,
|
|
volunteer,
|
|
myHelp
|
|
}
|
|
|
|
/**
|
|
* 我的弹框菜单列表
|
|
*/
|
|
enum DialogType {
|
|
friend="我的好友",
|
|
leaveWord="我的留言",
|
|
message="个人信息"
|
|
}
|
|
|
|
/**
|
|
* 主菜单
|
|
*/
|
|
export class Main extends React.Component<
|
|
{
|
|
logout:Function;
|
|
//
|
|
cookies:Cookies;
|
|
},
|
|
|
|
{
|
|
//菜单
|
|
menu:Menu;
|
|
//子菜单
|
|
subMenu:JSX.Element;
|
|
friendList:Array<User>;
|
|
//我的菜单
|
|
my:{
|
|
menuName:string;
|
|
content:JSX.Element|null;
|
|
open:boolean;
|
|
},
|
|
//用户身份
|
|
userType?:string;
|
|
//显示欢迎信息
|
|
result:boolean;
|
|
}
|
|
>{
|
|
|
|
constructor(props: Readonly<any>) {
|
|
super(props);
|
|
//默认菜单
|
|
this.state={
|
|
//一级菜单
|
|
menu:Menu.index,
|
|
//二级菜单
|
|
subMenu:<IndexMenu user={this.props.cookies.get(user_cookie)}/>,
|
|
//我的好友信息
|
|
friendList:[],
|
|
//我的菜单
|
|
my:{menuName: "",content:null,open:false},
|
|
result:Boolean(this.props.cookies.get(welcome_cookie))
|
|
}
|
|
}
|
|
|
|
|
|
//获取菜单名颜色
|
|
getMenuColor(menu:Menu){
|
|
if(this.state.menu===menu){
|
|
return {
|
|
color:"white",
|
|
backgroundColor:"blue"
|
|
}
|
|
}else{
|
|
return {
|
|
color:"blue",
|
|
backgroundColor: "white"
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
//切换菜单
|
|
changeMenu(menu:Menu){
|
|
this.setState({
|
|
menu:menu
|
|
})
|
|
|
|
switch (menu) {
|
|
case Menu.index:
|
|
this.setState({
|
|
subMenu:<IndexMenu user={this.props.cookies.get(user_cookie)}/>
|
|
});break;
|
|
case Menu.volunteer:
|
|
this.setState({
|
|
subMenu:<Volunteer/>
|
|
});break;
|
|
case Menu.myHelp:
|
|
this.setState({
|
|
subMenu:<SendHelp onSendActivityOK={()=>this.onSendActivityOK()}/>
|
|
});break;
|
|
|
|
}
|
|
}
|
|
|
|
//活动发布成功
|
|
onSendActivityOK(){
|
|
this.changeMenu(Menu.index)
|
|
}
|
|
|
|
/**
|
|
* 关闭弹窗
|
|
*/
|
|
closeDialog(){
|
|
this.setState({ my:{...this.state.my,...{menuName:"",content:null,open:false}}})
|
|
|
|
console.debug(this.state.my)
|
|
}
|
|
|
|
/**
|
|
* 打开弹窗
|
|
*/
|
|
openDialog(dialogType:DialogType){
|
|
switch (dialogType) {
|
|
case DialogType.friend:
|
|
this.setState({
|
|
my:{menuName:dialogType,content:<MyFriend user={this.props.cookies.get(user_cookie)}/>,open:true}
|
|
})
|
|
break;
|
|
case DialogType.leaveWord:
|
|
this.setState({
|
|
my:{menuName:dialogType,content:<MyLeaveWord user={this.props.cookies.get(user_cookie)}/>,open:true}
|
|
})
|
|
break;
|
|
case DialogType.message:
|
|
this.setState({
|
|
my:{menuName:dialogType,content:<MyMessage onUserUpdate={(user:UserEdit)=>this.setState({userType:user.userType})}
|
|
user={this.props.cookies.get(user_cookie)}/>,open:true}
|
|
})
|
|
break;
|
|
}
|
|
}
|
|
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<Navbar bg="light">
|
|
<Navbar.Brand>互联网+互助平台</Navbar.Brand>
|
|
<Nav variant="pills" defaultActiveKey="index" className="w-100">
|
|
<Nav.Item className="col-2">
|
|
<Nav.Link eventKey="index" style={this.getMenuColor(Menu.index)} onClick={()=>this.changeMenu(Menu.index)}>首页</Nav.Link>
|
|
</Nav.Item>
|
|
<Nav.Item className="col-2">
|
|
<Nav.Link eventKey="volunteer" style={this.getMenuColor(Menu.volunteer)} onClick={()=>this.changeMenu(Menu.volunteer)}>志愿者</Nav.Link>
|
|
</Nav.Item>
|
|
<Nav.Item className="col-2">
|
|
<Nav.Link eventKey="myHelp" style={this.getMenuColor(Menu.myHelp)} onClick={()=>this.changeMenu(Menu.myHelp)}>我的求助</Nav.Link>
|
|
</Nav.Item>
|
|
|
|
<Dropdown>
|
|
<Dropdown.Toggle variant="secondary" id="dropdown-basic">
|
|
{this.props.cookies.get(user_cookie)}
|
|
</Dropdown.Toggle>
|
|
|
|
<Dropdown.Menu>
|
|
<Dropdown.Item>时间币</Dropdown.Item>
|
|
{[DialogType.friend,DialogType.leaveWord,DialogType.message].map((type:DialogType,index:number)=><Dropdown.Item disabled={this.state.my.open} key={"dropdown"+index} onClick={()=>this.openDialog(type)}>{type}</Dropdown.Item>)}
|
|
<Dropdown.Item onClick={()=>this.props.logout()}>注销登录</Dropdown.Item>
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
|
|
|
|
|
|
{(this.state.userType||this.props.cookies.get(user_type_cookie))?<Navbar.Brand className="ml-3">{(this.state.userType||this.props.cookies.get(user_type_cookie))===UserType.help.toString()?"等待接受帮助":"等待前往帮助"}</Navbar.Brand>:null}
|
|
|
|
|
|
<MyDialog titleId="my-dialog" menuName={this.state.my.menuName} content={this.state.my.content} open={this.state.my.open} onClose={()=>this.closeDialog()}/>
|
|
</Nav>
|
|
</Navbar>
|
|
|
|
<MyDialog content={<h1 className="text-info text-center">欢迎用户{this.props.cookies.get(user_cookie)}登录本系统</h1>} open={this.state.result} titleId="login-tip" menuName="登录提示" onClose={()=>{
|
|
this.setState({result:false})
|
|
this.props.cookies.remove(welcome_cookie)
|
|
}}/>
|
|
|
|
{this.state.subMenu}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|