商城倒计时秒杀活动

提示：商城倒计时秒杀活动

---

前言

商城活动倒计时秒杀活动

---

一、倒计时秒杀(存在进页面延迟一秒情况，不合理)

<template>
  <div>{{ days }}天 {{ hours }}小时 {{ minutes }}分钟 {{ seconds }}秒</div>
</template>

<script>
export default {
  data() {
    return {
      countdown: null, // 倒计时的剩余时间，单位是毫秒
    };
  },
  computed: {
    // 计算出剩余的天数、小时数、分钟数和秒数
    days() {
      return Math.floor(this.countdown / (1000 * 60 * 60 * 24));
    },
    hours() {
      return Math.floor((this.countdown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    },
    minutes() {
      return Math.floor((this.countdown % (1000 * 60 * 60)) / (1000 * 60));
    },
    seconds() {
      return Math.floor((this.countdown % (1000 * 60)) / 1000);
    },
  },
  created() {
    // 设置秒杀活动的目标时间
    const targetTime = new Date('2023-05-01T00:00:00').getTime();
    //注意:苹果手机识别不了2023-05-01里面的'-',只能识别2023/5/1，只能识别'/',所以要让后端改成2023/5/1，或者直接返回时间戳
    // 每秒钟更新倒计时状态变量，时间戳是13位的
    const countdownInterval = setInterval(() => {
      const currentTime = new Date().getTime();
      this.countdown = targetTime - currentTime;

      if (this.countdown < 0) {
        clearInterval(countdownInterval);
        this.countdown = 0;
      }
    }, 1000);
  },
};
</script>

二、正确做法

代码如下（示例）：

<template>
  <div>{{ days }}天 {{ hours }}小时 {{ minutes }}分钟 {{ seconds }}秒</div>
</template>

<script>
export default {
  data() {
    return {
      countdown: null, // 倒计时的剩余时间，单位是毫秒
    };
  },
  mounted() {
  //最后在mounted钩子函数中调用详情接口
   this.checkTicket();	
 },
  methods: {
    //先定一个函数，存放时间转化
  target() {
      let that = this;
      setTimeout(() => {
        let targetTime = that.product.endDate;
        const currentTime = new Date().getTime();
        this.countdown = targetTime - currentTime;
        if (this.countdown < 0) {
          that.btnShow = true;
          console.log(that.btnShow, "633");
          clearInterval(that.countdownInterval);
          this.countdown = 0;
        } else {
          that.days =
            Math.floor(this.countdown / (1000 * 60 * 60 * 24)) < 10
              ? "0" + Math.floor(this.countdown / (1000 * 60 * 60 * 24))
              : Math.floor(this.countdown / (1000 * 60 * 60 * 24));
          that.sec =
            Math.floor((this.countdown % (1000 * 60)) / 1000) < 10
              ? "0" + Math.floor((this.countdown % (1000 * 60)) / 1000)
              : Math.floor((this.countdown % (1000 * 60)) / 1000);

          that.hou =
            Math.floor(
              (this.countdown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
            ) < 10
              ? "0" +
                Math.floor(
                  (this.countdown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
                )
              : Math.floor(
                  (this.countdown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
                );
          that.min =
            Math.floor((this.countdown % (1000 * 60 * 60)) / (1000 * 60)) < 10
              ? "0" +
                Math.floor((this.countdown % (1000 * 60 * 60)) / (1000 * 60))
              : Math.floor((this.countdown % (1000 * 60 * 60)) / (1000 * 60));
        }
      }, 100);
    },

   //然后在详情页接口中，调用
  checkTicket() {
      let that = this;
      var data = {
        productId: that.productId,
      };
      backdata();
      requestMethod("/product/sku/getCouponProductInfo", data).then(
        (res) => {
          if (res.code == "SUCCESS") {
            if (res.data.product) {
              that.endDate = res.data.product.endDate;
              //在这里面调用定时器，几乎是通用写法
              if (that.endDate) {
                that.target();
                that.countdownInterval && clearInterval(that.countdownInterval);
                that.countdownInterval = setInterval(that.target, 1000);
              }
//富文本中若存在图片，图片太大，可以这样处理；因为在css里面图片处理不掉，无法100%显示；
              that.description = res.data.product.description.replace(
                /\<img/gi,
                '<img style ="width:100%;height:auto"'
              );
            }
          } 
        }
      );
    },
  }
};
</script>