react-app-shell/activity/src/views/group/group.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 { monitor } from '../../utils';

import styles from './group.less';

/**
 * 团购入口页
 */
@inject(({ groupStore }) => {
  const groupInfo = groupStore.groupInfo;
  return {
    // 数据
    serviceError: groupStore.state.serviceError,

    // 函数
    loadData: groupStore.loadData,
    headImage: groupInfo.headImage
  };
})
@observer
@withRouter
@checkUserAuth({ account: AccountsType.MAIN }) // 微信授权--魔力耳朵公众号
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);
  }

  componentDidMount() {
    monitor.log('', '浏览团购页面');
  }

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

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

export default Group;