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

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

import React, {Component} from 'react';
import {inject} from 'mobx-react';
import moment from 'moment';
import classNames from 'classnames';
import _ from 'lodash';

import styles from './styles.less';

import headerImg from '../../../public/images/group/header.png';

const DEFAULT_SHOW_MEMBER = 10; // 活动成员默认展示人数

@inject(({WelfareStore}) => {
    const memberData = WelfareStore.memberData || {};
    return {
        self: memberData.self || [], // 我
        list: memberData.list || [], // 预约列表
    };
})
class Member extends Component {

    state = {
        collapse: true, // 默认收起
    }

    /**
     * 修改 Collapse状态
     */
    handleUpCollapse = () => {
        this.setState({
            collapse: !this.state.collapse
        });
    };

    /**
     * 展示参团列表
     */
    renderMembers = () => {
        const {self, list} = this.props;
        if (!self || !list) return null;

        const {collapse} = this.state;

        const members = self.concat(list);

        // 没有成员不展示列表
        if (members.length < 1) return null;

        const showMembers = collapse ? _.take(members, DEFAULT_SHOW_MEMBER) : members;
        let teams = showMembers.map((item, index) => {

            const isMeClass = item.selfTag ? classNames(styles['team-item'], styles['team-item-isme']) : classNames(styles['team-item']);

            return (
                <div className={isMeClass} key={item.userId}>
                    <div className={styles['team-item-body']}>
                        <div className={styles['team-item-ranking']}>
                            {item.selfTag ?
                                <span className={styles['ranking-isme']}>{`第${item.sort}名（我）`}</span> :
                                <span className={styles['ranking']}>{`第${item.sort}名`}</span>}
                        </div>
                        <div className={styles['team-item-image']}>
                            <img src={item.headUrl || headerImg} alt="成员"/>
                        </div>
                        <div className={styles['team-item-info']}>
                            <p className={styles['name']}>{item.nickName.replace(/CAPATER_AND_00100100/g, '&')}</p>
                        </div>
                        <div className={styles['team-item-time']}>
                            <span>{moment(item.createTime).format('YYYY-MM-DD HH:mm')}</span>
                        </div>
                    </div>
                </div>);
        });

        return (
            <div className={styles['team-wrapper']}>
                <div className={styles['team-list']}>
                    <div className={styles['team-caption']}>预约列表</div>
                    {teams}
                    {members.length > DEFAULT_SHOW_MEMBER ?
                        <div className={styles['expand']}>
                            <div className={styles['expand-btn']} onClick={this.handleUpCollapse}>{!collapse ? '点击关闭全部' : '点击展开全部'}</div>
                        </div> : null}
                </div>
            </div>
        );
    }

    render() {
        return (
            <div className={styles['member-wrapper']}>
                {this.renderMembers()}
            </div>
        );
    }

}

export default Member;