courselist.js

import React, {Component} from 'react';
import {VList} from '../../common';
import {Tabs, WhiteSpace, SearchBar} from 'antd-mobile';
import './courselist.scss';

class Classify extends Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
        this.ontabclick = this.ontabclick.bind(this)
    }

    handleClick() {
        console.log(1);
    }

    ontabclick(tab, index) {
        console.log(tab, index)
        this.setState(status => ({
            data: status.dataList,
        }));
    }

    pulldown() {
        this.setState(status => ({
            ispull: !status.ispull,
            display: status.ispull ? 'none' : 'block'
        }));
    }

    labelclick(name) {
        console.log(name)
        this.setState(status => ({
            ispull: !status.ispull,
            display: status.ispull ? 'none' : 'block'
        }));
    }

    toSearch() {
        window.location.href = '/search'
    }

    return() {
        window.location.href = '/classify'
    }

    state = {
        ispull: false,
        display: 'none',
        mockData: [
            {
                title: '三月面试求职三月面试求职三月面试求职',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒6',
                time: '03月12日',
                record: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒',
                isbuy: 1,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职三月面试求职三月面试求职',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒6',
                time: '03月12日',
                record: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒',
                isbuy: 1,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
        ],
        data: [
            {
                title: '三月面试求职三月面试求职三月面试求职',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒6',
                time: '03月12日',
                record: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒',
                isbuy: 1,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职三月面试求职三月面试求职',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒6',
                time: '03月12日',
                record: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒',
                isbuy: 1,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
            {
                title: '三月面试求职班',
                imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
                contact: 'QQ群：449141326',
                time: '03月12日',
                record: '学习到第2课2分33秒',
                isbuy: 0,
                price0: 100,
                price1: 100
            },
        ],
        dataList: [
            {
                'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
                'title': 'Spark大数据',
                'teacher': 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww',
                'time': '2343234',
                'isbuy': 0,
                'price0': 100,
                'price1': 1000
            },
            {
                'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
                'title': '机器学习',
                'teacher': 'wwwwww',
                'time': '2343234',
                'isbuy': 0,
                'price0': 100,
                'price1': 1000
            },
            {
                'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
                'title': 'Linux',
                'teacher': 'wwwwww',
                'time': '2343234',
                'isbuy': 0,
                'price0': 100,
                'price1': 1000
            },
            {
                'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
                'title': '数学',
                'teacher': 'wwwwww',
                'time': '2343234',
                'isbuy': 1,
                'price0': 200,
                'price1': 2000
            }
        ]
    }

    render() {

        const tabs = [
            {title: '机器学习'},
            {title: '数学'},
            {title: 'Linux'},
            {title: '深度学习'},
            {title: '数据结构'},
            {title: 'Linux'},
            {title: '数据结构'},
            {title: '数学'},
        ];
        const bottom = (
            <i className={'iconfont iconiconfront-69 pull-down'}></i>
        )
        const top = (
            <i className={'iconfont iconiconfront-71 pull-down'}></i>
        )

        return (
            <div className='class-child'>
                <div className="search-nav">
                    <i className={'iconfont iconiconfront-68 return'} onClick={this.return.bind(this)}></i>
                    <SearchBar
                        placeholder="搜索课程"
                        cancelText={" "}
                        onFocus={this.toSearch.bind(this)}
                        showCancelButton={false}
                    />
                    <i className={'iconfont icongouwuche shopping-cart'}></i>
                </div>
                <div className='class-content'>
                    <WhiteSpace/>
                    <div onClick={this.pulldown.bind(this)}>
                        {this.state.ispull ? top : bottom}
                    </div>

                    <Tabs
                        tabs={tabs}
                        animated={false}
                        onChange={(tab, index) => this.ontabclick(tab, index)}
                        onTabClick={(tab, index) => this.ontabclick(tab, index)}
                    >
                        <div className='tabs'>
                            <ul>
                                {this.state.data.map((item, index) => {
                                    const Info = (
                                        <div className="info">
                                            <p className='title'>{item.title}</p>
                                            <p className='contact text-overflow-2'>{item.contact}</p>
                                            <div className='des'>
                                                {item.isbuy === 0 && <p className="course-price">
                                                    <span className="new">¥{item.price0}</span>
                                                    <span className="old">¥{item.price1}</span>
                                                </p>
                                                }
                                                {item.isbuy === 1 &&
                                                <a href="/#" className="isbuy">已购买</a>
                                                }
                                            </div>
                                        </div>
                                    )
                                    const status = (
                                        <div>
                                            {item.isbuy === 1 &&
                                            <p className='course-status'>拼团减100元</p>
                                            }
                                        </div>

                                    )
                                    return (
                                        <VList handleClick={this.handleClick} key={index} status={status}
                                               info={Info}></VList>
                                    )
                                })}
                            </ul>
                        </div>
                    </Tabs>
                    <WhiteSpace/>
                </div>
                <div className='mbc-box' style={{display: this.state.display}}>
                    <div className="tabcontent">
                        <ClassCourse data={this.state.dataList} title={'基础入门'} onclick={this.labelclick.bind(this)}/>
                        <ClassCourse data={this.state.dataList} title={'进阶提高'} onclick={this.labelclick.bind(this)}/>
                    </div>
                </div>

            </div>
        )
    }

}

function ClassCourse({data, title, onclick}) {
    return (
        <div className="class-course">
            <p className='course-items-title'>{title}</p>
            <div className='items-box'>
                {
                    data.map((item, index) => {
                        return (
                            <span key={index} onClick={onclick}
                                  className='item-label'>{item.title}</span>
                        )
                    })
                }
            </div>
        </div>
    )
}

export default Classify;