UNPKG

react-app-shell

Version:

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

197 lines (181 loc) 6.97 kB
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> ); } }