react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
197 lines (181 loc) • 6.97 kB
JavaScript
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; // 团购成员默认展示的人数
/**
* 开团进度
*/
(({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 // 活动结束时间, 时间戳
};
})
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>
);
}
}