import React, { Component } from 'react'; import { http } from '@/utils'; import { HeaderBar } from "@/common"; import CollegeBanner from './banner'; import CollegeHeader from './header'; import './courseList.scss'; import { Toast } from 'antd-mobile'; class CollegeCourse extends Component { constructor(props) { super(props); this.state = { header: '', courseList: [] }; } componentDidMount() { this.fetchCourseList(); } fetchCourseList = () => { const { match } = this.props; const id = match.params.id || 0; http.get(`${API['home']}/sys/school/${id}`).then(res => { const { code, data } = res.data; if(code === 200) { this.setState({ header: data.name, courseList: data.data }); document.title = `助力高校在线教学计划之${data.name}专区 - 七月在线` } }); } toCourseDetail = (id) => { const { history, match } = this.props; const school_id = match.params.id || 0 http.post(`${API['home']}/sys/school/verify`, { school_id, course_id: id, }).then(res => { const { code, msg } = res.data; if(code === 200) { history.push(`/detail?id=${id}`); }else if(code === 4030 || code === 4013) { history.push('/passport/login'); }else { Toast.info(`${msg}~`); } }); } render() { const { courseList = [], header } = this.state; return ( <> <HeaderBar title={'助学计划'} arrow={true}/> <CollegeBanner /> <CollegeHeader headerStyle={{ marginTop: '20px' }} title={header} /> <p className="college-course__desc">点击需要学习的课程封面,在课程详情页进入购买流程凭免单券免费兑换课程。</p> <div className="college-course__body"> { courseList.map(item => ( <div className="college-course__item" onClick={() => this.toCourseDetail(item.course_id)} key={item.course_id} > <i className="college-course__cover" style={{'backgroundImage': `url(${item.image_name})`}}></i> <p className="college-course__title">{item.course_title}</p> </div> )) } </div> </> ) } } export default CollegeCourse;