实现拼团人数显示的模块UI，带定时器。

作为一个开发，满足UI的各种设计要求是很必须的。
在做公司的电商项目时，遇到了要显示拼团详情的界面，这个时候需要按照要求显示已拼团的人数和未拼团的人数，也就是所谓的占位坑。当所需人数较少时，实现起来就比较容易。但是如果所需人数过多，而且又不确定时，这个时候就需要提前考虑好布局了。
下面先来看看效果图
当只有五位拼团人数时：

人少时.png

当人数不确定时：

多个数据时.png

咳咳，因为是写的一个小demo ,请不要在意效果图的颜色搭配问题，接下来就上代码。

//第一个参数表示多少人的团购，第二个表示已拼团的人数数组
getBgDiv(needNum, userImgList) {
        let perpleArray = [];
        //用来显示已拼团的人数
        userImgList.map((item, index) => {
            perpleArray.push(<div key={index} className="bgDiv1"></div>);
        })
         //用来显示未拼团的人数
        for (var i = userImgList.length; i < needNum; i++) {
            perpleArray.push(<div key={i} className="bgDiv2"></div>);
        }
        return perpleArray;
}

render() {
      return (
        <div className="option">
            <div className="inGroupShopping">
                <div className="topStyle">
                    <div className="showText span1">正在拼团</div>
                    <div className="showText span2">累计拼团100人</div>
                </div>
                //实现占位坑的主要代码
                <div className="centerStyle">
                    <div className="groupPeopleShow">
                        {this.getBgDiv(14, [1,2,3])}
                    </div>
                    <div className="divP">
                        <span>还剩{2}个名额，<span
                            className="spanTime">{this.state.expiredTime}</span>后结束</span>
                    </div>
                </div>
            </div>
        </div>
      )
    }

上述代码并不算主要的部分，主要还是CSS的实现，定时器的问题我们稍后再说。

.inGroupShopping {
    display: flex;
    margin-top: 20px;
    flex-direction: column;
    width: 750px;
    background-color: #FFFFFF;
    .topStyle {
        display: flex;
        flex-direction: row;
        margin: 29px 30px 16px 35px;
        justify-content: space-between;
        .showText {
            font-family: PingFang-SC-Regular;
            font-size: 30px;
            letter-spacing: 0.44px;
            height: 42px;
            line-height: 42px;
        }
        .span1 {
            color: #000000;
        }
        .span2 {
            color: #6D6D72;
        }
    }
    .centerStyle {
        border-bottom: 1px solid #B6B6B8;
        width: 750px;
        height: auto;
        position: relative;
        overflow: hidden;
        background: #FFFFFF;
        .groupPeopleShow {
            width: 750px;
            margin-left: 6px;
            margin-right: 6px;
            position: relative;
            display: table;
            img {
                float: left;
                width: 100px;
                height: 100px;
                border-radius: 50px;
                margin: 20px 24px 0px 24px;
            }
            .bgDiv1 {
                float: left;
                width: 100px;
                height: 100px;
                background-color: #EF00EF;
                margin: 20px 24px 0px 24px;
                border-radius: 50px;
            }
            .bgDiv2 {
                float: left;
                width: 100px;
                height: 100px;
                background-color: #EFEFF4;
                margin: 20px 24px 0px 24px;
                border-radius: 50px;
            }
        }

        .divP {
            margin-top: 20px;
            width: 750px;
            text-align: center;
            margin-bottom: 44px;
            height: 42px;
            span {
                font-family: PingFangSC-Regular;
                font-size: 30px;
                color: #6D6D72;
                letter-spacing: 0.44px;
                line-height: 42px;
            }
            .spanTime {
                font-family: Roboto-Medium;
                font-size: 30px;
                letter-spacing: 0.44px;
                line-height: 42px;
            }
        }
    }
}

定时器用的是js的setInterval()方法实现的，不过要自己把时间转化成想要的样式。

constructor(props){
        super(props);
        this.state = {
            expiredTime: '',  //剩余时间
            timer: null
        }
    }
componentDidMount() {
        let timeLeave = 2400;
        this.setState({expiredTime: this. _changeTimeBySecond(timeLeave)});
        //有时间限制开启定时器
        if (timeLeave != 0) {
            this.state.timer = setInterval(() => {
                timeLeave--;
                if (timeLeave == 0) {
                    //这里可以显示定时器结束后要干的事，不过要记得清除定时器。
                    //this.props.remainingNoSecond();
                    clearInterval(this.state.timer);
                    return;
                }
                this.setState({expiredTime: this. _changeTimeBySecond(timeLeave)});
            }, 1000);
        }
    }
    
    componentWillUnmount() {
        if (this.state.timer != null) {
            clearInterval(this.state.timer);
        }
    }

关于时间的转换_changeTimeBySecond()方法，可以参考我的另一篇文章#JS将秒数转为HH:MM:SS格式

以上就是全部代码啦，如果你有好的建议，欢迎给我留言，写的不好的地方请见谅。