react-app-shell/activity/src/views/bargain/component/main/bargainDetail.js

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

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

import {ACTIVE_STATUS, BARGAIN_STATUS} from '../../../../constants';
import CountDown from './countDown';
import CrewList from './crewlist';
import Progress from './progress';
import BargainBtn from './bargainBtn';

import styles from '../styles.less';

/**
 *  活动详情展示
 */
@inject(({bargainStore}) => {
    return {
        activeId: bargainStore.state.activeId,
        recordId: bargainStore.state.recordId,
        activeStatus: bargainStore.state.activeStatus,
        status: bargainStore.state.status,
        now: bargainStore.activeInfo.now,
        endTime: bargainStore.activeInfo.endTime,
        levels: bargainStore.activeInfo.levels || [], // 档位设置
        attendCount: bargainStore.activeInfo.attendCount || 0,
        bargainRecordDetailList: bargainStore.bargainData.bargainRecordDetailList || [],
        bargainPrice: bargainStore.bargainData.bargainPrice || 0,

        // 函数
        loadData: bargainStore.loadData,
    };
})

@observer
class bargainDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalKey: ''
        };
    }

    /**
     * 倒计时结束 重新加载数据
     */
    handleFinishCountDown = () => {
        const {activeId, recordId, loadData} = this.props;
        loadData(activeId, recordId);
    };

    /**
     * 渲染倒计时组件
     * @returns {*}
     */
    renderCountDown = () => {
        let {activeStatus, now, endTime, attendCount} = this.props;
        switch (activeStatus) {
            case ACTIVE_STATUS.ACTIVE: // 活动进行中。。
                return (
                    <div className={styles['countdown']}>
                        <CountDown endTime={endTime} serverTime={now} finishCallback={this.handleFinishCountDown}/>
                        <p className={styles['join-people']}>
                            已有<span className={styles['join-num']}>{attendCount}</span>人参加了砍价活动
                        </p>
                    </div>
                );
            case ACTIVE_STATUS.END: // 活动已结束
                return (
                    <div className={styles['countdown']}>
                        <div className={styles['count-title']}>
                            <div className={styles['count-hr']}/>
                            <span className={styles['count-end']}>活动已结束</span>
                            <div className={styles['count-hr']}/>
                        </div>
                        <p className={styles['join-people']}>
                            已有<span className={styles['join-num']}>{attendCount}</span>人参加了砍价活动
                        </p>
                    </div>
                );
        }
    };

    render() {
        const {levels, bargainRecordDetailList, bargainPrice} = this.props;
        const {bargainStatus} = this.props.status;

        return (
            <div className={styles['bargain-main']}>
                <Progress levels={levels} bargained={bargainPrice}/>
                <BargainBtn/>
                {this.renderCountDown()}
                {bargainStatus === BARGAIN_STATUS.UNSTART ? '' : (
                    <CrewList helpList={bargainRecordDetailList} title={'TA帮他砍价啦～'}/>
                )}
            </div>
        );
    }
}

export default bargainDetail;