小程序，秒杀列表页面功能实现

html

<view class="count_down">
    <text class="title">抢购进行中:</text>
    <text class="count_down_time">
        <text class="time">{{hou}}</text> : <text class="time">{{min}}</text> : <text class="time">{{sec}}</text>
    </text>
</view>

<block wx:for="{{product_list}}" wx:key="id">
<block wx:if="{{item.left_stock > 0}}" wx:key="id">    
<view class="product_list">
    <view class="left">
        <image class="product_img" src="{{item.title_img}}" />
    </view>

    <view class="right">
        <view class="title">
            {{item.title}}
        </view>
        <view class="spec">
            <block wx:if="{{item.spec}}" wx:key="id"> 
            规格：{{item.spec}}
            </block>
        </view>
        <view class="process_box">
            <progress class="process" percent="{{item.percent}}" backgroundColor="#E9455E" activeColor="#FFB7C2" font-size="20rpx" border-radius="12rpx" stroke-width="24rpx" />
            <view class="process_text">
                仅剩{{item.left_stock}}件
            </view>
        </view>
        <view class="origin_price">￥{{item.origin_price}}</view>
        <view class="price">￥{{item.price}}</view>

        <view class="buy" data-seckill-product-id="{{item.seckill_product_id}}" bindtap="toSeckill">立即秒杀</view>
    </view>
</view>
</block>
<block wx:else wx:key="id"> 
<view class="product_list_over">
    <view class="left">
        <image class="product_img" src="{{item.title_img}}" />
        <image class="product_img_over" src="/images/seckill/over.png" />
    </view>

    <view class="right">
        <view class="title">
            {{item.title}}
        </view>
        <view class="spec">
            <block wx:if="{{item.spec}}" wx:key="id"> 
            规格：{{item.spec}}
            </block>
        </view>
        <view class="process_box">
            <progress class="process" percent="{{item.percent}}" backgroundColor="#E9455E" activeColor="#FFB7C2" font-size="20rpx" border-radius="12rpx" stroke-width="24rpx" />
            <view class="process_text">
                已经抢光
            </view>
        </view>
        <view class="origin_price">￥{{item.origin_price}}</view>
        <view class="price">￥{{item.price}}</view>

        <view class="buy">已抢光</view>
    </view>
</view>

</block>    
</block>

scss

page {
    background-color: #fff;
}

.count_down {
     750rpx;
    height: 90rpx;
    background-color: #e9455e;
    .title {
        margin-left: 30rpx;
        font-size: 26rpx;
        font-weight: bold;
        color: #fff;
        line-height: 90rpx;
    }
    .count_down_time {
        margin-top: 5rpx;
        margin-left: 15rpx;
        font-size: 26rpx;
        font-weight: bold;
        color: #fff;
        .time {
            color: #e9455e;
            padding-left: 5rpx;
            padding-right: 5rpx;
            min- 40rpx;
            border-radius: 5rpx;
            height: 40rpx;
            text-align: center;
            line-height: 40rpx;
            background-color: #fff;
            display: inline-block;
        }
    }
}

.product_list {
     750rpx;
    padding-top: 30rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    display: flex;
    .left {
        .product_img {
            border-radius: 10rpx;
             260rpx;
            height: 260rpx;
        }
    }
    .right {
        // background-color: green;
        padding-left: 30rpx;
        position: relative;
        .title {
            // height: 30rpx;
            font-size: 28rpx;
            font-weight: bold;
            color: rgba(69, 69, 69, 1);
             410rpx; /* 超出点点点，必须配合宽度使用 */
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            white-space: nowrap;
        }
        .spec {
             410rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 24rpx;
            font-weight: bold;
            color: rgba(233, 69, 94, 1);
            margin-top: 25rpx;
        }
        .process_box {
             250rpx;
            height: 24rpx;
            position: relative;
            .process {
                margin-top: 25rpx;
                 250rpx;
            }
            .process_text {
                 250rpx;
                height: 24rpx;
                line-height: 24rpx;
                position: absolute;
                text-align: center;
                left: 0;
                top: 0;
                font-size: 20rpx;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
            }
        }

        .origin_price {
            margin-top: 25rpx;
            font-size: 20rpx;
            font-weight: 400;
            text-decoration: line-through;
            color: rgba(153, 153, 153, 1);
        }

        .price {
            margin-top: 16rpx;
            font-size: 32rpx;
            font-weight: bold;
            color: rgba(233, 69, 94, 1);
            line-height: 32rpx;
        }

        .buy {
            position: absolute;
            text-align: center;
             160rpx;
            height: 60rpx;
            font-size: 28rpx;
            font-weight: 400;
            line-height: 60rpx;
            color: rgba(233, 69, 94, 1);
            background:rgba(107,187,88,0);
            border:2rpx solid rgba(233, 69, 94, 1);
            border-radius:30rpx;
            right: 0;
            bottom: 10rpx;
        }
    }
}

.product_list_over {
    @extend .product_list;
    .left {
        position: relative;
        .product_img {
            background:rgba(0,0,0,1);
            opacity:0.4;
        }
        .product_img_over {
            height: 174rpx;
             174rpx;
            position: absolute;
            top:43rpx;
            left:43rpx;
            z-index: 9999;
        }
    }

    .right {
        .buy {
            background-color: #999999;
            font-size:28rpx;
            font-weight:400;
            color:rgba(255,255,255,1);
            border: 0rpx;
        }
    }
}

js

import request from "../../../common/request";
import Storage from "../../../common/auth/Storage";
const app = getApp();

Page({
  /**
   * 页面的初始数据
   */
  data: {
    endTime: '', // 时间戳
  },
  // 倒计时
  countDown: function () {
    var that = this;
    var nowTime = new Date().getTime();//现在时间（时间戳）
    // var endTime = new Date(that.data.endTime).getTime();//结束时间（时间戳）
    var endTime = that.data.endTime * 1000;//结束时间（时间戳）
    var time = (endTime - nowTime) / 1000;//距离结束的毫秒数
    // 获取天、时、分、秒
    let day = parseInt(time / (60 * 60 * 24));
    let hou = parseInt(time % (60 * 60 * 24) / 3600);
    let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
    let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
    // console.log(day + "," + hou + "," + min + "," + sec)
    day = that.timeFormin(day),
      hou = that.timeFormin(hou),
      min = that.timeFormin(min),
      sec = that.timeFormin(sec);

    // 天，换成小时
    hou = day * 24 + hou;

    that.setData({
      // day: that.timeFormat(day),
      hou: that.timeFormat(hou),
      min: that.timeFormat(min),
      sec: that.timeFormat(sec)
    })
    // 每1000ms刷新一次
    if (time > 0) {
      that.setData({
        countDown: true
      })
      setTimeout(this.countDown, 1000);
    } else {
      that.setData({
        countDown: false
      })
    }
  },
  //小于10的格式化函数（2变成02）
  timeFormat(param) {
    return param < 10 ? '0' + param : param;
  },
  //小于0的格式化函数（不会出现负数）
  timeFormin(param) {
    return param < 0 ? 0 : param;
  },

  toSeckill: function({
    currentTarget: {
      dataset: { seckillProductId }
    }
  }) {
    return wx.navigateTo({
      url: "/pages/seckill/info/index?id=" + seckillProductId
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function ({ id }) {
    this.openid = app.globalData.openid || Storage.get().openid;
    request("getSeckillProductList", { seckill_id: id, openid: this.openid }).then(({ data }) => {
      this.setData({
        product_list: data.product_list,
        endTime: data.end_time,
      });

      // 开启倒计时
      var that = this;
      that.countDown()
    });
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})