vue 实现小程序或商品秒杀倒计时

<template> <div>  <button @click="handleClick" :disabled="disabled">   {{btnText}}  </button>  <span>{{tip}}</span> </div></template><script> import moment from 'moment' export default {  name: "Spike",  props: {   startTime: {    required: true,    validator: (val) => {     return moment.isMoment(val)    }   },   endTime: {    required: true,    validator: (val) => {     return moment.isMoment(val)    }   }  },  data() {   return {    start: false,    end: false,    done: false,    tip: '',    timeGap: 0,    btnText:""   }  },   computed: {   disabled() {    //当三个异号的时候disable返回真，不可点击，    // 初始化通过this.updateState确定disable的状态    return !(this.start && !this.end && !this.done);   }  },  async created() {   const serverTime=await this.getServerTime();   this.timeGap=Date.now()-serverTime;//当前时间和服务器时间差   this.updateState();   this.timeInterval=setInterval(()=>{    this.updateState()   },1000)  },  updated(){   if(this.end||this.done){    clearInterval(this.timeInterval)   }  },  methods: {   handleClick() {    alert("提交成功");    this.done=true;    this.btnText="已参加过活动"   },   getServerTime() {    //模拟服务器时间    return new Promise((resolve, reject) => {     setTimeout(() => {      //当前时间慢10秒就是服务器时间      resolve(new Date(Date.now() -10 * 1000).getTime())//跟本地时间差     }, 0)    })   },   updateState() {    const now = moment(new Date(Date.now() - this.timeGap));//当前服务器时间    const diffStart=this.startTime.diff(now);//开始时间和服务器时间之差    const diffEnd=this.endTime.diff(now);//结束时间和服务器时间之差    if(diffStart<0){     this.start=true;     this.tip="秒杀已开始";     this.btnText="参加"    }else{     this.tip=`距离秒杀开始还剩${Math.ceil(diffStart/1000)}秒`;     this.btnText="活动未开始";    }    if(diffEnd<=0){     this.end=true;     if( !this.btnText==="已参加过活动"||this.btnText==="参加"){      this.tip="秒杀已结束";      this.btnText="活动已结束";     }    }   }  },  beforeDestroy() {   clearInterval(this.timeInterval)  } }</script><style scoped> button[disabled]{  cursor: not-allowed; }</style>

<template> <div>  <h1 style="color: red">设计一个秒杀倒计时的组件</h1>  <Spike :startTime="startTime" :endTime="endTime"></Spike> </div></template><script> import Spike from './Spike' import moment from 'moment' export default {  name: "index",  components:{   Spike  },  data(){   return{    endTime:moment(new Date(Date.now()+10*1000)),    startTime:moment(new Date(Date.now()))   }  } }</script><style scoped></style>

let goodsList = [{ actEndTime: '2018-06-24 10:00:43'}]let endTimeList = [];// 将活动的结束时间参数提成一个单独的数组，方便操作 this.data.mydata.rush.forEach(o => {   endTimeList.push(o.actEndTime)}) this.setData({   actEndTimeList: endTimeList}); // 执行倒计时函数 this.countDown();timeFormat(param) { //小于10的格式化函数  return param < 10 ? '0' + param : param; }, countDown(it) { //倒计时函数  // 获取当前时间，同时得到活动结束时间数组  let newTime = new Date().getTime();  let endTimeList = this.data.actEndTimeList;  let countDownArr = [];  // 对结束时间进行处理渲染到页面  endTimeList.forEach(o => {   let endTime = new Date(o).getTime();   let obj = null;   // 如果活动未结束，对时间进行处理   if (endTime - newTime > 0) {    let time = (endTime - newTime) / 1000;    // 获取天、时、分、秒    let day = 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: this.timeFormat(day),     hou: this.timeFormat(hou),     min: this.timeFormat(min),     sec: this.timeFormat(sec)    }   } else { //活动已结束，全部设置为'00'    obj = {     day: '00',     hou: '00',     min: '00',     sec: '00'    }   }   countDownArr.push(obj);  })  // 渲染，然后每隔一秒执行一次倒计时函数  this.setData({   countDownList: countDownArr  })  setTimeout(this.countDown, 1000); },<view class='item-money-name'>       <view class='item-money'>￥{{item.money}}</view>       <view class="tui-countdown-content {{(countDownList[index].day && countDownList[index].hou && countDownList[index].min && countDownList[index].sec) == 0?'tibg':''}}">        <text>剩余</text>        <text class='tui-conutdown-box'>{{countDownList[index].day}}</text>        <text>天</text>        <text class='tui-conutdown-box'>{{countDownList[index].hou}}:</text>        <text class='tui-conutdown-box'>{{countDownList[index].min}}:</text>        <text class='tui-conutdown-box'>{{countDownList[index].sec}}</text>       </view>      </view>