(转)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)
            },

————————————————
版权声明：本文为CSDN博主「lyy2665624982」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_56276571/article/details/118573355