forked from Gitlink/forgeplus-react
382 lines
12 KiB
JavaScript
382 lines
12 KiB
JavaScript
import React, { Component } from "react";
|
||
import axios from "axios";
|
||
// import '../../modules/tp-forums/css/NewHeader.css'
|
||
import { getImageUrl } from "../../common/educoder";
|
||
import "./css/header.css";
|
||
import "./css/NewHeader.css";
|
||
import { Modal, Input, message, notification } from "antd";
|
||
|
||
import LoginDialog from "../login/LoginDialog";
|
||
const $ = window.$;
|
||
// import { getImageUrl } from "educoder";
|
||
|
||
class NewHeader extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
isRender: false,
|
||
mygetHelmetapi2: null,
|
||
headtypess: null,
|
||
headtypesonClickbool: null,
|
||
};
|
||
}
|
||
componentDidMount() {
|
||
this.set_header();
|
||
}
|
||
set_header = () => {
|
||
const { mygetHelmetapi } = this.props;
|
||
if (mygetHelmetapi) {
|
||
this.setState({
|
||
mygetHelmetapi2: mygetHelmetapi,
|
||
});
|
||
} else {
|
||
this.geturlsdata();
|
||
}
|
||
};
|
||
geturlsdata = () => {
|
||
let url = "/setting.json";
|
||
axios
|
||
.get(url)
|
||
.then((response) => {
|
||
if (response && response.data) {
|
||
this.setState({
|
||
mygetHelmetapi2: response.data.setting,
|
||
});
|
||
try {
|
||
if (response.data.setting.tab_logo_url) {
|
||
this.gettablogourldata(response);
|
||
} else {
|
||
this.gettablogourlnull();
|
||
}
|
||
} catch (e) {
|
||
this.gettablogourlnull();
|
||
}
|
||
} else {
|
||
this.gettablogourlnull();
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
this.gettablogourlnull();
|
||
});
|
||
};
|
||
//获取数据的时候
|
||
gettablogourldata = (response) => {
|
||
document.title = response.data.setting.name;
|
||
var link = document.createElement("link"),
|
||
oldLink = document.getElementById("dynamic-favicon");
|
||
link.id = "dynamic-favicon";
|
||
link.rel = "shortcut icon";
|
||
link.href = "/" + response.data.setting.tab_logo_url;
|
||
if (oldLink) {
|
||
document.head.removeChild(oldLink);
|
||
}
|
||
document.head.appendChild(link);
|
||
};
|
||
//获取数据为空的时候
|
||
gettablogourlnull = () => {
|
||
this.setState({
|
||
mygetHelmetapi2: undefined,
|
||
});
|
||
var link = document.createElement("link"),
|
||
oldLink = document.getElementById("dynamic-favicon");
|
||
link.id = "dynamic-favicon";
|
||
link.rel = "shortcut icon";
|
||
link.href = "/react/build/./favicon.ico";
|
||
if (oldLink) {
|
||
document.head.removeChild(oldLink);
|
||
}
|
||
document.head.appendChild(link);
|
||
};
|
||
educoderlogin = () => {
|
||
//登录账号
|
||
this.setState({
|
||
isRender: true,
|
||
});
|
||
};
|
||
//修改登录方法
|
||
Modifyloginvalue = () => {
|
||
this.setState({
|
||
isRender: false,
|
||
});
|
||
};
|
||
educoderloginysl = () => {
|
||
//退出账号
|
||
var url = `/accounts/logout.json`;
|
||
axios
|
||
.get(url)
|
||
.then((result) => {
|
||
if (result !== undefined) {
|
||
window.location.href = "/";
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
};
|
||
matchpaths = (url) => {
|
||
const { match } = this.props;
|
||
if (url) {
|
||
if (url === "/forums" && match.path === "/forums") {
|
||
return true;
|
||
} else if (
|
||
url.startsWith("/projects") &&
|
||
match.path.startsWith("/projects")
|
||
) {
|
||
return true;
|
||
} else if (url.startsWith("/paths") && match.path.startsWith("/paths")) {
|
||
return true;
|
||
} else if (
|
||
url.startsWith("/courses") &&
|
||
match.path.startsWith("/courses")
|
||
) {
|
||
return true;
|
||
} else if (
|
||
url.startsWith("/competitions") &&
|
||
match.path.startsWith("/competitions")
|
||
) {
|
||
return true;
|
||
} else if (
|
||
url.startsWith("/statistics") &&
|
||
match.path.startsWith("/statistics")
|
||
) {
|
||
return true;
|
||
} else if (url.startsWith("/users") && match.path.startsWith("/users")) {
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
}
|
||
};
|
||
headtypesonClick = (url, bool) => {
|
||
this.setState({
|
||
headtypess: url,
|
||
headtypesonClickbool: bool,
|
||
});
|
||
};
|
||
render() {
|
||
const { user, match } = this.props;
|
||
const isLogin = !!user; // 这里不会出现未登录的情况，服务端在服务端路由时发现如果是未登录，则跳转到登录页了。
|
||
|
||
let { mygetHelmetapi2, isRender } = this.state;
|
||
return (
|
||
<div className="newHeader" id="nHeader">
|
||
{isRender === true ? (
|
||
<LoginDialog
|
||
{...this.props}
|
||
{...this.state}
|
||
Modifyloginvalue={() => this.Modifyloginvalue()}
|
||
/>
|
||
) : (
|
||
""
|
||
)}
|
||
<div className="head-nav pr head-navnew">
|
||
<a
|
||
href={"http://39.105.176.215/"}
|
||
onClick={() => this.headtypesonClick("/", false)}
|
||
className={"mr20"}
|
||
>
|
||
{mygetHelmetapi2 &&
|
||
mygetHelmetapi2.nav_logo_url &&
|
||
mygetHelmetapi2.nav_logo_url ? (
|
||
<img
|
||
alt="可控开源社区"
|
||
className="logoimg"
|
||
src={getImageUrl(mygetHelmetapi2.nav_logo_url)}
|
||
></img>
|
||
) : (
|
||
<img
|
||
alt="可控开源社区"
|
||
className="logoimg"
|
||
src={getImageUrl("images/educoder/headNavLogo.png?1526520218")}
|
||
></img>
|
||
)}
|
||
</a>
|
||
<div className="headerLeft">
|
||
{mygetHelmetapi2 &&
|
||
mygetHelmetapi2.navbar &&
|
||
mygetHelmetapi2.navbar.length > 0 ? (
|
||
<ul id="header-nav">
|
||
{mygetHelmetapi2.navbar &&
|
||
mygetHelmetapi2.navbar.map((item, key) => {
|
||
var new_link = item.link;
|
||
var is_hidden = item.hidden;
|
||
return (
|
||
<li
|
||
key={key}
|
||
onClick={() => this.headtypesonClick(item.link, true)}
|
||
className={`${
|
||
this.matchpaths(item.link) === true ? "active" : ""
|
||
}`}
|
||
style={
|
||
!is_hidden ? { display: "" } : { display: "none" }
|
||
}
|
||
>
|
||
<a href={new_link}>{item.name}</a>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
) : (
|
||
""
|
||
)}
|
||
</div>
|
||
|
||
<div className="fr">
|
||
<div
|
||
className={
|
||
user && user.login ? "headRightbox" : "headRightboxuse"
|
||
}
|
||
>
|
||
{
|
||
user && user.login ?
|
||
<div className="fl edu-menu-panel headRightwrite">
|
||
<i className="iconfont icon-xinjian newwritehave headRighthint-font"></i>
|
||
<ul
|
||
className="edu-menu-list"
|
||
style={{ top: "60px", width: "130px" }}
|
||
>
|
||
<li>
|
||
<a href={"/projects/new?project_type=mirror"}>
|
||
新建镜像项目
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href={"/projects/new?project_type=deposit"}>
|
||
新建托管项目
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href={"http://39.105.176.215/forums/new"}>新建帖子</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
: ""
|
||
}
|
||
|
||
{/* <div className="fl edu-menu-panel headRightpan">
|
||
<a href={'/applied_project/applied_join'} data-remote="true">
|
||
<i className="iconfont icon-tianjiafangda newspanhave" data-tip-down="加入项目"></i>
|
||
</a>
|
||
</div> */}
|
||
{user && user.login ? (
|
||
<div className="fl edu-menu-panel headRighthint">
|
||
{user && (
|
||
<a
|
||
href={`http://39.105.176.215/users/${user.login}/user_tidings`}
|
||
>
|
||
<i
|
||
className="iconfont icon-xiaoxilingdang headRighthint-font newinthave"
|
||
style={{ marginTop: "17.5px" }}
|
||
></i>
|
||
</a>
|
||
)}
|
||
{user && user.login && user.tidding_count > 0 && (
|
||
<span className="newslight">
|
||
{user.tidding_count > 99 ? "99+" : user.tidding_count}
|
||
</span>
|
||
)}
|
||
{user && user.login && user.tidding_count > 0 && (
|
||
<div
|
||
className="edu-menu-list edu-txt-center"
|
||
style={{ width: "220px", top: "57px" }}
|
||
>
|
||
<a
|
||
className="font-14 padding10"
|
||
style={{ lineHeight: "35px;" }}
|
||
href={`http://39.105.176.215/users/${user.login}/user_tidings`}
|
||
>
|
||
您有
|
||
<span className="color-orange">
|
||
{user.tidding_count}
|
||
</span>
|
||
条新消息，点击查看
|
||
</a>
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<div style={{ displa: "none" }}></div>
|
||
)}
|
||
{user && user.login ? (
|
||
user.username && (
|
||
<div className="fl edu-menu-panel isLogin ml15">
|
||
<div className="fr edu-menu-panel">
|
||
<a href={`/users/${user.login}`} className="fl">
|
||
<img
|
||
className="radius isLoginImg"
|
||
height="34"
|
||
id="nh_user_logo"
|
||
nhname="avatar_image"
|
||
src={`${user.image_url}`}
|
||
width="34"
|
||
></img>
|
||
</a>
|
||
<ul className="edu-menu-list" style={{ top: "60px" }}>
|
||
<span className="border-Bgrey-eb currentName task-hide">
|
||
{user.username}
|
||
</span>
|
||
<li>
|
||
<a href={`/accounts/${user.login}`}>个人中心</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href={`http://39.105.176.215/users/${user.login}/profiles`}
|
||
>
|
||
账号管理
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href={`http://39.105.176.215/users/${user.login}/user_tidings`}
|
||
>
|
||
我的消息
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href={"http://39.105.176.215/my/account"}>
|
||
账号安全
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href={"http://39.105.176.215/tasks/my_tasks"}>
|
||
创客管理
|
||
</a>
|
||
</li>
|
||
<li className="border-Tgrey-eb">
|
||
<a onClick={() => this.educoderloginysl()}>退出</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
)
|
||
) : (
|
||
<span className="font-15 mt15 fr ml20 isLoginFont">
|
||
<a className="mr10" onClick={() => this.educoderlogin()}>
|
||
登录
|
||
</a>
|
||
{mygetHelmetapi2 &&
|
||
mygetHelmetapi2.new_course &&
|
||
mygetHelmetapi2.new_course.register_url && (
|
||
<span>
|
||
<em className="vertical-line"></em>
|
||
<a
|
||
className="ml5 color-grey-3"
|
||
href={`${mygetHelmetapi2.new_course.register_url}`}
|
||
target="_blank"
|
||
>
|
||
注册
|
||
</a>
|
||
</span>
|
||
)}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default NewHeader;
|