index.js 10.2 KB
Newer Older
wangshuo committed
1
import React, { Component } from 'react'
xuzhenghua committed
2
import './index.scss'
zhanghaozhe committed
3
import { getParam, http } from "@/utils"
wangshuo committed
4 5
import { connect } from "react-redux"
import { Flex } from 'antd-mobile'
xuzhenghua committed
6 7
import {browser} from "@/utils"
import {Toast} from 'antd-mobile'
xuzhenghua committed
8 9 10 11 12 13


class Group extends Component {
    constructor(props) {
        super(props)
        this.state = {
14 15 16 17 18
            isShowMore: false,
            alreadyIn: false,
            pdd_price: 0,
            number: 0,
            data: {},
wangshuo committed
19 20
            countdown: props.countdown,
            now_groupon_list: [],
xuzhenghua committed
21
        }
22
        // console.log(props);
xuzhenghua committed
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
    }

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

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

39
    toPay = (pdd_order_id) => {
40
        const {courseInfo, history} = this.props;
wangshuo committed
41
        if (courseInfo.group_status === 3) {
FE committed
42 43 44 45 46 47 48
            history.push(
                `/order?id=${getParam('id')}`, 
                {
                    group: 1,
                    pdd_order_id
                }
            );
wangshuo committed
49
        } else {
50 51 52 53 54 55 56 57 58 59 60 61
            this.setState({
                isShowMore: false,
                alreadyIn: true
            });
        }
    }

    invitedFriends = () => {
        this.setState({
            isShowMore: false,
            alreadyIn: false,
        });
zhanghaozhe committed
62 63
        this.props.invitedFriends();
    }
wangshuo committed
64

zhanghaozhe committed
65 66 67 68 69 70 71
    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;
wangshuo committed
72
                });
zhanghaozhe committed
73 74
                this.setState({
                    now_groupon_list,
75
                })
zhanghaozhe committed
76
            }
77
        }
wangshuo committed
78
        this.setState({
zhanghaozhe committed
79
            countdown: nextProps.countdown
wangshuo committed
80 81 82 83
        })
    }

    componentDidMount() {
84 85 86
        const { courseInfo={} } = this.props;
        if (courseInfo.pdd_group_info) {
            let now_groupon_list = courseInfo.pdd_group_info.now_groupon_list;
wangshuo committed
87
            if (now_groupon_list && now_groupon_list.length > 0) {
wangshuo committed
88
                setInterval(() => {
wangshuo committed
89
                    now_groupon_list.map(item => {
wangshuo committed
90 91 92 93 94 95
                        item.end_time -= 1;
                        return item;
                    });
                    this.setState({
                        now_groupon_list,
                    })
wangshuo committed
96
                }, 1000);
wangshuo committed
97 98 99 100
            }
        }
    }

101 102 103 104 105
    hideMbc = () => {
        this.setState({
            alreadyIn: false
        });
    }
xuzhenghua committed
106

wangshuo committed
107 108
    formatTimeByMillisecond = (millisecond) => {
        let date = millisecond * 1000,
wangshuo committed
109 110 111 112 113 114 115 116
            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}`;
wangshuo committed
117 118
    }

xuzhenghua committed
119
    render() {
120
        const { courseInfo } = this.props;
wangshuo committed
121
        const { alreadyIn, countdown, now_groupon_list } = this.state;
122 123 124 125 126 127
        let groupInfo = '', 
        groupon_member = '', 
        group_status = -1, 
        groupSuccessMbc = null;
        if (courseInfo) {
            groupInfo = courseInfo.pdd_group_info;
128
            groupon_member = groupInfo.groupon_member;
129
            group_status = courseInfo.group_status;
130
        }
wangshuo committed
131 132 133 134 135
        if (group_status === 4) {
            if (groupon_member.member) {
                const { number } = groupon_member;
                let ary = [], num = number;
                while (num != 0) {
136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167
                    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}>
wangshuo committed
168 169 170 171 172 173 174
                    <div className='content'>
                        <p>你已参团</p>
                        {groupTip}
                        <div className='group-btn' onClick={this.invitedFriends}>邀请好友参团 {countdown} 后结束</div>
                        <p className='dec'>分享到3个群后,成团率高达98%</p>
                    </div>
                </div>;
175 176
            }

xuzhenghua committed
177
        }
wangshuo committed
178

xuzhenghua committed
179 180 181 182 183 184 185 186 187 188 189 190 191 192 193
        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'>
wangshuo committed
194
                                    <img className='avatar' src={item.avatar} alt="" />
xuzhenghua committed
195 196 197 198 199
                                    <div className='user-name text-overflow-one'>
                                        {item.user_name}
                                    </div>
                                    <div className='group-status'>
                                        <p>还差<span className='red'>{item.number}</span>拼成</p>
wangshuo committed
200
                                        <p>剩余 {this.formatTimeByMillisecond(item.end_time)}</p>
xuzhenghua committed
201
                                    </div>
wangshuo committed
202
                                    <span onClick={() => { this.toPay(item.pdd_order_id) }} className='topay'>去参团</span>
xuzhenghua committed
203 204 205 206 207 208 209 210 211 212
                                </li>
                            )
                        })
                    }
                </ul>
                <div className="group-dec">
                    <span>
                        <i className='iconfont iconiconfront-1'></i>
                        ·好友参团  ·人满成交  ·人不满退款
                    </span>
213
                    <span className='allNum'>{`累计${groupInfo.person_num}人成团`}</span>
xuzhenghua committed
214
                </div>
215 216 217 218 219 220
                {
                    (alreadyIn && group_status === 4) && (
                        <>
                            {groupSuccessMbc}
                        </>
                    )
wangshuo committed
221

222
                }
xuzhenghua committed
223 224 225 226 227 228 229 230 231 232 233 234 235
                {/*更多*/}
                {
                    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'>
wangshuo committed
236
                                                <img className='avatar' src={item.avatar} alt="" />
xuzhenghua committed
237 238
                                                <div className='user-name'>
                                                    <p className='name text-overflow-one'>{item.user_name}</p>
wangshuo committed
239
                                                    <p className='time'>剩余 {this.formatTimeByMillisecond(item.end_time)}</p>
xuzhenghua committed
240 241
                                                </div>
                                                <p className='group-status'>还差{item.number}</p>
wangshuo committed
242
                                                <span onClick={() => { this.toPay(item.pdd_order_id) }} className='topay'>去参团</span>
xuzhenghua committed
243 244 245 246 247 248 249 250
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                            <div className='more-group-dec'>
                                仅显示10个正在开团的人
                            </div>
251
                            <i onClick={this.closeMore} className={'iconfont iconiconfront-2 close'}></i>
xuzhenghua committed
252
                        </div>
wangshuo committed
253

xuzhenghua committed
254 255 256 257 258 259 260 261
                    </div>
                }

            </div>
        )
    }
}

262 263 264 265 266 267
// export default connect(
//     state => ({ courseInfo: state }),
//     null
// )(Group)

export default Group;