index.js

import React, { Component } from 'react'
import './index.scss'
import { getParam, http } from "@/utils"
import { connect } from "react-redux"
import { Flex } from 'antd-mobile'
import {browser} from "@/utils"
import {Toast} from 'antd-mobile'


class Group extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isShowMore: false,
            alreadyIn: false,
            pdd_price: 0,
            number: 0,
            data: {},
            countdown: props.countdown,
            now_groupon_list: [],
        }
        // console.log(props);
    }

    // 查看更多
    getMore = () => {
        this.setState({
            isShowMore: true
        })
    }

    // 关闭更多窗口
    closeMore = () => {
        this.setState({
            isShowMore: false
        })
    }

    toPay = (pdd_order_id) => {
        const {courseInfo, history} = this.props;
        if (courseInfo.group_status === 3) {
            history.push(
                `/order?id=${getParam('id')}`, 
                {
                    group: 1,
                    pdd_order_id
                }
            );
        } else {
            this.setState({
                isShowMore: false,
                alreadyIn: true
            });
        }
    }

    invitedFriends = () => {
        this.setState({
            isShowMore: false,
            alreadyIn: false,
        });
        this.props.invitedFriends();
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.courseInfo && nextProps.courseInfo.courseInfo && nextProps.courseInfo.courseInfo.course_info && nextProps.courseInfo.courseInfo.course_info.pdd_group_info) {
            let now_groupon_list = nextProps.courseInfo.courseInfo.course_info.pdd_group_info.now_groupon_list;
            if (now_groupon_list && now_groupon_list.length > 0) {
                now_groupon_list.map(item => {
                    item.end_time -= 1;
                    return item;
                });
                this.setState({
                    now_groupon_list,
                })
            }
        }
        this.setState({
            countdown: nextProps.countdown
        })
    }

    componentDidMount() {
        const { courseInfo={} } = this.props;
        if (courseInfo.pdd_group_info) {
            let now_groupon_list = courseInfo.pdd_group_info.now_groupon_list;
            if (now_groupon_list && now_groupon_list.length > 0) {
                setInterval(() => {
                    now_groupon_list.map(item => {
                        item.end_time -= 1;
                        return item;
                    });
                    this.setState({
                        now_groupon_list,
                    })
                }, 1000);
            }
        }
    }

    hideMbc = () => {
        this.setState({
            alreadyIn: false
        });
    }

    formatTimeByMillisecond = (millisecond) => {
        let date = millisecond * 1000,
            hours = 0,
            minutes = 0,
            seconds = 0;
        date -= 1000;
        hours = `${parseInt(date / (60 * 60 * 1000))}`.padStart(2, 0);
        minutes = `${parseInt((date - hours * 3600000) / 60000)}`.padStart(2, 0);
        seconds = `${parseInt((date - hours * 3600000 - minutes * 60000) / 1000)}`.padStart(2, 0);
        return `${hours}:${minutes}:${seconds}`;
    }

    render() {
        const { courseInfo } = this.props;
        const { alreadyIn, countdown, now_groupon_list } = this.state;
        let groupInfo = '', 
        groupon_member = '', 
        group_status = -1, 
        groupSuccessMbc = null;
        if (courseInfo) {
            groupInfo = courseInfo.pdd_group_info;
            groupon_member = groupInfo.groupon_member;
            group_status = courseInfo.group_status;
        }
        if (group_status === 4) {
            if (groupon_member.member) {
                const { number } = groupon_member;
                let ary = [], num = number;
                while (num != 0) {
                    ary.push(num);
                    num--;
                }
                let groupTip = (<div className='group-user-list'>
                    <Flex justify='center' className='imgList'>
                        {
                            groupon_member.member.map(item => {
                                return (
                                    <div className='imgContainer' key={Math.random()}>
                                        <img className='imgname' src={item.avatar} alt='' />
                                        {
                                            item.user_type === 1 ? (
                                                <div className='leaderFlag'>
                                                    <span>团长</span>
                                                </div>
                                            ) : null
                                        }
                                    </div>);
                            })
                        }
                        {
                            ary.map(item => {
                                return (<div className='imgContainer' key={Math.random()}>
                                    <div className='imgname'>
                                        <i className='iconfont iconwode-xianxing no-body'></i>
                                    </div>
                                </div>)
                            })
                        }
                    </Flex>
                </div>);
                groupSuccessMbc = <div className='groupSuccessMbc' onClick={this.hideMbc}>
                    <div className='content'>
                        <p>你已参团</p>
                        {groupTip}
                        <div className='group-btn' onClick={this.invitedFriends}>邀请好友参团 {countdown} 后结束</div>
                        <p className='dec'>分享到3个群后，成团率高达98%</p>
                    </div>
                </div>;
            }

        }

        return (
            <div className='group-box'>
                <div className="group-title">
                    <span>{groupInfo.now_groupon_total}人正在开团，可直接参与</span>
                    <span className='more' onClick={this.getMore}>
                        查看更多
                        <i className='iconfont iconiconfront-70'></i>
                    </span>

                </div>
                <ul className="group-list">
                    {
                        groupInfo.now_groupon_list && groupInfo.now_groupon_list.length > 0 && groupInfo.now_groupon_list.map((item, index) => {
                            return (
                                <li key={index} className='group-item'>
                                    <img className='avatar' src={item.avatar} alt="" />
                                    <div className='user-name text-overflow-one'>
                                        {item.user_name}
                                    </div>
                                    <div className='group-status'>
                                        <p>还差<span className='red'>{item.number}人</span>拼成</p>
                                        <p>剩余 {this.formatTimeByMillisecond(item.end_time)}</p>
                                    </div>
                                    <span onClick={() => { this.toPay(item.pdd_order_id) }} className='topay'>去参团</span>
                                </li>
                            )
                        })
                    }
                </ul>
                <div className="group-dec">
                    <span>
                        <i className='iconfont iconiconfront-1'></i>
                        ·好友参团  ·人满成交  ·人不满退款
                    </span>
                    <span className='allNum'>{`累计${groupInfo.person_num}人成团`}</span>
                </div>
                {
                    (alreadyIn && group_status === 4) && (
                        <>
                            {groupSuccessMbc}
                        </>
                    )

                }
                {/*更多*/}
                {
                    this.state.isShowMore &&
                    <div className="moreMbc">
                        <div className="content">
                            <div className="title-box">
                                正在拼团
                            </div>
                            <ul className='more-group-list'>
                                {
                                    groupInfo.now_groupon_list && groupInfo.now_groupon_list.length > 0 && groupInfo.now_groupon_list.map((item, index) => {
                                        return (
                                            <li key={index} className='group-item'>
                                                <img className='avatar' src={item.avatar} alt="" />
                                                <div className='user-name'>
                                                    <p className='name text-overflow-one'>{item.user_name}</p>
                                                    <p className='time'>剩余 {this.formatTimeByMillisecond(item.end_time)}</p>
                                                </div>
                                                <p className='group-status'>还差{item.number}人</p>
                                                <span onClick={() => { this.toPay(item.pdd_order_id) }} className='topay'>去参团</span>
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                            <div className='more-group-dec'>
                                仅显示10个正在开团的人
                            </div>
                            <i onClick={this.closeMore} className={'iconfont iconiconfront-2 close'}></i>
                        </div>

                    </div>
                }

            </div>
        )
    }
}

// export default connect(
//     state => ({ courseInfo: state }),
//     null
// )(Group)

export default Group;