index.js 10.9 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
            history.push(
xuzhenghua committed
43
                `/order?id=${getParam('id')}`,
FE committed
44 45 46 47 48
                {
                    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,
xuzhenghua committed
109
            day = 0,
wangshuo committed
110 111 112 113
            hours = 0,
            minutes = 0,
            seconds = 0;
        date -= 1000;
xuzhenghua committed
114 115 116 117 118

        if (millisecond > 86400) {
            day = `${parseInt(date / (3600000 * 24))}`.padStart(2, 0)
            hours = `${parseInt((date - day * 3600000 * 24) / 3600000)}`.padStart(2, 0)
            minutes = `${parseInt((date - day * 3600000 * 24 - hours * 3600000) / 60000)}`.padStart(2, 0)
xuzhenghua committed
119
            return `${day}${hours}${minutes}分`;
xuzhenghua committed
120 121 122 123 124 125
        } else {
            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
126 127
    }

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

xuzhenghua committed
186
        }
wangshuo committed
187

xuzhenghua committed
188 189
        return (
            <div className='group-box'>
xuzhenghua committed
190 191 192 193 194 195
                {
                    courseInfo.is_force ==0 &&
                    <>
                        <div className="group-title">
                            <span>{groupInfo.now_groupon_total}人正在开团,可直接参与</span>
                            <span className='more' onClick={this.getMore}>
xuzhenghua committed
196 197 198
                        查看更多
                        <i className='iconfont iconiconfront-70'></i>
                    </span>
xuzhenghua committed
199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220
                        </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>
                    </>
                }
xuzhenghua committed
221 222 223 224 225 226

                <div className="group-dec">
                    <span>
                        <i className='iconfont iconiconfront-1'></i>
                        ·好友参团  ·人满成交  ·人不满退款
                    </span>
227
                    <span className='allNum'>{`累计${groupInfo.person_num}人成团`}</span>
xuzhenghua committed
228
                </div>
229 230 231 232 233 234
                {
                    (alreadyIn && group_status === 4) && (
                        <>
                            {groupSuccessMbc}
                        </>
                    )
wangshuo committed
235

236
                }
xuzhenghua committed
237 238 239 240 241 242 243 244 245 246 247 248 249
                {/*更多*/}
                {
                    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
250
                                                <img className='avatar' src={item.avatar} alt="" />
xuzhenghua committed
251 252
                                                <div className='user-name'>
                                                    <p className='name text-overflow-one'>{item.user_name}</p>
wangshuo committed
253
                                                    <p className='time'>剩余 {this.formatTimeByMillisecond(item.end_time)}</p>
xuzhenghua committed
254 255
                                                </div>
                                                <p className='group-status'>还差{item.number}</p>
wangshuo committed
256
                                                <span onClick={() => { this.toPay(item.pdd_order_id) }} className='topay'>去参团</span>
xuzhenghua committed
257 258 259 260 261 262 263 264
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                            <div className='more-group-dec'>
                                仅显示10个正在开团的人
                            </div>
265
                            <i onClick={this.closeMore} className={'iconfont iconiconfront-2 close'}></i>
xuzhenghua committed
266
                        </div>
wangshuo committed
267

xuzhenghua committed
268 269 270 271 272 273 274 275
                    </div>
                }

            </div>
        )
    }
}

276 277 278 279 280 281
// export default connect(
//     state => ({ courseInfo: state }),
//     null
// )(Group)

export default Group;