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

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

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

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

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

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

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

    steps: groupInfo.courseStep || {}, // 档位信息
    members: teamData.members || [], // 参团人员
    isAllowFullJoin: !!groupInfo.isAllowFullJoin || false, // 超出参团人数上限时 是否还允许参团 （0有满团限制 1 没有满团限制）
    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) {
    const arrs = [];
    _.mapKeys(obj, (value, key) => {
      arrs.push({
        key: parseInt(key, 10),
        value: value
      });
    });
    _.sortBy(arrs, (o) => {
      return o.key;
    });
    return arrs;
  }

  /**
   * 展示活动进度步骤
   */
  renderStep = () => {
    const {
      steps,
      joinStatus,
      members,
      groupStatus,
      isAllowFullJoin,
      memberType,
      steppedRewardPersonNum,
      teamData,
      userId
    } = this.props;
    const stepData = this.objectToArray(steps);

    let isShowStage = false; // 是否显示团购的进度
    let step = 0;
    const lastStep = _.last(stepData); // 最后一个step
    // 1.根据当前参团人数 展示进度
    // 2.活动状态 已结束/未开始/单独购买 不展示当前进度
    // 3.step第一个展示为：团长开团
    // 3.超出参团人数上限时 是否还允许参团  允许的情况：最后一个step 文案：xx人及以上

    // 不是单独购买 and 团购的状态是进行中 and 已经开团
    if (
      joinStatus !== JOIN_STATUS.SINGLE_BUY &&
      groupStatus === GROUP_STATUS.ACTIVE &&
      !!members.length
    ) {
      isShowStage = true;
      // 如果当前角色是团长并且参团人数比阶段人数多 会展示魔力币并且阶段在魔力币上
      if (
        memberType === MEMBERTYPE.LEADER &&
        (steppedRewardPersonNum && members.length >= steppedRewardPersonNum) &&
        (members.length && members[0].userId === userId)
      ) {
        step = 0;
      } else {
        if (members.length >= lastStep.key) {
          step = lastStep.key;
        } else {
          for (let index = 0; index < stepData.length; index++) {
            const item = stepData[index];
            if (members.length < item.key) {
              step = stepData[index - 1].key;
              break;
            }
          }
        }
      }
    }
    // 团购进度图标
    let finishClass = '';
    const className = stepData.length === 3 ? 'progress-item-33p' : 'progress-item';

    let stepText = '';
    return stepData.map((item, index) => {
      stepText = `${item.key}人成团`;
      if (isShowStage) {
        finishClass = item.key === step ? 'progress-icon-finish' : ''; // 这里判断当前是第几步
        stepText = index === 0 ? `团长开团` : stepText;
      }
      // 超出参团人数上限时 是否还允许参团
      if (isAllowFullJoin && item.key === lastStep.key) {
        stepText = `${item.key}人及以上`;
      }

      // 参团人数展示文字过滤
      const num = item.key - members.length <= 0 ? stepText : `还差${item.key - members.length}人`;

      // 判断teamInfo接口是否返回值
      const status = !Object.keys(teamData).length;

      let alone = false;
      if (members.length && members[0].productType === 1) alone = true;
      return (
        <div key={item.key} className={styles[className]}>
          <div className={classNames(styles['progress-icon'], styles[finishClass])}></div>
          <p>
            <span>{alone ? stepText : status ? stepText : item.key <= step ? stepText : num}</span>
            <span> 每人{item.value}课时 </span>
          </p>
        </div>
      );
    });
  };

  /**
   * 团长多余显示魔力币
   */
  renderLeader = () => {
    const {
      memberType,
      steppedRewardBonusNum,
      steppedRewardPersonNum,
      members,
      userId
    } = this.props;
    let person = '';
    let bonus = '';
    // 参团人数 及 魔力币 展示文字过滤
    if (steppedRewardPersonNum - members.length <= 0) {
      person = `${steppedRewardPersonNum}人及以上`;
      bonus = `成功获得${steppedRewardBonusNum}魔力币`;
    } else {
      person = `还差${steppedRewardPersonNum - members.length}人`;
      bonus = `额外获得${steppedRewardBonusNum}魔力币`;
    }
    const finishClass = members.length >= steppedRewardPersonNum ? 'progress-icon-finish' : ''; // 这里判断当前是第几步
    const Purchase = members.length && members[0].productType; // 单独购买 1: 团购 2: 单独购买
    // 团长才显示此逻辑: memberType是团长 && 单独购买 && 有魔力币 && 团长属于当前团
    if (
      memberType === MEMBERTYPE.LEADER &&
      Purchase === 2 &&
      steppedRewardPersonNum &&
      (members.length && members[0].userId === userId)
    ) {
      return (
        <div className={styles['progress-item-33p']}>
          <div className={classNames(styles['progress-icon'], styles[finishClass])}></div>
          <p>
            <span> {person}</span>
            <span> {bonus} </span>
          </p>
        </div>
      );
    }
    return null;
  };

  /**
   * 展示团购状态
   */
  renderGroupState = () => {
    const { joinStatus, groupStatus, endTime, serverTime } = this.props;
    let element = null;
    // 已经单独购买课程
    if (joinStatus === JOIN_STATUS.SINGLE_BUY) {
      element = (
        <div className={styles['bought-course']}> 你已单独购买过课程， 赶紧去约课吧！ </div>
      );
    } else {
      switch (groupStatus) {
        case GROUP_STATUS.UNKNOWN:
        case GROUP_STATUS.NOT_BEGIN:
          // 未开始 and 未开始
          element = <div className={styles['button-normal']}> 活动未开始， 敬请期待 </div>;
          break;
        case GROUP_STATUS.ACTIVE:
          // 活动中
          element = (
            <EndCountDown endTime={endTime} serverTime={serverTime}>
              {' '}
            </EndCountDown>
          );
          break;
        case GROUP_STATUS.END:
          // 已结束
          element = <div className={styles['button-normal']}> 活动已结束 </div>;
          break;
        default:
          break;
      }
    }

    return element;
  };

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

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

    const showMembers = collapse ? _.take(members, DEFAULT_SHOW_MUMBER) : members;
    const teams = showMembers.map((item, index) => {
      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']}>
        <div className={styles['team-member-count']}>{`已有${members.length}人成团`}</div>
        {/* 团员是否已满并且不允许满团参团 */}
        {!isAllowFullJoin && isFull ? <div className={styles['team-full']}></div> : null}
        <div className={styles['team-list']}>
          {teams}
          {members.length > DEFAULT_SHOW_MUMBER ? (
            <div className={styles['expand']}>
              <div className={styles['expand-btn']} onClick={this.handleUpCollapse}>
                {!collapse ? '点击关闭全部' : '点击展开全部'}
              </div>
            </div>
          ) : null}
        </div>
      </div>
    );
  };

  render() {
    return (
      <div className={styles['group-progress']}>
        <div className={styles['innercon']}>
          <div className={styles['progress-title']}> 活动进度</div>
          <div className={styles['progress-desc']}>
            <div className={styles['progress-list']}>
              {this.renderStep()}
              {this.renderLeader()}
            </div>
          </div>
          {this.renderGroupState()}
        </div>
        {this.renderMembers()}
      </div>
    );
  }
}