倒计时自定义组件

<template>
    <view>
        <view class="countDownBox">
            <view><span class="timeSpan" v-if="d!=0">{{d}}天</span><span class="timeSpan">{{h}}</span>:<span class="timeSpan">{{m}}</span>:<span
                 class="timeSpan">{{s}}</span></view>
        </view>
    </view>
</template>

<script>
    export default {
        //结束时间 time: '12:30', //开始时间 notTimes: '10:48:07'
        name: "cutdowntime",
        props: {
            time: {
                type: String,
                default: ''
            },
            notTimes: {
                type: String,
                default: ''
            }

        },
        data() {
            return {
                d: '00',
                h: '00',
                m: '00',
                s: '00',
                difference: 0,
                timess: null,
                flag: false
            }
        },
        watch: {
            time (val) {
              this.startTime()
              this.flag = false
              this.timeDown()
            }
          },
          created () {
              console.log("55");
            this.startTime()
            this.timeDown()
          },
          methods: {
            // 初始化时间
            startTime () {
              let nowTime = new Date()
              let Y = nowTime.getFullYear()
              let M = nowTime.getMonth() + 1
              let D = nowTime.getDate()
           
              // let time = Y + '/' + M + '/' + D + ' ' + this.time + ':00'//结束时间
              let nowTime2 = Y + '/' + M + '/' + D + ' ' + this.notTimes.split('.')[0]
              console.log(nowTime2);
        console.log(this.time);
              let beginTime = new Date(nowTime2)
              let endTime = new Date(this.time)
              this.difference = parseInt((endTime.getTime() - beginTime.getTime()) / 1000)
              console.log(this.difference);
              if (this.difference<0) {
                  
                this.$emit('timeEnd')
              }
            },
            // 倒计时
            timeDown () {
              // 切换清除之前的定时器
              clearInterval(this.timess)
              this.timess = setInterval(() => {
                if (this.flag === true) {
                  clearInterval(this.timess)
                  this.$emit('timeEnd')
                }
                this.difference = this.difference - 1
                if (this.difference > 0) {
                  this.d = parseInt(this.difference / (60 * 60 * 24))
                  this.h = this.format(parseInt(this.difference / (60 * 60) % 24))
                  this.m = this.format(parseInt((this.difference / 60) % 60))
                  this.s = this.format(parseInt(this.difference % 60))
                } else {
                  this.d = '00'
                  this.h = '00'
                  this.m = '00'
                  this.s = '00'
                  this.flag = true;
                  this.$emit('timeEnd')
                }
              }, 1000)
            },
            // 时间格式
            format (time) {
              if (time >= 10) {
                return time
              } else {
                return `0${time}`
              }
            }
          }
    }
</script>

<style scoped>
.countDownBox{
  font-size: 0.28rem;
  padding-right: 0.1rem;
  }
  .homeTime{
    color: #EA564A;
    float: left;
  }
  .DetailTime{
    text-align: center;
    color: #EA564A;
    
  }
  .timeSpan{
       color: rgba(234,86,74,1);
       width: auto;
       height: 20px;
       font-size: 13px;
     
       border-radius: 6px;
       display: inline-block;
       line-height: 20px;
  }
</style>

 

父页面

import cutdowntimes from "../../../components/cutdowntime/cutdowntime.vue";

components: {
            cutdowntimes
        },

    <view class="dssa">
                            <cutdowntimes :time="SellTime" :notTimes="nowTime" @timeEnd="callAction()"></cutdowntimes>
                        </view>