dev_forum
parent
ea6cfcc03c
commit
23dd85b8f6
@ -1,118 +1,118 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
|
||||
import {CNotificationHOC} from '../courses/common/CNotificationHOC'
|
||||
import Loading from '../../Loading';
|
||||
|
||||
import Loadable from 'react-loadable';
|
||||
|
||||
import { TPMIndexHOC } from '../tpm/TPMIndexHOC';
|
||||
|
||||
import { SnackbarHOC, getImageUrl } from 'educoder';
|
||||
import AccountNav from './account/AccountNav'
|
||||
import axios from 'axios'
|
||||
|
||||
const AccountBasic= Loadable({
|
||||
loader: () => import('./account/AccountBasic'),
|
||||
loading: Loading,
|
||||
})
|
||||
const AccountBasicEdit= Loadable({
|
||||
loader: () => import('./account/AccountBasicEdit'),
|
||||
loading: Loading,
|
||||
})
|
||||
|
||||
const AccountCertification= Loadable({
|
||||
loader: () => import('./account/AccountCertification'),
|
||||
loading: Loading,
|
||||
})
|
||||
const AccountSecure= Loadable({
|
||||
loader: () => import('./account/AccountSecure'),
|
||||
loading: Loading,
|
||||
})
|
||||
|
||||
class AccountPage extends Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
basicInfo:undefined
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate =(prevState)=>{
|
||||
if(this.props.current_user && this.props.current_user != prevState.current_user){
|
||||
this.getBasicInfo(this.props.current_user.login);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount = () =>{
|
||||
if(this.props.current_user){
|
||||
this.getBasicInfo(this.props.current_user.login);
|
||||
}
|
||||
}
|
||||
|
||||
getBasicInfo=(login)=>{
|
||||
let url=`/users/accounts/${login || this.props.current_user.login}.json`;
|
||||
axios.get(url).then((result)=>{
|
||||
if(result.data){
|
||||
if(result.data && result.data.base_info_completed == false){
|
||||
this.props.history.push(`/account/basic/edit`);
|
||||
}
|
||||
this.setState({
|
||||
basicInfo: Object.assign({}, {...result.data}, { avatar_url: `${result.data.avatar_url}?t=${new Date().getTime()}`})
|
||||
})
|
||||
}
|
||||
}).catch((error)=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
render() {
|
||||
let { basicInfo }=this.state;
|
||||
const common = { basicInfo, getBasicInfo : this.getBasicInfo }
|
||||
return (
|
||||
<div className="newMain clearfix">
|
||||
<div className="educontent df pt20">
|
||||
<style>{`
|
||||
.accountPage {
|
||||
display: flex;
|
||||
}
|
||||
`}</style>
|
||||
<AccountNav {...this.props} {...common}></AccountNav>
|
||||
<div className="basicFormWrap">
|
||||
<Switch {...this.props}>
|
||||
<Route exact path="/account/basic"
|
||||
render={
|
||||
(props) => (<AccountBasic {...this.props} {...props} {...this.state} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
<Route exact path="/account/basic/edit"
|
||||
render={
|
||||
(props) => (<AccountBasicEdit {...this.props} {...props} {...this.state} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
<Route exact path="/account/certification"
|
||||
render={
|
||||
(props) => (<AccountCertification {...this.props} {...props} {...this.state} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
<Route exact path="/account/secure"
|
||||
render={
|
||||
(props) => (<AccountSecure {...this.props} {...props} {...this.state} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
<Route exact path="/account"
|
||||
render={
|
||||
(props) => (<AccountBasic {...this.props} {...props} {...this.state} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CNotificationHOC()(SnackbarHOC() ( TPMIndexHOC ( AccountPage )));
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
|
||||
import {CNotificationHOC} from '../courses/common/CNotificationHOC'
|
||||
import Loading from '../../Loading';
|
||||
|
||||
import Loadable from 'react-loadable';
|
||||
|
||||
import { TPMIndexHOC } from '../tpm/TPMIndexHOC';
|
||||
|
||||
import { SnackbarHOC, getImageUrl } from 'educoder';
|
||||
import AccountNav from './account/AccountNav'
|
||||
import axios from 'axios'
|
||||
|
||||
const AccountBasic= Loadable({
|
||||
loader: () => import('./account/AccountBasic'),
|
||||
loading: Loading,
|
||||
})
|
||||
const AccountBasicEdit= Loadable({
|
||||
loader: () => import('./account/AccountBasicEdit'),
|
||||
loading: Loading,
|
||||
})
|
||||
|
||||
const AccountCertification= Loadable({
|
||||
loader: () => import('./account/AccountCertification'),
|
||||
loading: Loading,
|
||||
})
|
||||
const AccountSecure= Loadable({
|
||||
loader: () => import('./account/AccountSecure'),
|
||||
loading: Loading,
|
||||
})
|
||||
|
||||
class AccountPage extends Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
basicInfo:undefined
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate =(prevState)=>{
|
||||
if(this.props.current_user && this.props.current_user != prevState.current_user){
|
||||
this.getBasicInfo(this.props.current_user.login);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount = () =>{
|
||||
if(this.props.current_user){
|
||||
this.getBasicInfo(this.props.current_user.login);
|
||||
}
|
||||
}
|
||||
|
||||
getBasicInfo=(login)=>{
|
||||
let url=`/users/accounts/${login || this.props.current_user.login}.json`;
|
||||
axios.get(url).then((result)=>{
|
||||
if(result.data){
|
||||
if(result.data && result.data.base_info_completed == false){
|
||||
this.props.history.push(`/profile/basic/edit`);
|
||||
}
|
||||
this.setState({
|
||||
basicInfo: Object.assign({}, {...result.data}, { avatar_url: `${result.data.avatar_url}?t=${new Date().getTime()}`})
|
||||
})
|
||||
}
|
||||
}).catch((error)=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
render() {
|
||||
let { basicInfo }=this.state;
|
||||
const common = { basicInfo, getBasicInfo : this.getBasicInfo }
|
||||
return (
|
||||
<div className="newMain clearfix">
|
||||
<div className="educontent df pt20">
|
||||
<style>{`
|
||||
.accountPage {
|
||||
display: flex;
|
||||
}
|
||||
`}</style>
|
||||
<AccountNav {...this.props} {...common}></AccountNav>
|
||||
<div className="basicFormWrap">
|
||||
<Switch {...this.props}>
|
||||
<Route exact path="/profile/basic"
|
||||
render={
|
||||
(props) => (<AccountBasic {...this.props} {...props} {...this.state} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
<Route exact path="/profile/basic/edit"
|
||||
render={
|
||||
(props) => (<AccountBasicEdit {...this.props} {...props} {...this.state} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
<Route exact path="/profile/certification"
|
||||
render={
|
||||
(props) => (<AccountCertification {...this.props} {...props} {...this.state} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
<Route exact path="/profile/secure"
|
||||
render={
|
||||
(props) => (<AccountSecure {...this.props} {...props} {...this.state} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
<Route exact path="/profile"
|
||||
render={
|
||||
(props) => (<AccountBasic {...this.props} {...props} {...this.state} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CNotificationHOC()(SnackbarHOC() ( TPMIndexHOC ( AccountPage )));
|
||||
|
||||
@ -1,68 +1,68 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { SnackbarHOC, getImageUrl } from 'educoder';
|
||||
import AccountImg from './AccountImg'
|
||||
class AccountNav extends Component {
|
||||
toBasic = () => {
|
||||
this.props.history.push(`/account/basic`)
|
||||
}
|
||||
toCertification = () => {
|
||||
this.props.history.push(`/account/certification`)
|
||||
}
|
||||
toSecure = () => {
|
||||
this.props.history.push(`/account/secure`)
|
||||
}
|
||||
render() {
|
||||
let { basicInfo } = this.props
|
||||
console.log(this.props);
|
||||
const path = window.location.pathname
|
||||
const isBasic = path.indexOf('basic') != -1 || path == "/account"
|
||||
const isCertification = path.indexOf('certification') != -1
|
||||
const isSecure = path.indexOf('secure') != -1
|
||||
return (
|
||||
<div className="accountNav fl">
|
||||
{
|
||||
basicInfo &&
|
||||
<React.Fragment>
|
||||
<div className="accountInfo">
|
||||
<AccountImg src={basicInfo.avatar_url} {...this.props}></AccountImg>
|
||||
<span className="name">{basicInfo.name}</span>
|
||||
<span className="role">{basicInfo.technical_title}</span>
|
||||
</div>
|
||||
|
||||
<div className="accountManagement">
|
||||
<div className="title">账号管理</div>
|
||||
<ul>
|
||||
<li className={`navItem ${isBasic ? 'active' : ''}`} onClick={this.toBasic}>
|
||||
<i className="iconfont icon-jibenxinxi color-grey-9 font-16"></i>
|
||||
基本信息
|
||||
{
|
||||
(basicInfo.authentication == 'uncertified' || basicInfo.authentication == 'applying') &&
|
||||
<i className="status fr iconfont icon-tishi color-red font-16"></i>
|
||||
}
|
||||
{
|
||||
basicInfo.authentication == 'certified' &&
|
||||
<i className="status fr iconfont icon-wancheng color-green-light font-16"></i>
|
||||
}
|
||||
</li>
|
||||
<li className={`navItem ${isCertification ? 'active' : ''}`} onClick={this.toCertification}>
|
||||
<i className="iconfont icon-renzhengxinxi color-grey-9 font-16"></i>认证信息
|
||||
{
|
||||
basicInfo.professional_certification == 'certified' && basicInfo.authentication == 'certified' ?
|
||||
<i className="status fr iconfont icon-wancheng color-green-light font-16"></i>:
|
||||
<i className="status fr iconfont icon-tishi color-red font-16"></i>
|
||||
}
|
||||
</li>
|
||||
<li className={`navItem ${isSecure ? 'active' : ''}`} onClick={this.toSecure}>
|
||||
<i className="iconfont icon-anquanshezhi color-grey-9 font-16"></i>安全设置
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AccountNav ;
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { SnackbarHOC, getImageUrl } from 'educoder';
|
||||
import AccountImg from './AccountImg'
|
||||
class AccountNav extends Component {
|
||||
toBasic = () => {
|
||||
this.props.history.push(`/profile/basic`)
|
||||
}
|
||||
toCertification = () => {
|
||||
this.props.history.push(`/profile/certification`)
|
||||
}
|
||||
toSecure = () => {
|
||||
this.props.history.push(`/profile/secure`)
|
||||
}
|
||||
render() {
|
||||
let { basicInfo } = this.props
|
||||
console.log(this.props);
|
||||
const path = window.location.pathname
|
||||
const isBasic = path.indexOf('basic') != -1 || path == "/profile"
|
||||
const isCertification = path.indexOf('certification') != -1
|
||||
const isSecure = path.indexOf('secure') != -1
|
||||
return (
|
||||
<div className="accountNav fl">
|
||||
{
|
||||
basicInfo &&
|
||||
<React.Fragment>
|
||||
<div className="accountInfo">
|
||||
<AccountImg src={basicInfo.avatar_url} {...this.props}></AccountImg>
|
||||
<span className="name">{basicInfo.name}</span>
|
||||
<span className="role">{basicInfo.technical_title}</span>
|
||||
</div>
|
||||
|
||||
<div className="accountManagement">
|
||||
<div className="title">账号管理</div>
|
||||
<ul>
|
||||
<li className={`navItem ${isBasic ? 'active' : ''}`} onClick={this.toBasic}>
|
||||
<i className="iconfont icon-jibenxinxi color-grey-9 font-16"></i>
|
||||
基本信息
|
||||
{
|
||||
(basicInfo.authentication == 'uncertified' || basicInfo.authentication == 'applying') &&
|
||||
<i className="status fr iconfont icon-tishi color-red font-16"></i>
|
||||
}
|
||||
{
|
||||
basicInfo.authentication == 'certified' &&
|
||||
<i className="status fr iconfont icon-wancheng color-green-light font-16"></i>
|
||||
}
|
||||
</li>
|
||||
<li className={`navItem ${isCertification ? 'active' : ''}`} onClick={this.toCertification}>
|
||||
<i className="iconfont icon-renzhengxinxi color-grey-9 font-16"></i>认证信息
|
||||
{
|
||||
basicInfo.professional_certification == 'certified' && basicInfo.authentication == 'certified' ?
|
||||
<i className="status fr iconfont icon-wancheng color-green-light font-16"></i>:
|
||||
<i className="status fr iconfont icon-tishi color-red font-16"></i>
|
||||
}
|
||||
</li>
|
||||
<li className={`navItem ${isSecure ? 'active' : ''}`} onClick={this.toSecure}>
|
||||
<i className="iconfont icon-anquanshezhi color-grey-9 font-16"></i>安全设置
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AccountNav ;
|
||||
|
||||
Loading…
Reference in new issue