商城倒计时组件封装，支持小程序、h5、ios和安卓app

欢迎加我技术交流QQ群 ：811956471

前言：最近开发商城需要一个倒计时组件,就自己封装了一个，方便自己以后使用。

事件以及属性介绍：

事件： @time-end：倒计时时间结束触发
属性：endTime：剩余的时间：格式为时间戳或 yyyy-mm-dd hh:mm:ss
属性：tempDownBg：// 倒计时容器背景颜色：值有：temp_down_blackBg（默认）、temp_down_redBg
属性：isShowDay：布尔值,//是否显示天:默认false不显示天，把天全部转换成小时，即：时：分：秒
属性：endTimeType：布尔值,//剩余的时间格式：默认为时间戳(单位秒)、false为：yyyy-mm-dd hh:mm:ss
组件模板源码：

<template>
  <view class="page">
    <!-- 基础用法： -->
   <!-- <view class="time">{{timeArry.h:timeArry.m:timeArry.s}}</view> -->
    <!-- 带入样式： -->
    <view class="temp_down_time_bx">
      <view :class="['temp_down_time_item',tempDownBg]" v-if="isShowDay">{{timeArry.d}}</view>
      <view class="temp_down_time_dot"  v-if="isShowDay">天</view>
      <view :class="['temp_down_time_item',tempDownBg]">{{timeArry.h}}</view>
      <view class="temp_down_time_dot ">:</view>
      <view :class="['temp_down_time_item',tempDownBg]">{{timeArry.m}}</view>
      <view class="temp_down_time_dot">:</view>
      <view :class="['temp_down_time_item',tempDownBg]">{{timeArry.s}}</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timeArry:{},
        flag: false
      }
    },
    props: {
      // 剩余的时间：格式为时间戳或 yyyy-mm-dd hh:mm:ss,如果是时间戳会转换成yyyy-mm-dd hh:mm:ss
      endTime: {
        type: String
      },
      // 剩余的时间格式：默认为时间戳(单位秒)、false为：yyyy-mm-dd hh:mm:ss
      endTimeType: {
       type: Boolean,
       default:true
      },
      // 倒计时容器背景颜色
      tempDownBg:{
         type: String,
          default:"temp_down_blackBg"
      },
      //是否显示天:默认false不显示天，把天全部转换成小时，即：时：分：秒
      isShowDay:{
         type: Boolean,
         default:false
      },
      
    },
    mounted() {
      let time = setInterval(() => {
        if (this.flag == true) {
          clearInterval(time)
        }
        this.timeDown()
      }, 1000)
    },

    methods: {
      timeDown() {
        //如果传入的是一个时间戳，调用this.formatDate(this.endTime)次方法转成：2019-09-22 20:38:14格式
        let t=this.endTime;
        if(this.endTimeType){
             t = this.formatDate(this.endTime);
        }
        // console.log("方法转成:",t)
        const endTime = new Date(t);
        const nowTime = new Date();
        let h="";
        let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000)
        console.log("剩余时间leftTime_单位秒:",leftTime)
        let d = parseInt(leftTime / (24 * 60 * 60))
            h = this.formate(parseInt(leftTime / (60 * 60) % 24))
        let h_day = this.formate(parseInt(leftTime / (60 * 60)))
        let m = this.formate(parseInt(leftTime / 60 % 60))
        let s = this.formate(parseInt(leftTime % 60))
        
        if(!this.isShowDay){
          h=h_day
        }
        if (leftTime < 0) {
          this.flag = true
          this.$emit('time-end')
         this.timeArry={
           d:0,
           h:0,
           m:0,
           s:0
         }
        } else {
          //如果不显示天会把天转换成总共小时数量，时间位置取 h_day变量
          // this.time = `${h_day}:${m}:${s}`
          // this.time_day = `${d}天${h}小时${m}分${s}秒`
          this.timeArry={
            d:d,
            h:h,
            m:m,
            s:s
          }
        }
      },
      formate(time) {
        if (time >= 10) {
          return time
        } else {
          return `0${time}`
        }
      },
      //如果传入的是一个时间戳，调用次方法转成：2019-09-22 20:38:14格式
      formatDate: function(value) {
        if (value != null && value != '') {
          value = value * 1;
          let date = new Date(value * 1000);
          let y = date.getFullYear();
          let MM = date.getMonth() + 1;
          MM = MM < 10 ? '0' + MM : MM;
          let d = date.getDate();
          d = d < 10 ? '0' + d : d;
          let h = date.getHours();
          h = h < 10 ? '0' + h : h;
          let m = date.getMinutes();
          m = m < 10 ? '0' + m : m;
          let s = date.getSeconds();
          s = s < 10 ? '0' + s : s;
          return y + '/' + MM + '/' + d + ' ' + h + ':' + m + ':' + s;
          // return y + '-' + MM + '-' + d;
        }
      },
    }
  }
</script>
<style scoped>
  .temp_down_time_bx {
    display: flex;
    align-items: center;
    font-family: PingFangSC-Medium, PingFangSC;
    text-align: center;
  }

  .temp_down_time_item {
    width: 26rpx;
    height: 23rpx;
    border-radius: 4rpx;
    font-size: 20rpx;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 23rpx;
  }
  /* 黑色背景 */
  .temp_down_blackBg{
     background: #666666;
  }
  
  /* 黄红渐变色背景 */
  .temp_down_redBg{
    background:linear-gradient(135deg,rgba(242,131,9,1) 0%,rgba(230,36,15,1) 100%);
  }

  .temp_down_time_dot {
      font-size: 20rpx;
  }
</style>

在页面中使用;

<template>
  <view class="page">
  <my-down-time @time-end="endTimeFn" :endTime="end_time" tempDownBg="temp_down_redBg" isShowDay="true"></my-down-time>
   <my-down-time @time-end="endTimeFn" :endTime="end_time" ></my-down-time>
  </view>
</template>

<script>
  import myDownTime from  '@/components/myDownTime.vue'
  export default {
    components: {
      myDownTime
    },
    data() {
      return {
        pageTitle:"倒计时组件",
        end_time:"1569740940"
      }
    },
    onLoad() {
      
    },
    onShow() {
      
    },
    onReady() {
     
    },
    methods: {
      //时间结束事件
      endTimeFn(){
        console.log("时间结束事件触发了")
      }
    }
  }
</script>

<style scoped>
  
</style>