微信小程序实现拼团功能javascript + swiper_微信小程序 match groups

实现以上的拼团功能,纯自己手写
1.js 部分自己封装的方法，需要后台返回拼团组，主要包括团长信息，团结束时间等，核心是要拼接上面的最后面的1秒只内从9减到0的倒计时，给用户一种紧迫感
startCountdown: function () {
const that = this;
const timer = setInterval(function () {
const groups = that.data.groups;
let count_renshu = 0
if (groups && groups.length > 0) {
for (let i = 0; i < groups.length; i++) {
// console.log(‘我的值是什么===>’, groups[i])
if (groups[i] && groups[i].length > 0) {
// console.log(‘进来啊’, groups[i].nv_length)
for (let j = 0; j < groups[i].length; j++) {
const expectedOverTime = parseInt(groups[i][j].expected_over_time);
const currentTime = Math.floor(new Date().getTime() / 1000);
const remainingTime = Math.max(0, expectedOverTime - currentTime);
const hours = Math.floor(remainingTime / 3600).toString().padStart(2, ‘0’);
const minutes = Math.floor((remainingTime % 3600) / 60).toString().padStart(2, ‘0’);
const seconds = Math.floor(remainingTime % 60).toString().padStart(2, ‘0’);
groups[i][j].countdown = ${hours}:${minutes}:${seconds};
if (remainingTime === 0) {
groups[i].splice(j, 1); // 从原数组中删除对应的元素
}
}
if (groups[i].length == 0) {
groups.splice(i, 1);
}
if(groups[i]){
count_renshu += groups[i].length
}
}
}
}
let count = 10;
const countTimer = setInterval(function () {
if (count > 0) {
// console.log(count);
count–;
} else {
// console.log(“倒计时结束”);
clearInterval(countTimer);
}
that.setData({
aaaaa: count
});
}, 100);
if (groups.length == 0) {
clearInterval(timer);
}
// console.log(‘999999999’, groups)
that.setData({
count: count_renshu,
groups: groups
});
}, 1000);
that.setData({
timer: timer
});
},
2.html部分的代码，主要是用swiper实现


{{count}}人在拼团，参与立即拼团








{{item.groupRelation.user.nickname}}
{{item.groupRelation.order.detail[0].goods_info}}




还差 {{item.difference_num}}人 拼成
剩余{{item.countdown}}.{{aaaaa}}

去分享
去拼团

3.css代码
.to_together_group {
width: 124rpx;
height: 54rpx;
line-height: 54rpx;
background: #FF3D00;
border-radius: 4rpx;
text-align: center;
border-radius: 4rpx;
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
margin-left: 14rpx;
}

.together_group_do {
width: 750rpx;
/* height: 110rpx; */
background: #FFFFFF;
position: fixed;
bottom: 0;
left: 0;
z-index: 101;
box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0rpx 20rpx;
padding-top: 14rpx;
}

.together_group_do_left {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
overflow: hidden;
}
.together_group_do_left .basket{
position: relative;
margin-top: 10rpx;
}
.together_group_do_left .basket .num {
position: absolute;
top: 0;
right: -15rpx;
color: #ffffff;
background-color: #EA463D;
text-align: center;
font-size: 20rpx;
border-radius: 100%;
width: 30rpx;
height: 30rpx;
line-height: 30rpx;
}

.xianshipingtuan {
display: flex;
flex-direction: column;
margin-left: 14rpx;
}

.xianshipingtuan_wenben {
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #DD101F;
}

.xianshipingtuan_qian {
font-size: 36rpx;
font-family: PingFang-SC-Heavy, PingFang-SC;
font-weight: 800;
color: #222222;
}

.together_group_do_right {
width: 240rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: #FF3D00;
border-radius: 40rpx;
font-size: 30rpx;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #FFFFFF;
letter-spacing: 2rpx;
}

.pintuan_num {
font-size: 36rpx;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #0096FF;
float: right;
margin-top: 10rpx;
}

.edit_and_buy_box {
width: 400rpx;
height: 80rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

.edit_and_buy_box_left {
width: 200rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: #FFE5DD;
border-radius: 40rpx 0rpx 0rpx 40rpx;
font-size: 30rpx;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #FF3D00;
letter-spacing: 2rpx;
}

.edit_and_buy_box_right {
width: 200rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: #FF3D00;
border-radius: 0rpx 40rpx 40rpx 0rpx;
font-size: 30rpx;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #FFFFFF;
letter-spacing: 2rpx;
}

.swiper-container {
height: 190rpx;
}
.do_lijixiadan_lijiapintuan{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.do_lijixiadan_lijiapintuan_left{
width: 210rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: #0096FF;
border-radius: 40rpx;
font-size: 30rpx;
font-family: PingFang-SC, PingFang-SC;
font-weight: bold;
color: #FFFFFF;
letter-spacing: 2rpx;
}
.do_lijixiadan_lijiapintuan_right{
width: 482rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: #FF3D00;
border-radius: 40rpx;
font-size: 30rpx;
font-family: PingFang-SC, PingFang-SC;
font-weight: bold;
color: #FFFFFF;
letter-spacing: 2rpx;
margin-left: 16rpx;
}