react-app-shell/activity/src/views/lottery/components/winnerList/index.js

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

import React, {PureComponent} from 'react';
import {withRouter} from 'react-router-dom';

import {lotteryService} from '../../../../service';
import styles from './index.less';
/**
 * @description 活动中奖人员名单
 */
@withRouter
class WinnerList extends PureComponent {
    state = {
        winnerNum: 0,
        winnerList: []
    };

    componentDidMount() {
        this.loadWinnerData();
    }

    /**
     * @description 加载活动中奖数据
     */
    loadWinnerData = () => {
        const lotteryId = this.props.match.params.id;

        lotteryService.getWinnerList(lotteryId).then(({userNumber, luckyDrawRecordInfoDTOs}) => {
            this.setState({
                winnerNum: userNumber || 0,
                winnerList: luckyDrawRecordInfoDTOs || []
            });
        }).catch(error => {
            console.error(error);
        });
    };

    render() {
        const {winnerNum, winnerList} = this.state;
        const {luckyListImg} = this.props;
        return (
            <div className={styles.winner}>
                <img src={luckyListImg}/>
                <div className={styles.winnerContent}>
                    <p className={styles.winnerNum}>已有{winnerNum}人抽中奖品啦～</p>
                    <div className={styles.winnerList}>
                        {
                            winnerList.length > 0 && (
                                <div className={styles.winnerScroll}>
                                    {
                                        winnerList.map((item, index) => (
                                            <div key={`winner-${index}`} className={styles.winnerItem}>
                                                <span className={styles.winnerItemText}>恭喜</span>
                                                <span className={styles.winnerItemPhone}>{item.userPhoneNumber}</span>
                                                <span className={styles.winnerItemText}>抽中</span>
                                                <span className={styles.winnerItemPrize}>{item.name}</span>
                                            </div>
                                        ))
                                    }
                                </div>
                            )
                        }

                    </div>
                </div>
            </div>
        );
    }
}

export default WinnerList;