index.js

import React, {Component} from 'react';
import './index.scss';
import {HeaderBar, VList} from 'src/common';
import {http, getParam, SendMessageToApp} from 'src/utils';
import {Toast} from 'antd-mobile';


class ShareCourse extends Component {

    constructor(props) {
        super(props);
        this.state = {
            list: [],
            fromApp: !getParam('from') ? false : true
        };
    }

    componentDidMount() {
        http.get(`${API.home}/sys/red_packet/share_course`).then((res) => {
            if (res.data.code === 200) {
                this.setState({
                    list: res.data.data
                })
            } else {
                Toast.info(res.data.msg, 2)
            }
        })
    }

    toCourseDetail = (id) => {
        const _this = this
        if (_this.state.fromApp) {
            SendMessageToApp("toCourse", id)
        } else {
            const {history} = this.props;
            history.push(`/detail?id=${id}`)
        }
    }

    render() {
        const {list} = this.state;
        return (
            <div className={'share-course'}>
                {
                    !this.state.fromApp &&
                    <HeaderBar title='分享领红包' arrow={true}/>
                }

                {
                    list && list.length > 0 ? <div>
                            {
                                list.map((item, index) => {
                                    const Info = (
                                        <div className="info">
                                            <p className={'title text-overflow-1'}>{item.course_title}</p>
                                            <p className={'contact text-overflow-1'}>{item.simpledescription}</p>
                                            <button>分享领红包</button>
                                        </div>
                                    )
                                    return (
                                        <div key={index}>
                                            <VList
                                                img={item.image_name}
                                                info={Info}
                                                id={item.course_id}
                                                toDetail={this.toCourseDetail}
                                            />
                                        </div>

                                    )
                                })
                            }
                        </div> :
                        <div>
                            <p className='not-data'>暂时没有可分享的课程哦〜</p>
                        </div>
                }

            </div>
        )
    }
}

export default ShareCourse;