courselist.js 8.56 KB
Newer Older
xuzhenghua committed
1 2 3 4
import React, {Component} from 'react'
import {VList} from '../../common'
import {Tabs, WhiteSpace} from 'antd-mobile'
import './courselist.scss'
xuzhenghua committed
5
import HeaderSearch from '../../common/HeaderSearch/index'
xuzhenghua committed
6
import {http, api, getParam} from "@/utils"
xuzhenghua committed
7 8
import {Toast} from 'antd-mobile'
import {Link} from 'react-router-dom'
xuzhenghua committed
9
import Loading from '@/common/Loading'
xuzhenghua committed
10

xuzhenghua committed
11 12

class Classify extends Component {
xuzhenghua committed
13 14
    constructor(props) {
        super(props)
xuzhenghua committed
15 16 17 18 19
        this.state = {
            ispull: false,
            display: 'none',
            arr: [{basics: []}, {advanced: []}],
            allClass: [],
xuzhenghua committed
20
            data: [],
xuzhenghua committed
21 22
            activeTab: decodeURIComponent(getParam('name')),
            isLoading: true
xuzhenghua committed
23 24
        }

xuzhenghua committed
25 26
    }

xuzhenghua committed
27 28
    componentDidMount() {
        this.getTabs()
xuzhenghua committed
29
        this.getList()
xuzhenghua committed
30
    }
xuzhenghua committed
31

xuzhenghua committed
32 33 34
    // 获取tabs接口
    getTabs = () => {
        let data = 0
zhanghaozhe committed
35
        http.get(`${API.home}/m/course/classify/${data}`)
xuzhenghua committed
36 37 38 39 40 41 42 43 44 45 46 47
            .then((res) => {
                const _this = this
                if (res.data.code === 200) {
                    if (res.data.data.common.length > 0) {
                        let arr = ['basics', 'advanced']
                        let arr2 = [{basics: []}, {advanced: []}]
                        let arr3 = []
                        arr.forEach(function (item, index) {
                            arr2[item] = res.data.data.common[index]
                            res.data.data.common[index].list.forEach(function (item, index) {
                                arr3.push({'title': item.c_name, 'id': item.c_id})
                            })
xuzhenghua committed
48
                        })
xuzhenghua committed
49 50 51 52 53
                        _this.setState({
                            arr: arr2,
                            allClass: arr3
                        })
                    }
xuzhenghua committed
54 55
                } else {
                    Toast.info(res.data.msg, 2)
xuzhenghua committed
56
                }
xuzhenghua committed
57

xuzhenghua committed
58 59 60 61
            })
            .catch(err => {
                console.log(err)
            })
xuzhenghua committed
62
    }
xuzhenghua committed
63

xuzhenghua committed
64
    // 获取课程接口
xuzhenghua committed
65
    getList = () => {
zhanghaozhe committed
66
        http.get(`${API.home}/m/course/list/${getParam('id')}`).then((res) => {
xuzhenghua committed
67
            if (res.data.code === 200) {
xuzhenghua committed
68
                this.setState({
xuzhenghua committed
69
                    data: res.data.data,
xuzhenghua committed
70 71
                    isLoading: false
                })
xuzhenghua committed
72 73 74 75
            }
        })
    }

xuzhenghua committed
76

xuzhenghua committed
77 78
    // 点击横向滚动tab查询
    ontabclick = (tab) => {
xuzhenghua committed
79 80 81 82 83
        this.props.history.push(`/courselist?id=${tab.id}&name=${tab.title}`)
        this.getList()
        this.setState({
            activeTab: decodeURIComponent(getParam('name'))
        });
xuzhenghua committed
84 85 86 87
    }

    // 上下展示
    pulldown = () => {
xuzhenghua committed
88 89
        this.setState(status => ({
            ispull: !status.ispull,
xuzhenghua committed
90 91 92 93
            display: status.ispull ? 'none' : 'block'
        }));
    }

xuzhenghua committed
94
    // 弹窗里面tab点击查询
xuzhenghua committed
95 96 97
    labelclick = (item) => {
        this.props.history.push(`/courselist?id=${item.c_id}&name=${item.c_name}`)
        this.getList()
xuzhenghua committed
98 99
        this.setState(status => ({
            ispull: !status.ispull,
xuzhenghua committed
100 101
            display: status.ispull ? 'none' : 'block',
            activeTab: decodeURIComponent(getParam('name'))
xuzhenghua committed
102
        }))
xuzhenghua committed
103 104
    }

xuzhenghua committed
105
    render() {
xuzhenghua committed
106 107 108 109 110 111
        const bottom = (
            <i className={'iconfont iconiconfront-69 pull-down'}></i>
        )
        const top = (
            <i className={'iconfont iconiconfront-71 pull-down'}></i>
        )
xuzhenghua committed
112

xuzhenghua committed
113 114
        let page = this.state.allClass.findIndex((item) => item.title === this.state.activeTab)

xuzhenghua committed
115
        return (
xuzhenghua committed
116
            <div className='class-child'>
xuzhenghua committed
117
                <HeaderSearch></HeaderSearch>
xuzhenghua committed
118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138
                <Loading isLoading={this.state.isLoading}>
                    <div className='class-content'>
                        <WhiteSpace/>
                        <div onClick={this.pulldown.bind(this)}>
                            {this.state.ispull ? top : bottom}
                        </div>
                        <Tabs
                            tabs={this.state.allClass}
                            animated={false}
                            page={page}
                            onChange={(tab) => this.ontabclick(tab)}
                        >
                            <div className='tabs'>
                                <ul>
                                    {this.state.data && this.state.data.length > 0 && this.state.data.map((item, index) => {
                                        const Info = (
                                            <div className="info">
                                                <p className='title'>
                                                    <Link to={`/detail?id=${item.course_id}`}>
                                                        {item.course_title}
                                                    </Link>
xuzhenghua committed
139
                                                </p>
xuzhenghua committed
140 141 142
                                                <p className='contact text-overflow-2'>{item.desc}</p>
                                                <div className='des'>
                                                    {!item.is_buy && <p className="course-price">
xuzhenghua committed
143 144
                                                        <span className="new">¥{item.price1}</span>
                                                        <span className="old">¥{item.price0}</span>
xuzhenghua committed
145 146 147
                                                    </p>
                                                    }
                                                    {item.is_buy &&
xuzhenghua committed
148
                                                    <span className="isbuy">已购买</span>
xuzhenghua committed
149 150 151 152 153 154 155 156
                                                    }
                                                </div>
                                            </div>
                                        )
                                        const status = (
                                            <div>
                                                {item.bargain_num === 0 && item.groupon_num !== 0 &&
                                                <p className='course-status'>拼团减{item.groupon_num}</p>
xuzhenghua committed
157
                                                }
xuzhenghua committed
158 159
                                                {item.bargain_num !== 0 && item.groupon_num === 0 &&
                                                <p className='course-status'>砍价减{item.bargain_num}</p>
xuzhenghua committed
160
                                                }
xuzhenghua committed
161 162 163
                                                {
                                                    item.is_aist && <span className='return_cash'></span>
                                                }
xuzhenghua committed
164
                                            </div>
xuzhenghua committed
165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188
                                        )
                                        return (
                                            <VList key={index} status={status}
                                                   img={item.image_name} id={item.course_id}
                                                   info={Info}></VList>
                                        )
                                    })}
                                </ul>
                            </div>
                        </Tabs>
                        <WhiteSpace/>
                    </div>
                    <div className='mbc-box' style={{display: this.state.display}}>
                        {
                            this.state.arr.basics &&
                            <div className="tabcontent">
                                <ClassCourse activeTab={this.state.activeTab} data={this.state.arr.basics.list}
                                             title={this.state.arr.basics.name} labelclick={this.labelclick}/>
                                <ClassCourse activeTab={this.state.activeTab} data={this.state.arr.advanced.list}
                                             title={this.state.arr.advanced.name} labelclick={this.labelclick}/>
                            </div>
                        }
                    </div>
                </Loading>
xuzhenghua committed
189 190 191 192 193 194
            </div>
        )
    }

}

xuzhenghua committed
195
function ClassCourse(props) {
xuzhenghua committed
196 197
    return (
        <div className="class-course">
xuzhenghua committed
198
            <p className='course-items-title'>{props.title}</p>
xuzhenghua committed
199 200
            <div className='items-box'>
                {
xuzhenghua committed
201
                    props.data && props.data.length > 0 && props.data.map((item, index) => {
xuzhenghua committed
202
                        return (
xuzhenghua committed
203 204
                            <span className={props.activeTab === item.c_name ? 'active-label' : 'item-label'}
                                  key={index} onClick={e => props.labelclick(item)}>{item.c_name}</span>
xuzhenghua committed
205 206 207 208 209 210 211 212
                        )
                    })
                }
            </div>
        </div>
    )
}

xuzhenghua committed
213
export default Classify;