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

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

import React, {PureComponent} from 'react';
import moment from 'moment';

import styles from '../styles.less';
import defaulthead from '../../../../public/images/bargain/default-head.png';

/**
 * 好友帮砍List
 */
class CrewList extends PureComponent {
    state = {
        folded: true, // 是否收起
    };

    /**
     * 展开收起
     */
    handelFold = () => {
        const folded = !this.state.folded;
        this.setState({
            folded
        });
    }

    render() {
        const {title, emptydes = '还没有小伙伴帮您砍价哦,快去邀请小伙伴吧～'} = this.props;
        const {folded} = this.state;
        const {helpList} = this.props;
        const data = folded ? helpList.slice(0, 4) : helpList;
        return (
            <div className={styles['crew-wrapper']}>
                <div className={styles['crew-title']}>{title}</div>
                <div className={styles['crew-list']}>
                    {(data && data.length > 0) ? (
                        <div className={styles['scroll-wrapper']}>
                            {data.map((item, index) => {
                                return (
                                    <div key={index} className={styles['crew-item']}>
                                        <div className={styles['list_item_image']}>
                                            <img src={item.headImgUrl || defaulthead}/>
                                        </div>
                                        <div className={styles['list_item_info']}>
                                            <p className={styles['name']}>{item.nikeName || '**'}</p>
                                            <p className={styles['time']}>{moment(item.createTime).format('MM/DD HH:mm')}</p>
                                        </div>
                                        <div className={styles['describe']}>
                                            帮他砍了<span> {item.bargainPrice} </span>元
                                        </div>
                                    </div>
                                );
                            })}
                            {
                                helpList.length > 4 ? (
                                    <div className={styles['crew-flod']}>
                                        <div className={styles['crew-block']}></div>
                                        <span onClick={this.handelFold}>{folded ? '点击查看全部' : '点击收起'}</span>
                                        <div className={styles['crew-block']}></div>
                                    </div>
                                ) : ''
                            }

                        </div>
                    ) : (
                        <div className={styles['empty-list']}>
                            <p>{emptydes}</p>
                        </div>
                    )}
                </div>
            </div>
        );
    }
}

export default CrewList;