react-app-shell/activity/src/views/special-group/index.js

react打包脚本和example, 这里的版本请忽略

import React, {Component} from 'react';
import {observer, inject} from 'mobx-react';
import queryString from 'query-string';
import {withRouter} from 'react-router-dom';

import {DocumentTitle, checkUserAuth} from '../../components';
import {AccountsType} from '../../constants';

import {ServiceError} from '../common';
import Header from './component/header';
import GroupTabs from './component/group-tabs';
import Progress from './component/progress';
import Footer from './component/footer';
import Flow from './component/flow';

import styles from './index.less';

/**
 * 专题课团购
 */
@inject(({SpecialGroupStore}) => {
    const groupInfo = SpecialGroupStore.groupInfo;
    return {
    // 数据
        serviceError: SpecialGroupStore.state.serviceError,

        // 函数
        loadData: SpecialGroupStore.loadData,
        headImage: groupInfo.headImage
    };
})
@observer
@withRouter
@checkUserAuth({account: AccountsType.BONNY}) // 活动相关的微信授权公众号--魔小兔公众号（待定）
class Group extends Component {
    constructor(props) {
        super(props);

        const {loadData} = this.props;
        this.urlParams = queryString.parse(window.location.search);
        const {groupId, teamId} = this.urlParams;
        // 初始化数据
        loadData(groupId, teamId);
    }

    render() {
        const {serviceError} = this.props;
        // 获取团购信息时发生异常
        if (serviceError) {
            return <ServiceError/>;
        }

        return (
            <div className={styles['group-wrapper']}>
                <DocumentTitle title="魔小兔英语"/>
                <Header headerUrl={this.props.headImage}/>
                <Progress/>
                <Flow/>
                <GroupTabs/>
                <Footer/>
            </div>
        );
    }
}

export default Group;