react-app-shell/activity/src/views/bargain/bargain.js

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

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

import {message} from '../../utils';
import BargainShare from './component/share';
import {ACTIVE_STATUS, BARGAIN_OWNER, USER_STATUS, AccountsType} from '../../constants';
import {DocumentTitle, checkUserAuth} from '../../components';
import Header from './component/header';
import IntroduceTabs from './component/introduceTabs';
import CustomerService from './component/customerService';
import Barrage from './component/barrage';
import BargainDetail from './component/main/bargainDetail';
import styles from './bargain.less';

/**
 * 砍价入口页
 */
@inject(({bargainStore}, props) => {
    const {recordId} = queryString.parse(window.location.search);
    return {
        activeId: props.match.params.id,
        recordId: recordId,
        activeStatus: bargainStore.state.activeStatus, // 活动状态
        bargainOwner: bargainStore.state.status.bargainOwner, // 活动所属
        userStatus: bargainStore.state.status.userStatus, // 当前微信用户参与活动状态
        myRecordId: bargainStore.state.myRecordId, // 当前微信用户发起的砍价ID
        bannerImg: bargainStore.activeInfo.bannerImg, // banner图
        headImgUrl: bargainStore.bargainData.headImgUrl,
        nikeName: bargainStore.bargainData.nikeName,
        loading: bargainStore.state.loading,
        // 函数
        loadData: bargainStore.loadData,
    };
})
@observer
@checkUserAuth({account: AccountsType.ACTIVITY})
class Bargain extends Component {
    constructor(props) {
        super(props);

        const {activeId, recordId, loadData} = this.props;
        // 初始化数据
        loadData(activeId, recordId);
    }

    componentWillReceiveProps(nextProps) {
        const {bargainOwner, userStatus} = nextProps;
        const {activeId, recordId, myRecordId, loadData} = this.props;
        // 当前砍价没有发起人且当前登录用户已发起砍价, 则跳转到我的砍价页面
        if (bargainOwner === BARGAIN_OWNER.UNKNOWN &&
            userStatus === USER_STATUS.JOIN_BARGAIN &&
            myRecordId !== nextProps.myRecordId) {

            const {rf} = queryString.parse(window.location.search);
            let searchObj = {
                recordId: nextProps.myRecordId,
                rf: rf,
            };
            // 跳转至我的砍价页面
            this.props.history.replace(`/bargain/${activeId}?${queryString.stringify(searchObj)}`);
        }

        // 当recordId发生变化, 则重新加载数据
        if (nextProps.recordId && recordId !== nextProps.recordId) {
            loadData(activeId, nextProps.recordId);
        }
    }

    componentDidUpdate(prevProps) {
        const {loading} = this.props;
        if (prevProps.loading !== loading) {
            if (loading) {
                message.showLoading();
            } else {
                message.closeLoading();
            }

        }
    }

    /**
     * 渲染弹幕及客服
     */
    renderFixedElement = () => {
        const {activeStatus} = this.props;
        // 活动已开始/结束
        if (activeStatus === ACTIVE_STATUS.ACTIVE || activeStatus === ACTIVE_STATUS.END) {
            return (
                <div>
                    <CustomerService/>
                    {this.renderBarrage()}
                </div>
            );
        }
        return null;
    };

    /**
     * 渲染弹幕
     */
    renderBarrage = () => {
        const {bargainOwner, headImgUrl, nikeName} = this.props;
        if (bargainOwner === BARGAIN_OWNER.OTHER_BARGAIN) {
            return (
                <Barrage headImgUrl={headImgUrl} nikeName={nikeName}/>
            );
        }
    };

    render() {
        const {bannerImg} = this.props;

        return (
            <div className={styles['bargain-wrapper']}>
                <DocumentTitle title="魔力耳朵少儿英语"/>
                <Header headerUrl={bannerImg}></Header>
                <BargainShare/>
                {this.renderFixedElement()}
                <div className={styles['content']}>
                    <BargainDetail/>
                    <IntroduceTabs/>
                </div>
            </div>
        );
    }
}

export default Bargain;