uni-app活动倒计时功能

效果图

实现原理：后端会给一个截止时间，前端获取当前时间，都转成时间戳，然后相减获得相差时间戳，然后转成天、小时、分钟、秒，通过定时器让他动起来就OK了。（需要注意的点是，当倒计时到达0的时候需要清除定时器。）

上代码

<template>
  <!-- 许愿 -->
  <view :style="{ paddingTop: statusBarHeight + 'px' }"> 
    <!--#ifdef MP-WEIXIN-->
    <ym-navigation-bar background="#9DB5C2" back title="许愿池" fixed color="#ffffff">
    </ym-navigation-bar>
    <!--#endif-->
    <view class="wishing-content">
      <view class="size_20 top_title">
        冬日温暖礼盒
      </view>
      <view class="size_14 countDown">
        距活动结束
        <text>{{wishingDays}}</text>
        天
        <text>{{wishingHours.toString().substr(0,1)}}</text>
        <text>{{wishingHours.toString().substr(-1)}}</text>
        小时
        <text>{{wishingMinutes.toString().substr(0,1)}}</text>
        <text>{{wishingMinutes.toString().substr(-1)}}</text>
        分
        <text>{{wishingSeconds.toString().substr(0,1)}}</text>
        <text>{{wishingSeconds.toString().substr(-1)}}</text>
        秒
      </view>
      <view class="size_14 list">
        中奖名单>
      </view>
      <view class="size_20 center_title">
        探秘滑雪场的浪漫
      </view>
      <view class="img_content">
        <img class="more-img" :src="dbDownArrowUrl"/>
      </view>
      <view class="size_14">
        滑雪系列羽绒服+太舞滑雪双人行
      </view>
      <view class="btn_box">
        <btn class="btn" @click.native="clickA">我的许愿码</btn>
        <btn class="btn">我的许愿礼</btn>
        <btn class="btn">获取心愿值</btn>
      </view>
      <view class="size_16">
        了解会员节更多惊喜
      </view>
      <view class="rule">
        活动规则
      </view>
    </view>
  </view>
</template>

<script>
import YmNavigationBar from "../../components/navigation-bar/ym-navigation-bar"
import store from "@/store/index.js"
import crmApiService from '@/api/crmApi'
import Btn from "../../components/wishing-btn/btn.vue"

let toast= msg=>{
  uni.showToast({
    title: msg,
    icon:'none'
  });
}
export default {
  components: {
    YmNavigationBar,
    Btn
  },
  data() {
    return {
      wishingDays:'',
      wishingHours:'',
      wishingMinutes:'',
      wishingSeconds:'',
    }
  },
  computed: {
    statusBarHeight() {
      return store.getters.statusBarHeight + 48
    },
    dbDownArrowUrl () {
      return this.$config.ossUrl + 'discount_coupon.png'
    }
  },
  onShow() {
    let time = new Date('2022-08-27').getTime()
    this.wishingCountDown(time)
  },
  methods: {
    clickA () {
      console.log('我的许愿码')
    },
  wishingCountDown(e){
    return new Promise((rel,rej)=>{
      let date = new Date();
      let time = date.getTime();//当前时间
      if(e - time > 0){
        var lag =  (e- time);
        var days = Math.floor(lag / (1000 * 60 * 60 * 24));
        var hours = Math.floor((lag % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((lag % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((lag % (1000 * 60)) / 1000);
      
        //只有一位数就在前面加0并转为字符串
        function part(val){
          var lenval = (val + '').length;
          if(lenval >= 2){
            return val;
          }else{
            return '0' + val;
          }
        }
        this.wishingDays = days
        var wishingHours = hours; //将天数转成时并加上原有的时
        this.wishingHours = part(wishingHours); //时
        this.wishingMinutes = part(minutes); //分
        this.wishingSeconds = part(seconds); //秒
                
        var setTime = setInterval(() =>{
          var h = parseInt(this.wishingHours);
          var m = parseInt(this.wishingMinutes);
          var s = parseInt(this.wishingSeconds);
          
          if( h > 0 || m > 0 || s > 0){
            if(s > 0){
              s -=1;
              this.wishingSeconds = part(s);
            }else{
              //分减一，秒加59
              if(m > 0){
                m -=1;
                this.wishingMinutes = part(m);
                this.wishingSeconds = 59;
              }else{
                //时减一，分加59，秒加59
                if(h > 0){
                  h -=1;
                  this.wishingHours = part(h);
                  this.wishingMinutes = 59;
                  this.wishingSeconds = 59;
                }
              }
            }
          }else{
            rel();//活动结束回调
            console.log('倒计时结束！')
            clearInterval(setTime);
          }
        },1000)
      }
    })
  }
  }
}
</script>
<style scoped lang="scss">
.wishing-content{
  position:fixed;
  height: 100%;
  width: 100%;
  padding: 0 50upx;
  text-align: center;
  background-color:cadetblue;
  font-family: PingFangSC-Medium, PingFang SC;
  .size_20{
    font-size: 40upx;
    color: #fff;
    font-weight: 500;
    line-height: 56upx;
  }
  .size_14{
    font-size: 28upx;
    color: #fff;
    line-height: 40upx;
  }
  .size_16{
    font-size: 32upx;
    color: #fff;
    line-height: 44upx;
    text-decoration:underline;
  }
  .top_title{
    margin-top: 300upx;
    margin-bottom: 20upx;
  }
  .countDown{
    margin-bottom: 18upx;
    width: 100%;
    height: 80upx;
    border-radius: 40upx;
    text-align: center;
    line-height: 80upx;
    background-color: rgba($color: #1D459A, $alpha: 0.1);
    text{
      display: inline-block;
      vertical-align: middle;
      height: 40upx;
      padding: 0 8upx 0 8upx;
      line-height: 40upx;
      border-radius: 6upx;
      background-color: #fff;
      color: #1559AA;
      margin-left: 7upx;
      margin-right: 7upx;
    }
  }
  .list{
    margin-bottom: 40upx;
  }
  .center_title{
    margin-bottom: 20upx;
  }
  .img_content{
    width: 100%;
    height: 376upx;
    margin-bottom: 20upx;
    img{
      width: 100%;
      height: 100%;
      border-radius: 24upx;
    }
  }
  .btn_box{
    display: flex;
    justify-content:space-around;
    font-size: 30upx;
    color: #fff;
    font-weight: 400;
    margin-top: 70upx;
    margin-bottom: 56upx;
    .btn{
      width: 200upx;
      height: 80upx;
      line-height: 80upx;
    }
  }
  .rule{
    width: 58upx;
    height: 146upx;
    border-radius: 12upx 0 0 12upx;
    background-color: #97A8CB;
    color: #fff;
    font-size: 28upx;
    font-weight: 400;
    text-align: center;
    writing-mode: vertical-lr;
    padding-left: 11upx;
    position: absolute;
    top: 160upx;
    right: 0;
  }
}
</style>