index.js

import React, {Component} from 'react';
import {WithTab} from '@/HOCs'
import './index.scss';
import { http } from "@/utils";
import {Link} from 'react-router-dom'
import {Toast} from 'antd-mobile'
import {HeaderBar} from "@/common"
import Loading from '@/common/Loading'


class Classify extends Component {
    constructor(props) {
        super(props)
        this.state = {
            camp: [],
            employment: [],
            basics: [],
            advanced: [],
            special: [],
            isLoading: true
        }
    }

    componentDidMount() {
        let data = 1
        http.get(`${API.home}/m/course/classify/${data}`,).then((res) => {
            if (res.data.code === 200) {
                this.setState({
                    isLoading: false
                })

                if (res.data.data.common.length > 0) {
                    this.setState({
                        basics: res.data.data.common[0],
                        advanced: res.data.data.common[1],
                    })
                }
                if (res.data.data.special.length > 0) {
                    this.setState({
                        camp: res.data.data.special[0],
                        employment: res.data.data.special[1],
                        special: res.data.data.special[2],
                    })
                }
            } else {
                Toast.info(res.data.msg, 2)
            }

        })
    }

    render() {
        return (
            <div className='class-box'>
                <HeaderBar title='分类' arrow={false} cart={false}></HeaderBar>
                <Loading isLoading={this.state.isLoading}>
                    <ClassCourseBox data={this.state.camp.list} title={this.state.camp.name} type={1}/>
                    <ClassCourseBox data={this.state.employment.list} title={this.state.employment.name} type={1}/>
                    <ClassCourseBox data={this.state.basics.list} title={this.state.basics.name} type={2}/>
                    <ClassCourseBox data={this.state.advanced.list} title={this.state.advanced.name} type={2}/>
                    <div className="vip">
                        {this.state.special.list && this.state.special.list.length > 0 && this.state.special.list.map((item, index) => {
                            return (
                                <Link key={index} to={`/detail?id=${item.course_id}`}>
                                    <img src={item.course_img} alt=""/>
                                </Link>
                            )
                        })
                        }
                    </div>
                </Loading>
            </div>
        )
    }
}

// 课程图片形式展示 点击图片直接跳转课程详情页面
function ClassCourseA({data}) {
    return (
        <div className='items-box'>
            {
                data && data.length > 0 && data.map((item, index) => {
                    return (
                        <Link to={`/detail?id=${item.course_id}`} key={index} className='item-banner'>
                            <img src={item.course_img} alt=""/>
                            {
                                (item.is_aist &&
                                    <span className='return_cash'></span>)
                            }
                        </Link>
                    )
                })
            }
        </div>
    )
}

// 课程标签的形式展示  点击标签跳转分类详情页面
function ClassCourseB(props) {
    return (
        <div className='items-box'>
            {
                props.data && props.data.length > 0 && props.data.map((item, index) => {
                    return (
                        <Link to={`/courselist?id=${item.c_id}&name=${item.c_name}`} key={index} className='item-label'>
                            {item.c_name}
                        </Link>
                    )
                })
            }
        </div>
    )
}

function ClassCourseBox(props) {
    return (
        <div className="class-course">
            <p className='course-items-title'>
                <img src={require('./image/tips.png')} alt=""/>
                {props.title}
            </p>
            {props.type === 1 &&
            <ClassCourseA data={props.data}/>
            }
            {props.type === 2 &&
            <ClassCourseB data={props.data}/>
            }
        </div>
    )
}

export default WithTab(Classify);