【黄啊码】微信小程序倒计时秒杀功能

<block wx:if="{{isstart}}">

    <view class="top">

        <view class="imageview">

            <image src="/images/background.png" mode="aspectFit"></image>

        </view>

        <view class="top_view">

            <view class="top_left_view">

                <view style="color:red;height:170rpx;line-height:170rpx;margin-top:40rpx;font-size:28rpx">

                    ￥<text style="font-size:30px">{{list.Money}}</text> {{list.Name}}

                </view>

                <view>

                    {{list.Rules[0]}}

                </view>

                <view>

                    {{list.Rules[1]}}

                </view>

            </view>

            <view class="top_right_view">

                <text>积分兑换</text>

            </view>

        </view>

    </view>

    <view class="center">

        <view style="font-size:34rpx;">积分抢购{{list.Money}}元{{list.Name}}</view>

        <view style="color:#358174">

            <text style="font-size:32rpx">需{{list.Score}}积分  |  </text>

            <text style="font-size:24rpx">每人限抢1次，您已抢购{{list.GetCount}}次</text>

        </view>

        <view class="centerview">

            <view class="{{list.State==2?'colorred':'colorgray'}}">{{list.StateStr}}</view>

            <view><text>剩余</text><text style="color:#358174">{{list.LeftCount}}</text><text>份</text></view>

        </view>

    </view>

    <view class="buttom">

        <text wx:for="{{list.Info}}" wx:key="key">

        {{item}}

        </text>

    </view>

    <block wx:if="{{list.GetCount!=0}}">

        <view class="finished">

            您已抢购成功

        </view>

    </block>

    <block wx:elif="{{list.State==3}}">

        <view class="finished">

            {{list.Desc}}

        </view>

    </block>

    <block wx:else>

        <view class="countdownBox" bindtap="nowbuy">

            <block wx:if="{{timeout}}">

                {{list.Desc}}

            </block>

            <block wx:else>

                <text>倒计时:</text>

                <view class="item">{{countdown.hour}}</view>

                <text>：</text>

                <view class="item">{{countdown.minute}}</view>

                <text>：</text>

                <view class="item">{{countdown.second}}</view>

            </block>

        </view>

    </block>

</block>

<block wx:else>

    <view class="nostart">

        暂无抢红包活动

    </view>

</block>

.top {
  width: 100%;
  height: 380rpx;
  font-size: 24rpx;
  border-bottom: 1px solid #989898;
}
 
.imageview {
  width: 100%;
  height: 360rpx;
}
 
.imageview image {
  margin-left: 5%;
  width: 90%;
  height: 360rpx;
}
 
.top_left_view {
  width: 45%;
  height: 360rpx;
  margin-left: 21%;
  margin-top: 20rpx;
  color: #636365;
  line-height: 1.5em;
  margin-top: -360rpx;
}
 
.colorgray{
  color: gray;
}
 
.colorred{
  color: red;
}
 
.top_left_view view {
  text-align: center;
}
 
.top_right_view {
  border: 1px solid black;
  width: 4%;
  color: #B89633;
  height: 200rpx;
  font-size: 28rpx;
  margin-top: -300rpx;
  margin-left: 86%;
}
 
.center {
  width: 90%;
  margin-left: 5%;
  padding: 3% 0;
  line-height: 1.8em;
  font-size: 26rpx;
  border-bottom: 1px solid #989898;
}
 
.centerview {
  display: flex;
  justify-content: space-between;
}
 
.buttom {
  width: 90%;
  margin-left: 5%;
  font-size: 26rpx;
  color: #989898;
}
 
.finished{
  width: 90%;
  margin-left: 5%;
  height: 85rpx;
  border-radius: 50rpx;
  background-color: #999999;
  position: absolute;
  bottom: 0;
  margin-bottom: 50rpx;
  color: white;
  text-align: center;
  line-height: 85rpx;
}
 
.countdownBox {
  width: 90%;
  margin-left: 5%;
  height: 85rpx;
  margin-bottom: 50rpx;
  background-color: #de2c3a;
  border-radius: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 30rpx;
  position: absolute;
  bottom: 0;
}
.countdownBox .item{
  height: 50rpx;
  color: #000;
  box-sizing: border-box;
  padding: 0rpx 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35rpx;
  font-weight: 480;
  margin: 0rpx 10rpx;
}
 
.nostart{
  text-align: center;
  margin-top: 200rpx;
}

var http = require('../../../utils/request.js');
const app = getApp();
Page({
  data: {
    isnull: false,
    timeout: false,
    isClicked: true,
    isstart: false,
    countdown: {
      hour: '00',
      minute: '00',
      second: '00',
      millisecond:'00'
    },
    list: []
  },
  //开始倒计时
  startCountdown: function (millisecond) {
    var that = this;
    that.clearinterval();
    app.globalData.seckillinterval = null;
    if (millisecond > 0) {
      app.globalData.seckillinterval = setInterval(function () {
        millisecond -= 10;
        if (millisecond <= 0) {
          if (app.globalData.seckillinterval != null) {
            clearInterval(app.globalData.seckillinterval);
            app.globalData.seckillinterval = null;
          }
          that.setData({
            countdown: {
              hour: '00',
              minute: '00',
              second: '00',
              millisecond:'00'
            },
            timeout: true
          });
          that.onShow();
        }
        that.transformRemainTime(millisecond);
      }, 10);
    } else {
      that.setData({
        timeout: true
      });
    }
  },
  // 剩余时间(毫秒)处理转换时间
  transformRemainTime: function (millisecond) {
    var that = this;
    var countdownObj = that.data.countdown;
    var seconds = Math.floor(millisecond / 1000)
    // 小时
    countdownObj.hour = that.formatTime(Math.floor(seconds / 3600 % 24));
    // 分钟
    countdownObj.minute = that.formatTime(Math.floor(seconds / 60 % 60));
    // 秒
    countdownObj.second = that.formatTime(Math.floor(seconds % 60));
    // 毫秒
    countdownObj.millisecond = that.formatTime(Math.floor((millisecond % 1000) / 10));
    that.setData({
      countdown: countdownObj
    });
  },
  //格式化时间为2位
  formatTime: function (time) {
    if (time < 10)
      return '0' + time;
    return time;
  },
  //点击“立即抢”
  nowbuy: function (e) {
    var that = this;
    //状态是“秒杀中”才执行方法
    if (that.data.list.State == 2 && that.data.isClicked) {
      that.setData({
        isClicked: false
      })
      http.postRequest("Skill/Buy", {}, function (res) {
        if (res.IsOk) {
          wx.showModal({
            title: '提示',
            content: res.Data.ErrMsg,
            showCancel: false,
            success(res) {
              if (app.globalData.seckillinterval) {
                clearInterval(app.globalData.seckillinterval);
                app.globalData.seckillinterval = null
              }
              that.onShow();
            }
          })
        }
      }, function (res) {})
      //防止重复提交
      setTimeout(function () {
        that.setData({
          isClicked: true
        })
      }, 1000)
    }
  },
  onShow: function () {
    var that = this;
    //获取优惠券信息
    http.postRequest("Skill/Index", {}, function (res) {
      if (res.IsOk) {
        if (res.Data) {
          that.setData({
            list: res.Data,
            isstart: true
          })
          that.startCountdown(res.Data.StartTimeLeft)
        } else {
          that.setData({
            isstart: false
          })
        }
      }
    }, function (res) {})
  },
  //清除计时器
  clearinterval: function () {
    if (app.globalData.seckillinterval) {
      clearInterval(app.globalData.seckillinterval);
      app.globalData.seckillinterval = null;
    }
  },
  onHide: function () {
    this.clearinterval();
  },
  onUnload: function () {
    this.clearinterval();
  }
})