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

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

import React, {Component} from 'react';
import PropTypes from 'prop-types';

import left from '../../../../public/images/bargain/pg-title-left.png';
import right from '../../../../public/images/bargain/pg-title-right.png';
import full from '../../../../public/images/bargain/b-full.png';
import ball from '../../../../public/images/bargain/ball.png';

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

/**
 * 砍价进度
 */
class Progress extends Component {
    static defaultProps = {
        levels: PropTypes.array, // 砍价档位设置
        bargained: PropTypes.number // 已砍金额
    };

    static defaultProps = {
        levels: [],
        bargained: 0
    }

    computePercent = () => {
        const {levels, bargained} = this.props;
        const avgWidth = Number(100 / levels.length);
        let percent = 0;
        levels.forEach((item, index) => {
            if (bargained >= item.price) {
                percent += avgWidth;
            } else {
                const beforePrice = levels[index - 1] ? levels[index - 1].price : 0;
                if (bargained > beforePrice) {
                    const rate = (bargained - beforePrice) / (item.price - beforePrice);
                    percent += rate * avgWidth;
                }
            }
        });
        return `${percent}%`;
    }

    /**
     * 根据档位设置及砍价金额设置渲染进度条
     */
    renderBar = () => {
        const {levels, bargained} = this.props;
        let width = `${100 / levels.length}%`;
        let style = {
            width: width
        };
        return (
            <div className={styles['main-bar']}>
                {levels.map((item, index) => (
                    <div key={index} style={style} className={styles['bar-detail']}>
                        <img src={bargained >= item.price ? full : ball} className={styles['bar-img']}/>
                        <div className={styles['bar-detail-text']} key={index}>
                            ￥{item.price}
                        </div>
                    </div>

                ))}
            </div>

        );
    };

    render() {
        const percent = this.computePercent();
        const {bargained} = this.props;
        return (
            <div className={styles['progress']}>
                <div className={styles['progress-title']}>
                    <img src={left}/>
                    <p>砍价进度</p>
                    <img src={right}/>
                </div>
                <div className={styles['progress-content']}>
                    <div className={styles['first-code']}>
                        <img src={bargained > 0 ? full : ball}/>
                        <p>￥0</p>
                    </div>
                    <div className={styles['bar-body']}>
                        <div style={{width: percent}} className={styles['content-flow']}/>
                        {this.renderBar()}
                        {bargained > 0 ? (
                            <div style={{left: percent}} className={styles['content-money']}>
                                {`已砍${bargained}元`}
                            </div>
                        ) : ''}
                    </div>
                </div>
            </div>
        );
    }
}

export default Progress;