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

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

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

import BaseModal from '../../../components/modal/base-modal';
import styles from './styles.less';

@inject(({WelfareStore}) => {
    const activityDetail = WelfareStore.activityDetail || {};
    return {
        level: activityDetail.level, // 档级
        joinNumber: activityDetail.joinNumber, // 当前人数
        activityConfig: activityDetail.activityConfig// 档级规则
    };
})
@observer
class Progress extends Component {
    state = {
        visiable: false,
    }

    renderStep = () => {
        const {level, joinNumber} = this.props;
        if (!level) return null;

        const len = level.length < 1 ? 0 : level.length - 1;
        const totalNumber = level[len].number || 0; // 总人数
        const currentNumber = joinNumber > totalNumber ? totalNumber : joinNumber; // 当前人数

        let leftPercentage = (1 - currentNumber / totalNumber) * (-100); // 进度
        let percentage = {left: `${leftPercentage}%`};

        // 下一level的规则
        let nextLevelRule = '';
        let nextLevelRuleLeft = '';
        let ruleIndexArr = [];
        let nextRuleTag = false;

        // 计算step的left
        level.forEach((item, index) => {
            // 拿到pre level的preCurrentNumber
            let preCurrentNumber = item.number;


            // 利用拿到的preCurrentNumber 跟 totalNumber 计算出pre step 到第一个点的距离
            const preLeftPercentage = (preCurrentNumber / totalNumber) * (100);
            item.preLeftPercentage = preLeftPercentage;

            // level 状态 点亮
            item.currentTag = false;
            if (currentNumber >= preCurrentNumber) {
                item.currentTag = true;
            }

            // 显示到达下一level的规则
            item.nextRuleTag = false;
            if (currentNumber >= totalNumber) {
                nextLevelRule = '';
                nextLevelRuleLeft = '';
            } else if (currentNumber >= preCurrentNumber) {
                // 如果是 === 的关系 展示下一条rule
                let _nextLevelRuleLeft = 0;
                if (item.preLeftPercentage < 12) {
                    _nextLevelRuleLeft = 18;
                } else if (item.preLeftPercentage > 50) {
                    _nextLevelRuleLeft = 42;
                } else {
                    _nextLevelRuleLeft = item.preLeftPercentage;
                }
                nextLevelRule = `已凑${currentNumber}人，还差${level[index + 1].number - currentNumber}人，即可享受${level[index + 1].award}`;
                nextLevelRuleLeft = `${_nextLevelRuleLeft}%`;
                ruleIndexArr.push(index);
            }
        });
        const maxIndex = ruleIndexArr.length ? Math.max.apply(null, ruleIndexArr) : -1;
        if (ruleIndexArr.length > 0 && maxIndex > -1) {
            level[maxIndex].nextRuleTag = true;

        }

        // 如果
        if (currentNumber < level[0].number) {
            nextLevelRule = `已凑${currentNumber}人，还差${level[0].number - currentNumber}人，即可享受${level[0].award}`;
            nextLevelRuleLeft = '18%';
            nextRuleTag = true;
        }

        let levels = level.map((item, index) => {
            let perMarginLeft = index === len ? `-0.64rem` : `-0.32rem`;
            let preLeftPercentage = {
                left: `${item.preLeftPercentage}%`,
                marginLeft: perMarginLeft
            };
            let triangleMarginLeft = index === len ? `-0.48rem` : `-0.16rem`;
            let triangleLeft = {
                left: `${item.preLeftPercentage}%`,
                marginLeft: triangleMarginLeft
            };
            let levelClass = item.currentTag ? styles['level'] : styles['level-off'];

            return (
                <div className={styles['level-body']} key={item.number}>
                    <div
                        className={levelClass}
                        style={preLeftPercentage}
                    ></div>
                    <div className={styles['level-num']} style={preLeftPercentage}>{item.number}</div>
                    {item.nextRuleTag ? <div className={styles['triangle']} style={triangleLeft}></div> : null}
                </div>
            );
        });

        return (
            <div className={styles['progress-wrapper']}>
                <div className={styles['progress-bar']}>
                    <div className={styles['progress-percent']} style={percentage}></div>
                </div>
                <div className={styles['level-wrapper']} onClick={this.handleHideModal}>
                    <div className={styles['level-body']}>
                        <div className={styles['level']}></div>
                        <div className={styles['level-num']}>0</div>
                        {nextRuleTag ?
                            <div className={styles['triangle']}></div> : null}
                    </div>
                    {levels}
                </div>
                {nextLevelRule ?
                    <div
                        className={styles['next-level']}
                        style={{left: nextLevelRuleLeft}}
                    >{nextLevelRule}</div> : null}
            </div>
        );
    }

    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;
    }

    render() {
        const {visiable} = this.state;
        const {activityConfig} = this.props;
        return (
            <div>
                {visiable ? <BaseModal
                    footer={<div className={styles['info-footer']}>
                        {this.renderFooterBtn()}
                    </div>}
                >
                    <div className={styles['level-info']}>
                        <h3>活动规则</h3>
                        {activityConfig.map((item, index) => {
                            return (
                                <p key={'info' + index} className={styles['info']}>{item}</p>
                            );
                        })}
                    </div>
                </BaseModal> : null}
                {this.renderStep()}
            </div>
        );
    }
}

export default Progress;