Vue中倒计时组件

<style lang="less">
</style>
<template>
  <p v-html="time"></p>
</template>
<script>
const DEFAULT_DATE_FORMAT = d3.timeFormat("%Y-%m-%d %H:%M:%S");
const DEFAULT_DATE_PARSER = d3.timeParse("%Y-%m-%d %H:%M:%S");
export default {
  props: {
    oldval: {
      type: String,
    },
  },
  data() {
    return {
      date: new Date(),
      end:'',
    };
  },
  mounted() {
    setInterval(() => {
      this.date = new Date();
    }, 1000);
  },
  computed: {
    time() {
      let ss = "";
      let now = this.date.getTime();
      let end = DEFAULT_DATE_PARSER(this.oldval).getTime()
      let obj = null;
      let time = (end - now) / 1000;
      let dayn = parseInt(time / (60 * 60 * 24));
      let hou = parseInt((time % (60 * 60 * 24)) / 3600);
      let min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
      let sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
      obj = {
        day: dayn,
        hou: this.timeFormat(hou),
        min: this.timeFormat(min),
        sec: this.timeFormat(sec),
      };
      if (dayn < 1 && hou < 1) {
        ss = `<span>${obj.min}</span>分钟`;
        return ss;
      }else if (dayn < 1 && hou > 1 && min > 1) {
        ss = `<span>${obj.hou}</span>小时<span>${obj.min}</span>分钟`;
        return ss;
      } else if (dayn > 1 && hou < 1 && min > 1) {
        ss = `<span>${obj.day}</span>天<span>${obj.min}</span>分钟`;
        return ss;
      } else if(dayn > 1 && hou < 1 && min < 1) {
        ss = `<span>${obj.day}</span>天`;
        return ss;
      } else if(dayn < 1 && hou > 1 && min < 1) {
        ss = `<span>${obj.hou}</span>小时`;
        return ss;
      } else if(dayn > 1 && hou > 1 && min < 1) {
        ss = `<span>${obj.day}</span>天<span>${obj.hou}</span>小时`;
        return ss;
      } else {
        ss = `<span>${obj.day}</span>天<span>${obj.hou}</span>小时<span>${obj.min}</span>分钟`;
        return ss;
      }
    },
  },
  methods: {
    timeFormat(param) {
      return param < 10 ? "0" + param : param;
    },
  },
};
</script>

<template>
	<span></span>
</template>
<script>
export default {
  props: {
    // 传进来的数据
    item: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
    	'str': "",
			'memberInfo': JSON.parse(localStorage.getItem('memberInfo')) || {},
			'timer':null,
			date: new Date(),
    };
  },
  computed:{
	  time(){
		  /* 
				now  当前时间戳
				propsTime 传入的截至时间 转化成毫秒
				time 两者的时间差 截至时间-当前时间（propsTime-now）
				hour,minute,second 时分秒
				str 显示的字符串
				oldTime 传入的截至时间
				item 传入的对象
				recordDate 再次报价时间戳（再次报价倒计时只在印厂视角展示）
				recordtime 再次报价时间差 当前时间-再次报价时间（now - recordtime）
			*/
			let now,propsTime,time,hour,minute,second,str,oldTime,item,recordDate,recordtime;
			item = this.item;
			//再次报价时间戳
			recordDate = item&&item.recordDate;
			//当前时间戳
			oldTime = item&&item.respondDeadlineStr&&item.respondDeadlineStr.substring(0,10);
			// console.log(item.product,item.respondDeadlineStr);
			str='';
			now = this.date.getTime();//当前时间戳
			// 传入的时间戳
			propsTime = new Date((oldTime&&oldTime.replace(/-/g,'/')) + " 23:59:59").getTime();
			// 两者的时间差
			if(recordDate){
				time = 60*1000*60*item.recordHours-(now - recordDate);
			}else{
				time = propsTime - now;
			}
			// 转化为倒计时格式
			hour = Math.floor(time/(60*60*1000));//时
			minute = Math.floor(time/1000/60%60);//分
			second = Math.floor(time/1000%60);//秒
			if( hour ){ str += hour < 10 ? '0'+ hour+':' : hour +':' }else{ str += '00:' }
			if( hour || minute ){ str += minute < 10 ? '0'+ minute +':' : minute +':' }else{ str += '00:' }
			if( second ){ str += second < 10 ? '0'+ second : second }else{ str += '00' }
			// 如果 是 重新报价 
			// 需要截至时间小于48小时的时候 显示倒计时
			// 倒计时结束后的情况处理
			//	清除定时器、时间置为截至时间
			if( hour < 1 && minute < 1 && second < 0 ){
				return oldTime?oldTime:'-';
			}
			if( recordDate ){
				if(this.memberInfo.industry==1){
					if( hour < 48 ){ return str; }else{ return oldTime?oldTime:'-'; }
				}else{
					return oldTime?oldTime:'-';
				}
			}else{
				// 如果 不是 重新报价
				// 当截至时间小于24小时的时候 显示倒计时
				if( hour < 24 ){ return str; }else{ return oldTime?oldTime:'-'; }
			}
			
	  }
  },
  mounted() {
	  	setInterval(() => {
			this.date = new Date();
		}, 1000);
  },
};
</script>
<style lang='scss' scoped>
</style>