小程序拼团列表倒计时

先说一下单个倒计时的实现，以下是效果图

image.png

wxml如下：

<view class="time" ><text>{{h}}</text>:<text>{{m}}</text>:<text>{{s}}</text></view>

js文件：

function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}
Page({
  onLoad: function (options) {
    var that = this;
    that.countTime();
    wx.request({
      url: '',
      data: {},
      method: 'GET',
      dataType: 'json',
      header: {
       'content-type': 'application/json'
      },
      success: function (res) {
        var p_end_date=res.data.data.PRESKUINFO.P_END_DATE;//活动结束时间，php接口时间戳
        that.setData({
          P_END_DATE: p_end_date
        })
      }
    })
  },
   countTime() {
    var end_time = this.data.P_END_DATE;
    var nowTime = new Date();
    var now = nowTime.getTime();
    //时间差
    var leftTime = end_time - now / 1000;
    //定义变量 h,m,s保存倒计时的时间
    var h=0, m=0, s=0;
    if (leftTime >=0) {
      // d = Math.floor(leftTime/1000/60/60/24);
      h = Math.floor(leftTime / 60 / 60);
      m = Math.floor(leftTime / 60 % 60);
      s = Math.floor(leftTime % 60);
    }
    h = checkTime(h);
    m = checkTime(m);
    s = checkTime(s);
    this.setData({ 
      h: h ,
      m: m,
      s: s,
    });
    setTimeout(this.countTime, 1000);
  },
})

拼团倒计时列表效果图如下：

image.png
wxml

<swiper-item wx:for="{{groupData}}" >
  <view class="hd" wx:if="{{item.is_status==1}}">
    <view class="hd-left">
      <image src="{{item.head_url}}" style="width:64rpx;height:64rpx;"></image>
      <view class="hd-user">
        <view class="hd-user-name" >{{item.user_name}}:</view>
        <view class="hd-user-dec">帮一下忙吧，点我</view>
      </view>
    </view><!--hd-left-->
    <view class="hd-right" >
      <view class="hd-ct">
        <view class="hd-ct-people">还差1人成团</view>
        <view class="hd-ct-time" >仅剩：{{item.date}}</view>
      </view>
      <view class="yjct-btn">一键成团</view>
    </view><!--hd-right-->
  </view><!--hd-->
</swiper-item>

js文件：

function checkTime(i) {//时间不够两位数前补0
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}
Page({
  onLoad: function (options) {
    var that = this;
    that.getTime();
    wx.request({
      url: '',
      data: {},
      method: 'GET',
      dataType: 'json',
      header: {
       'content-type': 'application/json'
      },
      success: function (res) {
       var groupInfoDetail=res.data.data.groupInfo.detail;//拼团用户列表信息
        that.setData({
          groupInfoDetail: groupInfoDetail
        })
      }
    })
  },
  getTime: function () {
    var groupInfoDetail = this.data.groupInfoDetail;
    var pinList=[];
    var arr=[];
    for (var info in groupInfoDetail) {
      var infos = groupInfoDetail[info];
      var is_status = infos['STATUS'];
      if (is_status==1){
        var end_date_time = infos['END_DATE'];//拼团结束时间
        var user_name = infos['USER_NAME'];
        var head_url =infos['F_HEAD_URL'];
        var nowTime = new Date();
        var now = nowTime.getTime();
        //时间差
        var leftTime = end_date_time - now / 1000;
        //定义变量 d,h,m,s保存倒计时的时间
        var h = 0, m = 0, s = 0;
        if (leftTime >= 0) {
          h = Math.floor(leftTime / 60 / 60);
          m = Math.floor(leftTime / 60 % 60);
          s = Math.floor(leftTime % 60);
        }
        h = checkTime(h);
        m = checkTime(m);
        s = checkTime(s);
        var timer = h + ':' + m + ':' + s;
        pinList={
          'date': timer,
          'user_name': user_name,
          'head_url': head_url,
          'is_status': is_status
        }
      }
      arr.push(pinList)
    }
    this.setData({
      groupData: arr
    });
   setTimeout(this.getTime, 1000);
  },
})