pk-mall/src/components/Index/CountDate.vue

<template>
  <div class="count-content">
    <div class="countDown" v-if="dateColor == 0">
      <div>{{ dayString }}</div>
      <p>天</p>
      <div>{{ hourString1 }}</div>
      <p>:</p>
      <div>{{ minuteString }}</div>
      <p>:</p>
      <div>{{ secondString }}</div>
    </div>
    <div class="countDowns" v-if="dateColor == 1">
      <div>距离秒杀结束：</div>
      <div>{{ dayString }}</div>
      <p>天</p>
      <div>{{ hourString1 }}</div>
      <p>:</p>
      <div>{{ minuteString }}</div>
      <p>:</p>
      <div>{{ secondString }}</div>
    </div>
    <div class="countDown-s" v-if="dateColor == 2">
      <p style="font-size: 20px">限时秒杀</p>
      <p>距离结束</p>
      <div>{{ dayString }}</div>
      <p>天</p>
      <div>{{ hourString1 }}</div>
      <p>:</p>
      <div>{{ minuteString }}</div>
      <p>:</p>
      <div>{{ secondString }}</div>
      <div class="rights" @click="toMore">
        <span>更多抢购</span>
        <span class="right-icon">
          <img
            src="http://screen.zhousi.hdlkeji.com/aksdbn/img/goods/goods-icon5.png"
          />
        </span>
      </div>
    </div>
    <!--    <span>{{ hourString }}</span>小时<span>{{ minuteString }}</span>分钟<span>{{ secondString }}</span>秒-->
  </div>
</template>

<script>
export default {
  props: {
    remainTime: {
      // 倒计时间总秒数
      type: Number,
      default: 0,
    },
    dateColor: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      day: "",
      hour: "",
      minute: "",
      second: "",
      promiseTimer: "",
      time: "",
    };
  },
  computed: {
    hourString() {
      let num;
      if (this.day > 1) {
        num = this.day * 24 + this.hour;
      } else if (this.day == "") {
        num = this.hour;
      }
      return this.formatNum(num);
    },
    hourString1() {
      return this.formatNum(this.hour);
    },
    minuteString() {
      return this.formatNum(this.minute);
    },
    secondString() {
      return this.formatNum(this.second);
    },
    dayString() {
      return this.formatNum(this.day);
    },
  },
  mounted() {
    if (this.remainTime > 0) {
      this.day = Math.floor(this.remainTime / 3600 / 24);
      this.hour = Math.floor((this.remainTime / 3600) % 24);
      this.minute = Math.floor((this.remainTime / 60) % 60);
      this.second = Math.floor(this.remainTime % 60);
      this.countDowm();
    }
  },
  // watch:{
  //   remainTime(oldValue,newValue){
  //    if(oldValue){
  //      this.remainTime=1
  //    }
  //   },
  //   deep: true,
  //   immediate: true,
  // },
  methods: {
    countDowm() {
      let self = this;
      clearInterval(this.promiseTimer);
      this.promiseTimer = setInterval(function () {
        //  console.log("打印---day---",self.day)
        if (self.hour === 0) {
          if (self.minute !== 0 && self.second === 0) {
            self.second = 59;
            self.minute -= 1;
          } else if (self.minute === 0 && self.second === 0) {
            self.second = 0;
            self.$emit("countDowmEnd", true);
            clearInterval(self.promiseTimer);
          } else {
            self.second -= 1;
          }
        } else {
          if (self.minute !== 0 && self.second === 0) {
            self.second = 59;
            self.minute -= 1;
          } else if (self.minute === 0 && self.second === 0) {
            self.hour -= 1;
            self.minute = 59;
            self.second = 59;
          } else {
            self.second -= 1;
          }
        }
      }, 1000);
    },
    formatNum(num) {
      return num < 10 ? "0" + num : "" + num;
    },
    toMore() {
      this.$router.push({
        name: "seckillRank",
      });
    },
  },
};
</script>
<style scoped lang="less">
.countDowns {
  display: flex;
}
.countDown-s {
  display: flex;
  position: relative;
  z-index: 1;
  padding: 10px 10px 0 10px;
  justify-content: space-between;
  .rights {
    background: none !important;
    width: 240px;
    .right-icon {
      position: absolute;
      right: 0;
      top: 10px;
      img {
        width: 16px;
        height: 16px;
      }
    }
    span {
      display: block;
    }
  }
  p {
    color: #fff;
    margin: 0 10px;
    font-size: 18px;
    line-height: 45px;
  }
  div {
    color: #fff;
    font-size: 22px;
    //width: 38px;
    padding: 0 3px;
    height: 42px;
    background: #000000;
    text-align: center;
    line-height: 42px;
  }
}
.countDown {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
  p {
    color: #fff;
    margin: 10px;
  }
  div {
    color: #fff;
    font-size: 22px;
    width: 38px;
    height: 42px;
    background: #000000;
    text-align: center;
    line-height: 42px;
  }
}
</style>