react-app-shell/activity/src/views/year-end-welfare/index.js

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

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

import {checkUserAuth, DocumentTitle, WechatConfig} from '../../components';
import {AccountsType} from '../../constants';
import * as accountsType from '../../constants/accounts-type';
import {shareConfig} from '../../config';

import {ServiceError} from '../common';
import Header from './component/header';
import Member from './component/member';
import Footer from './component/footer';

import styles from './welfare.less';

let welfare_share = shareConfig.welfare;

/**
 * 销售年终活动
 * 活动入口页
 * Header -- 活动状态、活动进度、报名入口
 * Member -- 预约成员列表
 * Footer -- 活动解释说明
 */
@inject(
    ({WelfareStore}) => {
        return {
            // 数据
            serviceError: WelfareStore.state.serviceError,

            // 函数
            loadData: WelfareStore.loadData,
        };
    }
)
@observer
@withRouter
@checkUserAuth({account: accountsType.MAIN})
class Welfare extends Component {

    constructor(props) {
        super(props);

        const {loadData} = this.props;
        const id = this.props.match.params.id;
        // 初始化数据
        loadData(id);
    }

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

        return (
            <div className={styles['welfare-wrapper']}>
                <DocumentTitle title="魔力耳朵少儿英语"/>
                <Header></Header>
                <Member></Member>
                <Footer></Footer>
                <WechatConfig showShare={true} shareOptions={welfare_share} account={AccountsType.MMEARS}/>
            </div>
        );
    }

}

export default Welfare;