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: 0,
			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,
		}
	}
	Clickteacher=(e)=>{
    console.log(e);
    if(e === 1){
      this.setState({
				gouxuans:1,
			})
		}else if(e === 2){
			this.setState({
				gouxuans:2,
			})
		}else if(e === 3){
			this.setState({
				gouxuans:3,
			})
		}
	}
	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,
		})

	}


	//跳转然后登入
	Jumptotheinterestpage=()=>{
		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) => {

		})
	}
	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(1)}>{gouxuans ===1? <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(2)}>{gouxuans===2? <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(3)}>{gouxuans===3?<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" style={{width:"255px",height: "36px",background: "#4CACFF"}}>完成</Button>

					</div>

			</div>
		);
	}
}

export default (InterestpageComponent);