小程序拼多多正在拼的团

滚动显示商品。

 

view 文件

<wxs module="util">
    var timer = function(intDiff) {
            var day = 0
              , hour = 0
              , minute = 0
              , second = 0;
            //时间默认值
            if (intDiff > 0) {
              day = Math.floor(intDiff / (60 * 60 * 24));
              hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
              minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
              second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (hour <= 9) {
              hour = '0' + hour
            }
            if (minute <= 9) {
              minute = '0' + minute;
            }
            if (second <= 9) {
              second = '0' + second;
            }
           
            var countDown = hour + ':' + minute + ':' + second 
          return countDown; 
    }
    
    module.exports.timer = timer;
</wxs>
<block wx:if="{{percent<=100}}">
  <progress stroke-width='2' percent="{{percent}}"  />
</block>
<block wx:else>

      <!-- 其他正在拼的团 -->
      <view class="groupPlay">
        <view id="pintuan" class="items">
          <view class='title'>
            <text>{{itemss.length}}人正在拼单，可直接参与</text>
            <text bindtap='showMore'>查看更多</text>
          </view>
          <swiper class='swiper-box' autoplay='{{true}}' interval='4000' vertical='{{true}}' circular='{{true}}'>
                <block wx:for="{{otherGroupBuy}}" wx:key="key">
                <swiper-item catchtouchmove="catchtouchmove">
                  <block wx:for-index="idx" wx:for='{{item}}' wx:for-item="items" wx:key="keys">
                    <view class="item" >
                      <image src="{{items.imageUrls}}" ></image>
                      <view class="name">{{items.name}}</view>
                      <view class="info">
                        <view class="info-top">还差<span class="num">{{items.remaining}}</span>人成团</view>
                        <view class="info-bottom">剩余:{{util.timer(items.time)}}<text wx:if="{{items.time!=0}}">.{{msec}}</text><text wx:else>.0</text></view>
                      </view>
                      <view class="goBuy" bindtap='goBuy'>去参团</view>
                    </view>
                  </block>
                </swiper-item>
               </block>
          </swiper>
        </view>
      </view>
      <view class="cut-line"></view>
</block>

<!-- 其他正在拼的团 查看更多 -->
<view class='modal'  wx:if="{{showOtherGroupBuyAll}}" catchtouchmove="catchtouchmove">
  <view class='ogba'>
    <view class='close' catchtap='close'><image src='../../image/closeOtherGroupBuyAll.png'  catchtap='close'></image></view>
    <view class='title'>正在拼单</view>
    <scroll-view scroll-y class='content'>
      <view class='item' wx:for="{{items}}">
        <image src=''></image>
        <view class='middle'>
          <view class='top'>{{item.name}}<text>还差{{item.remaining}}人</text></view>
          <view class='bottom'>剩余{{util.timer(item.time)}}<text wx:if="{{item.time!=0}}">.{{msec}}</text><text wx:else>.0</text></view>
        </view>
        <view class='right'>去拼单</view>
      </view>
    </scroll-view>
    <view class='footer' wx:if="{{items.length>=10}}">仅显示十个正在拼单的人</view>
  </view>
</view>

 JS文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msec:9,
    otherGroupBuy:'',
    showOtherGroupBuyAll:false,
    percent: 0,
    items:'',
    itemss:[
      {
        imageUrls:'',
        name:'除却巫山不是云',
        remaining:'1',
        time:'5'
      },
      {
        imageUrls: '',
        name: '曾经沧海难为水',
        remaining: '1',
        time: '10'
      },
      {
        imageUrls: '',
        name: '羌笛何须怨杨柳',
        remaining: '1',
        time: '1564'
      },
      {
        imageUrls: '',
        name: '春风不度玉门关',
        remaining: '1',
        time: '356'
      },
      {
        imageUrls: '',
        name: '醉卧沙场君莫笑',
        remaining: '1',
        time: '50'
      },
      {
        imageUrls: '',
        name: '葡萄美酒夜光杯',
        remaining: '1',
        time: '3600'
      },
      {
        imageUrls: '',
        name: '浔阳江头夜送客',
        remaining: '1',
        time: '1234'
      },
      {
        imageUrls: '',
        name: '大珠小珠落玉盘',
        remaining: '1',
        time: '1564'
      },
      {
        imageUrls: '',
        name: '远上寒山石径斜',
        remaining: '1',
        time: '356'
      },
      {
        imageUrls: '',
        name: '日照香炉生紫烟',
        remaining: '1',
        time: '50'
      },
      {
        imageUrls: '',
        name: '八月秋高风怒号',
        remaining: '1',
        time: '50'
      }
    ],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    that.showProgress();
    that.getMsec();
    that.timerOtherGroupBuyAll(that.data.items);
  },
 
  getMsec:function(){
    
    var that = this;
    var _msec = that.data.msec;
    setInterval(function(){
      if(_msec>0){
        _msec--
      }else{
        _msec =9;
      }
      that.setData({
        msec:_msec
      })
    },100)
  },
  showProgress() {
  var that = this;
  var progress = 0;
    setInterval(function () {
      that.setData({
        percent: that.data.percent + 1
      })
      if (progress == 100) {
        return
      } else {
        progress++
      }

    }, 20)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },
  touchmove:function(){
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  timerOtherGroupBuyAll: function () {
    var that = this;
    var items = that.data.itemss;
    var num = Math.floor(items.length / 2);
    console.log(num)
    if(num>5){
      num=5
    }
    items = items.slice(0,10);
    setInterval(function () {
      for (var i = 0; i < items.length; i++) {
        if(items[i].time>0){
          items[i].time--;
        }
        
      }
      var _other = new Array();
      for (var i = 0; i < num; i++) {
        var arr = new Array();
        arr.push(items[i * 2]);
        arr.push(items[i * 2 + 1]);
        _other.push(arr)
      }
      that.setData({
        items: items,
        otherGroupBuy: _other
      })
    }, 1000)

  },
  showMore:function(){
    this.setData({
      showOtherGroupBuyAll:true
    })
  },
  close:function(){
    console.log(111111);
    this.setData({
      showOtherGroupBuyAll:false
    })
  }


})

 CSS文件

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
image{
	vertical-align:top;
}
.cut-line{
	width: 100%;
	height: 20rpx;
	background-color: #F2F2F2;
}
/*拼团玩法*/
.groupPlay{
  width: 100%;
}
.items{
	width: 100%;
}
.items .title{
	width: 94%;
	margin-left: 3%;
	font-size:28rpx;
	color: #333333;
  border-bottom: 1rpx solid #f4f4f4;
  height: 80rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.items .title text{
  height: 100%;
  display: flex;
  align-items: center;
}
.items .title text:last-child{
  color: #8a8a8a;
}
.items .title text:last-child::after{
  content: '';
  display: inline-block;
  width: 14rpx;
  height: 14rpx;
  transform:rotate(45deg);
  border-right: 1rpx solid #8a8a8a;
  border-top: 1rpx solid #8a8a8a;
  position: relative;
  margin-left: 5rpx;
}
.items .num{
	color: #ff5474;
}
.items .item{
	width: 94%;
  margin-left: 3%;
	height: 160rpx;
	border-bottom: 1rpx solid #f4f4f4;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.items .item:last-child{
	border: none;
}
.items .item image{
	width: 100rpx;
	height: 100rpx;
  border-radius: 50%;
  background-color: #ff5474;
}
.items .item .name{
	flex: 1;
	height: 100%;
	line-height: 164rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
	margin-left:30rpx;
}
.items .item .info{
	width: 200rpx;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-right: 20rpx;
}
.items .item .info .info-top{
	height: 40rpx;
	font-size: 28rpx;
	color: #333333;
	margin-bottom:4rpx;
}
.items .item .info .info-bottom{
	height: 40rpx;
	font-size: 26rpx;
	color: #888888;
}
.items .item .goBuy{
	width:160rpx;
	height: 70rpx;
	font-size: 28rpx;
	background-color: #ff5474;
	color: #FFFFFF;
	border-radius: 8rpx;
	text-align: center;
	line-height: 70rpx;
}
.swiper-box{
  width: 100%;
  height: 320rpx;
}


/* 其他人正在拼的团，查看更多 */
.modal{
  width: 100%;
  height: 100%;
 background-color: rgba(0, 0, 0,0.3);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9900;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal .ogba{
  width: 650rpx;
  max-height: 760rpx;
  position: relative;
  background-color: #fff;
  border-radius: 20rpx;
}
.modal .ogba .title{
  width: 100%;
  height: 90rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #333;
  border-bottom: 1rpx solid #f4f4f4;
}
.modal .ogba .footer{
  width: 100%;
  height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #8a8a8a;
  border-top: 1rpx solid #f4f4f4;
}
.modal .ogba .content{
  width: 100%;
  height: 600rpx;
  padding: 0;
  margin: 0;
}
.modal .ogba .content .item{
  width: 94%;
  margin-left: 3%;
  height: 120rpx;
  border-bottom: 1rpx solid #f4f4f4;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.modal .ogba .content .item:last-child{
  border-bottom: none;
}
.modal .ogba .content .item image{
  width: 90rpx;
  height: 90rpx;
  background-color: #ff5474;
  border-radius: 50%;
}
.modal .ogba .content .item .middle{
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 20rpx;
}
.modal .ogba .content .item .middle .top{
  width: 100%;
  font-size: 30rpx;
  color: #333;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.modal .ogba .content .item .middle .top text{
  font-size: 26rpx;
  color: #8a8a8a;
  margin-left: 20rpx;
}
.modal .ogba .content .item .middle .bottom{
  width: 100%;
  font-size: 26rpx;
  color: #8a8a8a;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 5rpx;
}
.modal .ogba .content .item .right{
  height: 60rpx;
  background-color: #ff5474;
  color: #fff;
  font-size: 28rpx;
  padding: 0 30rpx;
  text-align: center;
  line-height: 60rpx;
  border-radius: 5rpx;
}
.modal .ogba .close{
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  position: absolute;
  right: -20rpx;
  top: -20rpx;
  background-color: #e6e6e6;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9980;
}
.modal .ogba .close image{
  width: 35rpx;
  height: 35rpx;
}