educoder/public/react/src/modules/user/Interestpage.js

import React, {Component} from 'react';


import {Button} from 'antd';
import {broadcastChannelPostMessage} from 'educoder';
import axios from 'axios';
import './common.css'
import mytc from './img/mytc.png';
import skzbdx from './img/skzbdx.png';
import zyrs1 from './img/zyrs1.png';
import gouxuan from './img/gouxuan.png';
import meigouxuan from './img/meigouxuan.png';
import qdkf from './img/qdkf.png';
import hdkf from './img/hdkf.png';
import ydkf from './img/ydkf.png';
import sjk from './img/sjk.png';
import ysj from './img/ysj.png';
import yunwei from './img/yunwei.png';
import rgzn from './img/rgzn.png';
import qita from './img/qita.png';

//父组件 EducoderLogin.js
class InterestpageComponent extends Component {
	constructor(props) {
		super(props)
		this.state = {
			gouxuans: "",
			gouxuans2:0,
			gouxuans3:[{id:1,name:"前端开发",bool:false,url:qdkf},{id:2,name:"后端开发",bool:false,url:hdkf},{id:3,name:"移动开发",bool:false,url:ydkf},{id:4,name:"数据库",bool:false,url:sjk},{id:5,name:"云计算和大数据",bool:false,url:ysj},{id:6,name:"运维与测试",bool:false,url:yunwei},{id:7,name:"人工智能",bool:false,url:rgzn},{id:8,name:"其他",bool:false,url:qita}],
			namezh:this.props.namezh,
			passmm:this.props.passmm,
		}
	}

	componentWillReceiveProps(nextProps) {
		// console.log("46");
		// console.log(nextProps);
		// console.log(this.props);
		if (nextProps.namezh != this.props.namezh) {
			// console.log("50");
			// console.log(nextProps.user);
			if (nextProps.namezh !== undefined) {
				// console.log("53");
				// console.log(nextProps.user);
				this.setState({
					namezh: nextProps.namezh,
				})
			}


		}
		if (nextProps.passmm != this.props.passmm) {
			// console.log("50");
			// console.log(nextProps.user);
			if (nextProps.passmm !== undefined) {
				// console.log("53");
				// console.log(nextProps.user);
				this.setState({
					passmm: nextProps.passmm,
				})
			}


		}


	}


	Clickteacher=(e)=>{
    console.log(e);
    if(e === "teacher"){
      this.setState({
				gouxuans:"teacher",
			})
		}else if(e ==="student"){
			this.setState({
				gouxuans:"student",
			})
		}else if(e === "professional"){
			this.setState({
				gouxuans:"professional",
			})
		}
	}
	Clickteacher2=(e)=>{
		console.log(e);
		let {gouxuans3} =this.state;
    for (var i=0;i<gouxuans3.length;i++){
    	if(gouxuans3[i].id === e){
    		console.log("51");
    		console.log(e);
    		if(gouxuans3[i].bool === true){
					gouxuans3[i].bool=false;
				}else{
					gouxuans3[i].bool=true;
				}
			}
		}
    console.log(gouxuans3);
    this.setState({
			gouxuans3:gouxuans3,
		})

	}

	//兴趣页面点击
	Interestcompletionpage(){
		if(this.state.gouxuans.length === 0){
			this.props.showNotification("请选择您的职业");
			return
		}
		var ints=[];
		for (var i =0;i<this.state.gouxuans.length;i++) {
        if(this.state.gouxuans[i].bool === true){
          ints.push(this.state.gouxuans[i].id);
				}
		}
		var url = "/users/interest.json";
		axios.post(url, {
			identity:this.state.gouxuans,
			interest_ids: ints,
		}).then((response) => {
			if (response !== undefined) {
      // this.Jumptotheinterestpage();
				window.location.href = "/"
			}


		}).catch((error) => {
			console.log(error);

		})
	}

	//跳转然后登入
	Jumptotheinterestpage=()=>{
		console.log(this.state.login);
		console.log(this.state.password);
		var url = "/accounts/login.json";
		axios.post(url, {
			login: this.props.login,
			password: this.props.password,
		}).then((response) => {
			if (response === undefined) {
				return
			}
			if (response.status === 200) {
				// if (response.data.status === 402) {
				// 	window.location.href = response.data.url;
				// } else {
				// 	broadcastChannelPostMessage('refreshPage')
				// 	this.setState({
				// 		isRender: false
				// 	})
					window.location.href = "/"
				// }
			}


		}).catch((error) => {
			console.log(error);
		})
	}
	render() {
		const {
			gouxuans,
			gouxuans3
		} = this.state
		// height: 346px;
		return (

			<div className="ysllogin_register_contents" style={{width:"800px",height: "620px"}}>

				<div className="ysllogin_section">
					<div className="mt15"><span className="yslspans1">请选择你的职业</span></div>
					<div className="ysldivhome1" >
          <div className="ysldivhomediv" style={{marginLeft:"30px"}} >
					<div className="ysldivhomedivtxt" onClick={()=>this.Clickteacher("teacher")}>{gouxuans ==="teacher"? <img src={gouxuan} className="gouxuanimg"/>:<img className="gouxuanimg" src={meigouxuan}/>}老师</div>
						<div className="ysldivhomedivimg" ><img src={skzbdx} className="ysldivhomedivimg"/></div>
          </div>
          <div className="ysldivhomediv" style={{ marginLeft:"101px",marginRight:"101px"}}>
						<div className="ysldivhomedivtxt" onClick={()=>this.Clickteacher("student")}>{gouxuans==="student"? <img src={gouxuan} className="gouxuanimg"/>:<img className="gouxuanimg" src={meigouxuan}/>}学生</div>
						<div className="ysldivhomedivimg"><img src={mytc} className="ysldivhomedivimg"/></div>
          </div>
          <div className="ysldivhomediv" >
						<div className="ysldivhomedivtxt" onClick={()=>this.Clickteacher("professional")}>{gouxuans==="professional"?<img src={gouxuan} className="gouxuanimg"/>:<img className="gouxuanimg" src={meigouxuan}/>}专业人士</div>
						<div className="ysldivhomedivimg"><img src={zyrs1} className="ysldivhomedivimg"/></div>
          </div>
					</div>
					<div className="mt5"><span className="yslspans2">选择你可能感兴趣的内容</span></div>

					<div ><span className="yslspans3">基于你关注的内容推荐</span></div>
					<div className="ysldivhome2">

					{gouxuans3&&gouxuans3.map((item,key)=>{
								return(
								<div className={item.id<5?"ysldivhomediv1":"ysldivhomediv2"} onClick={()=>this.Clickteacher2(item.id)}>
								{item.bool===true?<img src={gouxuan} className="yslgouxuanimg"/>:<div className="yslgouxuanimg2"></div>}
								<img className="div1img" src={item.url}/>
								<span className="textall">{item.name}</span>
								</div>
								)
							})}
					</div>
					<Button className="yslbutton" size={"large"} type="primary"onClick={()=>this.Interestcompletionpage()} style={{width:"255px",height: "36px",background: "#4CACFF"} }>完成</Button>

					</div>

			</div>
		);
	}
}

export default (InterestpageComponent);