uni-app实现拼多多倒计时拼团

a、在HTML页面

<view class="corwd-box">
                            <view class="corwd-item" v-for="(item,index) in assembleData" :key="index">
                                <view class="corwd_people">
                                    <!-- 进行中的团购-头像 -->
                                    <view class="corwd_people_img">
                                        <!-- <image :src="item.user.avatarUrl" class="corwd_people_images"></image> -->
                                        <image :src="item.headImg" mode=""></image>
                                    </view>
                                    <!-- 进行中的团购-名称 -->
                                    <!-- <text class="onelist-hidden">{
   
   { item.user.nickName }}的团</text> -->

<view class="corwd_time_text1">
                                <!-- 进行中的团购-开团人数 -->
                                <view class="corwd_time_text-time">
                                    <text class="onelist-hidden">{
   
   {item.name}}</text>
                                </view>
                                <view class="endTime-box">
                                    <text class="corwd_time_titl_onelist-hidden1">还差<text
                                            class="corwd_time-num">{
   
   {item.lack}}</text>人</text>
                                    <!-- 进行中的团购-倒计时 -->
                                    <text class="corwd_time_numbe_onelist-hidden">{
   
   {item.remainTimeStr}}</text>
                                </view>

                            </view>

        <view class="corwd_time">
                                    <!-- 进行中的团购-按钮 -->
                                    <button>去拼团</button>
                                </view>
                            </view>

     </view>

b、在css内加样式

/* 拼团  --start */
    .corwd-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        background-color: #fff;
    }

    .corwd-item {
        width: 100%;
        padding: 20rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #E2E2E2;
    }

    .corwd_people {
        display: flex;
        align-items: center;
        width: 80%;
    }

    .corwd_people_img>image {
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
    }

    .corwd_time_text1 {
        display: flex;
        align-items: center;
        margin-left: 20rpx;
        justify-content: space-between;
        width: 100%;
    }

    .corwd_time_text-time {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 700;
        color: #000000;
    }

    .endTime-box {
        display: flex;
        flex-direction: column;
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #000000;
    }

    .corwd_time_titl_onelist-hidden1 {}

    .corwd_time-num {
        color: #FF4141;
    }

    .corwd_time {
        padding: 10rpx;
        box-sizing: border-box;
        background: #ff4141;
        border-radius: 8rpx;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
    }

    .popups-title {
        padding: 30rpx;
        display: flex;
        justify-content: center;
        position: relative;
    }

    .popups-title-img {
        position: absolute;
        width: 60rpx;
        height: 60rpx;
        right: -10rpx;
        top: -30rpx;
        background-color: #fff;
        border-radius: 50%;
    }

    /* 拼团  --end */

c，在data里面定义

 assembleData: [{
                        headImg: '../../../static/imgs/main/gpqc_zh3.png', //头像
                        name: '吃李子的张先生', //名字
                        lack: 1, //缺少多少人可以拼单
                        remainTimeStr: '00:00:00', //倒计时的显示字符串的字符串
                        remainTime: "30000", //剩余时间
                    },
                    {
                        headImg: '../../../static/imgs/main/gpqc_zh3.png',
                        name: '吃李子的李先生',
                        lack: 1, //缺少多少人
                        remainTimeStr: '00:00:00', //倒计时的显示字符串的字符串
                        remainTime: "124534354354354", //剩余时间
                    }
                ],

d、正在拼团倒计时方法在methods里面

   countTime(self) {
                self = this
                let timer = setInterval(function() {
                    for (let i = 0; i < self.assembleData.length; i++) {
                        self.assembleData[i].remainTime -= 1000 //剩余时间
                        let t = self.assembleData[i].remainTime 
                        if (t > 0) {//剩余时间>0
                        let hour = Math.floor((t / 3600000) % 24) //时
                        let min = Math.floor((t / 60000) % 60)//分
                        let sec = Math.floor((t / 1000) % 60)//秒
                            hour = hour < 10 ? '0' + hour : hour //当时间的小时小于10时给前面加0
                            min = min < 10 ? '0' + min : min
                            sec = sec < 10 ? '0' + sec : sec
                            let format = '' //定义来拼接显示时间的变量
                            format = `剩余${hour}:${min}:${sec} `
                            self.assembleData[i].remainTimeStr = format
                        } else {
                            // 进行判断 如果数据内所有的倒计时已经结束，那么结束定时器， 如果没有那 么继续执行定时器
                            let flag = self.assembleData.every((val, ind) => val.remainTime <= 0)
                            if (flag) clearInterval(timer)
                            self.assembleData[i].remainTimeStr = `已结束` // 结束文案
                        }
                    }
                }, 1000)
            },

uni-app实现拼多多倒计时拼团

猜你喜欢