react-app-shell/activity/src/views/special-group/component/progress.js

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

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

import {JOIN_STATUS, GROUP_STATUS, SPECIAL_JOIN_TYPE} from '../../../constants';
import EndCountDown from './end-count-down';
import styles from './styles.less';

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

const DEFAULT_SHOW_MEMBER = 5; // 团购成员默认展示的人数

/**
 * 开团进度
 */
@inject(({SpecialGroupStore}) => {
    const groupInfo = SpecialGroupStore.groupInfo;
    const teamData = SpecialGroupStore.teamData || {};
    return {
    // 数据
    /**
     * 参团/开团 状态
     * NOT_JOIN: 'NOT_JOIN', // 未参加过团购, 未登录时无法获取用户身份 所以也判定是未参加团购
     * MY_TEAM: 'MY_TEAM', // 自己参加的team
     * OTHER_TEAM: 'OTHER_TEAM', // 别人开的team
     * SINGLE_BUY: 'SINGLE_BUY', // 单独购买
     */
        joinStatus: SpecialGroupStore.joinStatus,
        groupStatus: SpecialGroupStore.state.groupStatus, // 团购活动状态: 未知, 未开始, 活动中, 已结束
        userId: SpecialGroupStore.state.userId, // 当前登录用户的Id
        serverTime: SpecialGroupStore.state.serverTime, // 服务器时间
        isFull: SpecialGroupStore.isFull, // 是否满团

        steps: groupInfo.courseStep || {}, // 档位信息
        joinType: groupInfo.joinType, // 开团人数类型
        name: groupInfo.name, // 团购名称
        members: teamData.members || [], // 参团人员
        startTime: groupInfo.startTime || 0, // 活动开始时间, 时间戳
        endTime: groupInfo.endTime || 0 // 活动结束时间, 时间戳
    };
})
@observer
export default class Progress extends Component {
  state = {
      collapse: true // 默认收起
  };

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

  /**
   * 对象转数组 key value 并且排序
   * @param {*} obj
   */
  objectToArray(obj) {
      let arrs = [];
      _.mapKeys(obj, (value, key) => {
          arrs.push({
              key: parseInt(key, 10),
              value: value
          });
      });
      _.sortBy(arrs, (o) => {
          return o.key;
      });
      return arrs;
  }

  /**
   * 展示团购状态
   */
  renderGroupState = () => {
      const {joinStatus, groupStatus, serverTime, endTime} = this.props;
      let element = null;
      // 已经单独购买课程
      if (joinStatus === JOIN_STATUS.SINGLE_BUY) {
          element = (
              <div className={styles['bought-course']}>
                  <p>您已单独购买该课程</p>
                  <p>快关注“魔小兔英语”微信公众号上课吧~</p>
              </div>
          );
      } else {
          switch (groupStatus) {
              case GROUP_STATUS.NOT_BEGIN:
                  // 未开始 and 未开始
                  element = (
                      <div>
                          <div className={styles['button-normal']}> 活动未开始， 敬请期待 </div>
                          <EndCountDown endTime={0} serverTime={0}/>
                      </div>
                  );
                  break;
              case GROUP_STATUS.ACTIVE:
                  // 活动中
                  element = (
                      <div>
                          <div className={styles['progress-title']}> 限时钜惠，距离团购结束还剩</div>
                          <EndCountDown endTime={endTime} serverTime={serverTime}/>
                      </div>
                  );
                  break;
              case GROUP_STATUS.END:
                  // 已结束
                  element = (
                      <div>
                          <div className={styles['button-normal']}> 活动已结束 </div>
                          <EndCountDown endTime={0} serverTime={0}/>
                      </div>
                  );
                  break;
              default:
                  break;
          }
      }

      return element;
  };

  /**
   * 展示参团列表
   */
  renderMembers = () => {
      const {members, isFull, joinStatus, joinType} = this.props;
      const {collapse} = this.state;
      const joinNum = SPECIAL_JOIN_TYPE[joinType];

      // 单独购买或没有参团人员 不展示列表
      if (members.length < 1 || joinStatus === JOIN_STATUS.SINGLE_BUY) return null;

      const showMembers = collapse ? _.take(members, DEFAULT_SHOW_MEMBER) : members;
      let teams = showMembers.map((item) => {
          return (
              <div className={styles['team-item']} key={item.userId}>
                  <div className={styles['team-item-image']}>
                      <img src={item.headImageUrl || headerImg} alt="成员"/>
                      {item.memberType === 1 ? <span className={styles['commander']}>团长</span> : null}
                  </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>
          );
      });

      return (
          <div className={styles['team-wrapper']}>
              {isFull ? (
                  <div className={styles['team-member-count']}>{`已成团，已有${members.length}人参团`}</div>
              ) : (
                  <div className={styles['team-member-count']}>{`已有${
                      members.length
                  }人参加，还差${joinNum - members.length}人成团`}</div>
              )}

              <div className={styles['team-list']}>
                  {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() {
      const {joinType, name} = this.props;
      const joinNum = SPECIAL_JOIN_TYPE[joinType];
      return (
          <div className={styles['group-progress']}>
              <div className={styles['innercon']}>
                  <div className={styles['group-desc']}>
                      <span className={styles['desc-person']}>{joinNum || 0}人团</span>
                      <span className={styles['desc-detail']}>{name}</span>
                  </div>
                  {this.renderGroupState()}
              </div>
              {this.renderMembers()}
          </div>
      );
  }
}