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

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

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

import {InfoModal} from '../../../components';
import {ACTIVITY_STATUS, JOIN_RESULT_CODE} from '../../../constants';
import {message, monitor} from '../../../utils';
import {welfareService} from '../../../service';
import BaseModal from '../../../components/modal/base-modal';
import CountDown from './count-down';
import Progress from './progress';
import styles from './styles.less';

const imgUrl = `../../../public/images/welfare/home-header.png`;

@inject(({WelfareStore}) => {
    const activityDetail = WelfareStore.activityDetail || {};
    return {
        nowTime: activityDetail.nowTime, // 当前时间
        endTime: activityDetail.endTime, // 结束时间
        rule: activityDetail.rule, // 活动规则
        activityStatus: activityDetail.activityStatus, // 活动状态
        headUrl: activityDetail.headUrl, // 活动底图
        // 函数
        loadData: WelfareStore.loadData,
    };
})
@observer
@withRouter
class Header extends Component {
    constructor(props) {
        super(props);

        this.id = this.props.match.params.id;
    }
    state = {
        visiable: false,
        applySuccess: false,
        sort: 0,
    }

    handleApply = () => {
        welfareService.activityJoin(this.id)
            .then(sort => {
                monitor.log('', '报名成功');
                this.setState({
                    applySuccess: true,
                    sort
                });
            })
            .catch(error => {
                monitor.log('', '报名失败!!! ' + error.msg || '接口发生错误');
                switch (error.code) {
                    case JOIN_RESULT_CODE.TOKEN_ERROR: // wxToken不合法
                        message.error(error.data);
                        break;
                    case JOIN_RESULT_CODE.ACTIVITY_NOT_FOUND:
                        message.error(error.data);
                        break;
                    case JOIN_RESULT_CODE.JOIN_ERROR:
                        message.error(error.data);
                        break;
                    case JOIN_RESULT_CODE.ACTIVITY_NOT_START:
                        message.error(error.data);
                        break;
                    case JOIN_RESULT_CODE.ACTIVITY_IS_END:
                        message.error(error.data);
                        break;
                    default:
                        message.error(error.msg || '发生错误了');
                        break;
                }
            });
    }

    handleOk = () => {
        const {loadData} = this.props;

        this.setState({
            applySuccess: false
        });

        // 重新载入数据
        loadData(this.id);
    }

    handleHideModal = () => {
        this.setState({
            visiable: !this.state.visiable
        });
    }

    renderFooterBtn = () => {
        const okBtnStyle = {
            fontSize: '0.48rem',
            borderRadius: '.1rem',
            width: '3rem',
            height: '.8rem',
            lineHeight: '.8rem',
            textAlign: 'center',
            background: '#FD4362',
            color: '#fff',
            margin: '.4rem auto 0',
            border: 'none',
        };

        let buttons = [];
        buttons.push(<button key={'ok'}
            className={styles['okBtn']}
            style={okBtnStyle}
            onClick={this.handleHideModal}>ok</button>);
        return buttons;
    }

    renderModal = () => {
        const {visiable} = this.state;
        const {rule} = this.props;

        return (
            <div>
                {visiable ? <BaseModal
                    footer={<div className={styles['info-footer']}>
                        {this.renderFooterBtn()}
                    </div>}
                >
                    <div className={styles['level-info']}>
                        <h3>活动规则</h3>
                        <div className={styles['info']}>
                            <pre className={styles['pre-info']}>{rule}</pre>
                        </div>
                    </div>
                </BaseModal> : null}
            </div>
        );
    }

    renderInfoModal = () => {
        const {applySuccess, sort} = this.state;
        return (
            <div>
                {applySuccess ? <InfoModal cancelVisible={false}
                    okText={'我知道了'}
                    onOk={this.handleOk}
                    okBtnStyle={{background: 'linear-gradient(90deg,rgba(255,132,44,1) 0%,rgba(255,107,44,1) 100%)', color: '#fff'}}>
                    <div className={styles['info-msg']}>
                        <div className={styles['info-title']}>预约成功</div>
                        <div className={styles['info-notes']}>您是第{sort}名预约成功的幸运宝宝～</div>
                    </div>
                </InfoModal> : null}
            </div>
        );
    }

    renderCountDown = () => {
        const {activityStatus, endTime, nowTime} = this.props;
        let element = null;
        switch (activityStatus) {
            case ACTIVITY_STATUS.NOT_BEGIN:
                element = <p className={styles['activity-not-begin']}>活动未开始</p>;
                break;
            case ACTIVITY_STATUS.ACTIVE:
                element = <CountDown endTime={endTime} serverTime={nowTime}></CountDown>;
                break;
            case ACTIVITY_STATUS.END:
                element = <p className={styles['activity-end']}>活动已结束</p>;
                break;
        }
        return (
            <div>
                {element}
            </div>
        );
    }

    render() {
        const {rule, headUrl} = this.props;
        const headImgUrl = headUrl || imgUrl;
        const headStyle = {
            backgroundImage: `url(${headImgUrl})`,
            backgroundSize: '100%',
        };
        return (
            <div className={styles['header']} style={headStyle}>
                <div className={styles['content']}>
                    <div className={styles['title']}>活动倒计时</div>
                    {this.renderCountDown()}
                    <Progress></Progress>
                    <div className={styles['apply-btn']} onClick={this.handleApply}></div>
                    {rule ? <div className={styles['rule-wrapper']} onClick={this.handleHideModal}>
                        <div className={styles['rule-info']}>活动</div>
                        <div className={styles['rule-info']}>规则</div>
                    </div> : null}
                </div>
                {this.renderModal()}
                {this.renderInfoModal()}
            </div>
        );
    }
}

export default Header;